AMP

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

現在您已經用 AMP 製作了一篇新聞文章,讓我們確保使用者可以找到並發現您的內容。

您的網站可以完全由 AMP 網頁、部分 AMP 網頁或完全沒有 AMP 網頁組成。本教學的這個部分將介紹如何將 AMP 整合到您網站的結構中。

在常規 HTML 網頁中進行 Canonical 連結是一種常見的技術,用於聲明當多個網頁包含相同內容時,哪個網頁應被視為首選網頁。

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

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

連結 AMP 內容

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

我們已經在 AMP 文件中採取了第一步,透過在 <head> 中包含一個連結標籤回到 Canonical 網頁來實現這一點:

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

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

article.html 檔案中,將以下程式碼**新增**到 <head> 部分:

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

下圖說明了連結標籤的方向:

連結 AMP 內容

建立這種雙向連結是必要的,以便搜尋引擎了解我們的常規 HTML Canonical 文件和 AMP 文件之間的關係。如果沒有提供連結,那麼爬蟲程式不一定清楚哪些文章是常規 HTML 文件的「AMP 版本」。透過明確提供這些連結,我們確保沒有歧義!

新增結構化資料

有效的 AMP 網頁不需要 schema.org 結構化資料,但某些平台(如 Google 搜尋)需要它來獲得某些體驗,例如「焦點新聞」輪播。通常最好包含結構化資料。 結構化資料有助於搜尋引擎更好地理解您的網頁,並在搜尋引擎結果頁面中更好地顯示您的內容(例如,在複合式摘要中)。 結構化資料透過 application/ld+json 類型的 script 標籤包含在 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 結構化資料驗證工具來驗證我們的結構化資料。

  1. 在新的瀏覽器視窗中,開啟 Google 結構化資料驗證工具
  2. 選擇**程式碼片段**標籤。
  3. 將 AMP 網頁的完整原始碼複製並貼上到驗證工具的文字編輯器面板中。
  4. 點擊**執行測試**。

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

**繼續閱讀 –** 要了解有關網頁可發現性的更多信息,請參閱 讓您的網頁更容易被搜尋到 指南。

做得好!您已完成 AMP 新聞文章。