讓您的網頁更容易被找到

現在您已經建立了一個 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)。我們將透過 link 標籤將這些網頁配對。

我們已經在 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 類型的 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 結構化資料驗證工具驗證我們的結構化資料。

在新的瀏覽器視窗中，開啟 Google 結構化資料驗證工具。
選取「程式碼片段」分頁。
將您 AMP 網頁的完整原始碼複製並貼到驗證工具的文字編輯器面板中。
點擊「執行測試」。

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

繼續閱讀 – 若要深入瞭解網頁探索，請參閱讓您的網頁更容易被找到指南。

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