1. ホーム
  2. 機能解説
  3. OGP設定

📱 WordPress OGP設定完全ガイド

OGP（Open Graph Protocol）は、SNSでシェアされた際に表示されるタイトル、説明文、画像を指定する仕組みです。適切に設定することで、SNSでの見栄えが良くなり、クリック率が向上します。

OGPとは？

OGP（Open Graph Protocol）は、FacebookやTwitterなどのSNSで、Webページがシェアされた際の表示内容を制御するためのHTML metaタグです。

OGPを設定しないと...

OGPを設定すると...

効果：適切なOGP設定により、SNSからのクリック率が2〜3倍になることもあります。

主要なOGPタグ

OGPタグ説明推奨値
og:titleページタイトル50文字以内
og:descriptionページの説明文120文字以内
og:image表示される画像URL1200×630px推奨
og:urlページのURL正規URL
og:typeページの種類website / article
og:site_nameサイト名サイトの正式名称
og:locale言語ja_JP（日本語）

Twitter Card設定

Twitterには独自のメタタグ（Twitter Card）があります。

Twitterタグ説明推奨値
twitter:cardカードの種類summary_large_image
twitter:titleタイトル70文字以内
twitter:description説明文200文字以内
twitter:image画像URL1200×628px推奨
twitter:siteサイトのTwitterアカウント@example

プラグインでOGPを設定

WordPressでは、プラグインを使ってOGPを簡単に設定できます。

おすすめプラグイン

Yoast SEOでのOGP設定

STEP 1: ソーシャル設定を有効化

  1. 「SEO」→「ソーシャル」をクリック
  2. FacebookタブでOGPタグを有効化
  3. デフォルト画像を設定（1200×630px推奨）
  4. Twitterタブでカード設定を「大きな画像で要約」に

STEP 2: 記事ごとのOGP設定

  1. 記事編集画面を開く
  2. 下部の「Yoast SEO」セクションを開く
  3. 「ソーシャル」タブをクリック
  4. Facebook画像、タイトル、説明を設定
  5. Twitter画像、タイトル、説明を設定
自動設定：個別に設定しなくても、記事タイトルとアイキャッチ画像が自動的にOGPに使用されます。

OGP画像の最適化

推奨サイズ

画像作成のポイント

注意：画像の端20%程度は、スマホ表示時に切れる可能性があります。重要な情報は中央に配置しましょう。

OGP設定の確認方法

Facebook デバッガー

  1. Facebook Sharing Debugger（https://developers.facebook.com/tools/debug/）にアクセス
  2. 記事のURLを入力
  3. 「デバッグ」をクリック
  4. OGPタグが正しく読み込まれているか確認

Twitter Card Validator

  1. Twitter Card Validator（https://cards-dev.twitter.com/validator）にアクセス
  2. 記事のURLを入力
  3. プレビューを確認
キャッシュクリア：デバッガーツールは、OGP情報を再取得してキャッシュを更新します。変更が反映されない時に便利です。

よくあるトラブルと解決法

1. 画像が表示されない

2. 古い情報が表示される

3. タイトルが切れる

まとめ

OGP設定は、SNSマーケティングの基本です。一度設定すれば、自動的に適用されるので、早めに導入しましょう。

OGP設定チェックリスト

関連ページ

↑