Facebook graph api 在Vue JS don'中打开图形元标记；不显示图像

我设计了一个博客，我希望在分享到社交网络时，预览图像会显示在帖子中

---

当Facebook检查您的页面以查找元数据时，他们不会运行您的Javascript。Vue永远不会运行，您的标记永远不会被替换。这是Facebook爬虫的一个限制

---

这意味着您确实必须在服务器级别渲染这些标记，无论是通过Vue的服务器端渲染还是通过其他方法（我不知道您运行的是哪种类型的服务器）。但最终，您必须能够将此值硬编码到服务器响应中，否则它将不会显示在Facebook中。

您的标题和标题模板的结构错误

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: [ ...
    ]
}

---

它在谷歌搜索引擎优化中表现最佳，我处理这件事的方式是创建一些中间件，解析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`);
});

UpdateStatags函数：

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));
}

---

我在本文中对此进行了详细介绍。

感谢您的贡献，但我认为问题在于我没有做ssr，您是否找到了其他方法（如果没有做ssr）？一个解决方案是使用Nuxt.js，它嵌入了SSR并在应用程序发展的过程中生成必要的元数据。谢谢，但这并不能解决问题。正确的答案仍然是@Jeffy。你找到解决方案了吗？我验证的答案在这个问题上启发了我很多。事实上，由于vuejs基本上是为制作SPA而开发的，因此，在Facebook、Google、twiter等第三方读者的不同页面上添加元数据是不直观的；瓦萨普。一种解决方案是使用Nuxt.js，即使在应用程序发展时，它也会生成所需的元数据。

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`);
});

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));
}