如何为Jekyll网站配置Twitter、Discord等平台的链接预览图片？

1. 全局配置（_config.yml） #

你可以在站点配置文件里添加全局预览图参数，所有页面默认复用这个设置：

# 全局Open Graph预览图（适配Discord、Facebook等多数平台）
og_image: "/assets/images/global-preview.jpg"
# Twitter专属预览图（可选，不设置则自动复用og_image）
twitter_image: "/assets/images/twitter-preview.jpg"

• 路径支持网站根目录相对路径，或者直接填完整绝对URL（比如https://your-domain.com/assets/images/preview.jpg），避免平台抓取失败。
• 推荐图片尺寸：1200×630像素，这是Twitter、Discord等平台的最优显示比例。

2. 在页面模板中添加Meta标签 #

平台通过HTML里的Meta标签抓取预览信息，你需要在站点头部模板（通常是_includes/head.html）中添加以下代码，把_config.yml的参数渲染成可被识别的标签：

<!-- Open Graph 核心标签（适配Discord等平台） -->
<meta property="og:image" content="{{ site.og_image | absolute_url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter 专属卡片标签 -->
<meta name="twitter:card" content="summary_large_image"> <!-- 指定大图卡片样式 -->
<meta name="twitter:image" content="{{ site.twitter_image | default: site.og_image | absolute_url }}">

• 必须把twitter:card设为summary_large_image，否则只会显示小卡片或纯文本预览。

3. 单页面自定义预览图（可选） #

如果某篇文章/页面需要单独设置预览图，在该页面的YAML Front Matter里添加参数即可：

---
title: "我的博客文章"
og_image: "/assets/images/post-specific-preview.jpg"
twitter_image: "/assets/images/post-twitter-preview.jpg"
---

同时修改head.html里的Meta标签，优先使用页面级参数：

<meta property="og:image" content="{{ page.og_image | default: site.og_image | absolute_url }}">
<meta name="twitter:image" content="{{ page.twitter_image | default: page.og_image | default: site.og_image | absolute_url }}">

4. 验证预览效果 #

• Discord：直接在聊天框粘贴链接，若之前发过相同链接有缓存，可在链接末尾加随机参数（比如?v=1）强制刷新预览。
• Twitter：使用官方卡片验证工具检查标签是否生效。

内容的提问来源于stack exchange，提问作者Nazchanel