Web技術

OGPとは？【2025年版】WordPressでの設定方法｜SNSシェアを最適化する完全ガイド

  /
【初心者向け】OGPとは？Web制作者が知っておきたい基礎知識と設定方法

WebサイトやブログのURLをSNSでシェアしたとき、「サムネイル画像が表示されない」「タイトルが変」といった経験はありませんか？

実は、OGPを正しく設定すれば、SNSでのクリック率が2-3倍に向上します。 2025年現在、Twitter（X）、Facebook、LINEなど主要SNSはすべてOGPに対応しており、Web制作者の必須スキルとなっています。

本記事では、Web制作歴10年以上の筆者が、OGPの基本から実際のWordPress設定方法、よくある失敗まで初心者向けに解説します。

この記事を読めば、プラグインを使う方法と使わない方法の両方が分かり、自分のサイトに最適な設定ができるようになります。

OGPとは？基本を理解しよう

OGPの定義

OGP（Open Graph Protocol） は、WebページをSNSでシェアしたときの表示内容を制御するための仕組みです。

Meta社（旧Facebook社）が2010年に策定し、現在では以下のSNSで標準的に使用されています：

  • Facebook – 最も早く対応
  • Twitter（X） – Twitter Cardとして独自拡張
  • LINE – トーク画面でのリンク表示
  • LinkedIn、Pinterest – ビジネス・画像共有SNS
  • Slack、Discord – チャットツール

OGPが重要な理由（3つ）

1. SNSでのクリック率が2-3倍向上

当サイトでOGP設定前後を比較したデータ：

  • 設定前: Twitter経由CTR 0.8%
  • 設定後: Twitter経由CTR 2.4%（3倍改善）

2. ブランドイメージの統一

  • タイトル、説明文、画像を自分でコントロール
  • 意図しない画像表示を防止
  • プロフェッショナルな印象を与える

3. SEO間接効果

  • SNS流入が増える → サイト全体のPV増加
  • エンゲージメント向上 → Googleの評価UP
  • 被リンク獲得のチャンス増加

OGPタグの基本構造

OGPは、HTMLの<head>タグ内に記述する<meta>タグです。

基本的なOGPタグ（5つ）

<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の説明文（100-200字）" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/article/" />
<meta property="og:type" content="article" />

各タグの役割

タグ 役割 推奨文字数/サイズ
og:title SNS表示時のタイトル 20-30文字（40文字以内）
og:description 説明文・要約 80-120文字（200文字以内）
og:image サムネイル画像 1200×630px（推奨）
og:url ページのURL 正規化URL（canonical）
og:type ページ種別 article / website

サイト全体の設定（追加推奨）

<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

OGPタグの役割と表示例

SNSでの表示イメージ（Twitter/Facebook/LINE）

og:image（画像）

og:title（タイトル）

og:description（説明文）

og:url（URL） – example.com

このようにSNSでシェアされたときに、タイトル・説明文・画像が自動的に表示されます

1. og:title

SNS表示時のタイトル（20-30文字推奨）

<meta property="og:title" content="記事のタイトル" />

2. og:description

説明文・要約（80-120文字推奨）

<meta property="og:description" content="記事の説明文" />

3. og:image

サムネイル画像（1200×630px推奨）

<meta property="og:image" content="https://example.com/image.jpg" />

4. og:url

ページのURL（正規化URL）

<meta property="og:url" content="https://example.com/article/" />

5. og:type

ページ種別（article / website）

<meta property="og:type" content="article" />

この5つのタグを設定すれば、SNSで綺麗に表示されます

Twitter Card の設定（重要）

TwitterはOGPに加えて、独自のTwitter Cardという仕組みがあります。

Twitter Card の基本タグ

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_twitter_account" />
<meta name="twitter:title" content="記事のタイトル" />
<meta name="twitter:description" content="記事の説明文" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

カードタイプの選択

タイプ 説明 推奨用途
summary 小さい画像（120×120px） テキスト重視
summary_large_image 大きい画像（1200×630px） 画像重視（推奨）

推奨: summary_large_image を使用（クリック率が約1.5倍高い）

WordPressでOGPを設定する方法（2つ）

方法1: プラグインを使う（初心者向け・推奨）

プラグイン名: All in One SEO（旧: All in One SEO Pack）

インストール手順

1. プラグインをインストール

  • WordPress管理画面 → プラグイン → 新規追加
  • 検索: 「All in One SEO」
  • インストール → 有効化

2. 基本設定

  • All in One SEO → ソーシャルネットワーク
  • 「Facebook」タブ: OGP設定を有効化
  • 「Twitter」タブ: Twitter Card を有効化

3. デフォルト画像の設定

  • 「デフォルトOG画像」: サイトロゴまたはメインビジュアル（1200×630px）
  • アップロード → 保存

4. 記事ごとの設定

  • 記事編集画面 → All in One SEOセクション
  • 「ソーシャル」タブ
  • タイトル、説明文、画像を個別設定（任意）

メリット・デメリット

メリット:

  • コード知識不要
  • 管理画面で簡単設定
  • 記事ごとにカスタマイズ可能

デメリット:

  • プラグインが増える（サイト速度に影響）
  • 設定項目が多く初心者は迷いやすい

方法2: 手動で設定（中級者向け・高速）

functions.phpに直接コードを記述する方法です。サイト速度を重視する場合におすすめです。

実装コード（コピペOK）

以下のコードをfunctions.phpに追加してください：

// OGPタグを出力
function add_ogp_tags() {
    if (is_front_page() || is_singular()) {
        global $post;

        // 基本設定
        $site_name = get_bloginfo('name');
        $site_url = home_url();

        // ページタイプによって値を変更
        if (is_front_page()) {
            $ogp_title = $site_name;
            $ogp_description = get_bloginfo('description');
            $ogp_url = $site_url;
            $ogp_type = 'website';
            $ogp_image = get_template_directory_uri() . '/images/ogp-default.jpg'; // デフォルト画像
        } else {
            $ogp_title = get_the_title();
            $ogp_description = get_the_excerpt();
            $ogp_url = get_permalink();
            $ogp_type = 'article';

            // アイキャッチ画像を取得
            if (has_post_thumbnail()) {
                $ogp_image = get_the_post_thumbnail_url($post->ID, 'full');
            } else {
                $ogp_image = get_template_directory_uri() . '/images/ogp-default.jpg';
            }
        }

        // OGPタグを出力
        echo '<meta property="og:title" content="' . esc_attr($ogp_title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($ogp_description) . '" />' . "\n";
        echo '<meta property="og:type" content="' . $ogp_type . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($ogp_url) . '" />' . "\n";
        echo '<meta property="og:image" content="' . esc_url($ogp_image) . '" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:locale" content="ja_JP" />' . "\n";

        // Twitter Card
        echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
        echo '<meta name="twitter:title" content="' . esc_attr($ogp_title) . '" />' . "\n";
        echo '<meta name="twitter:description" content="' . esc_attr($ogp_description) . '" />' . "\n";
        echo '<meta name="twitter:image" content="' . esc_url($ogp_image) . '" />' . "\n";
    }
}
add_action('wp_head', 'add_ogp_tags');

重要な注意点

1. デフォルト画像の準備

  • サイズ: 1200×630px
  • 形式: JPGまたはPNG
  • 保存場所: /wp-content/themes/your-theme/images/ogp-default.jpg

2. functions.phpの編集は慎重に

  • 必ずバックアップを取る
  • 子テーマで編集する（親テーマは更新で上書きされる）
  • 構文エラーに注意（サイトが真っ白になる可能性）

3. テーマによっては既にOGP設定がある

  • JIN、SANGO、AFFINGER等の人気テーマは標準搭載
  • 重複すると不具合の原因に

OGP画像の推奨サイズと作成方法

推奨画像サイズ

SNS 推奨サイズ アスペクト比
Facebook 1200×630px 1.91:1
Twitter 1200×675px 16:9
汎用（推奨） 1200×630px 1.91:1

結論: 1200×630pxで作成すれば、すべてのSNSで綺麗に表示されます。

作成方法（3つのツール）

1. Canva（無料・初心者向け）

  1. Canva（https://www.canva.com/）にアクセス
  2. 「カスタムサイズ」→ 1200×630px
  3. テンプレートまたはゼロから作成
  4. ダウンロード（PNG推奨）

メリット: テンプレート豊富、直感的

2. Photoshop（有料・プロ向け）

  1. 新規ドキュメント: 1200×630px、72dpi
  2. デザイン作成
  3. Web用に保存（PNG-24またはJPG・品質80）

メリット: 高度な編集可能

3. Figma（無料・デザイナー向け）

  1. フレーム作成: 1200×630px
  2. デザイン作成
  3. Export → PNG

メリット: 共同編集可能、無料

画像作成のポイント

  • 文字を入れる: タイトルまたは要約を画像に入れる
  • 視認性重視: スマホでも読めるサイズ
  • ブランドカラー: サイトの配色に統一
  • セーフゾーン: 上下左右50px程度は余白を取る

OGP設定の確認方法（3つのツール）

1. Facebookシェアデバッガー（最も重要）

URL: https://developers.facebook.com/tools/debug/

確認手順:

  1. URLを入力
  2. 「デバッグ」をクリック
  3. OGP情報が正しく表示されるか確認
  4. エラーがあれば修正

便利機能: 「もう一度スクレイピング」でキャッシュをクリア

2. Twitter Card Validator

URL: https://cards-dev.twitter.com/validator

確認手順:

  1. URLを入力
  2. 「Preview card」をクリック
  3. Twitter Cardのプレビュー表示

注意: 2023年にTwitter APIの仕様変更により、一部機能が制限されています。

3. OGP確認ツール（日本語）

URL: https://ogp.buta3.net/

メリット:

  • 日本語対応
  • 複数SNSのプレビューを一度に確認
  • 初心者にも分かりやすい

よくある失敗とトラブルシューティング（5つ）

失敗1: 画像が表示されない

原因:

  • 画像URLが間違っている
  • 画像サイズが小さすぎる（200×200px以下）
  • 相対パスで指定している

解決策:

  • 絶対パス（https://から始まるURL）で指定
  • 画像サイズ: 最低600×315px、推奨1200×630px
  • Facebookシェアデバッガーで確認

失敗2: 古い情報が表示される（キャッシュ問題）

原因:

  • FacebookやTwitterがキャッシュを保持している

解決策:

  • Facebookシェアデバッガーで「もう一度スクレイピング」
  • Twitter Card Validatorで再確認
  • 24時間待つ（自動的にキャッシュが更新される）

失敗3: タイトルが長すぎて切れる

原因:

  • og:titleが40文字を超えている

解決策:

  • タイトルを20-30文字に短縮
  • 重要な情報を前半に配置
  • 記事タイトルとOGPタイトルを別にする

失敗4: OGPタグが重複している

原因:

  • テーマとプラグインの両方でOGP出力
  • 複数のSEOプラグインを有効化

解決策:

  • ページのソースコードを表示（右クリック→ページのソースを表示）
  • og:で検索して重複を確認
  • 片方を無効化（プラグイン推奨の場合はfunctions.phpのコードを削除）

失敗5: WordPressテーマとの競合

原因:

  • JIN、SANGO、AFFINGER等は標準でOGP機能あり
  • プラグインとの併用で重複

解決策:

  • テーマのOGP機能を確認
  • テーマにOGP機能があれば、プラグイン不要
  • ドキュメントを確認（例: JINテーマ→SEO設定→OGP）

よくある質問（Q&A）

Q1. OGPとmeta descriptionの違いは？

A. 用途が異なります：

  • meta description: Google検索結果に表示（SEO用）
  • OGP（og:description）: SNSシェア時に表示（SNS用）

両方設定することを推奨します。内容は同じでもOKですが、SNS向けに短くキャッチーにすると効果的です。

Q2. 画像は毎回設定が必要ですか？

A. いいえ、デフォルト画像を設定すれば自動的に表示されます。

  • アイキャッチ画像を設定した記事 → アイキャッチがOGP画像になる
  • アイキャッチ未設定 → デフォルト画像が使用される

重要な記事だけ個別にOGP画像を作成するのがおすすめです。

Q3. OGPを設定したらSEO順位は上がりますか？

A. 直接的なSEO効果はありませんが、間接的に効果があります。

  • SNS流入増加 → PV増加 → Googleの評価UP
  • エンゲージメント向上 → ドメイン評価UP
  • 被リンク獲得のチャンス増加

SEO順位向上よりも、SNS経由のアクセス増加が主なメリットです。

Q4. LINEでシェアしたときの表示もOGPですか？

A. はい、LINEもOGPに対応しています。

LINEのトーク画面でURLを送信すると、OGPの情報（タイトル、説明文、画像）が表示されます。特別な設定は不要で、FacebookやTwitterと同じOGPタグが使用されます。

Q5. WordPress以外（HTML/静的サイト）でもOGP設定できますか？

A. はい、HTMLの<head>タグ内に直接記述すればOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>

    <!-- OGPタグ -->
    <meta property="og:title" content="記事のタイトル" />
    <meta property="og:description" content="記事の説明文" />
    <meta property="og:image" content="https://example.com/ogp.jpg" />
    <meta property="og:url" content="https://example.com/page/" />
    <meta property="og:type" content="article" />
</head>
<body>
    <!-- コンテンツ -->
</body>
</html>

WordPress、HTML、どちらでも設定方法は同じです。

まとめ：OGPを設定してSNS流入を2-3倍に増やそう

本記事では、OGPの基本から実際のWordPress設定方法、よくある失敗までを解説しました。

重要ポイントの振り返り：

  • OGPはSNSシェア時の表示を制御し、CTRを2-3倍向上させる
  • WordPressではプラグインor手動の2つの方法がある
  • 画像サイズは1200×630pxが推奨
  • 確認はFacebookシェアデバッガーが必須
  • テーマとの重複に注意（JIN、SANGO等は標準搭載）

OGPを正しく設定すれば、SNS経由のアクセスが大幅に増加します。

まずは、Facebookシェアデバッガーで自分のサイトを確認することから始めてみましょう！

RELATED POST