1. はじめに｜SNSでシェアしたときの「見た目」整ってますか？
「ブログ記事をSNSでシェアしたのに、サムネイルが出ない」「タイトルや説明文が変…」
こんな経験、ありませんか？
それ、OGPやTwitterカードの設定不足が原因かもしれません。
本記事では、Webサイト制作を始めたばかりの方向けに、OGP（Open Graph Protocol）とTwitterカードの基本的な設定方法を丁寧に解説します。コピペできるサンプルコード付きです。
2. OGPとは？｜SNSに正しく情報を渡す仕組み
そもそもOGPってなに？
OGPとは Open Graph Protocol の略で、FacebookやX（旧Twitter）、LINEなどのSNSでリンクをシェアしたときに「どう表示するか」を決めるための仕組みです。
たとえば、次のような情報がSNS上で表示されます：
- タイトル（
og:title） - 説明文（
og:description） - サムネイル画像（
og:image） - ページのURL（
og:url） - サイト名（
og:site_name）
これらをHTML内にメタタグとして記述することで、SNSが正しく読み取ってくれます。
3. Twitterカードとは？｜Twitter（X）専用の設定も必要
TwitterはOGPに対応しつつ、独自にTwitterカードという形式も用意しています。
カードの種類は主に以下の2つ：
- summary：テキスト中心（小さな画像）
- summary_large_image：画像メイン（大きなサムネイル）
記事やブログでは後者の summary_large_image が一般的です。
4. 基本のOGP＋Twitterカード設定｜コピペOKのテンプレート
<!-- 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">
<meta name="twitter:url" content="https://example.com/post-slug">
✅ 注意点
og:imageには絶対パス（httpsから始まるURL）を指定すること。twitter:siteは@から始まるTwitterアカウント名を指定（任意）
5. WordPressでの実装方法｜functions.phpやプラグインの選択肢
WordPressを使っている場合、以下の方法でOGP/Twitterカードを導入できます。
方法①：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).'">'."\n";
echo '<meta property="og:description" content="'.esc_attr($desc).'">'."\n";
echo '<meta property="og:url" content="'.$url.'">'."\n";
echo '<meta property="og:image" content="'.$img.'">'."\n";
echo '<meta property="og:type" content="article">'."\n";
echo '<meta property="og:site_name" content="'.get_bloginfo('name').'">'."\n";
echo '<meta name="twitter:card" content="summary_large_image">'."\n";
}
}
add_action('wp_head', 'add_ogp_meta_tags');
方法②：プラグインを使う（簡単）
以下のようなSEO系プラグインを使えば自動でOGPも対応してくれます。
- All in One SEO
- Yoast SEO
- SEO SIMPLE PACK（日本語＆軽量）
6. OGP画像の作り方・サイズの目安
画像が表示されない！
というときは画像サイズが原因かもしれません。
推奨サイズ
- 最低：1200×630px
- 形式：JPEGまたはPNG
- ファイルサイズ：できれば5MB以下
- アスペクト比：1.91:1
ツールが必要な場合は、CanvaやFigmaなどのテンプレートを活用するのがおすすめです。
7. OGP設定が反映されないときのチェックポイント
- 画像URLが間違っていないか（相対パス✕）
- キャッシュが残っていないか（SNS側 or サーバー）
- SNSのクローラーがアクセスできない設定になっていないか（robots.txtなど）
8. おわりに｜OGPは「信頼感」を生む名刺のようなもの
OGPやTwitterカードは、SEOのように直接検索順位に関わる要素ではありません。
しかし、SNSでシェアされたときに「このサイトはちゃんとしてるな」と思ってもらえる信頼感の第一印象を作る、とても大切な要素です。
コードで自分で書いてもよし、プラグインで補助してもよし。
自分のサイトが誰かに紹介されたとき、どんなふうに見えるのか？を意識して、ぜひ整えてみてください。