はむはむエンジニアぶろぐ

365日エンジニアリング

nginxからのレスポンスにVary HTTPヘッダをつける

Vary HTTPヘッダは、スマホ向けコンテンツを扱っているサイトであれば効果を発揮するケースがあります。
今時、スマホ対応していないなんてことは殆どないと思うので、Vary HTTPヘッダを知っておいた方がよい。

Vary HTTPヘッダとは

Varyとは、変化するという意味なのでレスポンス内容が場合によって変化しますよっていうことをアナウンスする。
Vary HTTPヘッダは、User-Agentごとでレスポンス内容が違うときに使用する。
Varyがないと、キャッシュサーバがUser-Agentごとで正しくキャッシュできない可能性がある。
参考: サイトの最適化方法 ~ Vary: Accept-Encoding ヘッダーを設定する


これと同じで、検索エンジンのクローラーも正しく認識できず誤ったキャッシュをしてしまうかもしれない。
参考: スマホ向け表示を分けているときはVary HTTPヘッダーを使うこと

Googleのスマホ向けサイトの推奨事項

英語であるがGoogleがVary HTTPヘッダについて記述されている。
参考: Recommendations for building smartphone-optimized websites

Googleは以下、3つの設定をサポートしているとのこと。

  • responsive web design(レスポンシブ・デザイン)
  • dynamically serve(動的な配信)
  • separate mobile and desktop site(スマホとPCが別々のサイト)

Vary HTTP ヘッダが必要なのはdynamically serve(動的な配信)のみです。

レスポンシブ・デザイン

Googleが推奨している。
PCもスマホも同じコンテンツで、CSSでページのデザインを変更させる。
URLもPCとスマホ同じものを使う。

動的な配信

User-Agent(PCとスマホ)ごとに、別々のHTMLやCSSを返す。
URLはPCとスマホ同じものを使う。

クローラーは、コンテンツを読み込んだだけではスマホ向けのコンテンツの存在することに気が付かない。
なので、「Vary HTTP ヘッダ」をつけてスマホコンテンツも存在することを知らせる必要がある。

スマホとPCが別々のサイト

ex)

  • example.com(PCのURL)
  • mobile.example.com(スマホのURL)

デバイスごとにURLが別れている。

設定方法と確認方法

nginxからのレスポンスにVary HTTPヘッダをつける。
nginx.confに1行追加するだけでよい。

add_header Vary 'User-Agent';

nginxを再起動後、ヘッダがついていることを確認。

$ curl --head サーバのIPアドレス
Vary: User-Agent