Angular 4 - 为 Facebook 动态更新元标签(开放图) [英] Angular 4 - Update Meta tags dynamically for Facebook (Open graph)

问题描述

我们如何动态添加/更新元标记，以便 Facebook/Whatsapp 共享对话框选择它们?

How do we add/update meta tags dynamically so that they get picked by Facebook/Whatsapp share dialog?

我将我的 angular 2 应用程序升级到了 angular 4，以便在我们从 API 获取组件中的数据后使用 Meta 服务动态添加/更新元标记.

I upgraded my angular 2 application to angular 4 in order to use Meta service to add/update meta tags dynamically once we get the data in component from API.

到目前为止，在我的组件中，我有

So far in my component, I have

this.metaService.updateTag({ property: 'og:title', content: pageTitle });
this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' });
this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });

我使用 updateTag 是因为我已经使用默认值添加了静态标签.当我检查它们时，此代码成功更新了元标记值.

I am using updateTag because I have added static tags already with default values. This code successfully updates the meta tags values when I inspect them.

我知道 Facebook/Whatsapp 调试器工具不执行任何 javascript 是有道理的，因此它可能永远不会在他们的环境中执行.

I know it makes sense that Facebook/Whatsapp debugger tools doesn't execute any javascript so it won't ever probably be executed in their environment.

我正在使用 https://developers.facebook.com/tools/debug/ 并且它总是选择有意义的默认标签值.

I'm using https://developers.facebook.com/tools/debug/ and it always picks up the default tag values which makes sense.

我的问题是，有什么方法可以让 Facebook/Whatsapp 动态获取更新的标签值?我正在使用 Angular 4 并通过 API 调用加载所有数据，因此在页面加载和脚本执行之前不可能获得任何类型的数据.

My question is, what is the way around so that Facebook/Whatsapp picks up the updated tag values dynamically? I'm using Angular 4 and loading all data via API calls so its not possible to get any sort of data before the page loads and script is executed.

推荐答案

Open Graph OG 标签必须在源代码中！

您需要提供一个静态 html 页面，其中包含 html 源代码中的开放图形标签，如 og:image og:title 和 og:description，因为 facebook、twitter 和 co 只是抓取纯 html 而不通过 javascript 渲染它.Angular 通过 js 动态更新 dom，因此爬虫只得到初始的 index.html.

Open Graph OG Tags must be within the sourcecode!

You need to provide a static html page containing the the open graph tags like og:image og:title and og:description in the html sourcecode, since facebook, twitter and co a just scraping the plain html without rendering it through javascript. Angular dynamically updates the dom through js and therefore the crawlers just get the initial index.html.

有几种方法可以提供包含开放图的 html标签可以解决您的问题:

There are several ways to serve an html containing open graph tags ans solve your issue:

• 使用 angular 通用的服务器端渲染
• 使用代理呈现您的页面
• 动态覆盖 index.html 替换 og 标签
• 提供静态 html 页面(不确定 angular 是否支持)

我猜你已经使用了诸如 ngx-meta 之类的东西来添加 og 标签?

I guess you already use something like ngx-meta to add og tags?

我想服务器端渲染是解决您的问题的最合适的方法.为此，您可以托管节点服务器或使用例如.AWS 拉姆达.这样做的缺点是，您的应用程序必须主动托管并且不能再静态提供.无论如何，这似乎是最好的方法，因为它也改进了 SEO.Angular Universal 是要搜索的术语:

I guess server-side rendering is the most appropriate way to solve your issue. For this you can host a node server or use eg. AWS Lambda. The disadvantage with this, your app has to be actively hosted and can not be served statically anymore. Anyways this seems to be the best way since it also is improves SEO. Angular Universal is the term to search for:

• Angular 通用
• Angular Universal Starter Boilerplate
• Angular Universal PWA，使用 aws lambda 样板进行无服务器渲染的服务器端渲染

您还可以在构建过程中预渲染特定路由，并将 angular 作为具有多个预渲染 index.html 文件的静态应用程序提供服务.如果您只有很少的静态路由，这非常有效.考虑具有动态部分的更通用的路线，这不是解决方案.去服务器端渲染.angular 通用样板 也包含一个示例.请参阅 prerender.ts

You can also prerender specific routes on the build process and serve angular as a static app with multiple prerendered index.html files. If you only have few static routes this works perfectly fine. Thinking of more generic routes with dynamic parts, this is not the solution. Go for server side rendering. The angular universal boilerplate also contains an example for this. See prerender.ts

如果您想避免在构建过程中实现服务器端/预渲染(设置 angular Universal 有时对于结构不佳的应用程序来说很痛苦.)您可以尝试使用代理服务来预渲染您的页面.看看例如.prerender.io.

If you like to avoid implementing serverside / prerendering during the build process (setting up angular universal sometimes is a pain for not good structured apps.) you can try to use a proxy service prerendering you page. Take a look at eg. prerender.io.

将所有请求重定向到覆盖 og:tags 的脚本.例如.使用 PHP 和 .htaccess 覆盖 og 标签 这可以通过现代实现环境也一样.例如.您可以使用 cloudfront/api 网关和 lambda 函数.不过还没有看到这样的例子.

Redirect all requests to an script which overwrites the og:tags. Eg. Using PHP and .htaccess to overwrite og tags this is possible with modern environments too. Eg. you could use cloudfront / api gateway and a lambda function. Have not seen an example for this though.

请注意，缓存可能仍会缓存第一次抓取时的开放图信息.确保您的源代码是最新的，并且清除了所有缓存、nginxx、cloudfront 等反向代理.

Be aware that caches may still have cached the open graph information from their first crawl. Ensure your source code is the lastest and all caches, reverse proxies like nginxx, cloudfront are cleared.

使用 Facebook Debugger 调试打开的图形缓存并清除 facebook opengraph 缓存

Use Facebook Debugger to debug open graph caches and clear facebook opengraph cache

这篇关于Angular 4 - 为 Facebook 动态更新元标签(开放图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！