Vue JS 中的开放图元标记不显示图像
open graph Meta Tags in Vue JS don't show image
我设计了一个博客,我希望在分享到社交网络时,预览图像显示为 Medium's posts
<meta property="og:image" content="https://medium.com/js-dojo/getting-your-head-around-vue-js-scoped-slots-281bf82a1e4e"/>
我使用带有 webpack 和 vue-meta 的 vuejs2 来更改我的 post 的动态图像。
但是对于 Facebook,即使我把它们放在 index.html.
中也没有用
我发现 this article on medium 那里说必须使用 Server Side Rendered,但没有说如何从具有基本配置(没有 SSR)的完全设计的项目迁移到项目解决问题。架构已经不同了,我没有参考
这是我的代码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'}
]
}
}
当 Facebook 检查您的页面以查找元数据时,他们不会 运行 您的 Javascript。 Vue 从不 运行s,你的标签永远不会被替换。这是 Facebook 爬虫的限制。
这意味着您确实必须在服务器级别呈现这些标签,无论是通过 Vue 的服务器端呈现还是通过其他方法(我不知道您使用的是什么类型的服务器 运行ning) .但是,是的,最终,您必须能够将此值硬编码到您的服务器响应中,否则它不会显示在 Facebook 中。
您的标题和 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: [ ...
]
}
它在 google https://support.google.com/webmasters/answer/79812?hl=en
中表现最佳 SEO
我处理这个问题的方法是创建一些中间件来解析 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(/\d{9}/) || [])[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 中详细介绍了此方法。
我设计了一个博客,我希望在分享到社交网络时,预览图像显示为 Medium's posts
<meta property="og:image" content="https://medium.com/js-dojo/getting-your-head-around-vue-js-scoped-slots-281bf82a1e4e"/>
我使用带有 webpack 和 vue-meta 的 vuejs2 来更改我的 post 的动态图像。 但是对于 Facebook,即使我把它们放在 index.html.
中也没有用我发现 this article on medium 那里说必须使用 Server Side Rendered,但没有说如何从具有基本配置(没有 SSR)的完全设计的项目迁移到项目解决问题。架构已经不同了,我没有参考
这是我的代码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'}
]
}
}
当 Facebook 检查您的页面以查找元数据时,他们不会 运行 您的 Javascript。 Vue 从不 运行s,你的标签永远不会被替换。这是 Facebook 爬虫的限制。
这意味着您确实必须在服务器级别呈现这些标签,无论是通过 Vue 的服务器端呈现还是通过其他方法(我不知道您使用的是什么类型的服务器 运行ning) .但是,是的,最终,您必须能够将此值硬编码到您的服务器响应中,否则它不会显示在 Facebook 中。
您的标题和 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: [ ...
]
}
它在 google https://support.google.com/webmasters/answer/79812?hl=en
中表现最佳 SEO我处理这个问题的方法是创建一些中间件来解析 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(/\d{9}/) || [])[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 中详细介绍了此方法。