Question

我遇到了问题，我想知道哪些方法更适合修复它。我在角度4中使用MetaService来更新动态地在社交媒体中共享的组件中的“meta”标签，但是，例如，facebook sharer无法识别更新的值并在对话框共享中加载我的标签的默认值。所以，我问，有哪些方法可以解决这个问题？

Answer 1

Angular是SPA（单页应用程序），意味着客户端只会从服务器获取一次内容，然后处理到客户端中不同页面的路由。

在幕后，网络服务器被配置为将所有流量路由到一个html文件，该文件是包含应用程序代码的/index.html。您需要的是一种基于初始请求URL提供不同元标记的方法。我所知道的两个选项是：

使用服务器端呈现

使用服务器端渲染，Angular将为每条路线生成静态页面，使您能够为每条路线设置特定的元标记。

有关将应用程序转换为使用服务器端呈现的信息，请参阅this tutorial

使用Node.js，Express＆amp; ejs将元数据注入index.html

使用Express ejs library，您可以动态地将meta标签注入index.html

使用ejs，您将index.html重命名为index.ejs并将其配置为包含变量

<title>
<%=title%>
</title>
<meta itemprop="description" content="<%=description%>">

配置Express以使用ejs根据请求的URL提供不同的元数据

router.get('/pageOne', function(req, res, next) {

var metaData = {
       title: 'Page One',
       descriptio: 'This is page one'
   };

res.render('index.ejs', metaData );
});

router.get('/pageTwo', function(req, res, next) {

var metaData = {
       title: 'Page two',
       descriptio: 'This is page two'
   };

res.render('index.ejs', metaData );
});

Answer 2

Facebook和Twitter抓取工具（与Google不同）不执行任何JavaScript，因此您必须通过服务器端渲染来执行此操作。我是通过切换到Angular Universal然后使用MetaService来完成的。

请注意，移植到Angular Universal可能是一个重大变化，因此在决定是否要实现跨越之前，请先进行研究。

在angular4中以动态更新社交分享的元标记

2 个答案: