2026年8月8日

WordPressでOpen Graphタグを設定してSNSシェア時の表示（OGP）を最適化する

SEO・パフォーマンス

記事をSNSやチャットアプリでシェアしたときに表示されるタイトル・説明文・画像は、ページに書かれた Open Graph（OGP）タグから読み取られます。WordPressでは、SEOプラグインかテーマの機能で出力するのが手軽で、どちらも使えない場合は子テーマから自分で出力できます。この記事では、必要なタグの種類、出力方法の選び方、画像と説明文の整え方、変更が反映されないときのキャッシュの扱い、表示の確認方法を説明します。

OGPタグの役割と基本のタグ

SNSはURLが投稿されると、そのページのHTMLを取得し、<head> 内の og: で始まるメタタグを読んでカードを組み立てます。タグがないと、SNS側が本文から推測した文字や画像を使うため、意図しない画像が表示されたり、何も表示されなかったりします。

最低限そろえたいのは次のタグです。

og:title：シェア時に表示するタイトル
og:description：説明文
og:url：そのページの正規のURL
og:image：カード画像のURL（相対パスではなく、https:// から始まる完全な形）
og:type：記事ページなら article、トップページなら website
og:site_name：サイト名

X（旧Twitter）では、カードの形式を twitter:card で指定します。大きな画像で表示したい場合は summary_large_image を指定します。タイトルや画像は、X用のタグがなければ og: のタグが使われるため、両方を個別に書く必要はありません。

なお、OGPタグはSNS上での見え方を整えるためのもので、Googleの検索順位を直接上げるものではありません。シェアされたときに内容が伝わり、クリックされやすくなることが目的です。

出力方法を選ぶ

SEOプラグインの機能を使う

Yoast SEO、All in One SEO、Rank Math、SEOPress などの主要なSEOプラグインは、OGPタグを自動で出力します。記事ごとにSNS用のタイトル・説明文・画像を個別に指定する欄もあり、多くの場合はこれがもっとも手間がかかりません。設定画面の場所や項目名はプラグインとバージョンによって異なります（2026年10月現在）。サイト全体の既定画像を設定する項目があれば、アイキャッチ画像のない記事のために登録しておきます。

テーマの機能を使う

国内向けのテーマを中心に、テーマ自体がOGPタグを出力するものもあります。テーマの設定で既定画像やXのカード形式を選べる場合は、それで十分なこともあります。

重複して出力していないか確認する

もっとも多いトラブルが、テーマとSEOプラグインの両方がOGPタグを出力している状態です。og:image が2つあると、SNSがどちらを使うか分からず、意図しない画像が表示されます。ページのHTMLソースを開いて og:image を検索し、1つだけになっていることを確かめてください。重複していたら、テーマかプラグインのどちらか一方の出力を無効にします。

子テーマから自分で出力する場合

SEOプラグインを使わない方針のサイトでは、子テーマの functions.php から wp_head フックで出力できます。テーマやプラグインがすでにOGPを出力している環境では使わないでください（重複の原因になります）。編集の前にはバックアップを取ります。

add_action( 'wp_head', function () {
	if ( ! is_singular() ) {
		return;
	}

	$post_id = get_queried_object_id();
	$text    = has_excerpt( $post_id ) ? get_the_excerpt( $post_id ) : get_post_field( 'post_content', $post_id );
	$image   = get_the_post_thumbnail_url( $post_id, 'full' );

	if ( ! $image ) {
		// アイキャッチがない場合の既定画像（子テーマ内に用意する）
		$image = get_stylesheet_directory_uri() . '/images/ogp-default.png';
	}

	$tags = array(
		'og:type'        => 'article',
		'og:site_name'   => get_bloginfo( 'name' ),
		'og:title'       => get_the_title( $post_id ),
		'og:description' => wp_html_excerpt( strip_shortcodes( $text ), 110, '…' ),
		'og:url'         => get_permalink( $post_id ),
		'og:image'       => $image,
	);

	foreach ( $tags as $property => $content ) {
		$value = in_array( $property, array( 'og:url', 'og:image' ), true ) ? esc_url( $content ) : esc_attr( $content );
		printf( '<meta property="%s" content="%s">' . "\n", esc_attr( $property ), $value );
	}

	echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
}, 5 );

このコードは投稿・固定ページなどの個別ページだけを対象にしています。説明文は、抜粋があれば抜粋を、なければ本文から110文字ほどを切り出します。出力する値はすべて esc_attr() または esc_url() でエスケープしています。トップページやカテゴリー一覧にも出力したい場合は、is_front_page() や is_category() で条件を分け、サイト全体の説明文と既定画像を使うように拡張してください。

画像と説明文を整える

画像のサイズと内容

カード画像は、横長の 1200×630 ピクセル前後（およそ 1.91:1）で用意するのが一般的です。SNSによっては中央部分だけが切り取られて表示されるため、文字やロゴは画像の中央寄りに配置します。ファイルサイズが大きすぎると取得に失敗することがあるので、適度に圧縮しておきます。各SNSの推奨サイズは変わることがあるため、公式のガイドで最新の値を確認してください。

og:image:width と og:image:height を添えると、初回のシェア時から画像が正しく表示されやすくなります。SEOプラグインの多くは、これらも自動で出力します。

説明文とタイトル

検索結果向けのタイトルが長い場合は、SNS用に短く言い換えると表示が切れにくくなります。説明文は、冒頭の数十文字で記事の内容が分かるようにします。SEOプラグインのSNS用の入力欄を使えば、検索向けとSNS向けを別々に設定できます。

変更が反映されないときの確認

OGPを修正しても、シェア時の表示がすぐに変わらないことがあります。主な原因は次の3つです。

SNS側のキャッシュ：SNSは一度取得したカード情報を一定期間保存します。Facebook など Meta のサービスでは「シェアデバッガー」でURLを入力し、再取得を指示すると最新の内容が読み込まれます。他のSNSやチャットアプリにも独自のキャッシュがあり、反映まで時間がかかることがあります。
サイト側のキャッシュ：キャッシュプラグインやCDNが古いHTMLを返していると、修正前のタグが読まれます。キャッシュを削除してから再取得させます。
SNSのクローラーがページを取得できない：Basic認証、WAF、robots.txt の設定、国外アクセスの制限などで、SNSのクローラーが弾かれていることがあります。画像のURLも同様に、外部から開ける状態かを確認します。

表示を確認する

ページのHTMLソースで、og:title・og:description・og:url・og:image が1つずつ出力されているかを見る
og:image のURLをブラウザで直接開き、画像が表示されるかを確かめる
Meta のシェアデバッガーで、カードのプレビューと警告の有無を確認する
X やチャットアプリには、公開範囲を限定した投稿や自分宛てのメッセージでURLを送り、実際の表示を確かめる

まとめ

シェア時のタイトル・説明文・画像は og: タグから読まれ、Xでは twitter:card でカード形式を指定する
SEOプラグインやテーマの機能で出力するのが手軽。両方から重複して出力していないかを確認する
自前で出力する場合は子テーマの wp_head で、値をエスケープして出力する
画像は横長 1200×630 前後を目安に、重要な要素を中央に寄せる
反映されないときは、SNS側とサイト側のキャッシュ、クローラーのアクセス制限を順に疑う