Whatsapp 预览不起作用，而 Facebook 和 Twitter 可以

Question

我已经阅读了很多关于此的 SOF 问题，但其中 none 解释了为什么这种事情会发生在我的网站上。 URL 是这个：https://www.acaciadaborborema.com.br/ 你可以检查 HTML.

附带的所有 meta-tags

丰富的预览在 Facebook 和 Twitter 上工作得很好，但出于某种原因，它不适用于 Whatsapp，甚至标题 + 描述也不行。

Answer 1

请注意，大多数服务都会缓存页面的第一个分辨率，并在很长一段时间内使用该缓存版本。虽然 Facebook 提供了一种清除缓存的方法，但 LinkedIn 却没有。 WhatsApp 可能也是如此。

尝试使用相同的模板创建新页面，但提供一个新的唯一页面 url。看看这是否适用于 WhatsApp。

Answer 2

我找到了解决方案，这不是我最初考虑的问题。

我使用 Gatsby.js 来构建我的网站，因此我必须使用 react-helmet 之类的东西来添加元标记，这很好用（因为 gatsby 有 SSR），但问题是通过 元标记前的一个相对较大的样式标记 ，以及网站的一些 CSS。而且，事实证明，Whatsapp 确实关心这一点。

编辑： 只是一个 style 标签不会弄乱 Whatsapp 预览，但一个大标签会（它是整个 tachyons图书馆)

Answer 3

将此添加到您的 gatsby-ssr.js

export const onPreRenderHTML = ({
  getHeadComponents,
  replaceHeadComponents,
}) => {
  const headComponents = getHeadComponents();
  headComponents.sort((a, b) => {
    if (a.type === "meta") {
      return -1;
    } else if (b.type === "meta") {
      return 1;
    }
    return 0;
  });
  replaceHeadComponents(headComponents);
};

来源 https://dev.to/lucis/whatsapp-link-preview-is-weird-d0o

Whatsapp 预览不起作用，而 Facebook 和 Twitter 可以

Whatsapp preview doesn't work while Facebook and Twitter does

gatsby

whatsapp

preview

react-helmet