Nginx/Apache redirect based on User Agent

I have built a web application with AngularJs2, when I tried to share one of my page with my Facebook friends, I’d paste the link into the status update box and hope to see my page scrapped and information from OpenGraph protocol used, but unfortunately I saw:

The reason it looks so bad is that crawlers that scrape HTML don’t interpret JavaScript code.

The solution basically is to use some kind of server-side user detection and redirect crawlers to html generated content:

Configuring Nginx to redirect Facebook/Google/Twitter and Pinterest crawlers to html generated page:

Nginx ( add for your current domain configuration ):

if ($http_user_agent ~* "^facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet$") {
   rewrite ^/page/article/(.*)$ http://blog.blogtop.md/?p=$1 last;
}

Apache (.htaccess file):

<ifModule mod_rewrite.c>
RewriteEngine On

# allow social media crawlers to work by redirecting them to a server-rendered static version on the page
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
RewriteRule /page/article/(\d*)$ http://blog.blogtop.md/?p=$1 [P]

</ifModule>

Those lines will redirect all crawlers to HTML generated content that contains headers with OpenGraph content.

For debugging I used cURL:

curl -A "facebookexternalhit/1.1" http://blogtop.md/page/article/1 -v

* TCP_NODELAY set
* Connected to blogtop.md (85.10.197.114) port 80 (#0)
> GET /page/article/1 HTTP/1.1
> Host: blogtop.md
> User-Agent: facebookexternalhit/1.1
> Accept: */*
> 
< HTTP/1.1 302 Moved Temporarily
< Server: nginx/1.10.0 (Ubuntu)
< Date: Wed, 05 Jul 2017 19:04:14 GMT
< Content-Type: text/html
< Content-Length: 170
< Connection: keep-alive
< Location: http://blog.blogtop.md/?p=1

Observe header content for „User-Agent” and response header „Location”.

Hope this post will help enable rich social sharing for your one page AngularJS app.

Lasă un răspuns Anulează răspunsul