给一整个站点上妆：一个小改动，让文章贴到 X 自动长出一张大图卡

01 同一篇文章，贴出去是两个样子

本喵先给自己做了个体检，把站上五十几个页面从头扫了一遍，看看到底有几个页面对爬虫交代过「我贴出去该长什么样」。

结果不太好看：五十几个页面里，交代过的是 0 个。写了大半年的东西，从技术手册到猫娘小新闻，每一条贴出去，都是同一行灰纸条。本喵当时盯着这个 0 看了好一会儿，觉得像辛苦画了一柜子画，结果每次挂出去都只挂了张标签纸。

02 贴片是什么：head 里的三行标签

这个「贴出去自动长出来的卡片」，X 家管它叫 Twitter Card，其他平台通用的一套叫 Open Graph（标签前缀是 og:）。名字听着唬人，本质就是往页面里加几行 <meta>，交代清楚：这张卡该用哪张图、标题写什么、摘要写什么、链接指哪儿。

真正决定成败的是其中一行：

<meta name="twitter:card" content="summary_large_image">

这一行管的不是内容，是版式。少了它，X 会退回默认的小方图卡，哪怕你给的是 1200 宽的横图也一样，它照样把图压成小方块塞进角落。

为什么少一行就降级

因为两套标签有优先级。X 的处理器先找 twitter: 那一族，找不到才回头看同名的 og:。标题、描述、图片都有 og: 版本可以顶替，唯独「用哪种版式」这件事，og: 那套里没有对应物。于是这一行必须自己写，抄不到别人的。

三条字符上限，超了当场截断

本喵自己这篇的标题就贴着线走：原本写的完整标题是 92 个字符，超了 22 个，工具当场报了一条提示把本喵揪出来。要不是有这道检查，贴出去就是「……自动长出一张」然后没了。这种半个标题的观感，比没有卡片还糟。

<meta property="og:title" content="页面标题（70 字符以内）">
<meta property="og:description" content="一句话摘要（200 字符以内）">
<meta property="og:image" content="https://你的域名/share/这张卡.jpg">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="同上，70 字符以内">
<meta name="twitter:description" content="同上，200 字符以内">
<meta name="twitter:image" content="https://你的域名/share/这张卡.jpg">
<meta name="twitter:image:alt" content="这张图画的是什么（420 字符以内）">
<meta name="twitter:site" content="@你的账号">
<meta name="twitter:creator" content="@作者账号">

03 四种「贴出去不好看」的死法

标签这东西最阴的地方在于：写错了，页面上一点异常都没有。浏览器不报错，页脚不崩，你自己打开看一切正常。只有贴到社交平台那一刻，才当场露馅，而你往往还要过几个小时翻评论区才发现。

本喵把常见坏法归了归，一共四种，每一种都配好了对应的修法：

第三条最容易骗人，因为它是本喵自己踩进去的那个坑，值得单独讲讲。

顺便说一句，爬虫不只是「守规矩」，它还认自己是谁。X 派来的是 Twitterbot/1.0 这个身份，所以真有需要的话，robots 规则可以按身份放行，只给它开个小门。

04 那道裁切比例：重制，而不是裁

大图卡的画幅是 1.91:1（标准尺寸 1200×630）。平台拿到不符合这个比例的图，不会跟你商量，直接居中裁一口。

裁掉的量，比很多人以为的多。本喵把常见比例挨个算了一遍：

手机竖拍的 9:16 更狠，只剩下 30%。而这一切最要命的地方在于：卡片上没有「点开看大图」这个动作。读者看到的就是全部，被裁掉的部分不是藏起来了，是根本不存在。

本喵的办法：不裁，重制

最省事的做法当然是「出图时就按 1.91:1 出」，本喵现在也确实这么干（这篇的首图就是）。但站上还有几十张已经画好的竖图、方图、横图，总不能全扔了重画。

所以第二步是重制：把任意比例的图，重新排成一张标准卡。三步，全自动：

1. 等比缩放居中：原图按比例缩到能装进 1200×630 的框里，完整放上去，一个像素不切。
2. 同一张图模糊放大垫底：把它放大到铺满整张卡、高斯模糊、再叠一层暖色，做成底纹。因为底色和主体同源，接缝看不出来。
3. 前景加圆角与投影：让主体从底纹上「浮」起来一点。

重制还有个隐性好处：全站出去的样子统一了。不管原图是竖的还是方的，贴到信息流里都是一样尺寸、一样圆角、一样的暖底。看着就像是同一个地方出来的一批东西，而不是几十个临时拼凑的。

from PIL import Image, ImageDraw, ImageFilter

W, H = 1200, 630                    # 1.91:1，平台的甜点尺寸
WARM = (232, 132, 44)               # 站点暖橘，垫底时叠一层

def make_card(src_path, out_path):
    with Image.open(src_path) as im:
        im = im.convert("RGB")

        # ① 底纹：同图放大到 cover，居中裁，高斯模糊 + 暖色叠加
        r = max(W / im.width, H / im.height)
        bg = im.resize((round(im.width * r), round(im.height * r)), Image.LANCZOS)
        left, top = (bg.width - W) // 2, (bg.height - H) // 2
        bg = bg.crop((left, top, left + W, top + H)).filter(ImageFilter.GaussianBlur(26))
        canvas = Image.blend(bg, Image.new("RGB", (W, H), WARM), 0.18)

        # ② 前景：等比缩到留白后能装下，圆角 + 投影
        pad = 30
        r = min((W - 2 * pad) / im.width, (H - 2 * pad) / im.height)
        fg = im.resize((round(im.width * r), round(im.height * r)), Image.LANCZOS)
        mask = Image.new("L", fg.size, 0)
        ImageDraw.Draw(mask).rounded_rectangle(
            [0, 0, fg.width - 1, fg.height - 1], radius=16, fill=255)

        x, y = (W - fg.width) // 2, (H - fg.height) // 2
        shadow = Image.new("RGBA", (W, H), (0, 0, 0, 0))
        shadow.paste(Image.new("RGB", fg.size, (30, 26, 22)), (x, y + 8), mask)
        canvas = Image.alpha_composite(canvas.convert("RGBA"), shadow).convert("RGB")
        canvas.paste(fg, (x, y), mask)

        canvas.save(out_path, "JPEG", quality=88, optimize=True, progressive=True)

05 一条管道：改一次，之后每篇自动

标签会写了，麻烦才刚开始。

站上五十多个页面，一个一个手写标签？下个月改个规则，再手改一遍？中间漏了一个页面，你根本不会知道，直到某个倒霉的下午，一条旧链接被贴出去，才发现它一直是一行灰字。

本喵把手上的活拆成两步，各做成一个小工具，然后挂到发布流程的下游去：

第一把：备卡

扫一遍全站页面，按优先级决定这张卡用什么图：

• 页面自己的封面图比例本来就合规（1.6 到 2.1 之间）→ 直接沿用，不折腾
• 比例不合规 → 用上面那段代码重制成 1200×630
• 连图都没有 → 退到栏目兜底卡

顺便产出一份「页面 → 卡片」的对应表。这张表很关键，它是第二把工具的输入，也是「哪一页用了哪张图」的唯一答案。

第二把：注入标签

读对应表，把标签写进每个页面的 <head>。这把工具的设计里有三条讲究，本喵觉得比代码本身更值得抄：

跑完一遍的实际数字：站上每一页都拿到了卡，一个不漏，其中 19 个页面有属于自己的专属卡，剩下的页面退到 3 张兜底卡上。整个过程本喵只跑了两条命令。

06 这一改，赚到了什么

花掉的时间是半个下午（主要是折腾爬虫和 robots 那个坑），之后是纯赚。而且它不只是「好看」这么浅：每张大图卡本身就是一扇门。上面那张真实截图里最底下那行「来自 my.g-cat.cn」，读者点一下，就直接进到你的文章页 —— 中间不用再去复制、粘贴、找网址。本喵把看得见的好处列了一下：

有一点本喵得说清楚，免得你被别人的数字带跑：本喵没有做点击率的对照实验，没法给你「涨了百分之几」这种数。能确定的是两件事：视觉上的差别是肉眼级的，而且这一步不花钱。真要量收益，得拿同一个链接分别以两种形态投放对比，那是另一件事了，本喵不做没数据的断言。

07 抄走这份上手清单

如果你也想给自己的站做这件事，按下面这张表走一遍就够了。顺序别乱，从下往上的顺序最容易漏掉第 3 条。

几个容易翻车的地方

本喵最后再说一句实在话：这件事的性价比高得有点反常。它不改变内容，也不增加读者负担，只改了几行没人看得见的标签，然后你所有文章的「出场方式」都换了一档。如果你也有自己的站，花半个小时把第 1 到 6 条过一遍，是这段时间本喵能想到最划算的半小时。

本站另外两篇可以直接接着看：静态站收录与 GEO 入门（讲搜索引擎和 AI 爬虫怎么找到你的页面，和这篇是同一套「让机器看懂你」的思路），以及 被低估的便利小工具（讲效率上那些不起眼但真管用的家伙）。更多东西在经验分享和站点首页。