Wordpress Mobile Site SEO: Vary HTTP header

Google’s recommendation for Smartphone-optimized Websites recommends use Vary HTTP header when using mobile site dynamically serving different HTML on the same URL. Google recommend that the server send a hint to request that Googlebot for smartphones should crawl the page, too, and thus discover the mobile content. This hint is implemented using the Vary HTTP header.

After the Content-Type header, a Vary header is sent to (if I understand it correctly) tell intermediate caches, like proxy servers, that the content type of the document varies depending on the capabilities of the client which requests the document.

The Vary HTTP header has two important and useful implications according to Google:

1. It signals to caching servers used in ISPs and elsewhere that they should consider the user agent when deciding whether to serve the page from cache or not. Without the Vary HTTP header, a cache may mistakenly serve mobile users the cache of the desktop HTML page or vice versa.
2. It helps Googlebot discover your mobile-optimized content faster, as a valid Vary HTTP header is one of the signals we may use to crawl URLs that serve mobile-optimized content.

By default, browser will get header from WordPress website like this:

HTTP/1.1 200 OK
Content-Type: text/html
Connection: Keep-Alive
(... rest of HTTP response headers...)

All you need to do is paste the following code into the funcions.php file of theme:

function add_vary_header($headers) {
    $headers['Vary'] = 'User-Agent';
    return $headers;
}

add_filter('wp_headers', 'add_vary_header');

You will get a header similar like this Which means that the contents of the response “will vary” depending on the user agent that requests the page.

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Connection: Keep-Alive
(... rest of HTTP response headers...)

This tiny SEO trick will not change anything besides adding one line into the header response code.