Динамические метатеги для социального обмена Angular 6+ Universal

Question

Полагаю, этот вопрос задавался слишком много раз, потому что я рассмотрел почти все возможные вопросы, связанные с этим.

Моя потребность упрощена: Я хотел бы создать кнопки социальных сетей для своего сайта, которые используют Angular 7 и имеют универсальную правильную настройку.

Подробности: Я ищу решение, которое позволило бы мне динамически обновлять метатеги для Facebook, Twitter и других социальных сетей таким образом, чтобы при нажатии кнопки «Поделиться» я мог обмениваться контентом, который является специфическим для текущей статьи в представлении. Важное замечание: Данные для этих мета-тегов получают путем вызова API, поэтому решение не может включать жестко закодированные данные.

Пробное решение: Я пробовал решение использовать Meta из «@ angular / platform-browser», но в результате он обновляет теги после того, как DOM уже отрендерен.

ngOnInit моего компонента имеет следующее:

this.musicService.getTrackInfo(track._id)
                .subscribe(track => {  
            this.metaService.setTag('og:title', track.name);
            this.metaService.setTag('og:type', 'music.song'); });

Исследования сделаны:

• https://samvloeberghs.be/posts/better-sharing-on-social-media-platforms-with-angular-universal

Похожие нерешенные проблемы:

• Универсальный угловой рендеринг на стороне сервера, метатеги

• угловые универсальные метатеги обновления с динамическим содержимым

• Обновление мета-тегов для SEO с использованием универсального углового

• Динамическое обновление метатегов с помощью общего ресурса Facebook - угловое 6

Может ли кто-нибудь предоставить полное пошаговое решение этой проблемы, а также объяснения, почему не работает текущий способ использования Meta.

Answer 1

У меня работает updateTag В index.html я добавил все теги без значения, т.е.

<meta name="description" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

Также я добавляю динамические значения так:

this.meta.updateTag({
        name: 'twitter:description', content: *value from api*
      });