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

Question

我已经读了很多关于这个问题的 SOF 问题，但没有一个解释为什么这样的事情会发生在我的网站上。URL是这个：https://www.acaciadaborborema.com.br/，你可以检查HTML附带的所有元标记。

丰富的预览在Facebook和Twitter上运行良好，但由于某种原因，它不适用于Whatsapp，甚至不适用于标题+描述。

Answer 1

我已经找到了解决方案，这不是我最初会考虑的事情。

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

编辑：只是一个style标签不会弄乱Whatsapp预览，但一个大的标签会(它是整个Tachyons库(

Answer 2

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

尝试使用相同的模板创建新页面，但提供新的唯一网址。看看这在WhatsApp中是否有效。

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