一个更好看的twitter卡片主图能带来更好的SEO效果。推特的图有时候就和电商的商品图一样，接触不到实体时大家都是看图来决策购买的。

1. 什么是推特卡片(Twitter Card)

简言之，推特卡片标签是是网页SEO元标签之一。熟悉前端开发的朋友应该都知道是网页head里那堆<meta />标签，用来说明网页的标题，描述，关键词，编码等等信息。

推特卡片属于社交媒体类标签。最早是facebook在2010年提出的，叫Open Graph，是一种互联网协议，用于将网页结构化的分享到社交媒体平台。旨在改善改善用户在Facebook上分享链接时的体验。通过使用Open Graph协议，分享的内容不再是简单的链接，而是可以包含丰富的媒体元素，如图片和视频，以及详细的描述信息，这使得分享的内容更加吸引人，也更有可能吸引用户的互动。

1
2
3
4
5
6

<meta property="og:title" content="网页标题">
<meta property="og:type" content="网站类型，如'website'或'article'">
<meta property="og:url" content="网页的URL">
<meta property="og:image" content="分享时显示的图片URL">
<meta property="og:description" content="网页的简短描述">
<meta property="og:site_name" content="网站名称">

后来LinkedIn和Twitter都跟进支持了该协议。但是Twitter特殊一点, 自己搞了一套twitter协议.

大体也是标题内容描述+图片。

2. 怎么做一张好看的推特卡片图

一个更好看的twitter卡片主图能带来更好的SEO效果。推特的图有时候就和电商的商品图一样，毕竟接触不到实体时大家都是看图来决策购买的。

加上推特改版了只看得到一个很小的标题。所以图片更加需要自解释。

相信读者大多也不是设计师，就算是设计师也过了炫技似设计的阶段了。

那么大多数博客的需求是什么？

  1. 图片能突出当前博文内容, 提炼总结
  2. 宣传当前网站站点和理念

所以我们需要一个方案把文字画到图上去，最好能根据文章动态生成。图的背景不能太丑。

本以为是一个简单的需求，结果google一搜半天没有相关的答案，大多讲的不是twitter卡图片的不相干答案。

只好自己动手。需求1和2提炼一下，大致是先搞个canvas, 画出线性渐变背景，使用google font绘制文字, 自动排版到图片合适位置。方案很简单，为了方便读者博主把方案封装成了cloudflare workers的api, 这么用就可以。

https://twittercardseo.sound2gd.wang?text=文章标题&blog=站点名称理念

复制url到浏览器打开即可预览效果，背后用的是cloudflare worker, 四舍五入约等于不要钱, 感谢赛博菩萨。

3. 集成到Hugo Blog

博主习惯了Hugo，有了API和Hugo集成就比较简单了。

首先要自定义一个partials用来写twitter card元标签, 实现在markdown的front matter里加上twitterTitle标签，自动生成对应的推特卡主图。例如新建layouts/partials/twitter_card.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{ if .Params.twitterTitle }}
{{ $url := printf "%s%s%s%s" "https://twittercardseo.sound2gd.wang?text=" (urlquery .Params.twitterTitle)  "&blog=" (urlquery "\nChris的博客 | AI创业" )|  }}
{{ $image := resources.GetRemote $url }}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ $image.Permalink }}">
{{ else }}
{{- $image := resources.Get "future_image.png" -}}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ $image.Permalink }}">
{{ end }}

代码比较简单, 有go模板功底的很容易看懂。如果写了twitterTitle就调用api生图, 并默认带上站点信息。没有指定就用博客站点默认图。

再把这个twitter_card.html加入到head里就完成了。

1
2
3
4
5

...
{{if .Site.Params.twitter }}
    {{ partial "twitter_cards.html" . }}
{{ end }}
...

以上，希望读者能有所收获, 制作自己满意的推特卡提升SEO效果。