Dinamically更新社交分享的meta标签在angular4
问题描述:
我遇到了一个问题,我想知道哪些方法更值得建议来解决它。我在角度4中使用MetaService来更新组件中的'meta'标签,这些标签将在社交媒体*享,但是,例如,facebook sharer不会识别更新的值并在对话框共享中加载我的标签的默认值。那么,我问,解决这个问题的方法有哪些?Dinamically更新社交分享的meta标签在angular4
答
Angular是SPA(单页应用程序),这意味着客户端只会从服务器获取内容一次,然后处理到客户端不同页面的路由。
在引擎盖下,Web服务器被配置为将所有流量路由到一个包含应用程序代码的/index.html html文件。您需要的是一种基于初始请求url提供不同元标记的方法。我知道的有两个选项:
使用服务器端呈现
使用服务器端渲染,角会为每个使您可以设置特定的meta标签为每个路由以及路由静态页面。
见this tutorial在转换应用程序中使用服务器端渲染
使用Node.js的,快速& EJS到元数据注入index.html的
使用ejs library与Express可以动态地注入元标记到您的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);
});
请在你的问题相关的代码。你可以阅读更多关于[如何在这里提问](https://*.com/help/how-to-ask):) – 0mpurdy