Google AMP - 概述

上一頁
下一頁

Google Accelerated Mobile Pages (Google-AMP) 是 Google 的一個新的開源專案，專門用於使用 amp html 構建輕量級網頁。該專案的主要目標是確保 amp 程式碼在所有可能的裝置（如智慧手機和平板電腦等）上都能正常工作並快速載入。

什麼是 AMP？

加速移動頁面 (AMP) 是 Google 的一個開源專案，專門設計用於使網頁對移動裝置友好，方法是使其內容渲染更快、更流暢並在任何瀏覽器中都具有響應性。

Google amp 的官方網站是 - https://www.ampproject.org/

What is AMP

為什麼選擇 AMP？

任何使用者都希望網站能夠非常快速地載入內容。但是，當頁面幾乎充斥著圖片、影片、動畫、社交小部件時，情況可能並非如此，這使得頁面變得非常沉重，從而增加了載入時間。這種情況可能導致長期使用者流失。

Google AMP 旨在解決此問題。AMP 有一種特殊的方式來處理圖片、iframes、javascripts、廣告、影片、動畫、css、字型載入等。AMP 頁面的內容快取在 Google 端，因此每次使用者點選搜尋結果時，內容都會從快取中提供。快取版本也會及時更新，以便使用者始終獲得最新的頁面。

為什麼要選擇 AMP？

本節介紹您為什麼必須為您的網站選擇 AMP -

在 Google 搜尋中優先顯示

如今，當您在 Google 上搜索某些內容時，您會發現頂部顯示了一個 Google 輪播圖，其中包含頁面，然後是作為搜尋響應的頁面列表。顯示的新聞輪播都是有效的 AMP 網站。這意味著 Google 優先考慮 amp 頁面並根據排名在新聞輪播中顯示它們。

以下是使用關鍵字“最新印度新聞”在 Google 中進行搜尋的示例 -

Prioritized Google Search

所有排名靠前的 AMP 頁面都如上圖所示在 Google 輪播圖的開頭顯示。

當用戶在 Google 搜尋中搜索某些內容時，Google AMP 頁面如下所示。請注意，AMP 頁面上有一個 Google AMP 徽標。

Google AMP page

更快的載入時間

當您的頁面轉換為 AMP 後，與非 amp 頁面相比，載入時間將大大改善。更快的載入時間也是 Google 搜尋中頁面排名的重要因素。

沒有彈出視窗

使用 Google AMP 提供愉悅的網頁瀏覽體驗，因為使用者不會看到使用 Google AMP 設計的頁面的任何不需要的彈出視窗。

生成流量

當頁面的載入速度快時，它會自動增加觀看者數量，從而增加頁面流量。

AMP 如何工作？

用於構建網站的最重要元件是 javascript、圖片、影片、字型、css 等。AMP 頁面設計透過以獨特的方式處理所有這些因素來完成。在本節中，讓我們簡要討論 AMP 為使頁面更快而執行的操作。

非同步 JavaScript

Javascript 在頁面上扮演著重要的角色，因為它有助於以動畫、DOM 更改等形式為頁面新增互動性。它還會降低頁面速度，並可能阻止其他內容在頁面上呈現。

AMP 如何處理 JavaScript？

AMP 非同步載入 JavaScript。在 AMP 頁面內嚴格不允許使用自定義 JavaScript。請注意，AMP 添加了許多元件，其中一些元件取代了現有的 html 標籤；例如 amp-img、amp-iframe、amp-video、amp-lightbox、amp-animations 等。

對於每個元件，都有一個要載入的 JavaScript 檔案，該檔案已將 async 屬性新增到 script 標籤中。頁面上僅允許與 amp-components 相關的 JavaScript 檔案，並且不允許 AMP 頁面內的任何其他 JavaScript 或第三方 javascript 檔案。由於 AMP 使用 Google AMP 快取，因此檔案會從快取中預載入，從而使其載入更快。

HTML 標籤的大小

必須為圖片、iframe、影片標籤提供大小，以便 amp 頁面可以在不載入資源的情況下找到頁面上的空間。要載入的資源由 amp 頁面優先順序排序。內容比要載入的資源具有更高的優先順序。

社交小部件/廣告

Amp 提供了名為 amp-facebook、amp-twitter、amp-ad、amp-sticky 的特殊元件來處理要在頁面上顯示的社交小部件。AMP-ad 元件用於在頁面上投放廣告。AMP 在處理元件方面非常小心，並根據需求優先載入內容。

CSS

AMP 頁面不允許使用外部 CSS。任何自定義 CSS 都可以在使用 amp-custom 屬性的 style 標籤內新增。內聯 CSS 也允許。AMP 以所有可能的方式減少 http 請求。

字型

AMP 頁面允許使用字型，並且字型載入的優先順序由 AMP 決定。

動畫

AMP 支援 amp-animation 元件並允許現代瀏覽器支援的過渡。

考慮到上面列出的所有要點，AMP 對為要提供的字型、圖片、iframes、廣告等發出的 HTTP 請求非常小心。頁面摺疊上方的資源首先呈現，然後優先考慮頁面摺疊下方的資源。

其他要點

Google AMP 快取是另一個重要的因素，它有助於更快地呈現內容，因為內容是從快取中獲取的。

釋出者必須維護兩個站點，即 amp 和非 amp 頁面。例如，假設該站點的地址為 - https://www.mypage.com。然後，要在桌面裝置上提供的非 amp 頁面的內部頁面將是https://www.mypage.com/news。對於裝置或 AMP，它將是https://www.mypage/com/news/amp/

Google 如何識別 AMP 和非 AMP 頁面？

現在，讓我們瞭解 Google 如何識別 AMP 和非 AMP 頁面。

  • 當 Google 搜尋抓取頁面時，如果它碰巧在 html 或 <html amp> 或 <html ⚡> 中獲取 amp，它就知道這是一個 AMP 頁面。

  • 此外，如果 Google 遇到非 amp 頁面，首先要了解 amp 頁面，則必須在 amp 和非 amp 頁面的 html 頁面的 head 部分新增以下 link 標籤。

非 amp 頁面的頁面 URL

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

這裡為非 amp 頁面指定了 rel = ”amphtml” 以指向 amp 版本，以便 Google 根據平臺顯示正確的版本。

amp 頁面的頁面 URL

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">

這裡在 amp 頁面中指定了 rel = ”canonical” 以指向 html 的標準版本，以便 Google 根據平臺顯示正確的版本。

如果您的網站只有一個 amp 頁面，您仍然不應忘記新增 rel = ”canonical”，它將指向自身 -

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

下圖顯示了指向 amp 頁面的 rel=”amphtml” 和指向標準 html 頁面的 rel = ”canonical” 的引用。

Reference HTML Page

Google AMP 的功能

在本節中，讓我們討論 Google AMP 提供的重要功能 -

Amp 快取

Google Amp 快取是新增到 amp 的核心功能之一。它提供了一個基於代理的內容交付網路來提供純 amp 頁面。Amp 快取預設提供給所有有效的 amp 頁面。它有助於與非 amp 頁面相比更快地呈現頁面。目前有 2 個 amp 快取提供商 Google AMP 快取和 Cloudflare AMP 快取。當用戶點選並重定向到 amp 頁面時，內容將從 Google 快取中提供。

Amp 元件

Amp 有一長串為各種目的而設計的元件。其中一些列在下面 -

  • amp-img - 用於在 amp 頁面上顯示圖片。

  • amp-iframe - 用於顯示 iframe，其中包含要顯示在頁面上的外部內容。請注意，使用的 iframe 是沙盒化的，這意味著它需要許可權才能在 amp 頁面上顯示資料。因此，必須為沙盒屬性指定跨源詳細資訊。

  • amp-video - 用於在頁面上顯示影片。

  • amp-audio - 用於在頁面上顯示音訊。

  • amp-datepicker - 用於在頁面上顯示日期小部件。您不必使用任何第三方日期選擇器，因為 amp 中直接提供了相同的日期選擇器。

  • amp-story - 用於在頁面上顯示您的故事的媒介。

  • amp-selector - 是一個 amp 元件，它顯示選項選單，使用者可以在選項之間進行選擇。顯示的選項可以是文字、圖片或任何其他 amp 元件。

  • amp-list - 是一個 amp 元件，它呼叫 CORS json 端點，並且 json 檔案中的資料顯示在模板內。

廣告

廣告對於釋出者來說非常重要，因為他們的收入完全依賴於頁面上投放的廣告。AMP不允許在頁面上新增任何外部 JavaScript，但引入了一個名為 amp-ad 的特殊 AMP 元件，負責在頁面上投放廣告。

釋出者希望在其頁面上投放的廣告網路需要支援 amp-ad。例如，要在頁面上投放DoubleClick廣告，DoubleClick需要支援使用 amp-ad 元件投放廣告。以下程式碼顯示了一個DoubleClick的 amp-ad 標籤。

<amp-ad width = "300"
   height = "200"
   type = "doubleclick"
   data-slot = "/4119129/ad-layout">
   <div placeholder>
      <b>Placeholder here!!!</b>
   </div>
</amp-ad>

AMP還支援 amphtmlads，它們是由AMP元件和HTML開發的純AMP廣告。AMP還支援 amp-sticky-ads，這是一種顯示在頁面底部的頁尾廣告。AMP中廣告的詳細資訊將在AMP廣告章節中討論。

社交小部件

像Facebook、Twitter、Instagram這樣的社交小部件已變得非常重要，需要顯示在釋出者的頁面上，以便頁面能夠在社交媒體上共享。AMP透過開發AMP元件（如 amp-facebook、amp-twitter、amp-instagram、amp-pinterest 等）擴充套件了對所有重要社交媒體小部件的支援，以便在頁面上使用。

AMP媒體

頁面上的另一個重要元件是媒體，用於顯示影片，並在影片之間投放中插廣告。AMP透過使用 amp-jwplayer、amp-youtube 等提供了一種方法來實現這一點。您無需載入任何額外的第三方檔案即可在您的頁面上顯示JW Player和YouTube。

AMP分析

AMP分析是一個用於跟蹤給定頁面上資料的AMP元件。可以記錄頁面上所有使用者互動並儲存以分析資料，以便進一步改進或用於商業目的。

AMP動畫

amp-animation 是一個AMP元件，用於定義要在其他AMP元件上使用的動畫。它支援與現代瀏覽器配合良好的動畫和過渡效果。您無需使用任何外部CSS庫即可執行動畫，並且可以使用 amp-animation 元件。

AMP佈局

AMP-Layout是Google AMP中一項重要的功能。AMP佈局確保在頁面載入時正確呈現AMP元件，而不會導致任何閃爍或滾動問題。

Google AMP確保在執行任何其他遠端資源（如影像的HTTP請求、資料呼叫）之前完成頁面上的佈局渲染。可用於佈局的屬性包括所有AMP元件的寬度/高度、具有響應式、填充、固定等值的佈局屬性、資源載入時間過長或出現任何錯誤時顯示的佔位符屬性、以及資源出現任何錯誤時顯示的回退屬性。

AMP顯示佈局

AMP支援許多用於在頁面上顯示內容的元件，而無需任何第三方庫或在頁面上進行任何繁重的CSS操作。列表包括：

  • 手風琴 - amp-accordion 是一個AMP元件，用於以展開-摺疊的格式顯示內容。這使得使用者在移動裝置上更容易檢視內容，他們可以根據自己的選擇從手風琴中選擇部分。

  • 輪播 - amp-carousel 是一個AMP元件，用於在螢幕上顯示一組類似的內容，並使用箭頭在內容之間切換。

  • 燈箱 - amp-lightbox 是一個AMP元件，它將佔據整個視口並像覆蓋層一樣顯示。

  • 滑塊 - amp-image-slider 是一個AMP元件，用於透過在影像上垂直移動滑塊來比較兩張影像。

  • 側邊欄 - amp-sidebar 是一個AMP元件，用於顯示在點選按鈕時從視窗側面滑出的內容。

AMP的優勢

  • AMP頁面輕量級且載入速度更快

  • Google在Google搜尋中優先考慮AMP頁面。AMP頁面以輪播格式列在頁面頂部。為了獲得更高的排名，將您的頁面轉換為AMP是一個很好的優勢。

  • AMP頁面對移動裝置友好，因為內容具有響應性，並且在所有瀏覽器中都能很好地調整，無需任何額外的樣式。

  • AMP頁面的使用者滿意度更高，因為與非AMP頁面相比，頁面載入速度更快，從而節省了使用者的頻寬和移動裝置電量。

AMP的劣勢

AMP具有以下缺點：

  • 釋出者必須為其頁面維護兩個版本：AMP和非AMP。

  • 使用者必須付出額外的努力將非AMP頁面轉換為AMP。由於AMP不支援自定義JavaScript或載入外部JavaScript，因此必須使用AMP提供的任何內容來實現相同的功能。

列印頁面
上一頁
下一頁
廣告