Cookbook: Getting OG and meta tags working with nginx, pre-render.io and docker

Get Involved Contributing
1

For my startup I needed a way for certain pages to be pre-rendered so that crawlers can view the OG Tags and meta tags. This is so they can easy unfurl links and show the meta image and promo images.

What we get from doing this

  • Dynamic title tags
  • Dynamic description
  • Custom OG images and meta tags (For twitter, facebook etc)

Here is what it looks like.

image
image708×484 67.4 KB

How it works

  • We build a Docker setup with nginx in front serving our static assets.
  • Requests hit nginx
  • Nginx determines if its a bot and serve up a prerendered version
  • If the request is not a bot, it serves up the SPA version.

See the following link for Github gist with the Dockerfile and nginx.conf
Redwood Cookbook - Getting OG and meta tags working with nginx, pre-render.io and docker (github.com)

I currently deploy this using render.com which deploys this config with each deploy and does a health check for uptime checks.

Community improvements welcome!

  • Currently, this is using the hosted version of prerender.io, but the project is open source and this cookbook can be extended to include the self-hosted version.
7 Likes
2

Looks great!

Main difference I would do personally is to use 1.1.1.1 as resolver. Cloudflare is generally faster and may be (most likely) a safer privacy option because of their APNIC partnership.

Seeing this (ref);

[...]
   location / {
        try_files $uri @prerender;
    }

    location @prerender {
        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
            set $prerender 0;
        }

        resolver 8.8.8.8;

        if ($prerender = 1) {
            set $prerender "service.prerender.io";
            rewrite .* /https://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
[...]

Reacting like this;

2 Likes
3

Good tip! I am actually using cloudflare as DNS provider too so that works out.