OGPとは｜LPの設定方法とSNSでの表示確認

｜広告運用ノウハウ公開中！

より詳しく知りたい方は資料をダウンロード！

LPのURLをSNSやLINEで共有したら、画像が出なかった。タイトルの代わりに関係のない文章が表示された。広告用につくったLPでも、URLが社内のチャットや顧客とのやりとり、SNSで共有されることはよくあります。そのときの見え方を整えるのが「OGP」です。

OGPは、URLが共有されたときに表示されるタイトル・説明文・画像を、ページの側から指定する仕組みです。設定はHTMLにmetaタグを数行足すだけですが、画像を差し替えても表示が変わらない、LINEでは一部の情報しか使われないなど、知らないとつまずく点があります。

この記事では、OGPとは何か、基本のプロパティ、Facebook（Meta）とLINEでの扱い、LPでの設定方法、表示の確認とキャッシュの更新方法を、Open Graph protocolの公式サイトとMeta・LINE・Googleの公式ドキュメント（2026年10月28日時点）をもとに解説します。

1. OGPとは｜URLが共有されたときの見え方を指定する仕組み

1-1. Open Graph protocolとは

OGPは「Open Graph protocol」の略です。公式サイトでは、Open Graph protocolを「どのウェブページもソーシャルグラフの中のリッチなオブジェクトにできるようにするもの」と説明し、例としてFacebookで使われていることを挙げています。設定は、ページの <head> の中に追加の <meta> タグを置いて行います（出典：The Open Graph protocol｜ogp.me）。

実務の言葉に置き換えると、URLがSNSやメッセージアプリで共有されたときに、どのタイトル・説明文・画像を出してほしいかをページの側から伝えるための書き方です。

1-2. OGPを設定しないとどうなるか

OGPを設定しなくても、プレビューが出ないとは限りません。ただし、何が出るかはサービス側の判断になります。

Metaのドキュメントでは、Open Graphタグがない場合、Facebookのクローラーは内部の判断（ヒューリスティック）でタイトル・説明・プレビュー画像を推測すると書かれています（出典：A Guide to Sharing for Webmasters｜Meta for Developers）。LINEでも、OGPを設定していない場合はURL内の文言や画像が自動で取得されます。タイトルは og:title がなければ title タグ、説明は og:description がなければ description タグか本文のテキストが読み込まれ、該当する情報がなければ何も読み込まれないこともあります（出典：FAQ｜LINE Developers）。

LPはファーストビューが画像中心のことが多く、本文のテキストが少なめです。OGPを指定しておかないと、意図しない文言や画像が共有先に出る可能性があります。

1-3. Google検索でも og:title が材料の1つになる

OGPは主にSNS向けの仕組みですが、Google検索でも参照されます。Googleが検索結果のタイトルリンクを自動で決めるときのソースの1つに「og:title meta タグ内のテキスト」が挙がっています（出典：Google 検索でのタイトルリンクの管理｜Google 検索セントラル）。また、検索結果のサイト名を決めるシステムでは、og:site_name も考慮されます。ただし、希望するサイト名を指定するには WebSite 構造化データが最も重要とされています（出典：Google 検索のサイト名｜Google 検索セントラル）。

2. OGPの基本プロパティ

2-1. すべてのページに必須の4つ

Open Graph protocolの公式サイトでは、すべてのページに必須のプロパティとして次の4つを挙げています（出典：The Open Graph protocol）。

プロパティ	内容（ogp.me の説明）
og:title	グラフの中で表示されるオブジェクトのタイトル
og:type	オブジェクトの種類（例：video.movie。ウェブサイトなら website、記事なら article など）
og:image	オブジェクトを表す画像のURL
og:url	グラフの中で恒久的なIDとして使われる正規URL

2-2. 任意だが推奨されるプロパティ

任意（一般に推奨）のプロパティとして、og:description（1〜2文の説明）、og:site_name（より大きなサイトの一部である場合のサイト全体の名前）、og:locale（言語と地域。形式は language_TERRITORY で、既定は en_US）、og:audio、og:video などが挙がっています（出典：The Open Graph protocol）。日本語で日本向けのページなら、この形式に当てはめて ja_JP と書きます。

2-3. og:image の補足プロパティ

og:image には、補足のプロパティがあります。og:image:secure_url（HTTPSが必要な場合の代替URL）、og:image:type（MIMEタイプ）、og:image:width と og:image:height（幅と高さのピクセル数）、og:image:alt（画像の内容の説明）です。公式サイトには、og:image を指定するなら og:image:alt も指定すべきと書かれています。同じプロパティを複数書いた場合は、上から最初のタグが優先されます（出典：The Open Graph protocol）。

3. Facebook（Meta）でのOGP

3-1. Metaが基本とするタグ

Metaのウェブマスター向けドキュメントでは、すべてのコンテンツで使うべき基本のタグとして、og:url・og:title・og:description・og:image・fb:app_id を挙げています。それぞれの説明には、LPで気をつけたい点が含まれています（出典：A Guide to Sharing for Webmasters｜Meta for Developers）。

• og:url：ページの正規URL。セッション変数、ユーザーを識別するパラメータ、カウンターを含まない「装飾のない」URLにする。いいねやシェアはこのURLに集計される
• og:title：サイト名などのブランディングを含まない記事のタイトル
• og:description：通常2〜4文の簡潔な説明。投稿のタイトルの下に表示される
• og:image：シェアされたときに表示される画像のURL
• fb:app_id：Facebook インサイトを使うために必要なアプリID

追加で、og:type（指定しなければ website）と og:locale（既定は en_US）を入れることも勧めています（出典：同上）。

3-2. 画像サイズ｜幅1080ピクセル以上を推奨

Metaのベストプラクティスでは、高解像度の端末で最適に表示するために、幅1080ピクセル以上の画像を使うよう勧めています。画像リンク広告を表示するには、最低でも幅600ピクセルの画像を使う必要があります。広告クリエイティブでは、画像リンク広告に1:1の画像を使うことが推奨されています（出典：Sharing best practices｜Meta for Developers）。

また、og:image:width と og:image:height で画像の寸法をクローラーに伝えると、画像をダウンロードして処理するのを待たずにすぐ描画できます。ウェブマスター向けドキュメントでも、初回のシェアで画像が正しく読み込まれるように高さと幅を指定するよう書かれています。og:image:type は image/jpeg・image/gif・image/png のいずれかです（出典：同上、A Guide to Sharing for Webmasters）。OGP用の画像を新しくつくるときの考え方は「広告バナーの作り方とは？デザインのコツと成功事例を紹介」も参考になります。

3-3. クローラーが取得できる状態にしておく

FacebookでのプレビューはMetaのクローラー（FacebookExternalHit）がページを取得してつくります。このクローラーは、Facebook・Instagram・Messengerなどでシェアされたページのタイトル・説明・サムネイル画像などを収集してキャッシュし、表示します。要件として、次の点が書かれています（出典：Meta Web Crawlers｜Meta for Developers）。

• サーバーが gzip と deflate のエンコーディングを使う
• Open Graphのプロパティは、ページの最初の1MBより前に置く（それより後ろは切り捨てられる）
• 数秒以内にクロールできるようにする。できない場合、Facebookはコンテンツを表示できない
• クローラーのユーザーエージェント文字列かIPアドレス（より安全）を許可リストに加える

LPの表示が遅い場合の改善は「LPの表示速度を改善するには？原因と対策方法を解説」で解説しています。

4. LINE・XでのURLプレビュー

4-1. LINEが使うのは og:title・og:description・og:image の3つだけ

LINEのトークのURLプレビューは、ウェブサイトのOpen Graphタグを使って生成されます。使われるのは og:title・og:description・og:image の3つだけで、それ以外のOGPタグの情報はプレビューに含まれません（出典：FAQ｜LINE Developers）。og:site_name などを入れても、LINEのプレビューには出ないということです。

また、「LINEで送る」ボタンでURLをシェアするときは、URLによってはプレビューが表示されないことがあり、その場合もURLはシェアできると書かれています（出典：FAQ｜LINE Developers）。

4-2. X（旧Twitter）は公式の仕様を確認してから設定する

X（旧Twitter）でのリンクの表示（カード）について、2026年10月28日時点で、X公式の開発者ドキュメントにカードの仕様のページを見つけられませんでした（以前のURLは開発者ドキュメントのトップページへ転送されます）。そのためこの記事では、Xのカード独自のタグ名や画像サイズは扱いません。Xでの見え方は、OGPを設定したあとに実際にXで共有して確かめてください。

5. LPにOGPを設定する方法

5-1. head の中にmetaタグを書く

OGPは、ページの <head> の中に <meta property="og:〇〇" content="値" /> の形で書きます（出典：The Open Graph protocol）。LPなら、最低限次のタグをそろえます。

• <meta property="og:title" content="LPのタイトル" />
• <meta property="og:description" content="LPの説明文" />
• <meta property="og:image" content="画像のURL" />
• <meta property="og:url" content="LPの正規URL" />
• <meta property="og:type" content="website" />

必要に応じて、og:site_name、og:locale（例：ja_JP）、og:image:width、og:image:height、og:image:alt を加えます。

5-2. 画像を用意する

画像は、Metaの推奨に合わせて幅1080ピクセル以上でつくり、og:image:width と og:image:height で寸法を書いておくと、初回のシェアから正しく表示されやすくなります（3-2）。画像のURLは、ブラウザで直接開けるURLにします。生成AIで画像をつくる場合の権利の注意点は「画像生成AIの商用利用とは？おすすめツールと活用のコツを紹介」で解説しています。

5-3. og:url には広告のパラメータを付けない

広告のLPは、広告のクリックIDや計測用のパラメータが付いたURLでアクセスされることがあります。Metaのドキュメントは、og:url にセッション変数やユーザーを識別するパラメータを含めず、「装飾のない」正規URLを入れるよう求めています（出典：A Guide to Sharing for Webmasters）。og:url には、パラメータのないLPのURLを固定で書いておきます。

6. OGPの表示確認とキャッシュの更新

6-1. シェアデバッガーで取得された内容を確認する

Facebookでの見え方は、Metaの「シェアデバッガー」で確認できます。URLを入力すると、クローラーが取得したmetaタグと、エラーや警告が表示されます。デバッガーはページの取得（スクレイプ）も行うため、HTMLの誤りを直したあとの内容の更新にも使えます（出典：A Guide to Sharing for Webmasters、シェアデバッガー｜Meta for Developers）。

6-2. 画像はURLでキャッシュされる｜差し替えは新しいURLで

Metaのドキュメントには、og:image の画像は「URLに基づいてキャッシュされ、URLが変わらない限り更新されない」と書かれています。公開後に画像を変えたい場合は、新しい画像に新しいURLを使います（出典：A Guide to Sharing for Webmasters）。ベストプラクティスでは、画像を更新したときもシェアデバッガーにURLを通して、画像を事前にキャッシュさせるよう勧めています（出典：Sharing best practices）。

6-3. 標準の更新周期は24時間

Metaのベストプラクティスによると、シェアデバッガーは取得済みのコンテンツを更新するので、「標準の24時間の更新周期」より頻繁に更新したい場合に役立ちます（出典：Sharing best practices）。タイトルや説明文を直したのにFacebookの表示が変わらないときは、シェアデバッガーで取得し直します。

なお、LINEのURLプレビューの情報を更新する方法は、LINE Developersのよくある質問（2026年10月28日時点）には載っていません。

7. OGPでよくある失敗例

7-1. 失敗例1：同じURLのまま画像を差し替え、古い画像が出続ける

症状：LPのキャンペーン内容に合わせてOGP画像をつくり直し、同じファイル名・同じURLのまま上書きすると、Facebookでシェアしたときに古い画像が表示され続ける。

原因：Metaのドキュメントでは、og:image の画像はURLに基づいてキャッシュされ、URLが変わらない限り更新されないと書かれています（出典：A Guide to Sharing for Webmasters）。

対策：新しい画像を別のファイル名（別のURL）で用意し、og:image をそのURLに書き換えます。そのうえでシェアデバッガーにLPのURLを通し、新しい画像が取得されたことを確認します。

回避策：OGP画像のファイル名に日付や版の番号を入れるなど、差し替えのたびにURLが変わる運用にしておきます。画像を差し替えたら、シェアデバッガーで取得し直すところまでを作業手順に入れます。

7-2. 失敗例2：og:url に広告のパラメータ付きURLを入れる

症状：広告から来たときのURL（計測用のパラメータ付き）をそのまま og:url に入れると、いいねやシェアの集計先がパラメータ付きのURLになり、Metaが求める「装飾のない」正規URLから外れる。

原因：Metaのドキュメントでは、og:url はセッション変数やユーザーを識別するパラメータを含まない正規URLにするよう求めており、いいねやシェアはこのURLに集計されると書かれています（出典：A Guide to Sharing for Webmasters）。

対策：og:url を、パラメータのないLPのURLに書き換えます。ページの読み込み時にURLを自動で入れる仕組みにしている場合は、固定の値に変えます。

回避策：LPを公開する前のチェック項目に「og:url がパラメータのない正規URLになっているか」を入れます。LPを複製して新しいURLで配信するときも、og:url を新しいURLに直したかを確認します。

7-3. 失敗例3：ボット対策や認証で、クローラーがページを取得できない

症状：LPに公開前のパスワード保護を残したり、ボットを弾く設定をしたりしていると、URLを共有してもタイトルや画像のプレビューが表示されない。

原因：Facebookのプレビューは、Metaのクローラーがページを取得してつくります。Metaのドキュメントでは、数秒以内にクロールできないとコンテンツを表示できないこと、クローラーのユーザーエージェント文字列かIPアドレスを許可リストに加えることが要件に挙がっています（出典：Meta Web Crawlers）。

対策：クローラーを許可リストに加え、シェアデバッガーでmetaタグが取得できるかを確認します。クロールの時点でページが見られなかった場合は、見られるようになってからシェアデバッガーで取得し直せます。

回避策：LPの公開手順に、パスワード保護の解除とシェアデバッガーでの確認を入れておきます。ボット対策のサービスを使う場合は、SNSのクローラーを通す設定があるかを事前に確認します。

8. Squad beyondでLPにOGPを設定する

Squad beyondでつくったLP（beyondページ）は、配信URLがシェアされたときに表示されるタイトル、説明文、画像を、OGPで設定できます。FAQに載っている手順は次のとおりです（出典：配信URLがシェアされた際に表示されるタイトル、説明文、画像を設定する｜Squad beyond FAQ）。

1. 「タグ設定」の「Javascript head」に、og:title・og:description・og:url・og:image・og:type・og:site_name・og:locale のmetaタグ（FAQに掲載されているコード）を設置する
2. タイトルや説明文、URL、画像のURLを、そのLPの内容に変更する
3. 「更新」をクリックする

og:url には、5-3のとおりパラメータのない配信URLを入れます。設定したあとは、6-1のシェアデバッガーで、意図したタイトル・説明文・画像が取得されているかを確認しましょう。SNS広告の運用全般は「SNS広告運用とは？成果を最大化するノウハウとおすすめツールを解説」で解説しています。

9. OGPについてよくある質問

10. まとめ

• OGPは、URLが共有されたときのタイトル・説明文・画像をページの側から指定する仕組み。ogp.me では og:title・og:type・og:image・og:url の4つが必須
• Metaは基本タグとして og:url・og:title・og:description・og:image・fb:app_id を挙げ、画像は幅1080ピクセル以上を推奨している
• LINEが使うのは og:title・og:description・og:image の3つだけ
• 画像はURLでキャッシュされる。差し替えは新しいURLで行い、シェアデバッガーで取得し直す
• og:url にはパラメータのない正規URLを入れ、クローラーがページを取得できる状態にしておく

LPを公開する前に、OGPのタグを入れ、シェアデバッガーで見え方を確かめるところまでを手順に入れておきましょう。Squad beyondでは、タグ設定の「Javascript head」にOGPのタグを置くだけで設定できます。

　

Squad beyondサービス紹介資料はこちらからダウンロード