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