Canonical 在桌機、手機、AMP 要怎麼設定

現在網頁有桌機板、手機版還有 AMP 版，這些版本要設定 Canonical (for SEO)的話，應該要怎麼設定呢？

Canonical 在桌機、手機、AMP 要怎麼設定

以下是桌機為主，手機版為輔的情況，未來若 Google 推行 Mobile First 後(註：Google delays mobile-first indexing deadline to March 2021)，直接叫大家都把桌機、手機使用 RWD 整合起來，若還要分三種版本，就在看看有沒有更新的建議作法了~

這邊先講簡單的結論：

  • 桌機：
    • <link rel="amphtml"> 到 AMP
    • <link rel="alternate"> 到 Mobile
  • 手機：
    • <link rel="canonical”> 到桌機
    • <link rel="amphtml"> 到 AMP
  • AMP：
    • <link rel="canonical”> 到桌機
  • 下面有更完整的範例

Google 的 Webmaster 討論區有幾篇討論可以參考：

下述摘錄自此篇：AMP Indexing FAQs - Search Console Help

If for some reason, all three of desktop, mobile, and AMP exist:

  • Desktop: point to AMP with <link rel="amphtml"> and to mobile with rel=alternate
  • Mobile: point to desktop with <link rel="canonical”> and to AMP with rel=amphtml (mobile should be equivalent in content to desktop)
  • AMP: point to desktop with <link rel="canonical”>

下述摘錄自此篇：AMP project issue: how to put canonical for website and mobile site，這篇有直接完整的範例：

  • https://www.example.com/desktop/page.html (this is the desktop version of the page) has:
    • <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/mobile/page.html">
    • <link rel="amphtml" href="https://a.example.com/amp/page.html">
    • <link rel="canonical" href="https://www.example.com/desktop/page.html">
  • https://m.example.com/mobile/page.html (this is the smartphone version of the page) has:
    • <link rel="canonical" href="https://www.example.com/desktop/page.html">
  • https://a.example.com/amp/page.html (this is the AMP version of the page) has:
    • <link rel="canonical" href="https://www.example.com/desktop/page.html">

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈Canonical 在桌機、手機、AMP 要怎麼設定〉中有 1 則留言

  1. 自動引用通知: Canonical 在桌機、手機、AMP 的設定方法 - HC！專注於LAMP技術的技術部落客

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。