読者です 読者をやめる 読者になる 読者になる

Vary HTTPヘッダーとスマホサイト

Webサイトを作る際に

2015年4月21日、世界で一斉にgoogle検索のアルゴリズムに「スマホ対応」が含まれてしまいました。スマホ対応にする事をモバイルフレンドリーと言います。

つまり、Webサイトを作る際には、スマホ対応はしたほうが良いってことみたいですが、何かいろいろ方法があるみたいです。

 Googleが推奨してるスマートフォンに最適化したサイトを構築する際のガイド

※2013年の情報を参考にしてるので状況が変わってるかもしれません。

  1. レスポンシブWebデザイン
  2. 同一URLで端末によって出し分け = 動的な配信 (Dynamic serving)
  3. スマホ向けを別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インターネット・サービス・プロバイダ)は、キャッシュを利用してるようです。

 

キャッシュは

の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パターンがあるようです。

 

Apachehttpd.confファイルに記述する場合

Apachehttpd.confファイルは、XAMPPをCドライブ直下にインストールしてる場合には、C:¥xampp¥apache¥conf¥httpd.confの場所にあると思われます。

 

  Apachehttpd.confファイルに記述するやり方は下記サイトへ

ApacheでHTTPヘッダを変更する - ぺーぺーSEのブログ

 

.htaccessファイルに記述する場合 

.htaccessファイルを作成し、下記内容を記述します。(※Windows環境では、『.htaccess』ファイルを作成できない可能性があるので、一旦、『.htaccess.txt』などで保存しておいて、サーバーにアップした時に『.htaccess』に変更します。)

.htaccessファイルを置く場所は、公開したいページと同じ場所に置きます。

 

Helloフォルダ(公開ディレクトリ)直下のindex.htmlと同じ階層に、スマートフォン用サイトのページをspフォルダに、フューチャーフォン(ガラケー)用サイトのページをmobileフォルダに作成してる場合のイメージ図

f:id:ts0818:20160311210653p:plain

f:id:ts0818:20160311210654p:plain

 

  .htaccessファイルに関しては下記サイトへ 

.htaccessファイルの書き方と設置方法 [ホームページ作成] All About

.htaccess

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等の記述形式を用いてメタデータタグ付けする場合が多い。付与したメタデータタグを指してアノテーションという場合もある。

アノテーション - Wikipedia

 

canonicalとalternate(アノテーションの設定)

 

PCサイトとスマホサイトでURLが変わってしまうホームページ = モバイル向け別URL (Separate mobile URLs)の場合に、『アノテーションの設定』というものをする必要があるようです。

 

例えば、PC、スマホガラケーでページのURLが違う場合

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/">

ページ切り替えのイメージ図

f:id:ts0818:20160311210651p:plain

 

  別々のURLについて詳細は下記サイトへ 

別々の URL - ウェブマスター向けモバイルガイド

  Vary HTTPヘッダーとアノテーションの使い方について詳細は下記サイトへ 

SEO効果を失わない、スマホサイト移行のポイント|コラム アユダンテ株式会社

広告を非表示にする