What is Vary: User-Agent?

Vary: User-Agent is a HTTP header stating that different content is served to different users, often being used in mobile SEO when pages have different versions for different screens. This HTTP header helps search engines like Google determine the mobile version of a page and can be used by caches to establish how to cache pages.

Why use the Vary: User-Agent header?

Google recommends you use the Vary: User-Agent HTTP header when your site displays different content for mobile users than it does for desktop users. This is an important HTTP header if you’re using dynamic serving to provide mobile content to users or if you have a separate mobile URL setup. You don’t need to worry about this header if you user responsive web design as this design means that same content is shown to all of your users.

When a web server that gives different content to different users receives a request for a URL, it must identify the device requesting the URL and return a mobile page or desktop page depending on the type of user. If every request was made to the web server, this process would work. However, your site content is cached in a number of different ways in several places.With so many internet users, it would be impossible for web servers to serve every request. This is where caching comes in.

What is caching?

Caching is when a page or resource (like an image or a css file) is remembered and saved by something that isn’t your web server. Content delivery networks, internet service providers (ISP) and user browsers may have viewed your page before, so rather than bothering your busy server they use the page and resources they already have on record.

When a web server provides different content to different people for the same URL, problems arise in the caching process. This is because the caching system doesn’t know which version of your page to cache. Say an ISP was caching your pages. Because your server displays varied content depending on the type of user, the ISP wouldn’t know what to remember.

The Vary: User-Agent HTTP header partly solves this issue by ensuring that a user gets the right content, though the caching system doesn’t cach your page at all. However, this will mean that Google will not understand your site and will see pages wrong which can affect your ranking. As the most important rule of mobile SEO is to ensure that Google understands that your pages can be mobile, this isn’t good. A considerable part of how Google understands your pages is through HTML, so if Google is receiving the wrong HTML this will mean Google will misunderstand your page and in turn affect your rankings.

This is where the Vary: User-Agent comes in.

Using Vary: User-Agent

First, you need to decide whether you actually need to use it. You should use this header if:

You dynamically serve different content for the same URL

You’re redirecting mobile users to a different mobile URL

Don’t use the header if you always serve the same content for the same URL, as is the case with responsive design or a no mobile solution.

Vary: User-Agent in .htaccess (Apache)

To do this, you would add the following to your .htaccess file:Header append Vary User-Agent

Adding this to your .htaccess file will mean the header is on your pages, though you may need to use conditional serving of this header for appropriate file types.

Vary: User-Agent via PHP

If you’re only setting the Vary: User-Agent header for certain pages, you can do it via PHP like so:

<?php

header(“Vary: User-Agent, Accept”);

?>

Vary: User-Agent in Nginx

You need ngx_headers_more for this solution, something that is not included in default install. This is the code you would use for this fix:more_set_headers -s 200 “Vary: ” “Accept-Encoding, User-Agent”;

Vary: User-Agent in WordPress

Headers are usually set in functions.php for WordPress users, and this code can be used in that file to add Vary: User-Agent:

function add_vary_header($headers) {

$headers[‘Vary’] = ‘User-Agent’;

return $headers;

}

add_filter(‘wp_headers’, ‘add_vary_header’);

So to ensure that Google can read your pages correctly and your rankings aren’t affected, use the Vary: User-Agent HTTP header where required.

Where to next, captain?

We’ve got hundreds of guides on the site, just check out our list of SEO articles here. But if we could pick one article for you to read and action to improve your website on a massive scale, it’s this one: 84 SEO Tips for any website. Even if you implement just one of these tips, you’ll see your organic traffic improve. Happy optimising!