OGP・Twitterカードの設定方法【コピペOKテンプレ付き】

はじめに｜SNSでシェアしたときの「見た目」整ってますか？

「ブログ記事をSNSでシェアしたのに、サムネイルが出ない」「タイトルや説明文が変…」
こんな経験、ありませんか？

それ、OGPやTwitterカードの設定不足が原因かもしれません。

本記事では、Webサイト制作を始めたばかりの方向けに、OGP（Open Graph Protocol）とTwitterカードの基本的な設定方法を丁寧に解説します。コピペできるサンプルコード付きです。

OGPとは？｜SNSに正しく情報を渡す仕組み

OGPとは Open Graph Protocol の略で、FacebookやX（旧Twitter）、LINEなどのSNSでリンクをシェアしたときに「どう表示するか」を決めるための仕組みです。Facebookが2010年に策定し、現在ではほぼすべてのSNSが対応しています。

たとえば、次のような情報がSNS上で表示されます：

タイトル（og:title）
説明文（og:description）
サムネイル画像（og:image）
ページのURL（og:url）
サイト名（og:site_name）

これらをHTMLの<head>内にメタタグとして記述することで、SNSが正しく読み取ってくれます。各タグの詳しい役割や推奨値はOGPプレビューツールの使い方でも解説しています。

Twitterカードとは？｜X専用の設定も必要

X（旧Twitter）はOGPに対応しつつ、独自にTwitterカードという形式も用意しています。

X上ではtwitter:〇〇タグが設定されていればそちらを優先し、なければog:〇〇をフォールバックとして使用します。ただし、twitter:cardタグだけはOGPでは代替できないため、必ず記述してください。

基本のOGP＋Twitterカード設定｜コピペOKのテンプレート

以下のコードをHTMLの<head>内にコピペし、各値を自分のサイトの情報に書き換えてください。

<!-- OGP設定 -->
<meta property="og:type" content="website" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の説明文（120文字程度）" />
<meta property="og:url" content="https://example.com/記事のURL" />
<meta property="og:image" content="https://example.com/images/ogp-image.jpg" />
<meta property="og:site_name" content="サイト名" />

<!-- Twitterカード -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Twitterユーザー名（任意）" />
<meta name="twitter:title" content="記事タイトル">
<meta name="twitter:description" content="記事の説明文">
<meta name="twitter:image" content="https://example.com/images/twitter-image.jpg">

注意点

og:image にはhttpsから始まる絶対URLを指定すること（相対パスはNG）
OGPタグはproperty属性、Twitter Cardタグはname属性を使用する
画像の推奨サイズは1200×630px（アスペクト比1.91:1）、形式はJPEGまたはPNG

Twitter Card（Xカード）の種類と設定方法

Twitter Cardには以下の4種類があります。用途に合わせてtwitter:cardのcontent値を選択してください。

カードタイプ	content値	特徴	主な用途
Summary	`summary`	小さなサムネイル＋タイトル＋説明文	ニュース記事・一般的なページ
Summary Large Image	`summary_large_image`	大きなサムネイル画像を上部に表示	ブログ記事・ポートフォリオ
Player	`player`	動画や音声を埋め込みで再生	動画サイト・ポッドキャスト
App	`app`	アプリのダウンロードリンクを表示	iOS/Androidアプリの紹介

summary_large_imageの設定例

ブログやWebサイトで最もよく使われるのがsummary_large_imageです。大きな画像が目を引くため、クリック率の向上が期待できます。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@アカウント名" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの説明文" />
<meta name="twitter:image" content="https://example.com/images/card-image.jpg" />

twitter:imageの画像サイズは、summary_large_imageの場合300×157px以上、最大4096×4096pxまで対応しています。推奨は1200×628pxです。

X（Twitter）ウェブサイトカードの作り方

X（旧Twitter）の広告機能で利用できる「ウェブサイトカード」は、通常のTwitter Cardとは異なります。X広告マネージャーから作成し、外部サイトへの誘導に特化したカード形式です。作成手順は以下のとおりです。

X広告マネージャーにログインする
「クリエイティブ」→「カード」を選択する
「ウェブサイトカード」を選び、画像・見出し・遷移先URLを設定する
カードを保存してツイート（ポスト）に紐づける

なお、広告用ウェブサイトカードにはX広告アカウント（無料作成可）が必要です。通常のブログ記事であれば、前述のメタタグによるTwitter Card設定で十分です。

WordPressでの実装方法

WordPressを使っている場合、以下の方法でOGP/Twitterカードを導入できます。add_actionやget_the_titleなどのWordPress関数を使用します。

方法①：functions.phpに直接書く

function add_ogp_meta_tags() {
  if (is_single() || is_page()) {
    global $post;
    setup_postdata($post);
    $title = get_the_title();
    $desc = get_the_excerpt();
    $url = get_permalink();
    $img = get_the_post_thumbnail_url($post, 'full') ?: 'https://example.com/default.jpg';

    echo '<meta property="og:title" content="'.esc_attr($title).'">'."
";
    echo '<meta property="og:description" content="'.esc_attr($desc).'">'."
";
    echo '<meta property="og:url" content="'.$url.'">'."
";
    echo '<meta property="og:image" content="'.$img.'">'."
";
    echo '<meta property="og:type" content="article">'."
";
    echo '<meta property="og:site_name" content="'.get_bloginfo('name').'">'."
";
    echo '<meta name="twitter:card" content="summary_large_image">'."
";
  }
}
add_action('wp_head', 'add_ogp_meta_tags');

方法②：プラグインを使う（簡単）

以下のようなSEO系プラグインを使えば自動でOGPも対応してくれます。

All in One SEO
Yoast SEO
SEO SIMPLE PACK（日本語＆軽量）

OGPの設定確認とテスト方法

OGPを設定したら、実際にSNSでどう表示されるかを必ず確認しましょう。確認手段は主に3つあります。

各SNSの公式デバッグツール

Facebook：シェアデバッガー — URLを入力し「もう一度スクレイピング」でキャッシュ更新
X（Twitter）：Card Validator — カードのプレビューとキャッシュクリア
LINE：Page Poker — LINEでのプレビュー確認とキャッシュクリア

OGPプレビューツールで一括確認

各SNSのデバッグツールを個別に開くのは手間がかかります。OGPプレビューツールを使えば、X・Facebook・LINE・Discord・Slackの5つのSNSプレビューをワンストップで確認できます。画像サイズや必須タグの設定漏れもチェック機能で検出できるため、公開前の最終確認に便利です。

OGPプレビューツールで確認する

おわりに｜OGPは「信頼感」を生む名刺のようなもの

OGPやTwitterカードは、SEOのように直接検索順位に関わる要素ではありません。しかし、SNSでシェアされたときに「このサイトはちゃんとしてるな」と思ってもらえる信頼感の第一印象を作る、とても大切な要素です。

コードで自分で書いてもよし、プラグインで補助してもよし。自分のサイトが誰かに紹介されたとき、どんなふうに見えるのか？を意識して、ぜひ整えてみてください。

OGPの設定が正しく反映されているか不安なときは、CodeQuest.work SEOで一括チェックできます。OGP・メタタグ・構造化データなど45項目を無料で診断。

OGP設定をチェックする → CodeQuest.work SEO

よくある質問（FAQ）

Q. OGPを設定しないとどうなりますか？

SNSでリンクをシェアした際に、タイトルや画像が正しく表示されません。SNSのクローラーが自動的にページ内容を推測して表示するため、意図しない画像やテキストが表示されることがあります。

Q. OGPタグとTwitter Cardタグの両方が必要ですか？

X（Twitter）はtwitter:titleやtwitter:descriptionが未設定の場合、og:titleやog:descriptionをフォールバックとして使用します。ただし、twitter:cardタグだけはOGPでは代替できないため、最低限<meta name="twitter:card" content="summary_large_image" />は必ず記述してください。

Q. OGPの設定を変更したのに反映されません

SNS側にキャッシュが残っている可能性があります。Facebookはシェアデバッガー、X（Twitter）はCard Validatorでキャッシュをクリアして確認してください。また、サーバー側のキャッシュやCDNのキャッシュが原因の場合もあります。

Q. Twitter Cardの4種類の違いは何ですか？

summary（小さいサムネイル）、summary_large_image（大きい画像）、player（動画・音声の埋め込み再生）、app（アプリダウンロードリンク）の4種類があります。一般的なブログ記事にはsummary_large_imageが最も効果的です。

Q. OGPの設定が正しいかどうやって確認できますか？

OGPプレビューツールを使えば、X・Facebook・LINE・Discord・Slackでの表示をリアルタイムで一括確認できます。タグの設定漏れや画像サイズの問題もチェック機能で検出できます。

OGPとTwitterカードの設定方法｜コピペOKテンプレート付き【初心者向け】