Social metatags for vue app

If you have vue.js app that consumes some api (like laravel) on other domain, and you want to have metatags for social sharing.

But vue is SPA and doesn’t give html metatags (although some advanced bots can have chrome rendering) but most of them don’t.

So you can make nginx setting so for certain user agents it will rewrite url for backend and on backend on this url you need to render metatags.

Here example that will show to bots backend metatags for any url that starts with /profiles/.

server
{
 server_name myapp.com;
 access_log /var/log/nginx/myapp.com_access.log;
 error_log /var/log/nginx/myapp.com_error.log;

 location /profiles/
 {
  if ($http_user_agent ~* "facebook|Twitterbot|Pinterest|LinkedInBot|Google|Applebot")
  {
   rewrite ^/profiles/(.*)$ https://api.myapp.com/profiles/$1 last;
   break;
  }


  # Your fpm, etc settings
 }
}