SEO On-Page: Open Graph

ソーシャルメディアプレビュー（Facebook、LinkedIn、Slack、Discord など）用の Open Graph メタタグの実装ガイドです。適切な OG タグが設定されたページは、URL のみのリンクと比べて 2～3 倍以上のクリック数を獲得します。

呼び出し時: 最初の使用時に、このスキルの対象範囲と重要性について 1～2 文で説明すると役立つ場合は、その後メイン出力を提供してください。以降の使用時またはユーザーがスキップを求めた場合は、メイン出力に直接進んでください。

スコープ（ソーシャルシェアリング）

• Open Graph: Facebook 発祥のプロトコル。ソーシャルプラットフォーム上でリンクがシェアされた際のプレビューカードを制御します

4 つの必須タグ

すべてのシェア可能なページには、最低限これらのタグが必要です：

<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×630px
og:url	正規 URL。シェアの重複を排除

推奨される追加タグ

タグ	用途
og:type	コンテンツタイプ：website、article、video、product
og:site_name	ウェブサイト名。タイトルとは別に表示
og:image:width / og:image:height	画像の寸法（1200×630px）
og:image:alt	アクセシビリティ用の代替テキスト
og:locale	言語/地域コード（例：en_US）。多言語サイト向け

画像のベストプラクティス

項目	ガイドライン
サイズ	1200×630px（1.91:1 アスペクト比）Facebook、LinkedIn、WhatsApp 用
フォーマット	JPG、PNG、WebP。ファイルサイズ 5MB 以下
URL	https:// を含む絶対 URL。相対パスは使用しない
ユニーク性	可能な限り 1 ページあたり 1 つのユニークな画像

よくある誤り

• 絶対 https:// URL ではなく相対 URL を使用
• 画像のサイズが小さすぎるまたはアスペクト比が正しくない
• 空値またはプレースホルダー値
• og:url（正規 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（汎用）

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

テスト

• Facebook: Sharing Debugger
• LinkedIn: Post Inspector

関連スキル

• 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 と一致する必要があります