WordPress搭建日记 Vol.4 – OG预览卡片

域主前几天安装了两个Open Graph卡片预览的插件:

分享本站的文章到其他地方可以显示卡片式预览,写文章引用链接也可以加入带有预览的卡片。

虽然不是什么需要推广的商业化站点,不过为了在Steam分享文章链接的时候醒目一点,还是尝试了一下,效果不错。

好吧,首先介绍一下Open Graph,又称开放图谱协议,它是由Facebook推行的开放元数据标准,OG协议在网页头部生成元数据(meta)嗯这很meta,让人们在社交网站平台分享网站链接时,可以直接展示链接的预览信息。

主要的预览形式就是OG Cards卡片(亦称之为Twitter Cards),几乎所有的网站都可以添加OG卡片的信息,然后在社交平台上分享,平台会自动抓取网站信息生成卡片预览。

这样,发布的分享链接就不是一行枯燥的URL,而是一个醒目的图文卡片,包含封面缩略图、简单的标题与摘要,甚至可以嵌入音视频……

支持展示OG协议网站链接的社交平台主要有:

  • Facebook、Twitter这类基于公开时间线的社交媒体,还有自托管的Mastodon和其他一些联邦网络……
  • 即时通讯(IM)比如Discord、Telegram、Slack、M$ Teams还有Steam Chat……
  • 以及一些特别的文章/博客平台,比如Medium、日本的一些写作社区

国内的朋友可能并没有什么印象,因为国内几乎没有社交网络平台能够显示OG卡片的预览(好像B站还是有站外预览卡片的……),都是长长的裸链接一笔带过,虽然我已经远离国内的平台很多年了,何况分享链接都是已停止访问(哈哈)

当然我也不怎么用国外的社交媒体,特别是马斯克上台以后我就不用Twitter了,至于Mastodon那些根本就没法用……话虽这么说,对域主这样臭打游戏的来说,OG卡片在Steam Chat还是有些用武之地:

另外还有WordPress,也就是博客本身,虽然没有官方支持*,但是可以通过插件实现文章中插入链接卡片的功能,正是基于OG的元数据读取实现的

*实际上WordPress自己有一个私有的嵌入卡片,只能用同样是WP站点的内容,以及一些第三方社交媒体的内容

效果如下:

景の域 | 远景的幻想空间
远景的幻想空间
v1sta.xyz


WordPress的插件库有很多设置Open Graph卡片的插件,比如下面这个:

之前我用的是JM Twitter Cards插件,不过功能比较少,更偏向于Twitter的发布。马斯克上台和Twitter关闭卡片验证器以后,这个插件我就没怎么用了

https://cn.wordpress.org/plugins/jm-twitter-cards/

而在文章中插入内容我使用的是Bookmark Card插件,开箱即用,完美兼容古腾堡编辑器的指令,功能直观简单

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注