为Hexo博客添加Open Graph标签和Twitter Card标签

这段代码的作用是给每个页面输出社交分享用的元标签，Open Graph标签能用于其它平台，例如Facebook或者搜索引擎收录。（有些时候必应搜索引擎会有卡片式的搜索结果，它就可以引用Open Graph标签中的图片。当然这段是我猜测的，毕竟以前使用Open Graph标签的时候会有带有图片的卡片式的搜索结果）Twitter Card标签则能应用于X平台。这些标签能使得你在分享网站链接的时候能显示标题、描述和图片。

1
2
3
4

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="<%- page.tag ? page.tag + ' | ' + config.title : (page.title ? page.title + ' | ' + config.title : config.title) %>" />
<meta name="twitter:description" content="<%= page.description || config.description %>" />
<meta name="twitter:image" content="<%- config.url %><%= page.cover || theme.banner %>" />

我这里使用的式Twitter 的“大图摘要”卡片样式，分享时会显示一张宽幅大图。其它的样式对于我来说并不是特别的喜欢，如果你想要使用其它的样式的话，可以搜索一下Twitter Card的相关说明，里面会有详细的介绍。

Twitter 卡片的标题，逻辑是一个三层判断：如果页面有 tag，标题为「tag | 站点标题」否则如果页面有 title，标题为「页面标题 | 站点标题」，但是都没有就用站点标题

描述则是优先用页面的 description，没有就回退到站点的 config.description。<%= 表示输出时会转义 HTML。

最后则是Twitter Card大图卡片样式的图片了，我这里是把站点根地址 config.url 和页面的 cover（封面）或主题配置的 banner 拼接成完整 URL。（至于为什么要拼接则是因为我在文章插入图片的时候是以网站根目录路径插入的，并不是以一个完整的网站URL域名路径，如果直接放在标签中的话，X或者其它社交媒体是无法识别的。）

1
2
3
4
5
6

<meta property="og:type" content="<%= page.layout === 'post' ? 'article' : 'website' %>">
<meta property="og:url" content="<%= url_for(page.permalink || config.url) %>">
<meta property="og:site_name" content="<%= config.title %>">
<meta property="og:title" content="<%- page.tag ? page.tag + ' | ' + config.title : (page.title ? page.title + ' | ' + config.title : config.title) %>" />
<meta property="og:description" content="<%= page.description || config.description %>">
<meta property="og:image" content="<%- config.url %><%= page.cover || theme.banner %>">

如果Twitter Card部分能够搞清楚的话，那么Open Graph标签部分也能够很快的搞定，也就是多了几个东西。

首先就是内容类型：如果是文章页（layout 为 post）就是 article，其他页面（首页、归档等）就是 website。

其次就是规范 URL。优先用页面的 permalink，没有就用站点根地址，并通过 url_for() 处理成正确路径。

最后就是站点名称，即 config.title。

以上部分就是Open Graph标签新增的部分，剩下的就和Twitter Card标签设置部分一致——Open Graph 标题、 描述、 图片。

总之这两段代码让同一份页面信息同时以两种格式输出，保证在不同平台分享时都能正确展示标题、描述和配图。