npx skills add https://github.com/0juano/agent-skills --skill x-image-cards创建看起来像图片而非营销横幅的 X 卡片。让视觉内容本身成为主体——X 已在卡片 UI 中显示你的标题和描述。
| 规格 | 数值 | 原因 |
|---|---|---|
| 尺寸 | 2400×1200 物理像素(1200×600 逻辑像素) | 为视网膜屏提供 2 倍分辨率,2:1 宽高比 |
| 安全边距 | 50-56px 内边距(以 1 倍尺寸计) | X 在移动端会裁剪边缘 |
| URL 格式 | /og/page.png 而非 /og/page?format=png | X 偏好显式文件扩展名 |
| 颜色 | 主色 #FFFFFF,避免使用微妙的灰色 | 缩略图尺寸非常小 |
X 会将 og:title 以白色文字叠加在图片上。使用零宽空格来隐藏它:
<meta property="og:title" content="​" />
在 JSX 中:content={"\u200B"}
你的页面 <title> 保持描述性以利于 SEO——只有 og:title 使用此技巧。
<meta property="og:image" content="https://example.com/og/page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:title" content="​" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/page.png" />
使用 @vercel/og 并设置 2 倍缩放和安全边距:
import { ImageResponse } from '@vercel/og';
const OG_SCALE = 2;
export async function GET(request: Request) {
return new ImageResponse(
(
<div style={{
width: '100%',
height: '100%',
display: 'flex',
backgroundColor: '#0a0f1c',
padding: 100, // 安全边距:50px * 2
}}>
{/* 你的视觉内容放在这里 */}
</div>
),
{ width: 1200 * OG_SCALE, height: 600 * OG_SCALE }
);
}
app.get('/og/:slug.png', async (req, res) => {
const image = new ImageResponse(/* ... */);
const buffer = await image.arrayBuffer();
res.setHeader('Content-Type', 'image/png');
res.setHeader('Cache-Control', 'public, max-age=86400');
res.send(Buffer.from(buffer));
});
对于每个页面的 OG 图片,有两种方法:
在爬虫请求图片时生成:
/og/[slug].png → 收到请求时生成图片
风险: X 爬虫大约 5 秒后超时。冷启动可能超过此时间,导致预览图空白。
在内容创建时生成并存储图片:
// 在内容创建时
const imageBuffer = await generateOgImage(data);
await db.insert({ ogImageData: imageBuffer }); // 存储为 BYTEA
// 收到请求时 - 即时响应
app.get('/og/:id.png', (req, res) => {
const { ogImageData } = await db.get(req.params.id);
res.setHeader('Content-Type', 'image/png');
res.send(ogImageData);
});
预生成确保了对爬虫的即时响应。
.png 扩展名og:title 中使用零宽空格为 BondTerminal 构建。查看实际效果:示例 X 帖子。
每周安装数
9
代码仓库
首次出现
2026 年 1 月 30 日
安全审计
Gen Agent Trust HubPassSocketPassSnykPass
安装于
opencode9
gemini-cli9
claude-code9
codex8
replit7
cursor7
Create X cards that look like images, not marketing banners. Let the visual be the content — X already shows your title and description in the card UI.
| Spec | Value | Why |
|---|---|---|
| Dimensions | 2400×1200 physical (1200×600 logical) | 2x for retina, 2:1 aspect ratio |
| Safe margins | 50-56px padding (at 1x) | X clips edges on mobile |
| URL format | /og/page.png not /og/page?format=png | X prefers explicit extensions |
| Colors | #FFFFFF primary, avoid subtle grays | Thumbnails are tiny |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
X overlays og:title as white text on the image. Hide it with a zero-width space:
<meta property="og:title" content="​" />
In JSX: content={"\u200B"}
Your page <title> stays descriptive for SEO — only og:title uses the trick.
<meta property="og:image" content="https://example.com/og/page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:title" content="​" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/page.png" />
Use @vercel/og with 2x scale and safe margins:
import { ImageResponse } from '@vercel/og';
const OG_SCALE = 2;
export async function GET(request: Request) {
return new ImageResponse(
(
<div style={{
width: '100%',
height: '100%',
display: 'flex',
backgroundColor: '#0a0f1c',
padding: 100, // 50px * 2 for safe margins
}}>
{/* Your visual content here */}
</div>
),
{ width: 1200 * OG_SCALE, height: 600 * OG_SCALE }
);
}
app.get('/og/:slug.png', async (req, res) => {
const image = new ImageResponse(/* ... */);
const buffer = await image.arrayBuffer();
res.setHeader('Content-Type', 'image/png');
res.setHeader('Cache-Control', 'public, max-age=86400');
res.send(Buffer.from(buffer));
});
For per-page OG images, two approaches:
Generate when crawler requests the image:
/og/[slug].png → generates image on request
Risk: X crawlers timeout after ~5 seconds. Cold starts can exceed this, causing blank previews.
Generate and store image when content is created:
// On content creation
const imageBuffer = await generateOgImage(data);
await db.insert({ ogImageData: imageBuffer }); // Store as BYTEA
// On request - instant response
app.get('/og/:id.png', (req, res) => {
const { ogImageData } = await db.get(req.params.id);
res.setHeader('Content-Type', 'image/png');
res.send(ogImageData);
});
Pre-generation ensures instant response for crawlers.
.png extension in URLog:titleBuilt forBondTerminal. See it in action: example X post.
Weekly Installs
9
Repository
First Seen
Jan 30, 2026
Security Audits
Installed on
opencode9
gemini-cli9
claude-code9
codex8
replit7
cursor7
Word文档处理器:DOCX创建、编辑、分析与修订痕迹处理全指南 | 自动化办公解决方案
1,200 周安装