Как реализовать Angular SEO, meta теги для шейринга (facebook, vk)?

Question

[Nick Nesterov]

Добрый день, столкнулся с такой проблемой: необходимо шейрить (как с помощью кнопки share, так и с копипаста url-а) ссылки в vk и facobook с красивыми постерами и правильными тайтлами. Обычно это реализовывается с помощью мета тегов:

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

Но у меня ангуляр приложение и просто так сделать не выйдет. Первое, что приходит в голову, это сделать вот как то так:

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

И через $rootScope передавать данные. Но что-то мне подсказывает, что это плохая идея.
Есть у кого-то идеи, как можно реализовать красивый шейринг страниц сайта в facebook и vk с отображением картинок, заголовков и описания?

Answer 1

[Dmitry Shvalyov]

На каждый метатег вешаете директиву, в директире в функции link включаете $watch (или $on) переменной из $rootscope и при обновлении заносите в аттрибут content.

Переменная в $rootscope меняется при загрузке новости (или транслируется в $broadcast), например.

Кстати,

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

вот так делать не нужно, лучше добавить в content и property значения по-умолчанию, например общее описание сайта.

Потом всё это дело повесить на Prerender.io, чтобы при запросе от гугла с параметром _escaped_fragment_ выдавалась отрендеренная страница.

Answer 2

[Андрей]

В гугле забанили?
https://github.com/steeve/angular-seo