WordPressでスマートフォンなどのデバイス対応をする際、WPtouchやWP Mobile Detectorなどなどのプラグインを使ってスマートフォン用にテーマを切り替えている方も多いと思います。
今回は、そんなWordPressでデバイスによってテーマの切り替えを行っている方向けに、ちょっとしたおすすめTipsを紹介しておこうと思います。
先月、googleのウェブマスター向け公式ブログで「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」という記事が掲載されましたが、この中の「デバイスごとに最適化した HTM」の項目内で
あなたのサイトが動的な配信をされている場合、ユーザーエージェントごとにコンテンツを変えている事をキャッシュサーバや Google のアルゴリズム伝えるために Vary HTTP ヘッダを使用することを強くお勧めします。また、Googlebot-Mobile でもクロールのシグナルとして利用します。
との記述があり、「このサイトはデバイスによってHTMLのソースを変更しているよ」とgoogleに正しく伝えるためにVary HTTP ヘッダを使ってくださいと言っています。
この記事は、jim912によって書かれたものです。
引用を行う場合は、著作権法に定める範囲にて、引用元であるSimple Colorsの出展元表示とhttp://www.warna.info/archives/2237/へのリンクを必ず行って下さい。
Vary HTTP ヘッダというのは、Webページを表示する際、htmlのソースコードより先に送信されるレスポンスヘッダーの1項目です。レスポンスヘッダーというのは、作成日、キャッシュ期限、最終更新日、場合によってはPHPのバージョンやWebサーバーの種類など、送信するデータに関する様々なメタ情報によって構成されています。
レスポンスヘッダーは、Firebug や chrome のデベロッパーツールのネットワークタブから確認するのが便利です。
で、ここからが本題なのですが、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・・お手軽に利用したい方は、こちらをそのまま利用していただいても構いません。
Vary Header
【久しぶりにぶろぐった】WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/fDmBM1XC @wordpress_fan #WordPressJP
WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/c2l3zlqd … そうだったんですねー
これはいずれ重要になってくるから今のうちに慣れておいた方がいいよ。→WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/SxB2jbVK
【WordPress】WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/5EvedLiY
【久しぶりにぶろぐった】WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/fDmBM1XC @wordpress_fan #WordPressJP
WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/vQRbfIHv
【久しぶりにぶろぐった】WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/fDmBM1XC @wordpress_fan #WordPressJP
大曲先輩のブログ記事。WordPressを使ってユーザーエージェントでスマートフォン対応している人は必見だ！「Vary HTTP ヘッダ」について。 RT WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/hhj1qSxp
WordPressでモバイル向けにテーマを切り替えてる方向けの情報です。 http://t.co/olFPCYHj
WordPressでモバイル向けにテーマを切り替えてる方向けの情報です。 http://t.co/olFPCYHj
WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/c2l3zlqd … そうだったんですねー
WordPressでモバイル向けにテーマを切り替えてる方向けの情報です。 http://t.co/olFPCYHj
wp_headersなどというフックがあるのか！ ”WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する | Simple Colors” http://t.co/10poRKbT
あとで追加しよ。"WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する" http://t.co/QMxZyx7b
WordPressでモバイル向けにテーマを切り替えてる方向けの情報です。 http://t.co/olFPCYHj
WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する http://t.co/c2l3zlqd … そうだったんですねー
WordPressのレスポンスヘッダーにVary HTTP ヘッダーを追加する | Simple Colors WordPressでスマートフォンなどのデバイス対応をする際、WPtouchやWP Mobile Detectorな… http://t.co/9dXVcpqy