OGP の確認方法：SNS ごとのプレビュー表示をチェック
OGP(Open Graph Protocol)は、URL を SNS やメッセージアプリで共有したときに、タイトル、説明文、画像を表示するための情報です。設定したつもりでも、実際に投稿してみると画像が出ない、タイトルが違う、といった問題がよく起きます。
この記事では、OGP が正しく設定されているかを確認する方法を、確認する理由、SNS ごとの確認ツール、見るべきタグ、スマホでの確認、設定ミスの多い項目の順に説明します。画像そのものの作り方は OGP 画像の作り方 にまとめています。
OGP を確認する理由
OGP はページを開かなくても見える、いわば共有時の看板です。ここで表示される画像とタイトルが、クリックするかどうかの判断に使われます。画像が出なければ、同じリンクでも目に留まりにくく、押される割合に影響します。
また、OGP の取得は SNS 側が行います。自分のブラウザでページが正しく見えていても、SNS 側が情報を取れていないことがあります。ログインが必要なページ、アクセス制限のあるページ、読み込みの遅いページは、取得に失敗しやすい例です。公開前と、画像やタイトルを変えたあとに、必ず確認する習慣を付けます。
SNS ごとの確認ツール
確認ツールは SNS によって異なります。最新の提供状況は公式で確認してください。
| SNS | 確認方法 | 補足 |
|---|---|---|
| 共有デバッガー | 取得結果の確認と再取得ができる | |
| X | 投稿作成画面で確認 | Card Validator のプレビューは廃止されている |
| LINE | 実際にトークへ送って確認 | 公式のデバッガーは見当たらない |
| ストーリーズ、DM で確認 | URL のプレビューは場所によって異なる | |
| Post Inspector | 取得結果の確認と再取得ができる |
Facebook の共有デバッガー
Facebook の共有デバッガー(Sharing Debugger)は、URL を入力すると、Facebook のクローラーが取得した OGP の内容を表示します。取得した情報が古い場合は、「Scrape Again(新しい情報を取得)」のボタンで再取得できます。ほかの SNS でも使える一般的なプロパティの確認用として、利用する人が多いツールです。ログインが求められる場合があります。
X
X のカードを確認する公式の Card Validator は、2022 年にプレビュー機能が削除されました。現在は、投稿作成画面に URL を貼り付けて、カードが表示されるかを見るのが基本になります。実際に投稿する前の下書きの段階でも、プレビューは確認できます。X のカードの表示については X のリンクカードが表示されない原因 で詳しく説明しています。
LINE
LINE には、OGP を確認する公式の専用ツールが見当たりません。確認したい URL を自分のトークや、複数人のいないグループに送って、表示を見るのが一般的です。一度 LINE で取得された情報は、しばらく同じ内容が表示されることがあります。
Instagram では、投稿のキャプション内の URL はリンクとして機能しません。ストーリーズのリンクステッカーや DM で URL を送ったときにどう表示されるかを確認します。表示の仕様はアプリの更新で変わるので、最新の画面で試してください。
見るべきタグ
OGP の中身は、ページの <head> 内にある <meta> タグに書かれています。ブラウザで対象のページを開き、ページのソースを表示して確認できます。最低限、次の 4 つのタグを確認します。
| タグ | 役割 | 確認する点 |
|---|---|---|
og:title |
共有時のタイトル | 長すぎて切れていないか |
og:description |
説明文 | 内容がページと合っているか |
og:image |
画像の URL | 絶対 URL(https:// から始まる)か |
og:url |
ページの正規 URL | 共有する URL と一致するか |
加えて og:type(通常は website か article)と og:site_name も設定しておくと、表示が安定します。X 向けには twitter:card で表示形式を指定します。大きな画像を表示する場合は summary_large_image を指定します。twitter: のタグがない場合は、og: のタグが代わりに使われます。
og:image の確認
画像は、タグの URL を直接ブラウザに貼り付けて、画像が表示されるかを確認します。ここで表示されなければ、SNS 側でも取得できません。URL が相対パス(/images/ogp.png)になっていたり、画像の置き場所にアクセス制限があったりすると、取得に失敗します。
画像のサイズは、1200×630 ピクセル程度(縦横比およそ 1.91:1)が多くの SNS で推奨されています。サイズと容量の詳細は OGP 画像のガイド を参照してください。
スマホでの表示確認
共有されたリンクを見る人の多くはスマホを使っています。パソコンのブラウザ上の確認ツールで問題がなくても、スマホの画面では文字が切れたり、画像の端が欠けたりすることがあります。
確認は、実際に使う SNS のアプリで行います。自分だけが見られる場所(自分宛の DM、鍵付きアカウント、自分だけのグループ)に URL を送って、表示を確認します。タイトルが途中で切れていないか、画像の重要な部分が中央に収まっているか、説明文の冒頭に要点が入っているかを見ます。
アプリ内ブラウザで開いたあとのページの表示も合わせて確認すると、共有から遷移までの体験を通して検証できます。
設定ミスが多い項目
確認時に見つかりやすい不具合は、次のとおりです。
- 画像の URL が相対パスで書かれている
- 画像が大きすぎて、取得が間に合わない
- ページがログインや IP 制限で、クローラーから見えない
og:urlが別のページの URL になっている- 同じタグが複数あり、意図しない値が使われている
- タイトルや説明が、実際のページの内容と食い違う
- 変更したのに古い表示のまま残る(キャッシュ)
最後のキャッシュの問題は、設定が正しくても起きます。対処方法は OGP の変更が反映されない場合 で説明しています。
確認の手順
- ページのソースで
og:のタグを確認する og:imageの URL を直接開いて画像が表示されるか見る- Facebook の共有デバッガーで取得結果を確認する
- 使う SNS のアプリで実際に共有して見る
- 直したあとは、再取得をしてから再確認する
ソースの読み方の例
ページのソースを開いたとき、OGP は次のような形で書かれています。例として、記事ページの <head> 内を示します。
<meta property="og:title" content="春の新作レビュー">
<meta property="og:description" content="3 つの新作を実際に試した感想をまとめました。">
<meta property="og:image" content="https://example.com/images/spring-ogp.png">
<meta property="og:url" content="https://example.com/blog/spring-review">
<meta property="og:type" content="article">
確認では、次の点を順に見ます。og:image が https:// から始まっていること、og:url が共有したい URL と一致していること、各 content の文字列に不要な改行や空白がないことです。ブラウザのソース表示で og: を検索すると、目的のタグをすぐに見つけられます。同じ property が 2 回出てくる場合は、テーマとプラグインが別々に出力している可能性があります。
確認結果の読み方
確認ツールで表示が崩れたとき、症状から原因を絞り込めます。
| 症状 | 考えられる原因 | 確認すること |
|---|---|---|
| 画像が出ない | 画像 URL が相対パス、または取得できない | 画像 URL を直接ブラウザで開く |
| 画像が小さく表示される | サイズが小さい、twitter:card の指定漏れ |
画像のサイズと twitter:card を見る |
| タイトルが違う | 別の og:title が優先されている |
タグの重複を探す |
| 説明が空になる | og:description がない |
タグの有無を確認する |
| 取得に失敗する | ページが制限されている、読み込みが遅い | ログインや IP 制限の有無を確認する |
画像のサイズに関する詳細な要件は、SNS ごとに更新されることがあります。確認ツールの警告が出た場合は、公式のヘルプで最新の条件を確認してください。
公開前に確認するリスト
- ページのソースに、
og:titleog:descriptionog:imageog:urlがある。 - 画像の URL を直接開くと、画像が表示される。
- 共有する URL とページ内の
og:urlが一致している。 - 共有デバッガーで、警告が出ていない。
- 実際に使う SNS のアプリで、自分宛に送って表示を見た。
- 画像とタイトルが、ページの内容と合っている。
短縮 URL を使うときの確認
短縮 URL を共有する場合、SNS が取得する OGP は、短縮 URL 側の設定か、転送先のページの設定のどちらかになります。この挙動はサービスによって異なります。短縮 URL を貼ったときに、意図したタイトルと画像が出るかを、必ず実際に確認してください。転送先のページが更新されたときは、短縮 URL 側の表示と食い違わないかも見直します。
まとめ
OGP は共有時の表示を決める情報で、設定後に必ず確認する必要があります。確認ツールは SNS ごとに異なり、Facebook は共有デバッガー、X は投稿作成画面、LINE は実際のトークへの送信で確認します。タグは og:title、og:description、og:image、og:url を中心に見ます。スマホで表示を確かめ、画像の URL とキャッシュにも注意します。
Boostlink では、短縮 URL ごとに共有時のタイトル、説明、画像を設定できます。元のページを触らずに、共有時の見え方を整えたい場面で役立ちます。
SNS アカウントを引き継いで発信を始める場合は、Boostshop もあわせて検討してください。