open-graph by kostja94/marketing-skills
npx skills add https://github.com/kostja94/marketing-skills --skill open-graph指导如何实现 Open Graph 元标签,以优化社交媒体(Facebook、LinkedIn、Slack、Discord 等)上的链接预览效果。正确设置 OG 标签的页面,其点击率比仅显示纯 URL 链接的页面高出 2 至 3 倍。
调用时机:在首次使用时,如果对用户有帮助,可以先用一两句话介绍此技能涵盖的内容及其重要性,然后提供主要输出。在后续使用或用户要求跳过介绍时,直接提供主要输出。
每个可分享的页面都需要以下这些最低限度的标签:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://yourdomain.com/image.png">
<meta property="og:url" content="https://yourdomain.com/page">
| 标签 | 指南 |
|---|---|
| og:title | 保持在 60 个字符以内;引人注目;与页面内容匹配 |
| og:description | 150–200 个字符;侧重于转化 |
| og:image | 绝对 URL(https://);推荐尺寸 1200×630 像素 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| og:url | 规范 URL;避免重复分享 |
| 标签 | 用途 |
|---|---|
| og:type | 内容类型:website、article、video、product |
| og:site_name | 网站名称;与标题分开显示 |
| og:image:width / og:image:height | 图片尺寸(1200×630 像素) |
| og:image:alt | 替代文本,用于无障碍访问 |
| og:locale | 语言/地区(例如 en_US);适用于多语言网站 |
| 项目 | 指南 |
|---|---|
| 尺寸 | 1200×630 像素(1.91:1 比例),适用于 Facebook、LinkedIn、WhatsApp |
| 格式 | JPG、PNG、WebP;小于 5MB |
| URL | 使用 https:// 的绝对 URL;不要使用相对路径 |
| 唯一性 | 尽可能为每个页面使用唯一的图片 |
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',
},
};
<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Alt text">
article;以及文章特定的标签(published_time、author)每周安装量
219
代码仓库
GitHub 星标数
244
首次出现
2026年3月1日
安全审计
安装于
kimi-cli200
cursor200
opencode200
codex199
gemini-cli199
github-copilot199
Guides implementation of Open Graph meta tags for social media previews (Facebook, LinkedIn, Slack, Discord, etc.). Pages with proper OG tags get 2–3× more clicks than bare URL links.
When invoking : On first use , if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
Every shareable page requires these minimum tags:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://yourdomain.com/image.png">
<meta property="og:url" content="https://yourdomain.com/page">
| Tag | Guideline |
|---|---|
| og:title | Keep under 60 chars; compelling; match page content |
| og:description | 150–200 chars; conversion-focused |
| og:image | Absolute URL (https://); 1200×630px recommended |
| og:url | Canonical URL; deduplicates shares |
| Tag | Purpose |
|---|---|
| og:type | Content type: website, article, video, product |
| og:site_name | Website name; displayed separately from title |
| og:image:width / og:image:height | Image dimensions (1200×630px) |
| og:image:alt | Alt text for accessibility |
| og:locale | Language/territory (e.g., en_US); for multilingual sites |
| Item | Guideline |
|---|---|
| Size | 1200×630px (1.91:1 ratio) for Facebook, LinkedIn, WhatsApp |
| Format | JPG, PNG, WebP; under 5MB |
| URL | Absolute URL with https://; no relative paths |
| Unique | One unique image per page when possible |
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',
},
};
<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Alt text">
article for article/post pages; article-specific tags (published_time, author)Weekly Installs
219
Repository
GitHub Stars
244
First Seen
Mar 1, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
kimi-cli200
cursor200
opencode200
codex199
gemini-cli199
github-copilot199
内容策略指南:如何规划可搜索与可分享内容,驱动流量与潜在客户
35,900 周安装