OGP設定とは｜LINEやSNSでリンクがどう見えるか

この記事に出てくる言葉

OGP: ページをLINEやXに貼ったときに出る、画像と題名の設定です。設定していないと、URLの文字だけが出ます。
キャッシュ: 一度読み込んだものを手元に取っておいて、次から速く出す仕組みです。直したのに古いまま見えるのは、たいていこれが原因です。
MEO対策: 「新潟市カフェ」のように地域名を付けて調べたとき、Googleマップの枠に出てくるようにすることです。地図と一緒に3件だけ並ぶ、あの枠のことを指します。
SEO対策: 同じように調べたとき、地図の枠の下に並ぶ「サイトの一覧」に出てくるようにすることです。

どこに出てくるのか、図で見る →

同じページを、LINEやXに貼ったとき

設定してあると

新潟のホームページ制作

nextray.jp

新潟のホームページ制作｜月額29,800円

設定していないと

画像が出ません

nextray.jp

この見え方を決めているのがOGPです。設定していないと、URLの文字だけが出ます。お客様がお店を紹介してくださったときに、どちらが押されやすいかという話です。

OGPとは何か

OGP（Open Graph Protocol）は、「このページがSNSやメッセージアプリで共有されたとき、どう表示してほしいか」をあらかじめ指定しておく仕組みです。ページのHTMLの中に、タイトル・説明文・画像などを書いておきます。

LINE、Instagram、Facebook、X（旧Twitter）などは、リンクが送られてくると、そのページを読みに行ってOGPの指定を探します。指定があればカード表示に使い、なければ表示は素っ気なくなる。それだけの、単純な約束事です。

画面に表示される本文とは別の場所（HTMLのhead内）に書くため、ページを普通に見ているだけでは存在に気づきません。完全に裏方の設定です。ファビコンや404ページと同じで、無くてもサイトは動くけれど、有ると受け取られ方が変わる類のものです。

設定あり・なしで、何がどう変わるか

具体的な場面で比べます。たとえば、お客様が「ここのお店いいよ」と友人にLINEでリンクを送ってくれたとします。

OGPが設定されているサイト：お店の写真、店名、ひとこと説明の付いたカードが表示される。何のリンクかが一目で分かり、押す理由がある
OGPが未設定のサイト：URLの文字列だけ、あるいはタイトルらしき文字が1行出るだけ。何のリンクか分からず、押されないまま流れやすい

中身のページはまったく同じでも、入口の見た目でクリックされる確率が変わります。紹介や口コミで広がる経路（小さな会社にとって一番ありがたい経路）の受け取り方を左右するのがOGPです。

放置されたサイトが信用を削る話はマイナスプロモーションの記事に書きましたが、リンクの見た目もその一部だと思います。素っ気ないリンクは、送ってくれた人の「いいよ」という気持ちまで薄めてしまいます。

当社サイトの実際の設定

当社サイトの全ページに入れているOGP設定から、主要な部分を抜粋します。いまお読みのこのページにも、同じ形式で入っています。

nextray.jp トップページのOGP（抜粋）

<meta property="og:type" content="website" />
<meta property="og:site_name" content="NextRay" />
<meta property="og:title"
  content="新潟のホームページ制作・MEO対策｜初期費用0円｜NextRay" />
<meta property="og:description"
  content="新潟のホームページ制作。初期費用0円・月額29,800円。……" />
<meta property="og:url" content="https://nextray.jp/" />
<meta property="og:image" content="https://nextray.jp/assets/ogp.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="ja_JP" />

それぞれの意味はほぼ読んで字のとおりです。

og:title：カードに表示するタイトル
og:description：タイトルの下に出る説明文
og:image：カードの画像。どのファイルを使うかをURLで指定する
og:image:width／height：画像の寸法。書いておくと初回共有時の表示が安定する
og:url：このページの正式なURL

このほか当社は、X（旧Twitter）向けの指定（twitter:card）も併記しています。Xは独自の指定を優先的に読むため、大きな画像カードで表示されるよう「summary_large_image」を指定しています。

画像は1200×630ピクセルが定番

OGPでいちばん効くのは画像です。サイズは横1200ピクセル×縦630ピクセルが定番で、当社もこのサイズで作っています。主要なSNSの大きなカード表示に対応できる比率（約1.91:1）です。

作るときの注意点をいくつか挙げます。

小さすぎる画像を使わない：一定サイズ未満だとカード表示の対象にならないことがある
文字を入れるなら大きく：カードはスマートフォンの画面では小さく表示される。細かい文字は読めない
端に重要な要素を置かない：表示面によっては上下や左右が少し切られることがある
ファイルを重くしすぎない：読み込みに時間がかかると、共有時に画像なしで表示されてしまう場合がある

凝ったデザインである必要はありません。店名やロゴがはっきり見える1枚があるだけで、URLだけの表示とは受け取られ方が変わります。

どう見えるかを確認する方法

設定したら、必ず実際の見え方を確認します。方法は2つあります。

方法1：自分に送ってみる（一番確実）

LINEの自分ひとりだけのグループやKeepメモに、URLを送ってみる方法です。実際の表示そのものを確認でき、誰にも通知は行きません。当社もページを公開したら、まずこれで確認しています。

方法2：確認ツールを使う

SNS側が用意している開発者向けツールもあります。代表的なのはFacebookの「シェアデバッガー」で、URLを入れると、Facebookがそのページから読み取ったOGPの内容と、エラーの有無を表示してくれます。汎用のOGP確認ツールも検索すれば複数見つかります。

ツールを使う利点は、後述する「キャッシュの更新」ができることです。

つまずきやすいポイント

直したのに、古い画像が出続ける

OGPで一番よくある混乱です。SNSやメッセージアプリは、一度読み取ったOGPの内容を一定期間記憶（キャッシュ）します。そのため、画像を差し替えても、しばらくは古いカードが表示され続けることがあります。

Facebookはシェアデバッガーで「もう一度スクレイピング」を実行すると再読み込みされます。キャッシュ更新の窓口がないアプリでは、時間を置いて反映を待つのが基本です。故障ではないので、慌てて設定をいじり回さないでください。

画像のURLが間違っている

og:imageには、画像の完全なURL（https://から始まる形）を書く必要があります。相対的な書き方（assets/ogp.pngだけ、など）だと読み取れないことがあります。

ページごとの設定になっていない

全ページが同じタイトル・同じ画像になっているサイトをよく見かけます。動作はしますが、たとえばメニューのページを共有したのにトップページの案内が出る、といったズレが起きます。当社はページごとにタイトルと説明文を変えて設定しています。

OGPにできないこと

OGPについて、過大な期待をさせないために書いておきます。

まず、OGPは検索順位とは直接関係ありません。共有されたときの見た目を整える設定であって、SEO対策そのものではありません。順位への効果をうたってOGP設定を売る話があったら、それは筋が違います。

また、各SNSの表示仕様は変わり続けています。カードの形も、画像の切り取られ方も、アプリの更新で変わることがあります。この記事に書いたサイズや挙動も、時間が経てば古くなる可能性があります。定番の1200×630で作っておくのは、その変化にいちばん巻き込まれにくい選択だから、という消極的な理由も含んでいます。

それでも設定する価値はあると思います。手間は一度きりで、費用はかからず、紹介してもらえたときの受け皿が確実に良くなるからです。

よくあるご質問

OGP画像のサイズはいくつにすればよいですか？

横1200ピクセル×縦630ピクセルが定番です。主要なSNSの大きなカード表示に対応できる比率（約1.91:1）で、当社サイトもこのサイズで設定しています。小さすぎる画像はカード表示の対象にならないことがあるため、迷ったらこのサイズをおすすめします。

OGPを設定し直したのに、LINEで古い画像が出ます。なぜですか？

SNS側が以前の情報を一定期間記憶（キャッシュ）しているためです。設定を直しても、すぐには反映されないことがあります。Facebookのシェアデバッガーのように、キャッシュの更新を依頼できるツールを持つSNSもありますが、基本的には時間を置くと新しい情報に入れ替わります。

OGPが未設定だと、何か損をしますか？

リンクを送ってもらったときの第一印象が弱くなります。画像もタイトルもないURLだけの表示は、押される前に素通りされやすく、せっかくの紹介や口コミの効果が目減りします。ページの表示や検索順位に直接影響するものではありませんが、紹介されて広がる経路を大切にするなら設定しておくべきものです。

自分のサイトのOGPがどう見えるか確認できますか？

できます。一番確実なのは、自分ひとりのLINEグループやKeepメモに実際にURLを送ってみることです。開発者向けにはFacebookのシェアデバッガーなどの確認ツールもあります。当社にURLをお送りいただければ、確認してお伝えすることもできます。費用はかかりません。

見え方は、こちらで決められる

リンクを送ってもらったときの見え方は、こちらで決められます。

OGP：リンクが共有されたときのカード表示（画像・タイトル・説明文）を指定する裏方の設定
効くのは紹介の場面：LINEやSNSで送ってもらったときの第一印象を左右する
画像は1200×630ピクセル：文字は大きく、端に重要な要素を置かない
確認は自分に送るのが確実：直しても古い表示が出るのはキャッシュのせい。故障ではない
検索順位とは直接関係ない：SEOの代わりにはならない。過大な期待は禁物

OGPは、サイトを作った側にしか見えない、地味な設定です。ですが実際に働くのは、お客様が誰かにリンクを送ってくれた瞬間。こちらの営業がいっさい届かない場面です。その瞬間にきちんとした顔で表示されるかどうかは、事前の設定だけで決まります。当社は制作するすべてのページで、この設定を標準で行っています。

OGP設定とは｜LINEやSNSでリンクを送ったとき、どう見えるか