「.htaccessファイル」を使った動的配信
モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル | ドキュメント | Google for Developers
スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。
まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。
今回の自動振り分けは
- ウェブサーバが「Apache」
- 設定ファイル「.htaccess」の設置が許可されている
- mod_rewriteモジュールが利用可能
の条件が必要です。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /自身のspデータのルートパス [R,L]
Header set Vary User-Agent
</IfModule>
まずはmod_rewriteモジュールが有効な時のみに処理するように分岐させます。
<IfModule mod_rewrite.c>
</IfModule>
次にmod_rewriteモジュールを起動させます。
RewriteEngine On
次にRewriteCondを使って、どういう条件でリダイレクトの処理をするかを指定します。
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。 つまり、"A-Z" と "a-z" は区別しない。
RewriteCond %{QUERY_STRING} !mode=pc
URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。
4行目
RewriteRule ^$ /自身のspデータのルートパス
RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています。
スマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける
rel=”canonicalという属性を使用して、ページの評価やインデックスはデスクトップ用URLに統一するための正規化処理をしましょう。そうすることでミラーサイトのような重複コンテンツ扱いになることを防ぎます。
<link rel="canonical" href="http://○○○○○.com/pc/">
次にPCサイト用データの「index.htmlファイル」のhead内に貼り付ける
rel=”alternate”という属性を使用して、Googlebotにスマートフォン用ページが別で存在することを伝える処理をします。そうするとスマートフォン向けの代替コンテンツがGooglebotに認識され、スマートフォン用ページが別で存在することを伝えることができます。
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/cat/sp/">
最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。
<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>
