Webサイトを作る際に
2015年4月21日、世界で一斉にgoogle検索のアルゴリズムに「スマホ対応」が含まれてしまいました。スマホ対応にする事をモバイルフレンドリーと言います。
つまり、Webサイトを作る際には、スマホ対応はしたほうが良いってことみたいですが、何かいろいろ方法があるみたいです。
Googleが推奨してるスマートフォンに最適化したサイトを構築する際のガイド
※2013年の情報を参考にしてるので状況が変わってるかもしれません。
- レスポンシブWebデザイン
- 同一URLで端末によって出し分け = 動的な配信 (Dynamic serving)
- スマホ向けを別URLで作り、リダイレクトする = モバイル向け別URL (Separate mobile URLs)
レスポンシブWebデザイン以外の2つの構成では、アクセスしてきた端末の「User-Agent(UA、ユーザーエージェント)」の情報に基づいてPCとスマートフォンで異なるHTML(やCSS)を返すしくみのようです。
2つの構成を採用する際には、Vary HTTPヘッダーを使用することをグーグルは強く勧めているようです。
Vary HTTPヘッダーとは
サーバーにアクセスがあったときに、データと一緒にサーバーから返すHTTPヘッダーの1つのようです。
- ユーザーエージェント名によって返すHTMLが変わる場合がある
- 内容がクッキーの状態によって変わる場合がある
サーバーからコンテンツを返す際に『このページ(URL)は◯◯によって内容が変わりますよ』という情報を表すHTTPヘッダーです。(◯◯がユーザーエージェント名であることが一般的らしいです。)
⇩ Vary HTTPヘッダーについては下記サイトへ
・HTTPヘッダーを知っていますか? | 編集長ブログ―安田英久 | Web担当者Forum
キャッシュのしくみが障害になるとき
キャッシュとは
いったんアクセスしたWebページのコンテンツのコピーを、ネットワーク上などの別の場所に(一時的に)保持しておき、再び同じWebページにアクセスした際は、Webサーバーまで情報を取りに行かず、保存しておいたデータを読み込むため処理が速くなります。
CDN(コンテンツ・デリバリー・ネットワーク)や一部のISP(インターネット・サービス・プロバイダ)は、キャッシュを利用してるようです。
キャッシュは
- クライアントマシン上のWebブラウザ
- クライアントマシンとWebサーバの間に位置するProxyサーバ
- Webサーバの背後にあるアプリケーションサーバ
の3つの場所にできるようです。
PC向けページとモバイル向けページを同じURLで自動的に出し分けている場合
PCからのアクセスがあり、そのデータがキャッシュされているとします。
その後にスマートフォンからのアクセスがあった場合、キャッシュしていたデータを返すと、元のWebサーバーで行うデバイス判別が行われずに、ユーザーにはキャッシュされていたPC向けのページが返されてしまいます(その反対もあり得ます)。
グーグル検索でもキャッシュと同じ問題が
PC向けのGooglebotがまずWebページにアクセスしてその内容を取得し、インデックスします(グーグルのサーバーにキャッシュを作成します)。
そのあとにモバイル向けのGooglebotが同じページをクロールする際に、すでにグーグルのネットワークキャッシュがあるので、そのキャッシュを利用します。
モバイル向けGooglebotがPC向けのコンテンツを取得してしまう可能性が出てきます(その反対もあり得ます)。
Vary HTTPヘッダーの記述でキャッシュとグーグル検索の問題を解決
Webサーバーが返すHTTPレスポンスのVary HTTPヘッダーに「ユーザーエージェント名によって内容が変わりますよ」という情報を記述することで、キャッシュサーバーやGooglebotが、PC向けコンテンツとモバイル向けコンテンツが別々に存在する(可能性がある)ことを認識できます。(※Vary HTTPヘッダーを実際どのように処理するかはCDNやISP側に委ねられるようです。)
Vary HTTPヘッダーの記述
Vary HTTPヘッダーの記述は、
の2パターンがあるようです。
Apacheのhttpd.confファイルは、XAMPPをCドライブ直下にインストールしてる場合には、C:¥xampp¥apache¥conf¥httpd.confの場所にあると思われます。
⇩ Apacheのhttpd.confファイルに記述するやり方は下記サイトへ
・ApacheでHTTPヘッダを変更する - ぺーぺーSEのブログ
.htaccessファイルに記述する場合
.htaccessファイルを作成し、下記内容を記述します。(※Windows環境では、『.htaccess』ファイルを作成できない可能性があるので、一旦、『.htaccess.txt』などで保存しておいて、サーバーにアップした時に『.htaccess』に変更します。)
.htaccessファイルを置く場所は、公開したいページと同じ場所に置きます。
Helloフォルダ(公開ディレクトリ)直下のindex.htmlと同じ階層に、スマートフォン用サイトのページをspフォルダに、フューチャーフォン(ガラケー)用サイトのページをmobileフォルダに作成してる場合のイメージ図
⇩ .htaccessファイルに関しては下記サイトへ
・.htaccessファイルの書き方と設置方法 [ホームページ作成] All About
Header set Vary User-Agent
既に .htaccessファイルが存在し、Varyが指定されてる場合でも『 , 』(カンマ)でVaryの条件を足していけるようです。
Header set Vary Accept-Encoding, User-Agent
⇩ Vary HTTPヘッダに関して詳細は下記サイトへ
・スマホ向け表示を分けているときはVary HTTPヘッダーを使うこと など10+4記事(海外&国内SEO情報) | 海外&国内SEO情報ウォッチ | Web担当者Forum
アノテーションとは
アノテーション(annotation)とは、あるデータに対して関連する情報(メタデータ)を注釈として付与すること。XML等の記述形式を用いてメタデータをタグ付けする場合が多い。付与したメタデータやタグを指してアノテーションという場合もある。
canonicalとalternate(アノテーションの設定)
PCサイトとスマホサイトでURLが変わってしまうホームページ = モバイル向け別URL (Separate mobile URLs)の場合に、『アノテーションの設定』というものをする必要があるようです。
PCのページ
http://www.ts0818.jp/
スマホのページ
http://www.ts0818.jp/smartphone/
http://www.ts0818.jp/mobile/
PCにはスマホ、ガラケーのリンクとrel=alternateを、スマホ、ガラケーにはPCのリンクとrel=canonicalを付けてあげる必要があります。
PCのページファイル
<link rel="alternate" media="only screen and (max-width: 640px)" href=" http://www.ts0818.jp/smartphone/"> <link rel="alternate" media="handheld" href=" http://www.ts0818.jp/mobile/" />
スマホのページファイル
<link rel="canonical" href=" http://www.ts0818.jp/">
ガラケーのページファイル
<link rel="canonical" href=" http://www.ts0818.jp/">
ページ切り替えのイメージ図
⇩ 別々のURLについて詳細は下記サイトへ
⇩ Vary HTTPヘッダーとアノテーションの使い方について詳細は下記サイトへ
・SEO効果を失わない、スマホサイト移行のポイント|コラム アユダンテ株式会社
今回はこのへんで。