mcpField
O
og-image

og-image

github.com/tushaarmehtaa营销与增长1247 次安装2 周前更新
代码仓库

关于 og-image

用于为网站添加动态 Open Graph 图片和社交媒体元数据的开发技能，涵盖多种框架与静态 HTML，并提供设计和预览检查指导。

主要功能

  1. 01检测框架与现有元数据
  2. 02配置动态 OG 图片路由
  3. 03添加页面级 Open Graph 和 Twitter 标签
  4. 04指导信息流预览图片布局
  5. 05使用平台验证工具检查预览

适用场景

  1. 01为 Next.js 网站添加分享图片
  2. 02为动态内容生成单页预览图
  3. 03为 Astro 或静态页面设置社交元数据
  4. 04排查缺失或异常的链接预览

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tushaarmehtaa/tushar-skills --skill og-image

安装后在 Claude Code 中输入/og-image确认已加载。

详细介绍

动态 OG 图像生成与完整的 meta 标签体系——一个路由覆盖所有页面。别人分享你的链接时，它们不再显得失效。

阶段 1：检测技术栈

检查代码库：

  • 框架：Next.js App Router / Pages Router / Astro / Remix / 静态 HTML？
  • 现有 meta 标签：在布局文件中搜索 og:image、twitter:card
  • 动态页面：博客文章、产品页面、技能页面——任何需要单独 OG 图像的页面？

如果已经存在 meta 标签，请先审核，再进行任何更改。

阶段 2：框架专属配置

Next.js App Router（推荐方案）

创建 app/api/og/route.tsx：

import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || '[Project Name]';
  const description = searchParams.get('description') || '[One-line description]';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#09090b',
          color: '#fafafa',
          fontFamily: 'system-ui, sans-serif',
          padding: '60px',
        }}
      >
        <div
          style={{
            fontSize: 64,
            fontWeight: 'bold',
            marginBottom: 24,
            textAlign: 'center',
            lineHeight: 1.1,
          }}
        >
          {title}
        </div>
        <div
          style={{
            fontSize: 28,
            opacity: 0.55,
            textAlign: 'center',
            maxWidth: '80%',
            lineHeight: 1.4,
          }}
        >
          {description}
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

在 app/layout.tsx 中添加——从 package.json、README 或首页文案中读取实际的项目名称和描述：

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL || 'https://yourdomain.com'),
  openGraph: {
    title: '[Project Name]',
    description: '[One-line description]',
    images: [{
      url: '/api/og?title=[Project Name]&description=[Description]',
      width: 1200,
      height: 630,
    }],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: '[Project Name]',
    description: '[One-line description]',
    images: ['/api/og?title=[Project Name]&description=[Description]'],
  },
};

对于动态页面（博客文章、技能页面、产品页面），按页面覆盖：

// app/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const item = getItem(slug);
  if (!item) return {};

  const ogUrl = `/api/og?title=${encodeURIComponent(item.title)}&description=${encodeURIComponent(item.description)}`;

  return {
    title: `${item.title} — [Site Name]`,
    description: item.description,
    openGraph: {
      images: [{ url: ogUrl, width: 1200, height: 630 }],
    },
    twitter: {
      images: [ogUrl],
    },
  };
}
Next.js Pages Router

创建 pages/api/og.tsx，使用相同的 ImageResponse 逻辑。 通过 _app.tsx 中的 next/head 或各页面中的 <Head> 添加 meta 标签。

Astro

安装：npm install satori @resvg/resvg-js

创建 src/pages/og/[...slug].png.ts 作为端点，使用 satori 生成 PNG 缓冲区，并通过 Content-Type: image/png 返回。

在 src/layouts/Layout.astro 的 <head> 部分添加 meta 标签。

静态 HTML

生成一次静态 og-image.png（1200×630），并引用它：

<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

对于包含许多页面的静态网站，可以考虑在构建时为每个页面生成 OG 图像。

阶段 3：必需的 Meta 标签

每个页面都需要这些标签。将它们注入基础布局：


<meta property="og:type" content="website" />
<meta property="og:url" content="[Canonical page URL]" />
<meta property="og:title" content="[Page title]" />
<meta property="og:description" content="[Page description — 1-2 sentences]" />
<meta property="og:image" content="[OG image URL — absolute, not relative]" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="[Page title]" />
<meta name="twitter:description" content="[Page description]" />
<meta name="twitter:image" content="[OG image URL — must match og:image]" />

可能导致预览失效的常见错误：

  • 在 og:image 中使用相对 URL——必须使用绝对 URL（https://...）
  • 设置了 og:image，却没有设置 twitter:image——Twitter 会忽略 og:image
  • 缺少 og:image:width 和 :height——会导致渲染缓慢，有时还不会显示预览
  • 未在 Next.js 中设置 metadataBase——所有相对 URL 都会失效

阶段 4：设计规则

图像在桌面端以 1200×630 渲染，在移动端则会裁剪为缩略图。设计时要兼顾两种场景：

  • 文字在宽度为 300px 时必须清晰可读——这就是它在 Slack/Twitter 信息流中的显示效果
  • 将所有内容限制在中央 80% 区域内——各平台会以不可预测的方式裁剪边缘
  • 优先使用深色背景——在浅色模式的信息流中更醒目
  • 标题：48-64px 加粗——缩略图尺寸下仍然清晰可读
  • 描述/副标题：24-32px，降低不透明度——提供辅助信息
  • 对比度至少达到 4.5:1——兼顾浅色和深色模式平台

阶段 5：验证

部署后，将你的 URL 粘贴到以下工具中。不要跳过这一步——代码中的 meta 标签看起来可能正确，但实际出错的情况往往比你预想的更常见：

  • Twitter Card 验证器：cards-dev.twitter.com/validator
  • LinkedIn 帖子检查器：linkedin.com/post-inspector/
  • Facebook Debugger：developers.facebook.com/tools/debug/（也适用于 WhatsApp）
  • 快速检查：将 URL 粘贴到任意 Slack 频道中
[ ] OG image route returns valid image at /api/og (or equivalent)
[ ] og:title, og:description, og:image all set in base layout
[ ] og:image:width and og:image:height set
[ ] twitter:card set to summary_large_image
[ ] twitter:image set (separate from og:image — both required)
[ ] og:image URL is absolute, not relative
[ ] Dynamic pages have per-page og:image with correct title param
[ ] Image readable at 300px thumbnail width
[ ] Verified in Twitter Card Validator or LinkedIn Inspector

评论

支持 Markdown