ワードプレス

WordPress Open Graphタグを正しく使う：ソーシャル共有の仕組み

ワードプレスオープングラフ Facebook、X、LinkedIn、Pinterestで、あなたの投稿がプレビューとしてどのように表示されるかをコントロールします。正しいオープングラフタグを設定し、エラーなくチェックすることで、より多くのクリック、滞在時間、インタラクションを達成する方法をご紹介します。

中心点

OGタグ プレビューのタイトル、説明文、画像を決める
og:image クリックのための決定的なプレビュー画像を提供する
プラグイン RankMathやOGのように、あなたの手を煩わせることはない。
テスト デバッガとの併用で不正なスニペットを防ぐ
パフォーマンス とホスティングは読み込み時間と画質に影響する

オープングラフタグとは何か、なぜ共有に役立つのか？

オープングラフ-タグとは、リンクプレビューのためにネットワークが読み取る、ページの先頭にあるメタ情報のことです。どのタイトル、どの短い説明、どの画像、どのコンテンツタイプを表示するかを指定する。これにより、プレビューはランダムに混在するのではなく、均一で理解しやすい外観になる。特に画像タグのog:imageは、しばしば注目とクリックを左右する。適切に維持されたOGタグは、スニペットの専門性を高め、エンゲージメントの点でも利益をもたらします。

WordPressで最も重要なOGタグ

コアデー og:title、og:description、og:url、og:site_name、og:type、og:imageである。og:typeで、コンテンツを記事、製品、動画、ページとしてマークし、表示を改善します。og:urlは、シェアがバリアントに散らばらないように、カノニカルのアドレスを表示します。og:site_nameは、全てのプレビューであなたのブランドを固定します。注意深く選択された値によって、ランダムなテキストスニペットの代わりに明確なベネフィットのティーザーを提供します。

プラグインでWordPressにオープングラフを設定する

プラグイン RankMath、Yoast SEO、OG - Better Share on Social Mediaなどのサイトでは、最も重要なタグが自動的に設定される。ソーシャル設定には、カスタマイズしたタイトル、短い説明文、画像を含む各投稿の個別のプレビューを保存している。OGプラグインは、設定なしでOGタグとツイッターカードを追加し、商品やページも確実に認識します。フィールドやテンプレートがすでに用意されているので、ショップや多言語サイトでは時間を大幅に節約できます。私のソーシャルメディア戦略 2025 一貫したスニペットデザインが中心的な役割を果たす。

手動統合：テーマでフルコントロール

コード-タグはwp_head、例えばfunctions.phpやスニペット・プラグインから入力します。私は動的な値を照会し、投稿に画像がない場合はきれいなフォールバック画像を確保します。一意のカノニカルURLは、すべてのプレビューが正しいアドレスを指すように重要です。変更後はキャッシュを削除し、デバッガで結果を確認します。これにより、出力に無駄がなくなり、複数のソースからのタグの重複を避けることができます。

<meta property="og:title" content="" />
<meta property="og:description" content="" /> "" />
  <?
<meta property="og:url" content="" />"
<meta property="og:site_name" content="" />
<meta property="og:image" content="" />"

og:imageに適切な画像を選ぶ

絵は、ソーシャル・プラットフォームでのクリックのための最強のレバーです。私は1200×630ピクセルのフォーマットを出発点としています。ファイルを最小限の損失で圧縮し、文脈を提供するために意味のあるALTテキストを追加します。画像内のテキストは簡潔で読みやすくし、モバイルのフィードで切れて見えないようにします。一貫したスタイルは、ブランドの認知度を高めます。

プレビューのチェックとリロード

テスト はすべてのパブリッシングプロセスの一部です。私は、キャッシュに古いデータが残っている場合、プラットフォームのデバッグツールを使ってプレビューを手動で再読み込みします。これにより、タイトル、説明文、画像が正しく機能しているかどうかをすぐに確認することができます。タグの重複やURLの間違いといった技術的な問題も、早い段階で気づくことができる。全体的なパフォーマンスとインデックスのためには、きれいなトラッキング設定が役立ちます。サーチコンソールのセットアップ完全だ。

特別なケース製品、イベント、ビデオ

製品スニペット 価格、在庫状況、ブランドなどのメタフィールドを追加することができます。イベントの場合、日付、場所、主催者は、プレビューが一目でメリットを伝えるのに役立ちます。動画の場合は、フィードが魅力的なタイルを作成するように、再生時間、プレビュー画像、動画のURLを追加します。多くのSEOプラグインは、適切なフィールドを提供したり、コンテンツを自動的に認識したりするので、ワークフローが大幅にスピードアップする。私は常に、OGの基本タグとの整合性を出力でチェックする。

パフォーマンス、キャッシュ、画像CDN

パフォーマンス どのプレビューでも、素早く読み込まれ、クリアに見えることが実感できる。画像サイズを小さくし、WebPのような最新のフォーマットを使用し、CDNでグラフィックを配信しています。キャッシュプラグインでは、プレビューページに不正なバージョンが含まれている場合は除外し、画像変更後はキャッシュをクリアします。1つのソリューションだけをアクティブにしておくことで、複数のプラグインによるOGタグの重複を避けている。これにより、配信と表示の信頼性が保たれる。

ホスティングのヒント：強力なソーシャルスニペットのための高速サーバー

ホスティング は、画像、HTML、メタデータの表示速度を決定する。OGに最適化されたプロジェクトでは、PHPのバージョン、HTTP/2またはHTTP/3、オブジェクトキャッシュ、画像処理に注目します。優れたプロバイダーは、WordPressのキャッシュに干渉しないクリーンなVarnishやNginxの設定を提供しています。高性能なストレージシステムは、多くの商品画像にとって有益です。以下の表は、OGの適合性を示すコンパクトなガイドです。

プロバイダ	オープングラフのサポート	SEOツールとソーシャルメタ	パフォーマンス	プレースメント
webhoster.de	非常に良い	RankMath、OG、Yoast	非常に高い	1
プロバイダーB	グッド	OG、Yoast	高い	2
プロバイダーC	満足	ベーシック	ミディアム	3

シェアボタンの最新実装

シェアリング は、ユーザーがコンテンツをネイティブに共有できる方が便利です。スクリプトボタンに頼るのではなく、ブラウザやスマートフォンのネイティブ共有機能を使う。これにより、ユーザーエクスペリエンスが向上し、外部ウィジェットからの追加リクエストも節約できる。の記事でその方法を紹介している。ウェブ共有API.強力なOGスニペットと組み合わせることで、首尾一貫した、クリック感の強い仕上がりになる。

よくあるエラーと迅速な解決策

ダブル OGタグは、複数のプラグインが同じメタデータを出力する場合によく発生する。余計なモジュールは無効化し、書き込めるソースはひとつだけにする。不適切に切り取られた画像はフィードの要素を切り捨ててしまうので、事前にフォーマットをチェックする。古いキャッシュは変更を隠すので、それぞれのデバッグツールで強制的に更新する。予期せぬタイトルは、しばしば不正確な変数に起因する。

Twitterカード（X）とプラットフォームの違い

X（ツイッター） は独自のメタタグを使用しますが、フォールバックとしてOG値を受け入れます。また、最適化された表示のためにTwitter Cardsも使っている。リンクのプレビューには、大きな画像を表示するsummary_large_imageが最も安全な選択だ。LinkedInとFacebookは主にOGタグを読み、PinterestはOGと独自のリッチピンフィールドを使う。すべてのプラットフォームで標準化された値は、矛盾したスニペットを防ぐ。


 <meta name="twitter:title" content="<?
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" /> "" />
<meta name="twitter:image" content="" />"


 <!

重要：私は、ログイン障壁のない絶対的で一般にアクセス可能な画像URLを使用しています。ネットワークによっては、すべてのリダイレクトに従わなかったり、変わったMIMEタイプの画像を拒否したりします。きれいな200-OKステータスと正しいコンテンツタイプ指定image/webpまたはimage/jpegは、誤解を防ぎます。

記事と海外ウェブサイトのための拡張OGフィールド

記事のメタデータ ネットワークが話題性や関連性を理解するのに役立つ。そのため、手動で表示する場合やプラグインがサポートしている場合は、タイムスタンプとカテゴリーを追加している。

ISO-8601フォーマットのarticle:published_timeとarticle:modified_time
article:author（プラグインによって名前またはプロフィールURL）
記事:セクション
article:tag (複数のタグが可能)

<meta property="article:published_time" content="" />
<meta property="article:modified_time" content="" />
<meta property="article:section" content="" />

<meta property="article:tag" content="name ); ?>" /> " /> <?
" /> <?

国際化 私はこれをog:localeとog:locale:alternateで解決します。多言語サイトでは、それぞれの言語のドキュメントにog:urlとロケール（例えばde_DE、en_US）を割り当て、代替を追加します。このようにして、フィードは適切な言語版をユーザーに提供します。

</meta

og:urlが以下を参照することが重要であることに変わりはない。正準 URLが表示されます。私は UTM パラメータのようなトラッキングを og:url に追加せず、実際の共有リンクに追加します。これによりプレビューの一貫性が保たれ、シェアグラフはバリアントでのインタラクションをバンドルしません。

複数の画像、寸法、altテキスト

複数のog:image-のエントリーが許される。ネットワークでは、これらの中から最適なモチーフを選択することが多い。また、トリミングや選択が適切に機能するように、幅、高さ、タイプ、altテキストも提供する。

<meta property="og:image" content="" />?

<meta property="og:image:width" content="" /> <?
<meta property="og:image:height" content="" /> <?
<?php endif; ?
<meta property="og:image:alt" content="" /> " /> <?
 <?
" /> <?

私は、写真には必ず公開 (NoIndex/NoAuthなし)、有効な証明書によるHTTPSで配信され、クッキーやリファラーチェックによる失敗がないこと。CDNは署名/トークンを使用してもよいが、クローラーに安定した直接取得可能なURLを提供すべきである。

テクニカルチェック：ステータスコード、リダイレクト、セキュリティ

クリーン・デリバリー は壊れたプレビューを防ぎます。私はターゲットURLとog:imageをチェックしています：

HTTPステータス200（301/302からの連鎖なし、403/404なし）
正しいコンテンツタイプ（text/html、image/webp/jpeg/png）
プレビューをブロックするrobotsタグを使用しない（画像にnoimageindexを使用しない）
最大ファイルサイズは控えめにしてください（大きすぎる画像は拒否される場合があります）。
サーバーファイアウォールは、facebookexternalhit、Twitterbot、LinkedInBot、PinterestCrawlerのようなユーザーエージェントを許可します。

アグレッシブなレート制限やWAFには、一般的なクローラーIPやエージェントをホワイトリストに登録している。共有クローラーがブロックされないように、ホットリンク保護と署名付きCDN URLを設定する。混在コンテンツ（httpsのページにhttpの画像）を一貫して避けている。

ヘッドレス、ブロックテーマ、重複メタデータ

ブロックテーマ とヘッドレスのセットアップには明確な責任が必要だ。クラシックなテーマでは、私は出力をwp_headにアタッチします。FSE/ブロックテーマはすでにメタデータを生成することができるが、私はそれを拡張するか、特に無効にする。ヘッドレス環境では、OGタグとTwitterタグが サーバー側 は、クローラーがJavaScriptなしで見ることができるようにレンダリングされる。

メタデータの重複 手動でレンダリングすると同時にプラグインのOG出力をオフにする（またはその逆）。例

<?php
// Yoast OG/Twitterを削除する（独自のタグを出力する場合）
add_action( 'init', function() { )
  if ( defined( 'WPSEO_VERSION' ) ){
    remove_action( 'wpseo_head', [ 'WPSEO_OpenGraph', 'opengraph' ], 30 )；
    remove_action( 'wpseo_head', [ 'WPSEO_Twitter', 'get_instance' ], 40 )；
  }
});

// RankMathソーシャルを削除する
add_action( 'init', function() { )
  if ( class_exists( '￤RankMath￤Frontend￤Social' ) ){
    remove_action( 'wp_head', [ '￤RankMath￤Frontend￤Social::get(), 'add_tags' ], 20 )；
  }
});

ページビルダーの場合は、独自のソーシャルモジュールがあるかどうかをチェックする。私は意識的に a OGとTwitterを一貫して配信し、競合を避けるソース。

ワークフロー、ガバナンス、編集

一貫性 は、OGフィールドがワークフローの一部である場合に作成されます。私は、タイトルと説明文の長さのテンプレート（例：タイトル55～70文字、説明文110～160文字）と明確な画像ガイドラインを使って作業します。OGフィールドの設定、画像のチェック、デバッグツールの更新。

画像テンプレートの定義（ボーダー、ロゴ、タイポ、コントラスト、1200×630ベース）
OGフィールドをパブリッシュフローに統合する（プラグインの必須フィールド）
UTM パラメータは共有リンクのみで、og:url には含まれない。
更新時にmodified_timeを維持し、プレビュー画像を再スクレープする。
キャンペーン用の一貫したシリーズ画像とハッシュタグ戦略

ショップでは、次のようなことを計画している。 製品ワークフローカテゴリーごとの標準OG画像、トップセラーのための異なる個別画像、在庫変更のための定期的なチェック。多言語プロジェクトでは、OGフィールドの翻訳を厳密に並列に保ち、フィードに言語が混在しないようにしています。

GDPRフレンドリーな共有の実装

プライバシー 重いソーシャル・スクリプトを使わないことでネイティブの共有機能（Web Share API）やシンプルな自作の共有リンクは、リソースとデータを節約する。サードパーティのサービスに不必要なリクエストを送らないようにするため、サーバー側で共有のためのカウント機能を実現したり、意図的にそれらを使わないようにしています。これにより、パフォーマンスとデータ保護のバランスが保たれている。

共有前の実践的チェックリスト

og:titleは簡潔で、ブランドに準拠し、フィードに省略記号を使用しない。
og:descriptionに明確なベネフィットを、純粋なキーワードを使わない
og:url canonical、セッションID/UTMなし
og:画像 1200×630（または同じアスペクト比のそれ以上）、WebP/JPEG、1～2MB未満
og:image:width/height設定、altテキストあり
og:type正しい（記事、製品、ウェブサイト、ビデオ）
article:published_time/modified_timeが維持されている。
ツイッターカードが活躍（要約_拡大画像）
アクティブなOGソースは1つだけ（ダブル出力なし）
各プラットフォームでデバッガーを実行し、キャッシュを強制的にリフレッシュする。
ページと画像はHTTP 200、リダイレクトチェーンはなし
CDN/ファイアウォールがソーシャル・クローラーを通す

簡単にまとめると

オープングラフ は、ソーシャルメディア上のあなたのWordPressリンクを明確で、魅力的で、一貫性のあるものにします。コアタグ、適切な画像、きれいなキャッシュにより、プレビューを確実に制御できます。プラグインを使えば簡単に始められ、手動で統合すれば最大限の微調整が可能です。コンテンツを広告する前に、デバッガーですべての変更をチェックし、画像品質を高く保ちましょう。そうすることで、クリック数が増え、インタラクションが増え、トラフィックが目に見えて増加します。