Back to Details

open-graph

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SEO On-Page: Open Graph

页面内SEO：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.
指导为社交媒体预览（Facebook、LinkedIn、Slack、Discord等）实现Open Graph元标签。设置了正确OG标签的页面，点击量比纯URL链接高2-3倍。
调用时机：首次使用时，如果有帮助，可以先用1-2句话介绍本技能涵盖的内容及其重要性，再提供主要输出。后续使用或用户要求跳过简介时，直接提供主要输出。

Scope (Social Sharing)

适用范围（社交分享）

  • Open Graph: Facebook-originated protocol; controls preview card when links are shared on social platforms
  • Open Graph：由Facebook发起的协议；用于控制链接在社交平台分享时的预览卡片

The 4 Essential Tags

4个核心标签

Every shareable page requires these minimum tags:
html
<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">
TagGuideline
og:titleKeep under 60 chars; compelling; match page content
og:description150–200 chars; conversion-focused
og:imageAbsolute URL (https://); 1200×630px recommended
og:urlCanonical URL; deduplicates shares
每个可分享页面都需要以下最低要求的标签：
html
<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:description150-200字符；以转化为导向
og:image绝对URL（https://开头）；推荐尺寸1200×630px
og:url规范URL；避免分享内容重复

Recommended Additional Tags

推荐的额外标签

TagPurpose
og:typeContent type: 
website
, 
article
, 
video
, 
product
og:site_nameWebsite name; displayed separately from title
og:image:width / og:image:heightImage dimensions (1200×630px)
og:image:altAlt text for accessibility
og:localeLanguage/territory (e.g., 
en_US
); for multilingual sites
标签用途
og:type内容类型：
website
、
article
、
video
、
product
og:site_name网站名称；与标题分开显示
og:image:width / og:image:height图片尺寸（1200×630px）
og:image:alt图片的替代文本，用于无障碍访问
og:locale语言/地区（例如
en_US
）；适用于多语言网站

Image Best Practices

图片最佳实践

ItemGuideline
Size1200×630px (1.91:1 ratio) for Facebook, LinkedIn, WhatsApp
FormatJPG, PNG, WebP; under 5MB
URLAbsolute URL with https://; no relative paths
UniqueOne unique image per page when possible
项目指南
尺寸1200×630px（1.91:1比例），适用于Facebook、LinkedIn、WhatsApp
格式JPG、PNG、WebP；文件大小不超过5MB
URL以https://开头的绝对URL；不使用相对路径
唯一性尽可能为每个页面使用独特的图片

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)
  • 使用相对图片URL而非以https://开头的绝对URL
  • 图片尺寸过小或比例错误
  • 留空或使用占位符值
  • 缺少og:url（规范URL）

Implementation

实现方法

Next.js (App Router)

Next.js（App Router）

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',
  },
};
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 (generic)

HTML（通用）

html
<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">
html
<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">

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
  • social-share-generator：分享按钮会使用OG标签生成丰富的预览效果；必须先设置OG标签，分享按钮才能显示正确的预览卡片
  • article-page-generator：文章/帖子页面使用
    article
    类型的og:type；文章专属标签（published_time、author）
  • page-metadata：Hreflang及其他元标签
  • title-tag：标题标签通常与og:title一致
  • meta-description：元描述通常与og:description一致
  • twitter-cards：Twitter会将OG标签作为回退；添加Twitter专属标签可获得最佳效果
  • canonical-tag：og:url应与规范URL保持一致