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

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（無料・初心者向け）

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

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

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

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

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

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

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

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

画像作成のポイント

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

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

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

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

確認手順:

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

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

2. Twitter Card Validator

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

確認手順:

URLを入力
「Preview card」をクリック
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シェアデバッガーで自分のサイトを確認することから始めてみましょう！

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

OGPの定義

OGPが重要な理由（3つ）

OGPタグの基本構造

基本的なOGPタグ（5つ）

各タグの役割

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

OGPタグの役割と表示例

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

1. og:title

2. og:description

3. og:image

4. og:url

5. og:type

Twitter Card の設定（重要）

Twitter Card の基本タグ

カードタイプの選択

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

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

インストール手順

メリット・デメリット

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

実装コード（コピペOK）

重要な注意点

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

推奨画像サイズ

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

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

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

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

画像作成のポイント

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

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

2. Twitter Card Validator

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

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

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

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

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

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

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

よくある質問（Q&A）

Q1. OGPとmeta descriptionの違いは？

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

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

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

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

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

Responsive Viewerの使い方｜複数デバイスを同時テストして開発効率を3...

【2025年最新】SSL化の重要性と実装方法を徹底解説｜メリット・費用・手順まで

Google Chromeの拡張機能『Alt & Meta Viewer』の...

最近の投稿

最近のコメント

カテゴリー