「.htaccessファイル」を使った動的配信
動的な配信 | Google 検索デベロッパー ガイド | Google Developers
スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。
まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。
今回の自動振り分けは
- ウェブサーバが「Apache」
- 設定ファイル「.htaccess」の設置が許可されている
- mod_rewriteモジュールが利用可能
の条件が必要です。
.htaccessの記述内容
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /pc/sp/ [R,L] Header set Vary User-Agent </IfModule>
2行目
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。
3行目
RewriteCond %{QUERY_STRING} !mode=pc
URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。
4行目
RewriteRule ^$ /pc/sp/ [R,L]
RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。
今回の場合は、この .htaccessファイルを設置した場所が http://www.example.com/pc/ だとすると、
スマートフォンでアクセスすると http://www.example.com/pc/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/pc/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/pc/?mode=pc であれば移動しない。
自分のドメインでトップページを表示させたい場合（http://www.example.com）
4行目を以下のように直し、トップページ（PC用のindex.html）と同じ階層にアップロードする。
RewriteRule ^$ /sp/ [R,L]
スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない
スマートフォンサイト用データの「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/pc/sp/">
最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。
<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>
最後に必ずモバイルフレンドリーテストを受けて合格するか確認しましょう。
https://search.google.com/test/mobile-friendly?hl=ja
受講生の作例
沖縄宮古島のオススメスポット10選_PC
使用するテキスト
★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します！ 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる （白キジトラ・オス） 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。 特徴： 大きな目と耳。まがったしっぽ。 性格： マイペース。 もっと見る→ ●ぐれ子 （灰色毛皮・メス） 生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。 特徴： しゃがれ声。ゴロゴロすりすり攻撃。 性格： 甘え上手。腹黒。 もっと見る→ ●ねず子 （白茶トラ・メス） ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン（涙）。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。 特徴： 片目。小顔。 性格： プライド高い。人間に対しては女王様。 もっと見る→ 飼い主紹介 H.N. ： roka404 仕事 ： フリーランスでWeb関係のお仕事してます mail ： info@hogehoge.com Web ： http://www.hogehoge.com/ 猫写真募集 ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪ 10にゃんこ集まったら紹介ページを開設します！ 応募はこちら→ © UCHI NO NYAN'S All Rights Reserved.
