用爱发电！让知乎分享链接自定义图片

起因：知乎链接分享图片不尽人意

身为产品汪，每天都会把官网更新的功能、活动发到各个平台。

今天早上产品发来一条知乎链接，说图片不对，是不是写错了？我打开一看，图片确实不对。

链接分享到知乎后的展示效果是这样的：

但我们实际设置的图片应该是这样的：

图片差别好大啊！

寻找解决方案

为什么实际显示的图片和我们设置的图片不一致？

百度了一下，发现这是由于知乎的卡片自定义功能。知乎会自动抓取链接中图片的 <meta> 标签，提取 og:image 中设置的图片地址。

如果链接中没有设置 <meta og:image> 标签，知乎就会提取链接页面的第一个 <img> 标签中的图片地址。

我们的官网中 <meta og:image> 标签的设置如下：

<meta property="og:image" content="https://xxx.jpg" />

图片地址是我们希望知乎展示的图片，但是链接页面中的第一个 <img> 标签的图片地址是我们官网的 logo，所以知乎抓取到的图片就是 logo。

完美解决

想要让知乎分享链接显示自定义的图片，就需要在链接页面中设置 <meta og:image> 标签，并指定希望显示的图片地址。

修改后的代码如下：

<meta property="og:image" content="https://xxx.jpg" />
<img src="https://xxx.png" />

设置 <meta og:image> 标签后，知乎就会抓取该标签中的图片地址，而不是链接页面中的第一个 <img> 标签中的图片地址。

再次分享链接到知乎，图片就显示正确了：

问题完美解决！