网页自定义Facebook/Twitter/QQ/微信分享预览

我们幸幸苦苦做完网站后或多或少都会分享链接,如何让我们分享的链接分享更好看呢?就需要对各主流平台一一进行内容配置。

Facebook 的 Open Graph 和 Twitter Card 想必我们都很了解,使用相应的 meta 标签,定义相关内容即可。

Facebook

挑一些重点来说,一般常用的就如下几个:

<!-- Facebook Open Graph -->

<meta property="og:site_name" content="图筑风暻" />
<meta property="og:url" content="nousbuild.org" />
<meta property="og:title" content="图筑风暻" />
<meta property="og:image" content="http://nousbuild.org/icon.png" />
<meta property="og:description" content="欢迎访问图筑风暻官网。" />

如果需要更多 meta 标签,你可以访问 Facebook 页面,或是 The Open Graph protocol 查看:

地址:Facbook Open Graph(可能需要科学上网)

地址:The Open Graph protocol

Twitter

Twitter 采用的也是 meta 标签,只是标记不同,常用的如下:

<!-- Twitter Card -->

<meta name='twitter:card' content='欢迎访问图筑风暻官网。' />
<meta name='twitter:site' content='@图筑风暻' />
<meta name="twitter:url" content="nousbuild.org" />
<meta name='twitter:title' content='图筑风暻 | Scenery Architecture' />
<meta name='twitter:image' content='http://nousbuild.org/icon.png' />
<meta name='twitter:description' content='欢迎访问图筑风暻官网。' />

用法也不用多说,大家肯定都很熟悉,如果需要更多 meta 标签,你可以访问 Twitter 页面:

地址:Twitter Card(可能需要科学上网)

QQ

咱们主流的社交软件当然是就是 QQ 和 微信了,下面先来介绍 QQ 链接自定义预览的方法吧:

<!-- QQ Sharing -->

<meta itemprop="name" content="图筑风暻" />
<meta itemprop="image" content="http://nousbuild.org/icon.png" />
<meta name="description" itemprop="description" content="Scenery Architecture" />

QQ 非常人性化,使用了通用标准,在 QQ移动Web开发平台 中可以看到示例:

也非常简单,仅仅只有 标题、缩略图、站点描述或内容,三个标签。

微信

最后一个,微信。为什么把微信放到最后一个写?是因为重要吗。当但不是!我放到最后一个仅仅是因为微信是最坑的一个!

你访问微信 JSSDK 文档会发现,仅仅只有引入 js 的方法,凭什么一个简单功能我还要引入微信的 js,不仅拖累加载速度,而且三天两头随意更改规则!气愤!!

于是我开始看看其他大企业的官网网站都是怎么设置的,直到我看到了星巴克的中文官网

让我们查看下星巴克的源代码:

星爸爸真是很良心的帮我们把注释的写好了,最底下的这个就是我们要的:

<!-- WeChat Sharing -->

<script>
  var WECHAT_TITLE = '图筑风暻';
  var WECHAT_DESC = 'Scenery Architecture';
  var WECHAT_IMAGE = 'http://www.nousbuild.org/icon.png';
  var WCHAT_NO_GA = '';
</script>

怎么样,很奇葩的使用了 js 模块来实现,而且插入 <script> 会导致此文章保存错误,真是坑。微信目前我发现了只有 标题、缩略图、站点描述或内容,三个标签。由于找不到官方资料,如果以后发现还有更多标签,我在更新此文章。

注意问题

最后说几个注意问题:

  1. 顺序。有时候你的通用 meta 标签在微信标签之前,读取时有时候会直接读取通用 meta 标签的内容,如果你的微信标签的题目与通用标签的题目不一致,很可能在分享链接时会出现内容替换。
  2. 缩略图。缩略图的链接如果使用相对链接出现问题,建议该用绝对链接。图片最好是正方形,尺寸大于等于300px。

如果你找到更多内容,欢迎评论交流。

发表评论

电子邮件地址不会被公开。