OGP 画像とは？推奨サイズ・設定方法・変更の手順をまとめて解説
X や Facebook、LINE にリンクを貼ると、タイトル、説明文、画像がカード状に表示されることがあります。このカードの元になる情報が OGP（Open Graph Protocol）です。特に大きな面積を占める OGP 画像は、リンクを押してもらえるかどうかを左右します。
この記事では、OGP とは何か、画像の推奨サイズ、HTML での設定方法、SNS ごとの表示の違い、変更が反映されないときの対処、短縮 URL ごとに OGP を変える方法を順に説明します。仕様の細部は各 SNS の更新で変わるため、最終的には各サービスの公式ドキュメントも確認してください。
OGP とは何か
OGP は、Web ページのタイトルや画像などの情報を、SNS に正しく伝えるための取り決めです。ページの HTML の <head> に、決められた名前のタグを書いておくと、SNS がそれを読み取ってカードを作ります。
主なタグは次のとおりです。
| タグ | 役割 |
|---|---|
og:title |
カードに表示するタイトル |
og:description |
説明文 |
og:image |
カードの画像（絶対 URL で指定する） |
og:url |
ページの正規の URL |
og:type |
ページの種類（website、article など） |
og:site_name |
サイト名 |
X（旧 Twitter）には、独自の twitter:card というタグもあります。OGP の設定がない場合、SNS は本文の一部や最初の画像を自動で拾いますが、意図しない内容になりやすいため、明示的に設定するのが基本です。
OGP が重要な理由
リンクだけが貼られた投稿と、画像付きのカードが出る投稿では、目に入る面積がまるで違います。画像とタイトルが内容を表していれば、クリックの動機になります。逆に、画像がなかったり、関係のない画像が出たりすると、不審に見え、押されません。リンクを信頼してもらう観点は、信頼されるリンクの記事でも触れています。クリックされる割合の考え方は、クリック率の記事を参照してください。
OGP 画像の推奨サイズ
画像サイズは、広く使われる目安として、横 1200px × 縦 630px（縦横比およそ 1.91:1）があります。Facebook や X の大きなカード、LINE のプレビューなどで、1 枚の画像を共通で使いやすいサイズです。
| 項目 | 目安 |
|---|---|
| サイズ | 1200 × 630px |
| 縦横比 | 約 1.91:1 |
| 形式 | JPEG または PNG |
| ファイル容量 | 数百 KB 程度に抑える（X は 5MB 以下を目安にする情報が多い） |
| 文字 | 中央寄りに配置し、端に重要な文字を置かない |
画像を作るときのポイント
- 端が切れることがあるため、重要な文字や顔は中央に置く
- 小さく表示されても読めるよう、文字は大きく、少なくする
- 背景と文字のコントラストを十分に取る
- ロゴだけの画像より、内容が伝わる画像にする
- 容量が大きいと、読み込みに失敗して表示されないことがある
SNS によって、正方形に近い形で切り抜いて表示することもあります。確認ツールで、実際の見え方をチェックしてください。確認の方法はOGP の確認の記事に書いています。
HTML で OGP を設定する方法
自分のサイトの HTML に直接書く場合は、<head> 内に次のように記述します。
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の説明文" />
<meta property="og:image" content="https://example.com/images/ogp.png" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
og:image には、https:// から始まる絶対 URL を書きます。相対パスでは読み取れないことがあります。画像は、ログインなしで誰でも取得できる場所に置いてください。
twitter:card を summary_large_image にすると、X で大きな画像のカードが表示されます。指定しない場合は小さな画像のカードになることがあります。
WordPress などの CMS の場合
WordPress では、SEO プラグインの設定画面から、投稿ごとに OGP のタイトル、説明文、画像を設定できるものが一般的です。テーマやプラグインによって項目名が異なるため、各ツールの案内に従ってください。
SNS ごとの表示の違い
同じ OGP でも、SNS によって表示のされ方が違います。
| SNS・アプリ | 表示の特徴 |
|---|---|
| X | twitter:card の指定で、大きな画像か小さな画像かが変わる。表示されないときの対処はX のカードで解説 |
og:image を使った大きな画像のカードが基本 |
|
| LINE | トークにリンクを貼ると、タイトル、説明文、画像のプレビューが出る |
| 通常の投稿ではリンクのカードは出ない。ストーリーズのリンクスティッカーなども OGP のカードにはならない | |
| Slack・Discord など | 各サービスが独自にカードを作るが、OGP を参照することが多い |
Instagram では、リンクのカードが出ません。Instagram で使うリンクの扱いは、インスタのリンクの記事で説明しています。
変更が反映されないときの対処
OGP を直したのに、SNS では古い画像や古いタイトルのままになることがあります。原因は、SNS 側が過去に取得した内容をキャッシュ（一時保存）しているためです。
対処の手順
- HTML の設定が正しく更新されているか、ブラウザでページのソースを確認する
og:imageの画像が、誰でも開ける URL か確認する- 画像のファイル名を変える、または
?v=2のようなパラメータを付けて、新しい URL として読み込ませる - Facebook なら、公式の「シェアデバッガー」で、再取得（スクレイプ）を実行する
- LINE は、LINE が提供してきた「PagePoker」というツールで、キャッシュの削除を試せる場合がある
- X は、時間を置いてから確認する。キャッシュが消えるまで数時間から数日かかる場合もある
完全に即時の反映を保証する方法は、どの SNS にもありません。特に X は、利用者側から取得し直す手段が限られています。詳しい原因と手順は、反映されないの記事にまとめています。
気をつけたい失敗
- 画像の URL が
http://のままで、読み込めない - 画像が大きすぎて、取得に失敗する
- ログインが必要なページに画像を置いている
og:imageが相対パスになっている- タイトルが長すぎて、途中で切れる
短縮 URL ごとに OGP を変える方法
自分のサイトの HTML を編集できない場合や、同じ飛び先に対して、媒体ごとに違う見せ方をしたい場合は、短縮 URL 側で OGP を設定する方法があります。
短縮 URL のサーバーが、SNS のクローラーに対して、設定したタイトル、説明文、画像を返します。人間が開くと、そのまま飛び先へ転送されます。これで、飛び先の他社サイト（ASP の案件ページなど）のカードが貧弱でも、見せ方を整えられます。
使い方の例は次のとおりです。
- ASP の案件ページに、自分で作った画像とタイトルのカードを付ける
- 同じ商品へのリンクでも、X 用と LINE 用で訴求を変える
- キャンペーンごとに画像を差し替えて、反応を比べる
ここで守りたいのは、カードの内容を飛び先の実態と一致させることです。実際の飛び先と違う内容を見せて誤認させると、プラットフォームの規約に反するおそれがあり、信頼も失います。
Boostlink では、スタンダードプランから短縮 URL ごとに OGP（共有時のタイトル・説明・画像）を変更できます。画像は 1200 × 630px を目安に用意し、設定後は、実際に SNS に貼って表示を確認します。
まとめ
OGP は、SNS にリンクを貼ったときのカードを決める仕組みで、og:title、og:description、og:image が基本です。画像は 1200 × 630px 前後を目安に、中央に重要な要素を置いて作ります。HTML では <head> に絶対 URL で指定し、X では twitter:card も設定します。変更が反映されないのは、SNS のキャッシュが主な原因なので、ファイル名の変更や再取得ツールを使い、時間を置いて確認します。自分で HTML を編集できないリンクは、短縮 URL 側で OGP を設定できます。
リンクごとの見せ方を整えたいなら、Boostlink の OGP 変更が使えます。短縮 URL、クリック分析、独自ドメインとあわせて、1 か所でリンクの見え方と反応を管理できます。
SNS で発信するアカウントそのものを用意したい場合は、アカウントの購入・M&A を扱う Boostshop も確認してみてください。購入の前に、各プラットフォームの利用規約をご確認ください。