MFI後のhreflangの仕様が確定か? AMP対応サイトのhreflangは公式ドキュメントが解説

[レベル: 超上級?]

別々の URL 構成のモバイルサイトにおけるモバイル ファースト インデックス導入後の hreflang の設定の更新情報を先日お伝えしました。

この時点では、ブログやヘルプでの公式アナウンスは出ていませんでしたが、まず間違いなくこの仕様で確定だと思われます。

一方で、多言語・多地域向けサイトが AMP 対応している場合の hreflang の設定に関しては、AMP プロジェクトの公式サイトに技術ドキュメントが公開されました。

別々 URL のモバイルサイトでの hreflang

Aleyda Solis(アレイダ・ソリス)氏が、別々の URL 構成のモバイルサイトにおける hreflang の更新後の設定方法を図解しました。
Google の John Mueller(ジョン・ミューラー)氏がお墨付きを与えているので、仕様を正しく反映した図です。

※図が小さく見づらいので、ソリス氏の元ツイートでオリジナル画像を見てください。

こちらは別のユーザーが作ったシンプルバージョンの図解です。

ソリス氏の図よりもずっとわかりやすいですね。

この前の記事でも解説したように、ようは次のようになります。

  • PC ページ同士で hreflang を相互に張る
  • モバイルページ同士で hreflang を相互に張る
  • PC ページからモバイルページへ alternate を張る
  • モバイルページから PC ページへ canonical を張る

2つ目の、モバイル向けページでの hreflang の実装が新たに加わった部分になります。
alternatecanonical に関しては MFI 導入後も変更なしなので注意が必要です。

AMP ページでの hreflang

さて、ここまでは先日説明したことです。

AMP 対応している場合の hreflang の設定方法を AMP プロジェクトが正式に公開しました。

正規ページ + AMP ページ

まず、レスポンシブ ウェブ デザインまたは動的配信で構成している場合です。
PCページとモバイルページが同一の URL で配信され、異なる専用の URL でAMP ページが配信されます。
この構成では、正規ページと AMP ページのペアが存在します(僕のブログを含めてこのパターンが多いはず)。

次の図のようになります。

  • 各言語の正規ページ(PCページ & モバイルページ)からは、対応する言語の AMP ページに向けて rel="amphtml" を張る
  • 各言語の AMP ページから対応する言語の正規ページへ canonical を張る
  • 各言語の正規ページ同士で hreflang を張る
  • 各言語の AMP ページ同士でも hreflang を構成する

日本語・英語・フランス語の3言語でサイトを公開していたとします。
日本語の正規ページには次の link 要素タグが必要です。


  <link rel="amphtml" href="https://ampbyexample.com/internationalization/basic/ja/index.amp.html" />
  <link rel="alternate" hreflang="en" href="https://ampbyexample.com/internationalization/basic/" />
  <link rel="alternate" hreflang="fr" href="https://ampbyexample.com/internationalization/basic/fr/" />
  <link rel="alternate" hreflang="ja" href="https://ampbyexample.com/internationalization/basic/ja/" />

日本語の AMP ページには次の link 要素タグが必要です。


  <link rel="canonical" href="https://ampbyexample.com/internationalization/basic/ja/" />
  <link rel="alternate" hreflang="en" href="https://ampbyexample.com/internationalization/basic/index.amp.html" />
  <link rel="alternate" hreflang="fr" href="https://ampbyexample.com/internationalization/basic/fr/index.amp.html" />
  <link rel="alternate" hreflang="ja" href="https://ampbyexample.com/internationalization/basic/ja/index.amp.html" />
    

正規ページ + モバイルページ + AMP ページ

次は、別々の URL でモバイルサイトを構成している場合です。
この構成では、正規ページ(PCページ)とモバイルページ、AMP ページの3つの URL で同一コンテンツを配信します。

  • PC ページからモバイルページへ alternate を張る
  • モバイルページから PC ページへ canonical を張る
  • PC ページから AMP ページへ amphtml を張る
  • モバイルページから AMP ページへ amphtml を張る
  • AMP ページから PC ページへ canonical を張る
  • PC ページ・モバイルページ・AMP ページそれぞれで、対応する言語のページへ hreflang を張る

日本語の PC ページには次の link 要素タグが必要です。


  <link rel="amphtml" href="https://ampbyexample.com/internationalization/alternate/ja/index.amp.html" />
  <link rel="alternate" href="https://ampbyexample.com/internationalization/alternate/ja/index.mobile.html" />
  <link rel="alternate" hreflang="en" href="https://ampbyexample.com/internationalization/alternate/" />
  <link rel="alternate" hreflang="fr" href="https://ampbyexample.com/internationalization/alternate/fr/" />
  <link rel="alternate" hreflang="ja" href="https://ampbyexample.com/internationalization/alternate/ja/" />
    

日本語の モバイルページには次の link 要素タグが必要です。


  <link rel="canonical" href="https://ampbyexample.com/internationalization/alternate/ja/" />
  <link rel="amphtml" href="https://ampbyexample.com/internationalization/alternate/ja/index.amp.html" />
  <link rel="alternate" hreflang="en" href="https://ampbyexample.com/internationalization/alternate/index.mobile.html" />
  <link rel="alternate" hreflang="fr" href="https://ampbyexample.com/internationalization/alternate/fr/index.mobile.html" />
  <link rel="alternate" hreflang="ja" href="https://ampbyexample.com/internationalization/alternate/ja/index.mobile.html" />
    

日本語の AMP ページには次の link 要素タグが必要です。


  <link rel="canonical" href="https://ampbyexample.com/internationalization/alternate/ja/" />
  <link rel="alternate" hreflang="en" href="https://ampbyexample.com/internationalization/alternate/index.amp.html" />
  <link rel="alternate" hreflang="fr" href="https://ampbyexample.com/internationalization/alternate/fr/index.amp.html" />
  <link rel="alternate" hreflang="ja" href="https://ampbyexample.com/internationalization/alternate/ja/index.amp.html" />
    

結論: RWD

書いていてめまいがしてきたのでここでやめます。

結論としては、レスポンシブ ウェブ デザインに変えてください。😅

別々の URL 構成は正直言って悲惨です。
レスポンシブ ウェブ デザインへの移行が無理な場合は、ご自身でドキュメントをよく読んでください。
各言語での link 要素タグの設定例がすべて書かれています。

P.S.
突き放しているわけではありません。
これって誰の責任? 別々の URL 構成を選んだサイト管理者? それとも Google?