Javascript 用于社交共享的Vue应用程序元标记
我开发了一个Vue应用程序，每个页面上都有导航和内容。我需要的是为Twitter和Facebook卡的每个不同页面设置元标记。为此，我使用vue元库，并提出了以下代码：Javascript 用于社交共享的Vue应用程序元标记,javascript,vue.js,twitter,vue-meta,Javascript,Vue.js,Twitter,Vue Meta,我开发了一个Vue应用程序，每个页面上都有导航和内容。我需要的是为Twitter和Facebook卡的每个不同页面设置元标记。为此，我使用vue元库，并提出了以下代码： metaInfo() { return { meta: [ { property: 'og:title', content: `Card #${this.card_no ? this.card_no : ''}`, vmid: 'og:title'
metaInfo() {
return {
meta: [
{
property: 'og:title',
content: `Card #${this.card_no ? this.card_no : ''}`,
vmid: 'og:title'
},
{
property: 'og:image',
content: `${this.card ? this.card.participantA.image : ''}`,
vmid: 'og:image'
},
{
property: 'og:description',
content: `${this.card ? this.card.description : ''}`,
vmid: 'og:description'
},
{
property: 'twitter:title',
content: `Card #${this.card_no ? this.card_no : ''}`,
vmid: 'twitter:title'
},
{
property: 'twitter:image',
content: `${this.card ? this.card.participantA.image : ''}`,
vmid: 'twitter:image'
},
{
property: 'twitter:description',
content: `${this.card ? this.card.description : ''}`,
vmid: 'twitter:description'
},
{
name: 'twitter:card',
content: `summary_large_image`,
vmid: 'twitter:card'
}
]
}
}
属性是从mounted（）钩子上的API获取的，我可以看到它们被正确添加了。但是共享仍然不起作用，我认为它们需要添加到main index.html中吗？但这在我的情况下是不可能的，因为它们是动态的，并不总是固定的。有办法解决这个问题吗？我知道SSR可以解决这个问题，但目前这不是一个选项，因为此时使用Nuxt重新编写大部分应用程序是不可接受的。您可以在任何vue应用程序中不使用Nuxt实施SSR。不幸的是，我自己没有做过。但是，您可以查看此软件包：
我面临着类似的问题，并花了大量的时间来制定正确的解决方案，在已经测试过的生产就绪代码中，只需要最少的代码更改 你可以在这里看到我的问题-
我终于绕了一圈，它就像一个符咒。如果您在it设置中遇到任何问题，我可以进一步帮助您。您可以看到rendertron如何在这个沙盒应用程序中呈现特定页面-爬虫程序不执行JS，因此任何使用JS的解决方案都无法工作。您将看到元正在被渲染，因为您的浏览器正在执行它 我有一个类似的问题，我最终使用了以下解决方案
- 我使用AWS CloudFront为应用程序提供服务，我有一个REST API，数据来源于此
- 我创建了一个用于检查推荐人的
- 开始进行RESTAPI调用，只呈现一个带有metas的空白页面
注释：谷歌和Co不认为这是伪装，至少现在是这样。
< P>简单地解释我所做的是从上面的所有评论中得到一些建议并在其中使用一个解决方案，不久我在我的Express后端添加了另一个中间件来拦截社交机器人：//Social bots intercept
app.use('/info/:id', function (req, res, next) {
let userAgent = req.headers['user-agent'];
if (userAgent.startsWith('facebookexternalhit/1.1') ||
userAgent === 'Facebot' ||
userAgent.startsWith('Twitterbot')) {
...
res.render('index', injectData)
next()
<!DOCTYPE html>
<html class="no-js" xmlns:fb="http://ogp.me/ns/fb#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#">
<!-- Facebook metadata -->
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{{description}}">
<meta property="og:image" content="{{image}}">
<meta property="og:url" content="{{url}}">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="{{site_name}}">
<meta name="twitter:image:alt" content="{{alt_image}}">
</head>
<body>
<div id="fb-root"></div>
<div id="app"></div>
</body>
</html>