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 類型指令碼標記包含在 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 新聞文章。