スマートフォン用サイト構築時にやっておくべき、モバイルSEO対策のポイント
Contents
スマートフォン用サイト構築時にやっておくべき、モバイルSEO対策のポイント
サイトをスマートフォン用に最適化するとき、いくつかの方法があります。
①レスポンシブ・ウェブデザインで対応する
②同じURLで、ユーザーエージェントを判断して、動的に異なるHTMLとCSSを読み込む
③PC用、スマートフォン用と別のURLでサイトを構築する
Googleの公式ブログによれば、Googleが推奨しているのは①のレスポンシブ・ウェブデザインです。
つまり、単一のURL、同一のHTMLを提供し、CSSでデバイスサイズに合わせてレイアウトを変更する方法です。
レスポンシブには以下のようなメリットがあります。
・PC用とモバイル用のページが同じURLなので、ユーザーがシェアやリンクをする際に容易で分かりやすく、クローラーにとってもコンテンツを適切にインデックスすることができる。
・Googleはユーザーエージェントごとに異なるGooglebotでページをクロールしているため、PC用、モバイル用が同一のページであればより効率的にコンテンツを発見することができる。
ですが、全てのサイトにおいてレスポンシブで対応できるとは限りません。
スマートフォンに最適化する際、②と③の方法で構築する場合にやっておくべき対応をご紹介します。
まずは②の場合
「同じURLで、ユーザーエージェントを判断して、動的に異なるHTMLとCSSを読み込む」
この場合、PC用ユーザーエージェントのクロール時に、モバイル用ユーザーエージェント向けにサイトのHTMLが変更されることはGooglebotには分からない状態になっています。
そのため、PC向けのGooglebotが最初にPC用ページを取得し、インデックスしますが、その後モバイル用Googlebotがページを取得する際、間違ってPC向けのコンテンツを取得してしまうかもしれないのです。
そこで、ユーザーエージェントごとに異なるコンテンツを配信していることを、キャッシュサーバーやGoogleのアルゴリズムに伝えることが推奨されています。
これには、「Vary HTTPヘッダ」を利用します。
具体的には、.htaccessに下記のような記述を追加します。
Header set Vary User-Agent
これによって、スマートフォン用Googlebotがページをクロールしてモバイルコンテンツを検出するようリクエストすることができます。
次に、③の場合です。
「PC用、スマートフォン用と別のURLでサイトを構築する」
この場合は、アノテーションを使用して、Googleのアルゴリズムがサイトの設定を認識できるようにします。
PC用ページには、スマートフォン用のURLをlink rel=”alternate”で示し、スマートフォン用ページにはPC用のURLをlink rel=”canonical”で示します。
例えば、PC用のURLが「http://www.example.com/page-1」でモバイル用のURLが「http://m.example.com/page-1」の場合、下記の記述をそれぞれのページに追加します。
PC用ページ：
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page-1" >
モバイル用ページ
<link rel="canonical" href="https://www.example.com/page-1" >
まとめ
スマートフォン用にサイトを最適化するときは、レスポンシブデザインを採用します。
レスポンシブで対応ができないときは上記の設定を追加し、スマートフォン用のコンテンツを正しくインデックスしてもらいましょう。