WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する

WordPressでスマートフォンなどのデバイス対応をする際、WPtouchWP Mobile Detectorなどなどのプラグインを使ってスマートフォン用にテーマを切り替えている方も多いと思います。

今回は、そんなWordPressでデバイスによってテーマの切り替えを行っている方向けに、ちょっとしたおすすめTipsを紹介しておこうと思います。

先月、googleのウェブマスター向け公式ブログで「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」という記事が掲載されましたが、この中の「デバイスごとに最適化した HTM」の項目内で

あなたのサイトが動的な配信をされている場合、ユーザーエージェントごとにコンテンツを変えている事をキャッシュサーバや Google のアルゴリズム伝えるために Vary HTTP ヘッダを使用することを強くお勧めします。また、Googlebot-Mobile でもクロールのシグナルとして利用します。

との記述があり、「このサイトはデバイスによってHTMLのソースを変更しているよ」とgoogleに正しく伝えるためにVary HTTP ヘッダを使ってくださいと言っています。

Vary HTTP ヘッダというのは、Webページを表示する際、htmlのソースコードより先に送信されるレスポンスヘッダーの1項目です。レスポンスヘッダーというのは、作成日、キャッシュ期限、最終更新日、場合によってはPHPのバージョンやWebサーバーの種類など、送信するデータに関する様々なメタ情報によって構成されています。

レスポンスヘッダーは、Firebug や chrome のデベロッパーツールのネットワークタブから確認するのが便利です。

この記事は、jim912によって書かれたものです。
引用を行う場合は、著作権法に定める範囲にて、引用元であるSimple Colorsの出展元表示とhttp://www.warna.info/archives/2237/へのリンクを必ず行って下さい。

で、ここからが本題なのですが、WPtouch のようなプラグインを利用していても、Vary ヘッダーが出力されていないケースがあります。この場合、CODE 1 を使用して Vary ヘッダーを追加することができます。プラグインによっては、本来設定したテーマの functions.php を読み込まないものもありますので、プラグイン化しておくと良いかと思います。

CODE 1

function add_vary_header( $headers ) {
	if ( ! is_admin() ) {
		$headers['Vary'] = 'User-Agent';
		return $headers;
	}
}
add_filter( 'wp_headers', 'add_vary_header' );

また、ちゃちゃっとプラグインにしてみたので、めんd・・お手軽に利用したい方は、こちらをそのまま利用していただいても構いません。

Download

Vary Header

カテゴリー: WordPressの小技 タグ: , , , パーマリンク

WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する への4件のフィードバック

  1. ピンバック: 図解でわかる、デスクトップPC・スマートフォン・フィーチャーフォンの三つ巴ページ切り替え設定|SEOまとめ

  2. ITポケット のコメント:

    これは知りませんでした!
    最近ブログをユーザーエージェントでスマホ対応したので、早速使わせていただきます。
    ありがとうございます!

  3. たい のコメント:

    WordPress で Vary HTTP ヘッダを挿入する | URA.hetarena.com
    http://ura.hetarena.com/archives/60
    で問題点を指摘されていますよ。

  4. ピンバック: スマートフォンのSEO対策は必要なの?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です