Googleがモバイルファーストインデックスを開始したとアナウンスしたのが2018年3月27日です。
レスポンシブサイトならばモバイルファーストインデックス (以下、MFI) に移行しているサイトも多いですが、「別々のURL」「動的な配信」で構成されたサイトの場合、今でもMFIに移行していないサイトが数多くあります。
この記事では「別々のURL」「動的な配信」で構成されたサイトがMFIに備えるために行うべきことについてお伝えします。
「別々のURL」「動的な配信」で構成されたサイトがMFIに移行すると、どんな問題が発生するのか？
MFIに移行すると、クロール・インデックス・ランキングでモバイル版のコンテンツが優先的に使われることになります。
「別々のURL」「動的な配信」で構成されたサイトで、モバイル版ページにおいて下記の3項目を省略している場合、検索結果の順位が大きく下がってしまうことが考えられます。
- コンテンツ (見出しも含め)
- 構造化データ
- メタデータ
「別々のURL」「動的な配信」で構成されたサイトの場合、MFIに移行する前に色々と準備をしておく必要があります。
では、どんな準備をすればいいのか見ていきましょう。
MFI導入前にレスポンシブに移行できるのであれば、移行すべし
「別々のURL」「動的な配信」で、MFI導入前にレスポンシブに移行できるのであれば、すぐにでも移行することをオススメします。
理由は2つあります。
- レスポンシブならば、モバイルとデスクトップで「コンテンツ」「構造化データ」「メタデータ」に差がないので、MFIに移行しても影響を最小限に抑えられる
- 「別々のURL」がMFIに移行すると、正規URLがデスクトップ版URLからモバイル版URLに入れ替わるので、アノテーションの処理に加えてリダイレクトの処理も複雑になる
ご自身のサイトにMFIが導入されていないのであれば、最初にレスポンシブに移行することをご検討ください。
レスポンシブに移行できないのであれば、MFIに準備すべし
「別々のURL」「動的な配信」で構成されたサイトをレスポンシブに移行できないのであれば、いつMFIに移行してもいいように、しっかりと準備しておく必要があります。
次の項目については、必ずチェックしておいてください。
- コンテンツを揃える
- 構造化データをモバイル版ページに設定
- メタデータを揃える
- 広告の配置
- 画像を確認
- ビデオを確認
コンテンツを揃える
モバイル版ページでコンテンツを省略しているようなサイトでは、デスクトップ版ページと同じコンテンツをモバイル版ページに用意します。見出しもデスクトップ版ページと同様に明確で意味があるものにします。
ただし、Googleのヘルプ記事には次のような注意点もあります。
同じコンテンツでもデスクトップ版とモバイル版ページのDOMやレイアウトの違いによって、検索エンジンが異なったコンテンツと理解することもあります。
構造化データをモバイル版ページに設定
構造化データがモバイル版ページにない場合、MFIに移行するとGooglebotが構造化データをクロールできなくなります。
構造化データを実装しているサイトであれば、リッチリザルトが検索結果に表示しなくなったり、Googleしごと検索が表示されなくなったりしますので、ご注意ください。
構造化データをデスクトップ版ページだけでなく、モバイル版ページにも実装してください。
データハイライターを使っているのであれば、モバイル版ページでトレーニングします。またSearch Consoleでエラーを定期的に確認してください。
メタデータを揃える
デスクトップ版ページとモバイル版ページで、メタデータを揃える必要があります。
タイトルタグ、メタ ディスクリプションタグを揃えるだけでなく、画像のalt属性 (代替テキスト) も同じものを用意してください。
モバイル版ページにalt属性を指定していないケースはよく見かけます。確認するには、ページのソースコードで「img タグ」を探して、画像にalt属性が追加されているか確認します。
画像のalt属性が追加されている場合
<img src=”waikiki-beach.jpg” alt=”ワイキキビーチ” />
画像のalt属性が追加されていない場合
<img src=”waikiki-beach.jpg” alt=”” />
<img src=”waikiki-beach.jpg” />
画像のalt属性がないと、Google画像検索に表示される可能性が低くなります。
また、画像が表示されない読み上げブラウザで読み上げられないので、アクセシビリティの観点からも画像にalt属性を追加することが推奨されています。
広告の配置
広告がモバイル版ページの検索パフォーマンスに影響が出ないようにします。ページ上部の広告はユーザー体験を悪化させることもあるので、Better Ads Standardに沿って広告を配置します。
画像を確認
モバイル版ページの画像を確認して、Google 画像検索 SEO ベストプラクティス に沿っているかどうか確認します。
- 高画質の画像を提供
- 画像形式はサポートしているものだけを使用
- 画像を読み込むたびに変わるURLを使わない
- alt属性をデスクトップ版ページと揃える
- デスクトップ版ページと同じ「タイトル」「キャプション」「ファイル名」「テキスト」を使用する
Googleの画像検索に最適化する方法は以前の記事にまとめました。
ビデオを確認
モバイル版ページのビデオを確認して、動画のベスト プラクティス に沿っているかどうか確認します。
- 動画形式はサポートしているものだけを使用する
- 動画を読み込むたびに変わるURLを使わない
- デスクトップ版とモバイル版ページで同じ動画の構造化データを使用する
- モバイルで表示した際、ページ上部の見やすい位置に動画を配置する
「別々のURL」の追加のベストプラクティス
「別々のURL」で構成されたサイトの場合、追加のベストプラクティスがあります。
- エラーページのステータスがデスクトップ版とモバイル版ページで同じかどうか確認
- モバイル版ページに「#」（ハッシュ/フラグメント）URLがないことを確認
- Search Consoleでデスクトップ版とモバイル版ページのプロパティをそれぞれ登録し、データやメッセージにアクセスできるようにする
- クロールの増加に対応できることを確認
- robots.txtディレクティブがデスクトップ版とモバイル版ページで意図通りに動作するか確認
- アノテーションを確認 (rel=canonicalとrel=alternate)
「別々のURL」で構成された多言語サイトは、hreflang リンクを確認
「別々のURL」で構成された多言語サイトは、更に複雑な処理が必要です。
デスクトップ版URLとモバイル版URLの間にアノテーション (alternate と canonical) が正しく設定されていることに加えて、hreflang リンクを確認する必要があります。
多言語サイトは次のように設定します。
- デスクトップ版URL → モバイル版URL に alternate を設定
- モバイル版URL → デスクトップ版URL に canonical を設定
- 複数の言語間の デスクトップ版URL で hreflang を設定
- 複数の言語間の モバイル版URL で hreflang を設定
次のツイートの図がわかりやすいのでご確認ください。
@methode So will this be recommended hreflang in MFI? pic.twitter.com/5wCbLcIXhA
— 内ꘐ田 (@UchidaEishirou) November 10, 2017
アノテーションに加えてhreflang リンクを設定すると、かなり複雑なサイト構成になります。正しく実装されているかどうか入念に確認してください。
レスポンシブならば hreflang リンク は不要
レスポンシブならこのような複雑なアノテーションは一切不要ですので、レスポンシブに変更できるのであれば変更することをオススメします。
トラブルシューティング
MFIに移行しない、MFI移行後に検索パフォーマンスが低下した際のトラブルシューティングをお伝えします。
以下すべてモバイル版ページに関する問題です。
- 構造化データが不足している
- noindexでインデックスをブロックしている
- デスクトップ版ページと同様の画像がない
- 画像へのクロールがブロックされている
- 低品質の画像
- alt属性がない
- ページにタイトルがない
- エラーページがある
- 「#」（ハッシュ/フラグメント）URLがある
- robots.txtでクロールをブロックしている
- 複数のデスクトップ版ページが同じモバイル版ページにリダイレクト
- 複数のデスクトップ版ページが、モバイル版ページのトップページにリダイレクト
- コンテンツの不足など、ページの品質に問題がある
- ビデオの問題
さいごに
以上、別々のURLで構成されたサイトがモバイルファーストインデックス (MFI) に備えるために行うべきことについてお伝えしました。
別々のURLで構成されたサイトは、MFI移行前にレスポンシブに変更できるのであれば、移行することをオススメします。
システムの都合でレスポンシブに移行できないのであれば、デスクトップ版ページとモバイル版ページで、以下の項目について同じものを揃えてください。
- コンテンツを揃える
- 構造化データをモバイル版URLに設定
- メタデータを揃える
- 広告の配置
- 画像を確認
- ビデオを確認
ナレッジ