How to implement Angular SEO, meta tags for sharing (facebook, vk)?

Question

Facebook

Good afternoon, I ran into such a problem: it is necessary to share (both using the share button and copy-paste url) links in vk and facobook with beautiful posters and the right titles. This is usually implemented using meta tags:

...
<meta property="og:title" content="" />
<meta property="og:image" content="" />
...

But I have an Angular application and it just won't work. The first thing that comes to mind is to do something like this:

...
<meta property="{{meta.property}}" content="{{meta.content}}" />
...

And pass data through $rootScope. But something tells me this is a bad idea.
Does anyone have any ideas how to implement beautiful sharing of site pages in facebook and vk with images, titles and descriptions displayed?

Answer 1

You hang a directive on each meta tag, in the link function include $watch (or $on) in the $watch (or $on) variable from $rootscope in the directive and add it to the content attribute when updating.
The variable in $rootscope changes when news is loaded (or broadcast to $broadcast), for example.
By the way,

<meta property="{{meta.property}}" content="{{meta.content}}" />

you don’t need to do this, it’s better to add default values ​​to content and property, for example, a general description of the site.
Then hang the whole thing on Prerender.io, so that when a request is made from Google with the _escaped_fragment_ parameter, a rendered page is displayed.

Answer 2

Banned on google?
https://github.com/steeve/angular-seo