AMP

讓您的網頁更容易被搜尋到

既然您已使用 AMP 製作新聞文章,現在讓我們確保使用者可以找到並探索您的內容。

您的網站可以完全由 AMP 網頁、部分 AMP 網頁或非 AMP 網頁組成。本教學課程的這部分將涵蓋如何將 AMP 整合到您網站的結構中。

在一般 HTML 網頁中使用標準連結是一種常見的技術,用於宣告當多個網頁包含相同內容時,應將哪個網頁視為偏好的網頁。

將 AMP 新增至網站時,一種常見的方法是產生傳統非 AMP HTML 網頁的 AMP 版本。這兩個版本通常具有相同的內容 (例如文章的文字),但它們可能具有不同的呈現方式。在這種情況下,您應該將傳統 HTML 網頁視為「標準」網頁,並將 AMP 網頁與這些 HTML 網頁配對。

如果可以,請像使用任何其他 JavaScript 函式庫一樣使用 AMP 來建置您的網站,並忘記標準連結。使用 AMP 建置整個網站可大幅減輕您的維護負擔。

連結 AMP 內容

為了本教學課程的目的,我們將重點放在您擁有網頁的 AMP 版本和非 AMP 版本的情況。在本教學課程中,我們的網站包含一篇新聞文章,其中包含非 AMP HTML 網頁 (article.html) 和網頁的 AMP 版本 (article.amp.html)。我們將透過連結將這些網頁配對。

我們已在 AMP 文件中採取第一步來實現此目的,方法是在 <head> 中包含指向標準網頁的連結標籤

<link rel="canonical" href="/article.html">

下一步是將標準文章連結到 AMP 網頁。這可以透過在標準文章的 <head> 區段中包含 <link rel="amphtml"> 標籤來實現。

在 article.html 檔案中,將以下程式碼新增到 <head> 區段

<link rel="amphtml" href="/article.amp.html">

以下圖表說明連結標籤的方向

連結 AMP 內容

必須設定此雙向連結,以便搜尋引擎了解我們一般 HTML 標準文件與 AMP 文件之間的關係。如果沒有提供連結,則爬蟲程式不一定清楚哪些文章是常規 HTML 文件的「AMP 版本」。透過明確提供這些連結,我們確保沒有歧義!

新增結構化資料

有效的 AMP 網頁不需要 schema.org 結構化資料,但某些平台 (例如 Google 搜尋) 需要它才能提供特定體驗,例如「熱門報導」輪播。一般而言,加入結構化資料是個好主意。結構化資料可協助搜尋引擎更了解您的網頁,並在搜尋引擎結果頁面 (SERP) 中更妥善地顯示您的內容 (例如,在複合式摘要中)。結構化資料是透過 application/ld+json 類型指令碼標籤包含在 AMP 網頁的 <head> 標籤中。

針對我們的新聞文章,將以下結構化資料新增到您的 AMP 文件 <head> 區段的底部

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

注意 – 內容應始終相同。對於新聞文章,請指定「NewsArticle」類型。標題應與您文章的標題相符。圖像物件指的是文章的主要圖片。

在瀏覽器中重新載入網頁,並確認未導入任何 AMP 驗證錯誤。

除了 schema.org 結構化資料格式外,搜尋引擎和社群媒體網路還支援其他格式。請參閱支援文件

驗證結構化資料

為了驗證您的結構化資料是否正確,許多平台都提供驗證工具。在本教學課程中,我們將使用 Google Structured Data Validation Tool 驗證我們的結構化資料。

  1. 在新的瀏覽器視窗中,開啟 Google Structured Data Validation Tool
  2. 選取 [程式碼片段] 標籤。
  3. 將 AMP 網頁的完整原始碼複製並貼到驗證工具的文字編輯器面板中。
  4. 按一下 [執行測試]。

如果您的結構化資料有效,您應該會看到 0 個錯誤0 個警告

繼續閱讀 – 若要進一步瞭解網頁可探索性,請參閱讓您的網頁更容易被搜尋到指南。

太棒了!您已完成 AMP 新聞文章。