URLをSNSに貼ったとき、タイトルや画像がカード形式でリッチに表示されることがありますよね。逆に、URLがテキストのまま素っ気なく表示されることもあります。あの違いは何なのか——答えは OGP（Open Graph Protocol） メタタグの有無です。
このブログにOGPを導入した際に調べた内容を、初心者でもひと通り理解できるように整理しました。
OGP（Open Graph Protocol）とは
OGP（Open Graph Protocol）は、Webページの情報を構造化して外部サービスに伝えるためのプロトコルです。もともとFacebook（現Meta）が2010年に策定したもので、HTMLの <head> 内に <meta> タグとして記述します。
SNSやチャットツールでURLを共有したとき、サービス側はそのURLにアクセスしてOGPメタタグを読み取り、タイトル・説明文・画像をカード形式で表示します。これがいわゆる「リンクカード」や「リンクプレビュー」と呼ばれるものです。
OGPがないとどうなるか
OGPタグがない場合、SNS側は <title> タグやページ本文から情報を推測しようとします。しかし、意図した通りに表示される保証はありません。タイトルが途中で切れたり、関係ない画像が選ばれたり、そもそもプレビューが表示されなかったりします。
OGPを設定すると、こうした問題を解決できます。
- クリック率の向上: 画像やタイトル付きのリッチなカードは目を引く
- 意図した情報を表示できる: SNSごとに勝手に解釈されるのを防ぐ
- サイトの信頼性向上: きちんとカードが出るだけで「ちゃんとしたサイト」に見える
OGPの主要プロパティ一覧と設定方法
OGPにはいくつかのプロパティがありますが、まずは主要なものを押さえておけば十分です。以下は、HTMLの <head> 内に記述するメタタグの例です。
<head> <meta property="og:title" content="OGPメタタグ入門" /> <meta property="og:description" content="OGPの基本と動作確認方法を解説します" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://example.com/blog/ogp-meta-tags" /> <meta property="og:image" content="https://example.com/images/ogp.png" /> <meta property="og:site_name" content="気まぐれ駆動開発" /> <meta property="og:locale" content="ja_JP" /></head>各プロパティの役割を表にまとめます。
| プロパティ | 必須 | 説明 |
|---|---|---|
og:title | はい | ページのタイトル。SNSカードの見出しになる |
og:type | はい | コンテンツの種類。ブログ記事なら article、トップページなら website |
og:image | はい | カードに表示する画像のURL。絶対URLで指定する |
og:url | はい | ページの正規URL（canonical URL） |
og:description | いいえ | ページの説明文。120文字程度が目安 |
og:site_name | いいえ | サイト名。タイトルとは別にサイト全体の名前を表す |
og:locale | いいえ | 言語と地域。日本語サイトなら ja_JP |
公式仕様（ogp.me）では og:title、og:type、og:image、og:url の4つが必須とされています。実運用では og:description もほぼ必須と考えてよいでしょう。
og:imageの設定で注意すべきポイント
OGPプロパティの中で一番ハマりやすいのが og:image です。押さえておくべきポイントがいくつかあります。
- 絶対URLで指定する:
/images/ogp.pngのような相対パスでは認識されない。https://example.com/images/ogp.pngのようにフルURLで書く - 推奨サイズ: 1200 x 630px が広く推奨されている（Facebookの推奨サイズ）
- ファイルサイズ: Facebookの上限は8MBだが、実用上は5MB未満に抑えるのが望ましい
- HTTPS: HTTPSのURLを使う
<meta property="og:image" content="https://example.com/images/ogp.png" /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="630" /><meta property="og:image:alt" content="記事のサムネイル画像" />og:image:width と og:image:height を指定しておくと、SNS側が画像を事前にレイアウト計算でき、表示のちらつきが減ります。og:image:alt は画像の代替テキストです。OGP公式仕様（ogp.me）には含まれていませんが、Facebookが対応しており広く使われています。アクセシビリティの観点からも設定しておくのがおすすめです。
Twitter Card との関係
X（旧Twitter）には独自の Twitter Card という仕組みがあります。OGPとは別のメタタグですが、OGPと併用するのが一般的です。
<meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="OGPメタタグ入門" /><meta name="twitter:description" content="OGPの基本と動作確認方法を解説します" /><meta name="twitter:image" content="https://example.com/images/ogp.png" />ポイントは twitter:card の値です。主な選択肢は以下の2つです。
| カードタイプ | 表示 | 用途 |
|---|---|---|
summary | 小さな正方形の画像 + テキスト | 一般的なページ |
summary_large_image | 大きな横長の画像 + テキスト | ブログ記事やビジュアル重視のページ |
他に player（動画・音声の埋め込み用）や app（モバイルアプリ用）もありますが、ブログ記事では上記2つを使うことがほとんどです。
X（旧Twitter）は、Twitter Card用のメタタグが見つからない場合、OGPタグにフォールバックします。つまり twitter:title がなければ og:title を使ってくれます。ただし twitter:card だけはOGPに対応するものがないので、必ず指定する必要があります。
実際の運用では、OGPタグをベースにして twitter:card だけ追加する、というパターンが多いです。
OGPの動作確認方法とデバッグツール
OGPを設定したら、意図した通りに表示されるか確認しましょう。設定したつもりでも、画像のURLが間違っていたりキャッシュが残っていたりして、うまく表示されないことがあります。
Facebook Sharing Debugger
Meta公式のデバッグツールです。URLを入力すると、Facebookがどのようにページを解釈しているか確認できます。
- URL: https://developers.facebook.com/tools/debug/
- Facebookアカウントでのログインが必要
- 「Scrape Again」ボタンでキャッシュをクリアして再取得できる
OGPタグにエラーや警告がある場合は具体的に指摘してくれるので、問題の特定に役立ちます。キャッシュが古い場合も「Scrape Again」で解決できます。
X（旧Twitter）での確認
以前は Twitter Card Validator（cards-dev.twitter.com/validator）というプレビューツールがありましたが、2022年にプレビュー機能が廃止されました。現在の確認方法は以下の通りです。
- ポスト作成画面: X のポスト作成画面にURLを貼り付けると、カードのプレビューが表示される（実際に投稿しなくても確認できる）
- サードパーティツール: OGP Checker や Iframely を使うと、複数のSNSでの表示をまとめて確認できる
サードパーティツール
以下のツールは、ログイン不要で手軽に使えるのでおすすめです。
| ツール | 特徴 |
|---|---|
| OGP Checker | X / Facebook 両方のプレビューを表示。日本語対応 |
| Iframely URL Debugger | OGP / Twitter Card / oEmbed をまとめてチェック |
| RAKKO OGP確認ツール | Facebook / X / LINE / はてなブックマークのプレビュー対応 |
個人的には OGP Checker が気に入っています。URLを入れるだけで、各プロパティの値と実際のカード表示がすぐに確認できるので便利です。
OGP設定でよくあるトラブルと対処法
OGPの設定でよく報告されるトラブルをまとめます。
画像が表示されない
一番多いトラブルです。原因はだいたい以下のどれかです。
- 相対URLで指定している:
og:imageは絶対URLが必須。/images/ogp.pngではなくhttps://example.com/images/ogp.png - 画像のファイルサイズが大きすぎる: Facebookの上限は8MBだが、実用上は5MB未満を目安に
- HTTPSでない: HTTP のURLだと取得をブロックするSNSがある
- robots.txt でブロックしている: SNSのクローラーが画像にアクセスできない
キャッシュが更新されない
OGPタグを修正しても、SNS側にキャッシュが残っていて古い情報が表示されることがあります。Facebook Sharing Debugger の「Scrape Again」ボタンを使えばキャッシュをクリアできます。X（旧Twitter）の場合は、URLの末尾にクエリパラメータ（例: ?v=2）を付けてキャッシュを回避する方法もあります。
og:url とページの実URLが異なる
og:url はページの正規URLを指す必要があります。ここが実際のURLと異なると、SNSが別のページだと認識してしまい、OGP情報が正しく表示されないことがあります。wwwの有無、末尾スラッシュの有無なども統一しましょう。
自サイトでの実践
このブログでも、Astro の BaseLayout コンポーネントでOGPメタタグを動的に生成しています。PWA対応やCloudflare Web Analyticsの導入と合わせて、サイトの基盤整備の一環として追加しました。
実際のコードはこんな感じです。
---const siteName = '気まぐれ駆動開発';const siteUrl = 'https://kimagure-dd.dev';const { title = siteName, description = 'サイトの説明文', mainClass } = Astro.props;const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;---
<head> <title>{title}</title> <meta name="description" content={description} /> <link rel="canonical" href={canonicalUrl} /> <!-- OGP --> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> <meta property="og:type" content={Astro.url.pathname === '/' ? 'website' : 'article'} /> <meta property="og:url" content={canonicalUrl} /> <meta property="og:site_name" content={siteName} /> <meta property="og:locale" content="ja_JP" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content={title} /> <meta name="twitter:description" content={description} /></head>実装で意識したポイントは以下の通りです。
og:typeの出し分け: トップページはwebsite、それ以外はarticleを動的に判定。三項演算子1つで済む- 正規URLの生成:
Astro.url.pathnameとサイトURLから絶対URLを生成。相対パスの罠を避けられる og:imageは未設定: 現時点ではOGP用の画像を用意していないので省略している。今後、記事ごとのサムネイル画像を自動生成する仕組みを入れたいtwitter:cardはsummaryを固定: 画像が小さい正方形で表示されるタイプ。og:imageを設定したらsummary_large_imageに変更予定
Astroに限らず、静的サイトジェネレーターならテンプレートやレイアウトコンポーネントで一括設定するのが楽です。ページごとに手書きする必要はありません。
まとめ
- OGPはWebページの情報をSNSなどの外部サービスに伝えるプロトコル。HTMLの
<meta>タグとして<head>内に記述する - 必須プロパティは
og:title、og:type、og:image、og:urlの4つ。実質的にはog:descriptionも必須 - og:image は絶対URL・1200x630px・HTTPS で指定する。ハマりポイントの大半はここ
- Twitter Card は OGP とは別の仕組みだが、OGP にフォールバックする。
twitter:cardだけは必ず指定する - 動作確認は Facebook Sharing Debugger やサードパーティツール（OGP Checker など）で行う
- キャッシュが原因で更新が反映されないことがあるので、デバッグツールでの再スクレイプを忘れずに
ヒヨリOGPを設定するだけで、SNSでシェアしたときの見栄えがガラッと変わるよ！og:image は相対パスだと認識されないから、絶対URLで書くのを忘れないでね。設定したら Facebook Sharing Debugger で確認するクセをつけるのがおすすめだよ。さあ、自分のサイトのOGPをチェックしてみよう！