Vue JS中的打开图形元标记不显示图像
Posted
技术标签:
【中文标题】Vue JS中的打开图形元标记不显示图像【英文标题】:open graph Meta Tags in Vue JS don't show image 【发布时间】:2018-05-18 07:00:27 【问题描述】:我设计了一个博客,我希望在分享到社交网络时,预览图像显示为Medium's 帖子中的样子
<meta property="og:image" content="https://medium.com/js-dojo/getting-your-head-around-vue-js-scoped-slots-281bf82a1e4e"/>
我使用 vuejs2 与 webpack 和 vue-meta 来更改我的帖子的动态图像。 但是对于 Facebook,即使我将它们放在 index.html 中也不起作用。
我找到this article on medium ,那里说有必要使用Server Side Rendered,但是没有说如何从一个完全设计的具有基本配置(没有s-s-r)的项目迁移到一个解决问题的项目。架构已经不同了,我没有参考
这是我的代码vue-meta
metaInfo ()
return
title: '41devs | blog',
titleTemplate: '%s - le titre',
meta: [
name: 'viewport', content: 'user-scalable=no',
property: 'og:title', content: 'title',
property: 'og:type', content: 'article',
property: 'og:url', content: 'http://c5e3b0ec.ngrok.io/blog/s',// here it is just ngrok for my test
property: 'og:description', content: 'description',
property: 'og:image', content: 'https://firebasestorage.googleapis.com/v0/b/dev-blog-2503f.appspot.com/o/postsStorage%2F-KxXdvvLqDHBcxdUfLgn%2Fonfleck?alt=media&token=24a9bf5b-dce2-46e8-b175-fb63f7501c98',
property: 'twitter:image:src', content: 'https://firebasestorage.googleapis.com/v0/b/dev-blog-2503f.appspot.com/o/postsStorage%2F-KxXdvvLqDHBcxdUfLgn%2Fonfleck?alt=media&token=24a9bf5b-dce2-46e8-b175-fb63f7501c98',
property: 'og:image:width', content: '1000',
property: 'og:site_name', content: '41devs | blog'
]
【问题讨论】:
你找到解决办法了吗? 我验证的答案在这个问题上启发了我很多。事实上,由于 vuejs 基本上是为制作 SPA 而开发的,因此附加元数据并不直观,这些元数据将从第三方读者(如 Facebook、谷歌、推特)的不同页面读取;瓦萨普。一种解决方案是使用 Nuxt.js,即使您的应用程序不断发展,它也会生成您需要的元数据。 【参考方案1】:当 Facebook 检查您的页面以查找元数据时,他们不会运行您的 javascript。 Vue 永远不会运行,你的标签永远不会被替换。这是 Facebook 爬虫的限制。
这意味着您确实必须在服务器级别渲染这些标签,无论是通过 Vue 的服务器端渲染还是通过其他方法(我不知道您正在运行什么类型的服务器)。但是,是的,最终,您必须能够将此值硬编码到您的服务器响应中,否则它不会显示在 Facebook 中。
【讨论】:
感谢您的贡献,但我认为问题出在我没有做 s-s-r 的事实 你有没有找到任何替代方案(如果不做 s-s-r)? 一种解决方案是使用 Nuxt.js,它嵌入了 s-s-r 并在您的应用程序发展时生成必要的元数据。【参考方案2】:您的 title 和 titleTemplate 结构错误。
return
title: 'Le titre', // Set a current title of page
titleTemplate: '%s - 41devs blog', // Name of your blog/website,
// Title is now "Le titre - 41devs blog"
meta: [ ...
]
它在谷歌 https://support.google.com/webmasters/answer/79812?hl=en 中表现最佳 SEO
【讨论】:
谢谢,但这不能解决问题。 @jeff 仍然给出了正确的答案【参考方案3】:我处理这个问题的方法是创建一些中间件来解析 URL 路径并使用 Cheerio 模块动态更新元标记。
OG 元标记信息文件:
const products = [
id: 111111111,
title: 'Corporate Fat Cat',
ogImage: 'https://cdn.com/corporate.jpg',
description: 'The fat cats in Washington don’t even look this good'
,
id: 222222222,
title: 'Gangsta Cat',
ogImage: 'https://cdn.com/gangsta.jpg',
description: 'That’s how we roll'
,
id: 333333333,
title: 'Mechanic Cat',
ogImage: 'https://cdn.com/mechanic.jpg',
description: 'I have no idea what I’m doing.'
];
中间件:
app.use('/*', (req, res, next) =>
if (/^\/api\//.test(req.originalUrl)) next();
else if (/\/item\//.test(req.originalUrl)) updateMetaTags(req, res);
else res.sendFile(`$__dirname/client/dist/index.html`);
);
updateMetaTags 函数:
async function updateMetaTags(req, res)
// Get and parse products array from app src
const productsSrc = `$__dirname/client/src/products.js`;
const productsText = await fs.promises.readFile(productsSrc);
const productsArr = JSON.parse(productsText);
// Retrieve product object that includes the current URL item id
const productID = (req.originalUrl.match(/\d9/) || [])[0];
const productObj = productsArr.find(prod => prod.id == productID);
// Update the meta tag properties in the built bundle w/ Cheerio
const baseSrc = `$__dirname/client//dist/index.html`;
const baseHTML = await fs.promises.readFile(baseSrc);
const $base = $(baseHTML);
const $url = $base.find('meta[property=og\\:url]');
const $title = $base.find('meta[property=og\\:title]');
const $image = $base.find('meta[property=og\\:image]');
$desc = $base.find('meta[property=og\\:description]');
$url.attr('content', `https://$req.get('host')$req.originalUrl`);
$title.attr('content', productObj.title);
$image.attr('content', productObj.ogImage);
$desc.attr('content', productObj.description);
// Send the modified HTML as the response
res.send($.html($base));
我在blog post 中对此进行了更详细的介绍。
【讨论】:
以上是关于Vue JS中的打开图形元标记不显示图像的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Angular 4 元服务动态更新打开的图形标签? [复制]