SEO On-Page: Open Graph
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.
Scope (Social Sharing)
- - Open Graph: Facebook-originated protocol; controls preview card when links are shared on social platforms
The 4 Essential Tags
Every shareable page requires these minimum tags:
CODEBLOCK0
| 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 |
Recommended Additional Tags
| Tag | Purpose |
|---|
| og:type | Content type: website, article, video, INLINECODE3 |
| 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 |
Image Best Practices
| 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 |
Common Mistakes
- - Using relative image URLs instead of absolute https://
- Images too small or wrong aspect ratio
- Empty or placeholder values
- Missing og:url (canonical)
Implementation
Next.js (App Router)
CODEBLOCK1
HTML (generic)
CODEBLOCK2
Testing
Related Skills
- - social-share-generator: Share buttons use OG tags for rich previews when users share; OG must be set for share buttons to show proper cards
- article-page-generator: Use og:type
article for article/post pages; article-specific tags (published_time, author) - page-metadata: Hreflang, other meta tags
- title-tag: Title tag often mirrors og:title
- meta-description: Meta description often mirrors og:description
- twitter-cards: Twitter uses OG as fallback; add Twitter-specific tags for best results
- canonical-tag: og:url should match canonical URL
SEO页面优化：开放图谱协议
指导实现用于社交媒体预览（Facebook、LinkedIn、Slack、Discord等）的开放图谱元标签。拥有正确OG标签的页面比纯URL链接获得的点击量高出2-3倍。
调用方式：在首次使用时，如有帮助，先用1-2句话说明该技能涵盖的内容及其重要性，然后提供主要输出。在后续使用或用户要求跳过时，直接进入主要输出。
范围（社交分享）
- - 开放图谱：源自Facebook的协议；控制链接在社交平台分享时的预览卡片
4个基本标签
每个可分享页面都需要以下最低标签：
html
| 标签 | 指南 |
|---|
| og:title | 保持在60字符以内；具有吸引力；与页面内容匹配 |
| og:description |
150-200字符；以转化为重点 |
|
og:image | 绝对URL（https://）；推荐1200×630像素 |
|
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；无相对路径 |
|
唯一性 | 尽可能每页使用一张独特图片 |
常见错误
- - 使用相对图片URL而非绝对https://
- 图片太小或宽高比错误
- 空值或占位符值
- 缺少og:url（规范URL）
实现方式
Next.js（应用路由器）
tsx
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（通用）
html
测试工具
相关技能
- - social-share-generator：分享按钮在用户分享时使用OG标签生成丰富预览；必须设置OG才能使分享按钮显示正确的卡片
- article-page-generator：文章/帖子页面使用og:type article；文章特定标签（published_time、author）
- page-metadata：Hreflang及其他元标签
- title-tag：标题标签通常与og:title一致
- meta-description：元描述通常与og:description一致
- twitter-cards：Twitter使用OG作为后备；添加Twitter特定标签以获得最佳效果
- canonical-tag：og:url应与规范URL匹配
