与Facebook分享动态更新元标签-角度6 [英] Dynamic update meta tags with facebook share - angular 6

问题描述

我需要动态更新og:title，og:description和og:image等元标记，并在Facebook上共享它们，我已经尝试了所有方法，但无济于事.

I've requirement to update meta tags like og:title,og:description and og:image dynamically and share the same on facebook, I've tried everything but nothing works.

因此，首先，我尝试使用如下所示的javascript设置元标记:

So first of all I've tried to set meta tag with javascript like below:

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

然后我尝试使用如下所示的角度元标记:

then I've tried to use angular meta tag like below:

要添加:-

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' });

但是一切都失败了，最后我在meta包下面尝试了

but that all fails and finally I've tried below meta package,

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

但在将我的网站网址共享给Facebook 时，动态字段仍然存在问题，如果有人在发布后发布网址，它应该显示动态内容.

but still I'm having issue with dynamic fields while sharing my site url to facebook, it should show dynamic contents if someone post url on post.

如果有人有主意，请让我知道！

if anyone have idea please let me know!

推荐答案

您尝试过的所有方法都是在客户端进行的.您需要在这里了解一件事:当您在Facebook上共享URL时，它将向您的服务器发出请求，读取meta标签，然后在facebook.com中更新卡.JavaScript稍后发布.因此，无论您尝试使用哪种方法，如果它正在浏览器中执行，都将无法在此处使用.我建议您尝试以下方法之一:

All the approaches you have tried are happening at client-side. You need to understand one thing here: When you share a URL on Facebook, it makes a request to your server, reads the meta tags, then updates the card in facebook.com. Javascript comes later. So whatever approaches you try, if it is executing in the browser, will not work here. I suggest you try one of the following:

使用Angular Universal的服务器端渲染，此渲染正是为此而构建的.该文档位于: https://angular.io/guide/universal .该解决方案的缺点是必须从节点服务器提供HTML页面.

Use the Angular universal's server-side rendering, which is built just for this. The documentation can be found at: https://angular.io/guide/universal. The down-side of this solution is that your HTML pages must be served from a node server.

这篇关于与Facebook分享动态更新元标签-角度6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！