ChrAlpha's Blog

Thumbnail-Hexo%20%E5%8D%9A%E5%AE%A2%20%7C%20%E9%93%BE%E6%8E%A5%E5%88%86%E4%BA%AB%E5%8D%A1%E7%89%87%E7%94%9F%E6%88%90%E9%85%8D%E7%BD%AE

Hexo 博客 | 链接分享卡片生成配置

2020-03-05·便签格

如果有接触国外社交媒体的同学可能会发现:在 Twitter / Facebook / Telegram 等平台粘贴一个链接,有时候会自动生成一个带介绍或者缩略图的分享卡片,可是有些链接就不会生成。我稍微摸索后发现,这其实是要经历特殊配置一番的。这里就介绍一下改如何在 Hexo 博客中实现这样的效果。

效果对比

在正文开始前,不妨先看看这些卡片的效果,评估一下你是否愿意花上这几分钟的时间。就拿 Twitter 举例。

unalted image unalted image

不得不说,后者的效果还是远远好于前者的。尽管可能在文字内容上前者耗费了我更多的心血。

如果你想得到这样的效果,那么请你接着往下看。

实现方法

Twitter / Facebook 官方文档已经有十分严谨的介绍了,但是那些描述通常过于冗长,而且使用英文书写,对我们不太友好。毕竟是都是全球运营的企业,无可厚非。我无非在此再次记录一番操作。

Twitter

通过阅读 官方文档 不难得到,目前 Twitter 支持 Summary card / Summary with large image / Player card / App card ,而博主最常使用的当属前两者。

参数都是通用的,我着重介绍我使用的 Summary card with large image

只有当网站的 <head> 标签内有类似以下内容时,卡片才会自动生成:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="{Site name}" />
<meta name="twitter:creator" content="@YourName">
<meta name="twitter:title" content="{Title}" />
<meta name="twitter:description" content="{Desciption}" />
<meta name="twitter:image" content="{thumbnail}" />

肯定不能我们每个页面手动添加,效率过于低下,而且重新 Generate 后全部失效。

我们只需要在生成器中,也就是在你的主题文件夹layout/_partial/head.ejs 插入以下代码。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="<% config.title %>" />
<meta name="twitter:creator" content="@YourName">
<meta name="twitter:title" content="<% page.title %> | <%config.title%>" />
<meta name="twitter:description" content="<% page.description %>" />
<meta name="twitter:image" content="<% page.thumbnail %>" />

这样每次 Generate 时候生成器都会在每个页面的 <head> 中插入对应页面的代码,而且细节也会根据页面的参数自动替换成对应的。

上述代码根据自己情况调整,如 thumbnail 是我自己设置的缩略图参数,放在每篇文章 Front-matter 中,极有可能和你的不一样,同样还有 creator 这些要配置,都要注意换成自己的。

重新生成、部署就能看到效果了。你可以通过 Twitter Card Validator 来检验是否配置成功。

Facebook

在 Facebook 分享就不得不提 OpenGraph 了。OpenGragh 是一个让网页在社交网络中得以更加多元传播的一种协议,而 Facebook 就在使用。

同样的,我们在主题文件夹layout/_partial/head.ejs 插入以下代码。

<meta property="og:site_name" content="<% config.title %>">
<meta property="og:title" content="<% page.title %> | <% config.title %>" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="<%- config.language %>" />
<meta property="og:description" content="<% page.description %>" />
<meta property="og:image" content="<% page.thumbnail %>" />

再部署就可以了。

其实上述两种方法是可以以一种奇怪的形式互相兼容的。

像是我使用第二种协议在 <head> 标签内声明,而只要加上 summary_large_image 的强调,Twitter 就能知道你要使用这种类型的卡片,其他信息都能从 OpenGraph 的声明里对应取得。

而完成上面两者任意一种配置,在 Telegram 中粘贴链接都能很好的生成分享卡片,无需额外配置。不得不说国外社交平台还是挺团结的,不会专门搞自己独占的一套标准。

Hexo 博客 | 链接分享卡片生成配置
本文作者
ChrAlpha
发布日期
2020-03-05
更新日期
2020-03-05
转载或引用本文时请遵守 CC BY-NC-SA 4.0 许可协议,注明出处、不得用于商业用途!