Have You Implemented The Vary-Http Header?

Before you get started with the Vary HTTP header you need to understand User-Agent Detection.

What is User-Agent Detection?

Whenever you use a web page either from your phone, tablet or a desktop the browser sends a string along to the web server that is called a user-agent. This string provides the web server some information about what type of device is requesting the web page.

If you try accessing a web page using an iPad then the Safari browser will display a string like the one below

Mozilla/5.0 (iPad; CPU OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1

Sites that have implemented the user agent detection see that string and send a different version of the webpage to the user the one that is optimized for the user viewing it on an iPad or a smartphone device.

How Caching Works?

Caching is basically used by Internet service providers, browsers, search engines and content delivery networks as a means to store content to deliver it faster for a returning user. These systems save web pages to skip server request. This helps them serve content fast. Caching saves a lot of load time and improves the experience on the web.

How Vary HTTP header helps right caching

When you use the Vary HTTP header

  1.  Caching systems keep multiple copies of your page in its cache. One copy for each user agent.
  2. In few cases, it might decide to deliver the page the instruction to your web server to service the request.

Either way, this ensures that the right content is being served.

How Vary-HTTP header plays a role in Mobile SEO?

If you have optimized your website for mobile experience then chances are that you have used one of the following approaches

  • Responsive – All content is served on a single URL with no server-side instructions based on device type. Since there is only a single version of the page all user agents are served the same content. For this reason, we need NOT use the Vary HTTP header.
  • Dynamic Serving – In dynamic serving certain elements of your webs page are served from the server side in order to make it appear user-friendly on mobile. Here the content on mobile is different from the web and we need to inform caching systems the same.
  • Separate mobile OR m. site – When you create a separate mobile website for your site you will have to serve different URLs based on the user agent. Each of those URLs has to be served based on the device the caching system is using.

How to check for Vary HTTP header?

Note that Vary HTTP header should only be applied to sites which use dynamic mobile serving or separate mobile URLs. If your site qualifies then you can make a check for this header by entering your homepage URL in this cool Mobile SEO tool by Varvy.

If your site doesn’t implement the Vary HTTP header then it should show up as below.

How to implement the Vary HTTP header for WordPress?

Step 1: Visit Theme Editor section under appearance from your WordPress Dashboard.

Step 2: Open Functions.php on your mobile and desktop themes.

Step 3: Add the following code to each of those files and click “Update File”

function add_vary_header($headers) {
$headers[‘Vary’] = ‘User-Agent’;
return $headers;
}
add_filter(‘wp_headers’, ‘add_vary_header’);

A word of caution on using Vary HTTP Header

  • It might affect your site speed – Although it helps in serving the right content a Vary Header can increase the load on web servers. This, in turn, increases load time because of the huge number of user agents. To minimize the impact use only the most popular user agents or the user agents which show up most in your Google Analytics account.
  • Not all CDNs support Vary HTTP header – This means that a single version is being served or everytime a request is made from a user the CDN relies on the web server to deliver content. This is like wasting cost invested in a Content Delivery Network whose primary job is to serve content from a cache. A workaround for this could be to serve variable content between your desktop and mobile sites from your server while content common across all devices from a CDN.

 

 

Keep Learning

Should I use the Vary HTTP header on URLs that redirect based on user-agent?

Dynamic Serving Google Developers Guide

Vary User Agent Guide by Varvy

After working 7+ years as a digital marketer for startups and large enterprises I quit my job to start EcommerceYogi. Here I share the exact same tactics which I have used to drive millions of users per month to e-commerce stores. Follow me on Linkedin and Twitter to stay connected.