讓您的網頁更容易被搜尋到
現在您已經製作了 AMP 新聞文章,接下來我們要確保使用者可以找到並探索您的內容。
連結 AMP 內容
您的網站可以完全由 AMP 網頁組成、部分由 AMP 網頁組成,或不包含 AMP 網頁。本教學課程的這部分將說明如何將 AMP 整合到您網站的結構中。
在一般 HTML 網頁中,標準連結是一種常見的技術,用於宣告當多個網頁包含相同內容時,哪個網頁應被視為偏好的網頁。
將 AMP 新增至網站時,一種常見的方法是產生傳統非 AMP HTML 網頁的 AMP 版本。這兩個版本通常具有相同的內容 (例如,文章的文字),但它們可能具有不同的呈現方式。在這種情況下,您應該將傳統 HTML 網頁視為「標準」網頁,並將 AMP 網頁與這些 HTML 網頁配對。
如果可以,請像使用任何其他 JavaScript 程式庫一樣使用 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">
下圖說明了連結標記的方向
有必要設定此雙向連結,以便搜尋引擎了解我們的常規 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>
在瀏覽器中重新載入網頁,並驗證是否未引入 AMP 驗證錯誤。
驗證結構化資料
為了驗證您的結構化資料是否正確,許多平台都提供驗證工具。在本教學課程中,我們將使用 Google 結構化資料驗證工具驗證我們的結構化資料。
- 在新的瀏覽器視窗中,開啟 Google 結構化資料驗證工具。
- 選取 [程式碼片段] 索引標籤。
- 將 AMP 網頁的完整原始碼複製並貼到驗證工具的文字編輯器面板中。
- 按一下 [執行測試]。
如果您的結構化資料有效,您應該會看到 0 個錯誤和 0 個警告。
做得好!您已完成您的 AMP 新聞文章。