動的にOGPを生成するとは？Webアプリ運用で差がつく設計の考え方

SNSでURLを共有したときに表示される「タイトル・説明文・画像」は、ユーザーのクリック率に大きく影響します。この表示を制御する仕組みがOGP（Open Graph Protocol）です。

一般的なブログでは、サイト全体で1つのOGP画像を設定しているケースも多いですが、Webアプリや複数のコンテンツを扱うサービスでは、それでは不十分になることがあります。なぜなら、ページごとに見せたい内容が異なるからです。

そこで重要になるのが「動的にOGPを生成する」という考え方です。

なぜ固定OGPではダメなのか

例えば、以下のようなサービスを考えてみてください。

ユーザー投稿型サービス（例：創作投稿サイト）
記事ごとにテーマが異なるブログ
イベントや特集ページが複数あるサイト

これらすべてで同じOGP画像が表示されると、SNS上では違いが伝わりません。ユーザーから見ると「全部同じページ」に見えてしまい、クリック率が下がる原因になります。

つまり、OGPは「ページごとの魅力を伝えるための入り口」であり、内容に応じて変える必要があるのです。

動的OGPの基本設計

動的にOGPを生成する際は、以下の3つを軸に考えます。

og:title（タイトル）
og:description（説明文）
og:image（画像）

基本的な考え方はシンプルです。

「ページの内容に応じて、これらを出し分ける」

例えば：

トップページ → サイト名＋概要
記事ページ → 記事タイトル＋要約
作品ページ → 作品名＋サムネイル画像

このように役割を分けることで、SNS上での見え方が大きく改善します。

WordPressでの実装方法

WordPressでは、テーマの header.php や wp_head フックを使ってOGPを出し分けることができます。


add_action('wp_head', function () {

    if (is_front_page()) {
        $title = get_bloginfo('name');
        $desc  = get_bloginfo('description');
        $image = 'https://example.com/ogp-default.jpg';

    } elseif (is_single()) {
        $title = get_the_title();
        $desc  = wp_trim_words(strip_tags(get_the_content()), 120);
        $image = get_the_post_thumbnail_url() ?: 'https://example.com/ogp-default.jpg';

    } else {
        $title = get_bloginfo('name');
        $desc  = get_bloginfo('description');
        $image = 'https://example.com/ogp-default.jpg';
    }

    echo '<meta property="og:title" content="' . esc_attr($title) . '">';
    echo '<meta property="og:description" content="' . esc_attr($desc) . '">';
    echo '<meta property="og:image" content="' . esc_url($image) . '">';
});

このように条件分岐を使うことで、ページごとに最適なOGPを設定できます。