Domain 162 / 225

OGP / og:image はソーシャル拡散時の表示を決める SNS SEO の要

OGP の要点

OGP（Open Graph Protocol）は SNS でリンクをシェアした時の表示を制御する標準。og:image（1200x630px 推奨）/ og:title / og:description で表示が決まる。X / Facebook / LINE / Slack ですべて使われる SNS SEO の中核

なぜこれを学ぶか

OGP の品質は SNS 拡散時の CTR を 2-3 倍変える。記事品質が同じでも、OG 画像の見栄え次第で広がるかどうかが決まる。

SNS 流入を狙うすべての担当者で必須。

学ばないと起きること

よくある事故	被害
OGP 未実装	URL のみ表示、CTR 低
og:image サイズ不適切	クロップで読めない
動的生成なし	全記事が同じ画像

学ぶメリット

SNS 拡散の最大化
ブランド一貫性
商談で「OGP 4 要素」を即答

仕組み

必須プロパティ

<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="記事の概要">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="spotyou">
<meta property="og:locale" content="ja_JP">

og:image の仕様

項目	推奨
サイズ	1200 × 630 px
アスペクト比	1.91:1
ファイルサイズ	8MB 以下
形式	JPG / PNG / WebP
URL	絶対 URL + HTTPS

Twitter Card

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@spotyou">
<meta name="twitter:creator" content="@author">

summary_large_image で大画像表示、summary で小画像。

キー概念

動的 OG 画像生成

各記事ごとに自動で OG 画像を生成:

方法	特徴
Vercel OG	Next.js 統合
Cloudinary	画像変換サービス
Open Graph Image as a Service	サードパーティ
自作 Lambda	カスタム実装

Vercel OG の例

import { ImageResponse } from 'next/og';

export default function OGImage({ title }) {
  return new ImageResponse(
    (
      <div style={{ display: 'flex', width: 1200, height: 630, ... }}>
        <h1>{title}</h1>
        <p>spotyou Study</p>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

LINE / Slack での扱い

LINE / Slack も OGP を読み取って表示:

LINE: og:image 必須、サムネイル表示
Slack: 自動展開、og:image / og:description 使用

検証ツール

ツール	対象
Facebook Sharing Debugger	Facebook
Twitter Card Validator	X
LinkedIn Post Inspector	LinkedIn
LINE シェアデバッガ	LINE

よくある誤解

よくある誤解	実際のところ	出典
og:image は任意	SNS 表示で実質必須	OGP 仕様
1 画像で全記事流用	動的生成で記事別が理想	一般情報
Twitter Card なし	OGP で代用されるが summary_large_image 必要	一般情報

実務での適用

全記事への OGP 自動適用

CMS / フレームワークでテンプレート化
og:image は動的生成
og:title / og:description は記事メタから自動取得
検証ツールで全種類確認

Vercel OG 統合パターン

// app/api/og/route.tsx
export const GET = (req) => {
  const title = req.searchParams.get('title');
  return new ImageResponse(<OGTemplate title={title} />);
};

// 各記事の <Head>
<meta property="og:image" content={`/api/og?title=${title}`} />

トラブル別の対処

症状	確認すべきこと
OG 画像が表示されない	サイズ / 絶対 URL / HTTPS / キャッシュ
キャッシュで古い画像	Facebook Sharing Debugger でキャッシュクリア

公式ソース

自己テスト

Q1. og:image の推奨サイズは？

1200 × 630 px、アスペクト比 1.91:1

Q2. Twitter Card で大画像表示する設定は？

<meta name="twitter:card" content="summary_large_image">

Q3. 動的 OG 画像生成の主要手段は？

Vercel OG / Cloudinary / 自作 Lambda 等

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。