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

Question

У меня есть требование динамически обновлять метатеги, такие как og: title, og: description и og: image, и делиться ими на Facebook, я попробовал все, но ничего не работает.

Итак, прежде всегоЯ попытался установить метатег с помощью JavaScript, как показано ниже:

var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);

, затем я попытался использовать угловой метатег, как показано ниже:

Для добавления: -

this.meta.addTag({ name: 'og:description', content: 'How to use Angular 6 meta service' });

Чтобы обновить: -

this.meta.updateTag({ name: 'og:description', content: 'Angular 6 meta service' });

, но все не удается, и, наконец, я попробовал метапакет ниже,

https://github.com/vinaygopinath/ng2-meta

, но все же у меня проблема с динамическими полямипри публикации URL моего сайта на Facebook , он должен показывать динамическое содержимое, если кто-то публикует URL на сообщении.

, если у кого-то есть идея, пожалуйста, дайте мне знать!

Answer 1

Все подходы, которые вы пробовали, осуществляются на стороне клиента.Здесь нужно понять одну вещь: когда вы публикуете URL-адрес на Facebook, он отправляет запрос на ваш сервер, читает метатеги, а затем обновляет карту на facebook.com.Javascript приходит позже.Так что все подходы, которые вы попробуете, если они выполняются в браузере, здесь не сработают.Я предлагаю вам попробовать одно из следующего:

Использовать рендеринг на стороне сервера Angular Universal, созданный специально для этого.Документацию можно найти по адресу: https://angular.io/guide/universal. Недостатком этого решения является то, что ваши HTML-страницы должны обслуживаться с сервера узла.