OGPタグの設定方法｜HTML直書きとWordPressでの入れ方

最終更新: 2026-07-19

SNSでURLをシェアした時にタイトルや画像をきれいに表示させるには、ページに「OGPタグ」を設定します。この記事で、最低限そろえるタグと、HTML・WordPressそれぞれでの入れ方を解説します。

最低限そろえたい4つのタグ

<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:url" content="https://example.com/page">

og:imageは必ずhttps://から始まる絶対URLで指定します。画像がなければOGP画像ジェネレーターで1200×630pxのものを用意しましょう。

X（Twitter）向けのタグ

Xで大きな画像付きカードにするには、次を追加します。og:系がある場合、多くの項目はそちらで代替されます。

<meta name="twitter:card" content="summary_large_image">

HTMLに直接書く場合

静的サイトやテンプレートを自分で編集できる場合は、上記タグを各ページの<head>内に記述します。ページごとにtitle・description・imageを変えるのがポイントです。

WordPressの場合

SEO系プラグイン（All in One SEO、Yoast SEO等）を使うと、投稿ごとにOGP画像・説明文をGUIで設定できます。多くのテーマ・プラグインは「アイキャッチ画像」を自動的にog:imageに設定します。
テーマによっては標準でOGP出力に対応しています。二重に出力されると不具合になるため、プラグインとテーマのどちらか一方に任せるのが安全です。

設定後は必ず確認

設定しても反映されない・古いままの時は、SNS側のキャッシュが原因のことが多いです。確認とキャッシュ更新の方法はOGP画像が反映されない時の対処を参照してください。

og:imageに設定する1200×630pxの画像を、無料・登録不要で作成できます。

OGP画像を用意する