spoq
spoq

Reputation: 193

Varnish is rendering desktop site for google mobile tester

I am using Varnish for caching a mobile and desktop version of my site and then displaying the right one depending on User-agent strings using https://github.com/varnishcache/varnish-devicedetect. But when testing the site with https://www.google.com/webmasters/tools/mobile-friendly/ I get the desktop site. Would it make sense to fork the varnish-devicedetect and add the user agent google uses when visiting the site? Or is there some other solution that would work better?

I know that it would not be a problem if the site would be responsive but that is right now not an option.

Upvotes: 1

Views: 369

Answers (1)

Hafenkranich
Hafenkranich

Reputation: 1744

Use this one:

(subset from https://github.com/varnishcache/varnish-devicedetect)

sub detectbot {
  unset req.http.X-Bot-Detected;

    # mobile bots
    if (req.http.User-Agent ~ "\(compatible; Googlebot-Mobile/2.1; \+http://www.google.com/bot.html\)"
      || (req.http.User-Agent ~ "iPhone" && req.http.User-Agent ~ "\(compatible; Googlebot/2.1; \+http://www.google.com/bot.html")) {
        set req.http.X-Bot-Detected = "mobile-bot";
    }
    # other bots
    elsif (req.http.User-Agent ~ "(?i)(ads|google|bing|msn|yandex|baidu|ro|career|seznam|)bot"
      || req.http.User-Agent ~ "(?i)(baidu|jike|symantec)spider"
      || req.http.User-Agent ~ "(?i)scanner"
      || req.http.User-Agent ~ "(?i)(web)crawler") {
        set req.http.X-Bot-Detected = "bot";
    }
}

save it as detect-bot.vcl (in the same directory as your varnish default.vcl) then at the top of your default.vcl

include "detect-bot.vcl";

Then add the following parts in your .vcl

backend mobile {
    .host = "10.0.0.1";
    .port = "80";
}

sub vcl_recv {
    # add a header "X-Bot-Detected" when this request was done by a bot
    call detectbot;
}

sub vcl_recv {
    # call some detection engine
    if (req.http.X-UA-Device ~ "^mobile-bot" ) {
        set req.backend = mobile;
    }
}
sub vcl_hash {
    if (req.http.X-UA-Device) {
        hash_data(req.http.X-UA-Device);
    }
}

This example sends the requests to another backend. Depending on how stuff works on your setup, you need to adapt the last part. see https://www.varnish-cache.org/docs/4.1/users-guide/devicedetection.html for more examples

Upvotes: 2

Related Questions