「シェアしたのに画像が出ない」機会損失#

Twitter (X), Facebook, LINE, Slack... 現代のWebへの流入経路として、SNS（ソーシャル・ネットワーキング・サービス）は検索エンジンと並ぶ巨大な柱です。誰かがあなたのサイトをSNSでシェアしてくれたとき、魅力的な画像（サムネイル）とタイトルが大きく表示されるか、それともただの青いURL文字列だけが表示されるか。

この差を生むのが OGP (Open Graph Protocol) です。 OGPが正しく設定されていないサイトは、タイムライン上で完全に埋もれます。クリック率（CTR）に10倍以上の差が出ることも珍しくありません。

1. 必須となるOGPタグ一覧#

以下のメタタグを <head> 内（Next.jsなら metadata）に設定します。

| タグ名 | 役割 | 解説 | | :--- | :--- | :--- | | og:title | タイトル | 記事のタイトル。SNS上で目立つように簡潔に。 | | og:description | 説明文 | 記事の要約。クリックしたくなるようなフックを入れる。 | | og:image | 画像 | 最重要。シェアされた時に表示されるアイキャッチ画像。 | | og:url | URL | ページの正規URL。 | | og:type | タイプ | トップページなら website、記事なら article。 | | twitter:card | カードタイプ | Twitterでの表示形式。summary_large_image（大きい画像）推奨。 |

Next.js (App Router) での実装

Next.js はOGPの設定を非常に簡単に行えます。

Code

// src/app/page.tsx or layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Article Title',
  description: 'This is description...',
  openGraph: {
    title: 'My Article Title',
    description: 'This is description...',
    url: 'https://example.com/article',
    siteName: 'My Site Name',
    images: [
      {
        url: 'https://example.com/og-image.png',
        width: 1200,
        height: 630,
      },
    ],
    locale: 'ja_JP',
    type: 'article',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Article Title',
    description: 'This is description...',
    images: ['https://example.com/og-image.png'],
  },
}

2. OGP画像の「正解」サイズ#

各SNSでトリミングされずに綺麗に表示される推奨サイズは 1200px × 630px (比率 1.91:1) です。重要な文字やロゴは、上下左右の中央部分に配置しましょう（正方形にトリミングされるプラットフォームもあるため）。

3. 動的OGP画像の生成 (Next.js ImageResponse)#

記事ごとにPhotoshopで画像を作るのは大変です。Next.js の ImageResponse (edge runtime) を使えば、記事のタイトルなどからサーバーサイドで動的にOGP画像を生成できます。これは技術ブログやニュースサイトでは必須のテクニックです。

Code

// src/app/og/route.tsx
import { ImageResponse } from 'next/og';
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'My Site';
 
  return new ImageResponse(
    (
      <div style={{ background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <h1 style={{ fontSize: 60 }}>{title}</h1>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

4. デバッグツールで確認する#

実装したら、必ず各プラットフォームの公式デバッガーで表示確認を行いましょう。キャッシュのクリアもできます。

Twitter (X) Card Validator: (現在はプレビュー機能が制限されていますが、キャッシュクリアには有効)
Facebook シェアデバッガー: Facebook上での表示を確認。
LINE Page Poker: LINEでの表示を確認。

OGPは、SNSという巨大な海に向けた「名刺」であり「看板」です。ここを最適化せずして、バイラル（拡散）は起こり得ません。

SNSシェアで機会損失していませんか？OGP設定でクリック率を劇的に変える方法