📦 open-graph — 社交分享优化

v1.1.0

指导用户为网页添加或优化 Open Graph 元标签，使分享到 Facebook、Twitter 等社交平台时标题、图片、描述自动呈现最佳效果，并提供 Next.js、HTML 示例代码与调试工具链接。

0· 120·0 当前·0 累计

by @kostja94 (Kostja Zhang)

开发工具网络工具文档工具生产力工具数据处理

下载技能包

最后更新

2026/4/5

安全扫描

VirusTotal

无害

查看报告

OpenClaw

安全

high confidence

This is an instruction-only helper that provides guidance and code snippets for adding Open Graph meta tags and does not request credentials, install software, or perform unrelated actions.

评估建议

This skill is an instruction-only guide for creating Open Graph tags and appears coherent and low-risk: it asks for no credentials and installs nothing. Before using: (1) review generated tags to ensure they match your site and canonical URLs, (2) host OG images on HTTPS-accessible URLs as recommended, and (3) be aware that agents can invoke skills autonomously by default — since this skill is read-only guidance, that is low risk. If you need the agent to modify live pages or upload images, pref...

详细分析 ▾

✓ 用途与能力

名称与描述（Open Graph metadata）与 SKILL.md 内容一致：包括最佳实践、示例标签及 Next.js 与普通 HTML 的代码片段，所有请求均与创建或优化 OG 标签相关。

✓ 指令范围

SKILL.md 仅聚焦编写与测试 OG 元数据，仅提供指南、示例标记/代码及官方预览/调试工具链接；不含读取本地文件、获取凭证或向第三方端点发送数据的指令。

✓ 安装机制

无安装规范或代码文件，技能纯指令性，不会写入磁盘或下载任何内容。

✓ 凭证需求

未请求环境变量、凭证或配置路径，指南无需任何机密信息或外部令牌。

✓ 持久化与权限

always 为 false，且无修改代理/系统设置或其他技能的指令。默认允许自主调用，但技能范围不授予额外权限或持续存在。

安全有层次，运行前请审查代码。

运行时依赖

无特殊依赖

版本

latestv1.1.02026/3/27

Automated batch sync

● 无害

安装命令

点击复制

官方npx clawhub@latest install open-graph

镜像加速npx clawhub@latest install open-graph --registry https://cn.longxiaskill.com

技能文档

实现 Open Graph meta tags，用于社交媒体预览（Facebook、LinkedIn、Slack、Discord 等）。带有正确 OG 标签的页面，点击量比裸 URL 高出 2–3 倍。

调用时： 首次使用，如有帮助，先用 1–2 句话说明本技能覆盖范围及其重要性，再给出主体内容。 后续使用或用户要求跳过时，直接进入主体内容。

范围（社交分享）

Open Graph：源自 Facebook 的协议；控制链接在社交平台上的预览卡片

4 个必备标签

每个可分享页面至少需要以下标签：

标签	规范
og:title	控制在 60 字符以内；有吸引力；与页面内容一致
og:description	150–200 字符；以转化为目标
og:image	绝对 URL（https://）；推荐 1200×630px
og:url	权威 URL；用于去重分享

图片最佳实践

项目	规范
尺寸	1200×630px（1.91:1 比例）适用于 Facebook、LinkedIn、WhatsApp
格式	JPG、PNG、WebP；小于 5MB
URL	绝对 URL 带 https://；禁止相对路径
唯一性	尽可能每页使用一张独特图片

常见错误

使用相对图片 URL 而非绝对 https://
图片过小或宽高比错误
空值或占位符
缺少 og:url（权威链接）

实现

Next.js（App Router）

export const metadata = {
  openGraph: {
    title: '...',
    description: '...',
    url: 'https://example.com/page',
    siteName: 'Example',
    images: [{
      url: 'https://example.com/og.jpg',
      width: 1200,
      height: 630,
      alt: '...'
    }],
    locale: 'en_US',
    type: 'website',
  },
};

HTML（通用）

测试

Facebook：Sharing Debugger
LinkedIn：Post Inspector

标签	用途
og:type	内容类型：`website`、`article`、`video`、`product`
og:site_name	网站名称；与标题分开显示
og:image:width / og:image:height	图片尺寸（1200×630px）
og:image:alt	无障碍替代文本
og:locale	语言/地区（如 `en_US`）；适用于多语言站点