open-graph

SEO オンページ：Open Graph

ソーシャルプレビュー向けの Open Graph の作成および実装ルールを定めます。ページ全体のライフサイクルとリリース検証は page-metadata が担当します。

呼び出し時：初回は、役立つ場合、このスキルの対象範囲と重要な理由を1～2文で説明してから、主な出力を提示します。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	共有時に簡潔で役立つ内容にします。SEO タイトルと同じページを指すものにしますが、文言が完全に一致する必要はありません
og:description	ソーシャル共有向けの正確な概要にします。伝える内容を変えずに、メタディスクリプションと異なる文言にできます
og:image	HTTPS の絶対 URL を指定します。ページを適切に表す画像を使い、分かる場合は寸法を含めます
og:url	公開ページを一意に識別する、安定した URL を指定します。通常は canonical として宣言した 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×630 は、複数のプラットフォームで使える一般的な初期値です
形式	プラットフォームが対応するウェブ画像形式を使用し、デプロイ後のレスポンスを確認します
URL	https:// を含む絶対 URL を指定します。相対パスは使用しません
一意性	可能な場合は、ページごとに固有の画像を使用します

よくある間違い

• 絶対 URL の https:// ではなく、相対画像 URL を使用する
• 画像が小さすぎる、またはアスペクト比が適切でない
• 値が空、またはプレースホルダーになっている
• og:url（canonical）がない
• ページを適切に表す画像があるのに、汎用ロゴや無関係な画像を使い回す
• 共有時の文脈に合わせて文言を変える必要があるのに、SEO タイトル／ディスクリプションを機械的にコピーする

実装

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

プレビューサービスはメタデータをキャッシュします。デプロイ済みの絶対 URL をテストし、対応している場合はキャッシュを更新してください。また、生の初期 HTML も確認してください。クライアント側でのみ追加されるタグは、すべてのスクレイパーで利用できるとは限りません。

一貫性の境界

検索とソーシャルフィードでは文脈が異なるため、Open Graph メタデータと SEO メタデータで異なる文言を使用できます。ただし、同じページを示し、同じ製品またはコンテンツについて説明し、裏付けのない主張を避ける必要があります。文字列の完全一致を求めないでください。

関連スキル

• social-share-generator：ユーザーが共有するとき、共有ボタンはOGタグを使ってリッチプレビューを表示します。共有ボタンで適切なカードを表示するには、OGを設定する必要があります。
• article-page-generator：記事や投稿のページにはog:type articleを使用します。記事固有のタグ（published_time、author）を設定します。
• page-metadata：ライフサイクル全体、信頼できる唯一の情報源となる実装、本番環境での検証
• title-tag、meta-description：検索結果向けの文言です。ページの識別性を保ちながら変更できます。
• twitter-cards：TwitterはOGをフォールバックとして使用します。最適な結果を得るには、Twitter固有のタグも追加してください。
• canonical-tag：og:urlは正規URLと一致させてください。
• og-image-generator：プログラムによるOG画像生成 — 6種類のビジュアルスタイル（Terminal/CLI、雑誌エディトリアル、スイス・ミニマリズム、ピクセルレトロ、ブルータリズム、新聞）、Satori+resvg、Puppeteer、AI画像生成ツール、エージェントネイティブなコンテンツ対応ワークフロー。このスキルでは画像タグの設定方法を扱い、og-image-generatorでは画像の作成方法を扱います。