Web制作コラム

OGPとは｜SNSで共有されたときの見え方を決める設定

用語・技術解説2026.09.11

リンクを貼ったときに出る画像とタイトルを決める設定です。最低限入れるタグと、反映されないときの対処をまとめます。

OGP とは、SNSやチャットにURLを貼ったときに表示される画像・タイトル・説明文を指定するための記述です。指定していないと、本文の一部が勝手に抜き出されたり、画像が出ずにURLだけが並んだりします。

最低限入れる4つ

head の中

<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="1〜2文の説明">
<meta property="og:image" content="https://example.com/img/og.png">
<meta property="og:url" content="https://example.com/page/">

この4つが入っていれば、どのSNSでも最低限の見え方になります。

OGPタグの一覧

使うものはそれほど多くありません。上から順に、入れておく価値が高いものです。

タグ	役割	扱い	書き方の注意
og:title	SNSに出るタイトル	必須	ページの title と同じで構いません。ただし「｜会社名」の繰り返しは削ったほうが読みやすくなります
og:image	一緒に出る画像	必須	1200×630 が基準。必ず絶対URLで書きます。相対パスは読まれません
og:url	そのページの正規URL	必須	canonical と同じURLにします。末尾スラッシュの有無まで揃えます
og:description	説明文	推奨	1〜2文。meta description と同じで構いません
og:type	ページの種類	推奨	トップや一覧は website、記事は article
og:site_name	サイト名	推奨	サイト全体で同じ値
og:locale	言語と地域	任意	日本語なら ja_JP
og:image:width / og:image:height	画像の寸法	任意	初回の読み込みで枠がずれるのを防げます
og:image:alt	画像の説明	任意	画像が表示できないときに読まれます
article:published_time	公開日時	任意	og:type が article のときだけ。ISO 8601 で書きます

※ 横にスクロールできます

og: で始まるものは property、twitter: で始まるものは name で書きます。ここを取り違えると読まれません。コピーして増やすときに混ざりやすい部分です。

Twitterカード（Xでの見え方）

X（旧Twitter）は独自の twitter: タグを持っていますが、無い場合は OGP を読みます。そのため、OGPを正しく入れてあれば、追加で書くのは1行だけです。

head の中

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

この1行で、画像が大きく出る形になります。入れない場合は小さな正方形のサムネイルになります。

タグ	値・役割	必要か
twitter:card	summary_large_image（画像を大きく） / summary（小さく横に並ぶ）	入れる価値あり
twitter:title	タイトル	不要。無ければ og:title が使われます
twitter:description	説明文	不要。無ければ og:description が使われます
twitter:image	画像	不要。無ければ og:image が使われます
twitter:site	サイトの公式アカウント（@から書く）	任意

※ 横にスクロールできます

twitter: と og: の両方を書いた場合、X では twitter: が優先されます。つまり両方書いて内容がずれていると、Xだけ古い文言が出ます。片方に寄せる（OGP + twitter:card だけ）のが管理しやすいです。

まとめて書くとこうなる

head の中

<meta property="og:type" content="article">
<meta property="og:site_name" content="ワプラボ">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="OGPとは｜SNSで共有されたときの見え方を決める設定">
<meta property="og:description" content="リンクを貼ったときに出る画像とタイトルを決める設定です。">
<meta property="og:url" content="https://wp-coding.jp/column/ogp/">
<meta property="og:image" content="https://wp-coding.jp/img/column/ogp/thumb.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
<meta name="twitter:card" content="summary_large_image">

画像の作り方

サイズは 1200×630 が基準。これで各SNSに収まります
絶対URLで指定する（相対パスだと読まれません）
文字を入れるなら中央寄りに。端は切られることがあります
文字は大きく。一覧の中では縮小して表示されます

画像が用意できないページのために、サイト共通の既定画像を1枚作っておいてください。何も出ないより、ロゴだけでも出るほうがクリックされます。

ページごとに変える

サイト全体で同じ画像とタイトルになっていると、どの記事を共有しても同じ見た目になり、何のリンクか伝わりません。記事ごとにタイトルと説明文を変え、できれば画像も変えます。

当サイトのコラムでは、記事ごとに内容に合わせた図を自動で作って使っています。記事が増えても手間が増えない作り方です。

WordPressでの出し方

SEO系のプラグインを入れていれば、OGPは自動で出力されています。まずページのソースを表示して、すでに og:title が入っているか確認してください。二重に出すと、どちらが使われるか分からなくなります。

出ていない場合や、記事ごとの画像を自分で組み立てたい場合は functions.php から出します。

functions.php

add_action("wp_head", function () {
    if (is_singular()) {
        $title = get_the_title();
        $desc  = get_the_excerpt();
        $url   = get_permalink();
        $img   = get_the_post_thumbnail_url(null, "full")
            ?: get_template_directory_uri() . "/img/og-default.png";
        $type  = "article";
    } else {
        $title = get_bloginfo("name");
        $desc  = get_bloginfo("description");
        $url   = home_url("/");
        $img   = get_template_directory_uri() . "/img/og-default.png";
        $type  = "website";
    }

    $tags = [
        "og:type"        => $type,
        "og:site_name"   => get_bloginfo("name"),
        "og:locale"      => "ja_JP",
        "og:title"       => $title,
        "og:description" => wp_trim_words($desc, 60, ""),
        "og:url"         => $url,
        "og:image"       => $img,
    ];
    foreach ($tags as $prop => $content) {
        printf(
            '<meta property="%s" content="%s">' . "\n",
            esc_attr($prop),
            esc_attr($content)
        );
    }
    echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
});

アイキャッチが設定されていない記事のために、既定の画像を1枚用意しておくのが要点です。画像が無いと、リンクだけが並んだ見た目になります。

esc_attr を必ず通してください。記事のタイトルに二重引用符が入っていると、タグが途中で閉じて head が壊れます。