ホームページのURLをSNSやLINEに貼ったときに出る題、説明、画像は、ページの中に書いておくOGP(Open Graph protocol。シェアされたときの見え方を指定するための目印)から読み取られます。この記事は、自社サイトを自分で手入れしている方に向けて、OGPで設定する項目、画像の推奨サイズ、WordPressでの設定場所の探し方、シェアした画像が表示されない・古いままのときの確かめ方を書きます。
仕様と数字は、2026年10月時点で、The Open Graph protocol の公式サイト(ogp.me)、Facebook の開発者向けの説明、LINE Developers のよくある質問、WordPress.org の説明を当社が読んで確かめた範囲です。確かめられなかったことは、そう書いています。既定の画像の考え方などは当社の見立てで、事実とは分けて書きます。
結論:画像は1200×630ピクセルで用意し、古いときは読み直させる
- OGPの基本は、og:title(題)、og:type(種類)、og:image(画像)、og:url(ページのURL)の四つで、ogp.me はこの四つを必須としています。説明文の og:description は任意ですが、Facebook と LINE はどちらも使います。
- 画像の大きさを数字で示していたのは、当社が確かめた公式の説明の中では Facebook だけでした。高解像度の画面向けに1200×630ピクセル以上、縦横比は1.91対1に近く、ファイルは8MBまでです。
- LINE のURLプレビューが使うのは og:title、og:description、og:image の三つだけで、画像の大きさの記載は見当たりませんでした。X(旧Twitter)のカードは、公式の説明ページを確かめた時点で開けず、数字を確かめられませんでした。
- WordPressでどこから設定するかは、テーマやプラグインで違います。まずページのソースで og:image を探し、どこが出しているかを突き止めるのが近道です。
- 古い画像のままのときは、Facebook はシェアデバッガー(URLを入れてOGPの読み取り結果を確かめる公式の道具)で読み直させられます。画像は画像のURLごとに保存されるため、差し替えるときは新しいファイル名で上げ直します。
OGPとは:シェアされたときの題・説明・画像を、ページに書いておく目印
OGPは、ページのHTMLの見えない部分(head)に、meta タグで書いておく情報です。たとえば画像なら、<meta property="og:image" content="https://example.jp/og.jpg"> のような一行です(URLは例です)。SNSやLINEは、URLが貼られるとそのページを読みに行き、このタグを見て、題と画像をカードの形で出します。
タグがない場合も、何も出ないとは限りません。LINE の説明では、OGPを設定していなくても、ページ内の文言や画像などを自動で取得してプレビューを作るとされ、題は og:title がなければ title タグから、説明は og:description がなければ description タグや本文から読み込まれます(出典:LINE Developers「よくある質問」の「トークのURLプレビューはどのようにして生成されますか?」)。ただ、どの画像が選ばれるかをこちらで決められないので、シェアされる可能性のあるページには og:image を書いておくほうが安心です。
設定する項目と、各公式の記載
| 項目 | 何を書くか | 公式の記載(2026年10月時点) |
|---|---|---|
| og:title | ページの題 | ogp.me:必須。Facebook:サイト名などを付けない記事の題。LINE:使う |
| og:type | ページの種類。記事は article、トップページなどは website | ogp.me:必須。種類の指定がないページは website として扱う。Facebook:省略すると website |
| og:image | シェアで出す画像のURL | ogp.me:必須。LINE:使う |
| og:url | そのページの正式なURL | ogp.me:必須。恒久的なIDとして使われる正式なURL。Facebook:追跡用の付け足し(パラメーター)を付けない |
| og:description | ページの短い説明 | ogp.me:任意。1〜2文。Facebook:多くは2〜4文。LINE:使う |
| og:image:width / og:image:height | 画像の幅と高さ(ピクセル) | ogp.me:任意。Facebook:書いておくと、初めてのシェアから画像を出しやすい |
| og:image:alt | 画像に何が写っているかの説明 | ogp.me:og:image を書くなら書く、としている |
| og:site_name | サイト全体の名前 | ogp.me:任意 |
出典:The Open Graph protocol、Meta for Developers「A Guide to Sharing for Webmasters」、LINE Developers「よくある質問」。LINE は「使われるのは上記の3つのOGPタグのみ」としており、og:type や og:url はLINEのプレビューには使われません。
説明文の長さの目安が ogp.me と Facebook で違うように、サービスごとに見る項目や扱いは少しずつ違います。ここからは当社の見立てです。og:description は、検索結果向けのメタディスクリプションと同じ内容で足りることが多いと考えています。書き方はメタディスクリプションの書き方に、題の付け方はtitle タグの書き方にまとめています。og:title は検索結果の題と同じで構いませんが、末尾に会社名を長く付けていると、カードの限られた幅で記事の題が途中で切れやすくなります。
OGP画像のサイズ:公式が数字を出していたのはFacebook
「OGP 画像 サイズ」で調べると、いくつもの数字が並びます。当社が2026年10月に各公式の説明を確かめた結果は次のとおりです。
| サービス | 公式に書かれている大きさ |
|---|---|
| 高解像度の画面向けに1200×630ピクセル以上。最小は200×200ピクセル。大きい画像で出すには最低600×315ピクセル。縦横比は1.91対1にできるだけ近く。ファイルは8MBまで | |
| LINE | 大きさの記載は見当たらず(使うタグは og:title、og:description、og:image の三つ) |
| X(旧Twitter) | カードの公式の説明ページが開けず、確かめられなかった |
| ogp.me | 大きさの推奨はなし。幅と高さを書くためのタグ(og:image:width、og:image:height)がある |
Facebook の数字の出典はMeta for Developers「Images in Link Shares」です。同じページでは、600×315ピクセルより小さい画像も出るものの、かなり小さく表示されること、縦横比を1.91対1に近づけるとフィードで切り取られずに全体が出ることも説明されています。
X については、以前の開発者向けのカードの説明ページが、確かめた時点では開発者サイトの入口へ転送されて読めませんでした。このためこの記事では、X 向けの画像の大きさは書いていません。
当社の見立て:1200×630で一枚作り、大事なものは中央に寄せる
- 1200×630ピクセルで作れば、Facebook の推奨の大きさと縦横比の両方を満たします。サービスごとに別の画像を作るより、まずこの一枚をそろえるほうが手入れが続きます。
- 表示する場所によって画像の端が切れたり、小さく縮められたりすることを考え、ロゴや文字は中央に寄せ、端には切れても困らない背景を置きます。
- 画像の中の文字は、スマートフォンのトーク画面で小さく出ても読める大きさで、一行か二行までにします。題そのものは og:title で出るので、画像に同じ文を全部入れる必要はありません。
- ファイルの重さは8MBの上限よりずっと軽くて足ります。画像を軽くする手順は画像の最適化の記事に書いています。
WordPressでの設定場所:アイキャッチ画像と、OGPを出す仕組みは別
WordPress本体には、記事や固定ページごとに代表の画像を決める「アイキャッチ画像」があります。WordPress.org の説明では、編集画面の右上の歯車のアイコンで開く設定サイドバーに「アイキャッチ画像」の欄があり、そこから画像を選びます。ただし、アイキャッチ画像の使われ方はテーマによって違うとされ、この説明にはOGPやSNSでのシェアについての記載はありませんでした(出典:WordPress.org「Page/Post Settings sidebar」)。
そのため、OGPのタグを実際に出しているのは、使っているテーマか、SEOやSNS向けのプラグインであることが多い、と当社は見ています。どちらが出しているかで設定する画面が変わるので、管理画面を探し回る前に、どこが出しているかを先に確かめます。
どこがOGPを出しているかを突き止める手順
- パソコンのブラウザで自社の記事を一つ開き、右クリックの「ページのソースを表示」などでHTMLを表示します。
- ページ内検索で「og:image」を探し、何行出てくるかと、指している画像のURLを控えます。
- そのあたりに、テーマ名やプラグイン名を含む注記が書かれていることがあるので、手がかりにします。
- 管理画面で、テーマの設定(カスタマイザーなど)と、入れているSEO・SNS向けのプラグインの設定を開き、「OGP」「SNS」「ソーシャル」「既定の画像」といった項目を探します。
og:image が二行以上あるときは、テーマとプラグインの両方がOGPを出している可能性があります。ogp.me は、同じタグが複数あって食い違うときは上にあるものを優先する、と定めていますが、各サービスが実際にどれを使うかまでは、当社は公式の説明で確かめられませんでした。どちらか一方の出力を止めて一つにそろえておくと、どの画像が出るかを自分で決められます。止める操作でほかの表示が変わることもあるので、作業の前にどの設定を変えたかを書き留めておきます。
記事ごとのアイキャッチと既定の画像の考え方(当社の見立て)
OGPを出す仕組みには、記事にアイキャッチ画像があればそれを og:image に使い、ない記事には既定の画像(サイト全体で一枚決めておく画像)を使う、という設定を持つものがあります。この形を前提に、当社は次のように考えています。
- まず既定の画像を一枚決めます。どのページがシェアされても困らないように、会社名やロゴと、何の会社かが分かる一言を入れます。既定の画像もアイキャッチもない状態だと、サービス側がページの中から画像を拾うか、画像のないカードになり、出方をこちらで選べません。
- 記事ごとに専用の画像を作るのは、シェアされる場面が見えているページに絞ります。説明会やイベントの告知、採用のページ、事例、料金や営業時間の変更のお知らせなど、取引先や知人にURLを送ることが分かっているページです。
- アイキャッチ画像を付けるなら、その画像がそのまま og:image に使われる前提で選びます。一覧の見栄えのために縦長の写真や小さな画像を付けると、シェアしたときに端が切れたり小さく出たりします。アイキャッチも1200×630に近い横長で用意しておくと、どちらの用途でも困りにくくなります。
- 写真を使うときは、何のページか一目で分かるものを選びます。店や現場の写真なら、SNSで見た人が「あの店だ」と分かる一枚のほうが、汎用の素材写真より役に立ちます。
当社のサイトでは、2026年10月に記事の既定のOG画像を設定しました。
SNSでシェアした画像が表示されない・古いままのときの確かめ方
シェアの画像の困りごとは、大きく「出ない」と「替えたのに古いまま」の二つです。どちらも、先に自社サイトのソースを見て、ページ側が正しい情報を出しているかを確かめてから、サービス側を疑う順番にすると迷いません。
画像が表示されないとき:上から順に確かめる
- ページのソースに og:image があるか。なければ、前の章の手順で設定の場所を探します。
- og:image のURLをブラウザのアドレス欄に貼って、画像が開けるか。画像を消していたり、公開前のサイトでパスワードがかかっていたりすると、読みに来たサービスからも見えません。
- 画像が小さすぎたり重すぎたりしないか。Facebook は最小200×200ピクセル、ファイルは8MBまでとしています。
- そのURLを初めてシェアしたのではないか。Facebook の説明では、初めてシェアされたときにページの情報を読み込んで保存し、画像はそのあとで処理するため、最初にシェアした人には画像が出ないことがあるとされています。og:image:width と og:image:height を書いておくか、シェアの前にシェアデバッガーにURLを通しておくと避けられる、とされています。
- LINE の「LINEで送る」ボタンから送ったのではないか。LINE の説明では、シェアしようとしたURLによってはプレビューが出ないことがあり、出なくてもURLはシェアできる、とされています。
替えたのに古い画像や題のままのとき
まず、自社サイトのソースが新しい内容になっているかを見ます。直したはずなのにソースの og:image や og:title が古いままなら、原因はサイト側のキャッシュ(表示を速くするために作り置きしたページ)です。キャッシュを消す場所と順番はWordPressで変更が反映されないときに書いています。
ソースが新しいのに Facebook で古いまま出る場合は、Facebook 側に保存された情報が残っています。Facebook の説明では、画像は画像のURLごとに保存されるため、同じURLのまま画像を上書きしても更新されず、新しい画像は新しいURLで置くように、とされています。古い画像のファイルは、すでにシェアされた投稿が参照しているので残しておくこと、新しい画像はシェアデバッガーで読み込ませること、URLの画像を替えても以前にシェアされた投稿のプレビューは自動では変わらないことも書かれています。シェアデバッガーは、ページの情報を読み直させる道具でもあります(出典:前掲の Meta for Developers の二つのページ)。
LINE については、プレビューの情報をどれくらいの期間保存するか、読み直させる方法は、2026年10月時点の LINE Developers のよくある質問には書かれていませんでした。ここからは当社の見立てで、LINE の公式の説明で確かめたことではありませんが、画像を新しいファイル名で上げ直しておくことは、どのサービスでも古い画像が残りにくくなる手立てになると考えています。
症状ごとの見るところ
| 症状 | まず見るところ | 直し方 |
|---|---|---|
| 画像が出ない | ソースに og:image があるか、画像のURLが開けるか | 設定の場所を探して画像を指定する。消えた画像は置き直す |
| Facebook で最初の一回だけ画像が出ない | og:image:width と og:image:height があるか | シェアの前にシェアデバッガーに通しておく |
| 画像を替えたのに古い | 自社のソースが新しいか、同じファイル名で上書きしていないか | サイトのキャッシュを消す。新しいファイル名で上げ直し、シェアデバッガーで読み直させる |
| どのページも同じ題や画像になる | og:url と og:title がページごとに変わっているか | 設定を見直し、og:url をそのページのURLにする |
| 画像の端が切れる、小さく出る | 画像の縦横比と大きさ | 1200×630ピクセルで作り直し、文字やロゴを中央に寄せる |
表の四つ目について補足します。ogp.me では、og:url はそのページの恒久的なIDとして使われる正式なURLとされています。全ページの og:url がトップページのURLになっていると、別々のページが同じものとして扱われるおそれがある、と当社は見ています。テーマを替えたあとや、手で head にタグを書き足したサイトで見かけることがあるので、トップページ以外のページのソースも一つ確かめておくと安心です。
シェアされたあとに、そのページで何を見て問い合わせまで進むかは、OGPとは別の話です。SNSとホームページの役割の分け方と、SNSから来た人の数え方はインスタ集客を地域の店舗・中小企業での記事にまとめています。
今日、自社で確かめられること
- トップページと、よく送るページ(料金、アクセス、採用など)を一つずつ開き、ソースで og:title、og:image、og:url があるかと、og:image が何行あるかを見る。
- og:image のURLをブラウザで開き、画像が出るか、横長で1200×630ピクセルに近い大きさかを確かめる。
- トップページ以外のページで、og:url がそのページ自身のURLになっているかを見る。
- OGPを出しているのがテーマかプラグインかを突き止め、既定の画像を設定する画面の場所を書き留める。
- Facebook のシェアデバッガーによく送るページのURLを入れ、出る題と画像を見る。古ければ読み直させる。
- LINE で社内の人などにURLを送り、題・説明・画像の三つが意図どおりに出るかを見る。