Metatags aren't displayed when set them with angularjs

Question

I have one problem with metatags in Angularjs. In my html file I have metatags with content property set like this {{ meta.siteName }}, and on every route I programmatically set these tags. Everything is fine, it sets these tags properly, but whem I'm trying to send link to some page via skype/slack etc, it shows {{ meta.siteName }} and {{ meta.description }} instead of their actual values. Sorry for my bad language.

Answer 1

That's most likely because the Slack and Skype bots do not execute Javascript. Thus, your angular code never gets the chance to replace {{ meta.siteName }} and {{ meta.description }} in the template.

To get this to work, you either have to set them on the server side or use prerendering (for example using https://prerender.io/).

The problem also occurs with other bots that do not execute Javascript, like the Facebook and the Twitter bots. Also, it is not clear how much Javascript is executed by googlebot, so your site might have SEO problems.