Mobile Seo Vary: User-Agent header

When your webserver is providing different content to mobile users than it is to desktop users Google recommends using the Vary: User-Agent HTTP header. ¹

• If you are using dynamic serving to provide mobile content to users or have a separate mobile url setup, this header is important to know about and use.
• If your webpages are using responsive web design, this does not affect you because your webserver is sending the same content to all users.

HTTP Vary: User-Agent header

This HTTP header is basically just saying...

"Howdy. Just so you know, depending on who requests this webpage, we may provide different content".

This communication is important because you do not want desktop users to see your mobile site, and you do not want your mobile users seeing your desktop site.

To ensure that Google understands your page correctly we will need to explore the Vary HTTP header and briefly cover requests and caching.

To check your pages for the Vary header use the Mobile SEO tool.

The Request

A webserver that is serving different content for different users gets a request for a url (like www.example.com). The webserver then identifies the device requesting it and returns a mobile page to a mobile user or a desktop page to a desktop user.

This would work out fine if every request made was to the web server, but the reality is that your webpage content is cached in many different ways in many different places.

The cache

There are alot of people on the internet and if web servers had to serve each and every request they would be very busy indeed.

The solution to this problem is caching.

What is caching?

It is where a page or resource (like an image or a css file) are remembered and saved by something other than your web server.

This means that a user seeing your webpage, may have never even requested anything from your server.

The user seeing your page may just be seeing what someone else has remembered.

Places like content delivery networks, internet service providers, or the users browser itself may have already seen your page before and rather than bother your busy server, they provide the page and resources they have on file.

This process is called caching and it works really really well. In fact the internet depends on it quite a bit.

Back to the Vary HTTP header

When a webserver provides different content to different people for the same url, problems occur with the caching process.

The problem is the caching system does not know which version of your page to cache. Let's say that an ISP (internet service provider) is caching your pages. Since your server is providing different content to different users (mobile vs desktop) the ISP won't know what to remember.

This problem can be resolved by the Vary HTTP header. It is not always solved ideally, but the main issue of ensuring the user gets the right content is solved even if the solution is that the caching system does not cach your page at all.

Enter search engines

If Google does not understand your site or is seeing your webpages wrong, it affects your ranking negatively.

That is bad.

In fact the number one rule in mobile SEO is to make sure Google understands that your pages can be mobile.

Google caches things too

A big part of the way Google understands what your page is about is the html of that page.

If Google is getting the wrong html (let's say your mobile page instead of your desktop page) then Google is getting the wrong idea about your webpage. This also means your rankings in Google may not be what they should be because Google is not understanding your webpage correctly.

This is a huge problem.

To fix this problem we use the Vary: User-Agent Http header.

How to use the Vary: User-Agent HTTP header

First you must decide if you need to use it.

• Use this header if you dynamically serve different content for the same URL.
• Use this header if you are redirecting mobile users to a different mobile url.
• Do not use this header if you are always sending the same content for the same url (examples: responsive design or no mobile solution).

If you need to create this header for your pages here is how.

Setting Vary: User-Agent in .htaccess (Apache)

Adding this to your .htaccess file will include the header for your webpages, you may need to use conditional serving of this header for appropriate file types.

Setting Vary: User-Agent in Wordpress

For Wordpress users the headers are typically set in functions.php and the following code can be used in that file to add Vary: User-Agent.

Setting Vary: User-Agent via PHP

If you are setting the Vary header for only certain pages, you can do it via PHP like this.

Setting Vary: User-Agent in Nginx

Note: This solution requires ngx_headers_more which is not included in default install.

Check your Vary HTTP header

To see what Vary header a page is using enter a url into the Mobile SEO tool.