滩涂石

当分享WordPress链接到Mastodon的时候，默认的情况下，WordPress设置的精选图片和文章摘要并不能被Mastodon提取到，于是预览卡片的图片地方只会出现一个灰暗的文件图标，摘要也没有，提供的信息就很少。所以，新的折腾目标已经出现。

效果

就是把这样：↓

变成这样。↓

这是文章页面，此外我对其他页面分享到Mastodon的预览卡片也做了处理，包括非文章页面、分类法页面、首页。简单来讲，有精选图片就显示图片，有摘要就显示摘要。分类法（包括分类和标签）可以设置摘要但不能设图片，于是显示的图片就是其中第一篇有精选图片的文章的图片。分类法没有设置摘要的话也是显示的里面文章的摘要。如果实在没有图片和摘要的话，显示图片就用网站图标，显示摘要就用默认句子（可以是网站说明）。

操作

老样子，还是操作布景主题档案编辑器的functions.php文件。当然你用那种插入代码的插件应该也行。添加以下代码，注意标出来该改的地方要自己改：

add_action('wp_head', 'add_social_meta');

function add_social_meta() {
	
	global $post;
	
	// 设置精选图片为预览图片，如果没有精选图片，则使用网站图标

	$image = has_post_thumbnail() ? get_the_post_thumbnail_url($post->ID, 'large') : '自己网站图标的链接';	
	
	echo '<meta property="og:image" content="'.esc_url($image).'">';
	
	//设置Mastodon卡片类型
	if(has_post_thumbnail()) echo '<meta name="twitter:card" content="photo">';
	
	if(is_single()) {

		//设置文章描述为文章预览描述，如无描述，则截取前155字

		$description = get_the_excerpt() ? get_the_excerpt() :mb_substr(strip_tags($post->post_content),0,155).'...';

		echo '<meta property="og:description" conent="'.esc_attr($description).'">';

		echo '<meta name="description" content="'.esc_attr($description).'">';

		//将文章链接标题设置为文章标题 + 网站标题（与WordPress原设同，可改）
		echo '<meta property="og:title" content="'.get_the_title().' – '.get_bloginfo("name").'">';

		echo '<meta property="og:url" content="'.get_permalink().'">';

		echo '<meta property="og:type" content="article">';

	} else {

		if(is_category()) {

			//将分类页描述设为分类页预览描述

			$term = get_queried_object();
			$description = $term->description;

			echo '<meta property="og:description" content="'.esc_attr($description).'">';

		} else {

			//设置其他页面描述为页面预览描述，如无描述，则使用默认句子

			$description = has_excerpt() ? get_the_excerpt() :'默认句子';
	  
			echo '<meta property="og:description" content="'.esc_attr($description).'">';
		}

	}

}

如无差错，一共要改两个地方，一个是自己网站图标的链接，一个是默认句子。

需要注意的是，如果想达成图2的效果，精选图片还需要使用横向图片，即宽大于高。如果精选图片是竖向或者正方形的图片，则会显示为图1的效果，不同的是原先灰色文件图标处会显示为1:1裁切的精选图片。因为网站图标是方形的，所以当预览图片是网站图标的时候实际上还是图1的格式。

原理

上面代码实际上就是在网页HTML的header部分创建了各种属性的<meta>标签，因为没法直接编辑HTML文档，故而通过PHP来实现。所以如果可以编辑HTML的话也可以直接写在HTML里。

Mastodon在预览卡片处提取的信息主要遵循Open Graph协议，需要我们手动增加的Open Graph标签主要是这两个：

<meta property="og:image" content="展示图片的URL">
<meta property="og:description" content="页面描述">

此外还有og:title，不过这个不用自己添加WordPress也会提供，WordPress默认的网页标题是“文章标题 － 网站名称”，如果想改也可以自己改。

还有一些og:type、og:url之类的属性，我试过都是不用自己添加也不影响预览卡片显示的，不过虽然但是我还是在代码中加了一部分。

除了遵循Open Graph协议的，还有一个重要的标签是遵循的Twitter Cards协议，就是控制你的预览卡片格式是图1还是图2。

但是这里存在一个问题是，Twitter官方提供的twitter:card卡片类型属性值是分为summary、summary_large_image、app和player四种，所以按理说图2的效果应该是summary_large_image这种才对，但是我用这个值死活也改不了卡片格式。

不得已我去翻了Mastodon的官方文档，PreviewCard那里说格式是分为Video、Photo、Link三种，但是至于具体操作，他们给出的代码示范我没有看出来是用在哪里的，所以就还是没搞懂应该怎么改。

无计可施之际，我直接问了AI，让它使得文章链接在Mastodon中显示的preview card type为photo。于是它直接写了twitter:card属性的值为photo。一试，成了。

……啊？？？

这我哪儿想得到！

之前我还笑话Mastodon背地里偷偷遵循Twitter的协议，谁能想到，属性遵循了，值没遵循……

参考

有用的主要有社交媒体元标签科普、Twitter卡片官方指南和Mastodon PreviewCard官方文档，以及对话式AI。