草庐IT

Angular 4 - 为 Facebook 动态更新元标签(打开图)

coder 2024-02-28 原文

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

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

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

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，因为我已经添加了具有默认值的静态标签。当我检查元标记值时，此代码成功更新了它们。

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

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

我的问题是，如何让 Facebook/Whatsapp 动态获取更新的标签值？我正在使用 Angular 4 并通过 API 调用加载所有数据，因此在页面加载和脚本执行之前无法获取任何类型的数据。

最佳答案

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

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

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

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

我猜你已经使用了类似 ngx-meta 的东西添加 og 标签？

Angular Universal - 在 Angular 2/3/4/5 中使用元标记进行服务器端渲染

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

构建时的 Angular 通用预渲染

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

替代解决方案

使用代理预渲染 Angular 以提供 OG 标签

如果你想避免在构建过程中实现服务器端/预渲染(设置 Angular 通用有时对于结构化不好的应用程序来说是一种痛苦。)你可以尝试使用代理服务预渲染你的页面。看看例如。 prerender.io .

覆盖index.html

将所有请求重定向到覆盖 og:tags 的脚本。例如。 Using PHP and .htaccess to overwrite og tags这在现代环境中也是可能的。例如。您可以使用 cloudfront/api 网关和 lambda 函数。虽然还没有看到这方面的例子。

Facebook 缓存和 Open Graph 调试

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

使用Facebook Debugger调试开放图缓存和清除 facebook 开放图缓存

关于Angular 4 - 为 Facebook 动态更新元标签(打开图)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53626492/

FacebookAngularnoreferrernoopenerfacebook-graph-apifacebook-opengraphmeta-tags

有关Angular 4 - 为 Facebook 动态更新元标签(打开图)的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  3. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  4. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  5. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  6. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  7. objective-c - 在设置 Cocoa Pods 和安装 Ruby 更新时出错 - 2

    我正在尝试为我的iOS应用程序设置cocoapods但是当我执行命令时:sudogemupdate--system我收到错误消息:当前已安装最新版本。中止。当我进入cocoapods的下一步时:sudogeminstallcocoapods我在MacOS10.8.5上遇到错误:ERROR:Errorinstallingcocoapods:cocoapods-trunkrequiresRubyversion>=2.0.0.我在MacOS10.9.4上尝试了同样的操作，但出现错误:ERROR:Couldnotfindavalidgem'cocoapods'(>=0),hereiswhy:U

  8. ruby - 如何通过 Rubocop 指示打开 & :read as argument to File. - 2

    我有这个代码File.open(file_name,'r'){|file|file.read}但是Rubocop发出警告:Offenses:Style/SymbolProc:Pass&:readasargumenttoopeninsteadofablock.你是怎么做到的？ 最佳答案 我刚刚创建了一个名为“t.txt”的文件，其中包含“Hello,World\n”。我们可以按如下方式阅读。File.open('t.txt','r',&:read)#=>"Hello,World\n"顺便说一下，由于第二个参数的默认值是'r'，所以这样

  9. ruby - 在 Ruby 中动态创建数组 - 2

    有没有办法在Ruby中动态创建数组？例如，假设我想遍历用户输入的书籍数组:books=gets.chomp用户输入:"TheGreatGatsby,CrimeandPunishment,Dracula,Fahrenheit451,PrideandPrejudice,SenseandSensibility,Slaughterhouse-Five,TheAdventuresofHuckleberryFinn"我把它变成一个数组:books_array=books.split(",")现在，对于用户输入的每一本书，我想用Ruby创建一个数组。伪代码来做到这一点:x=0books_array.

  10. ruby-on-rails - Rails Associations 的更新方法是什么？ - 2

    这太简单了，太荒谬了，我在任何地方都找不到关于它的任何信息，包括API文档和Rails源代码:我有一个:belongs_to关联，我开始理解当您没有关联时您在Controller中调用的正常模型方法与您有关联时调用的方法略有不同。例如，我的关联在创建Controller操作时运行良好:@user=current_user@building=Building.new(params[:building])respond_todo|format|if@user.buildings.create(params[:building])#etcetera但我找不到关于更新如何工作的文档:@user

随机推荐