网页自定义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> 会导致此文章保存错误，真是坑。微信目前我发现了只有标题、缩略图、站点描述或内容，三个标签。由于找不到官方资料，如果以后发现还有更多标签，我在更新此文章。

注意问题

最后说几个注意问题：

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

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

阅读: 3,378

Web 全栈

程序应用

操作系统