【おーじーぴー】

OGP画像 とは?

💡 SNSでシェアされたときの「見た目」を決めるルール
📌 このページのポイント
Webページ https://example.com URLを共有 Twitter Facebook 表示 カードプレビュー og:image (サムネイル画像) og:title(タイトル) og:description (ページの説明文) OGPを設定すると、SNSでURLを共有した際にリッチなカードが表示される。
OGPのイメージ
ひよこ ひよこ

OGPって何?

ペンギン先生 ペンギン先生

URLをSNSでシェアしたとき、タイトルや説明文、サムネイル画像がカード形式で表示されるよね。あの表示内容をコントロールするための仕組みがOGPだよ。

ひよこ ひよこ

設定しないとどうなるの?

ペンギン先生 ペンギン先生

SNS側が自動的にページの情報を拾おうとするんだけど、意図しないテキストや画像が表示されちゃうことがあるんだ。たとえばサイドバーの画像がサムネイルになったり、関係ない文章が説明文に使われたり。OGPを設定しておけば、自分が見せたい情報をきちんとコントロールできるんだよ。

ひよこ ひよこ

どうやって設定するの?

ペンギン先生 ペンギン先生

HTMLheadタグの中にmetaタグを書くんだよ。たとえば `` みたいにね。最低限 og:title、og:description、og:image、og:url の4つを設定しておけば、だいたいのSNSできれいに表示されるよ。

ひよこ ひよこ

XとかLINEでも同じ設定でいいの?

ペンギン先生 ペンギン先生

基本的にはOGPの設定で共通して使われるよ。ただしX(旧Twitter)は独自の「twitter:card」というmetaタグもあって、カードの表示形式(大きい画像か小さい画像か)を細かく指定できるんだ。両方設定しておくのがベストプラクティスだね。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「OGP」って出てきたら「SNSでURLをシェアしたときの表示内容を指定する仕組み」と思えればだいたいOK!
📖 おまけ:英語の意味
「Open Graph Protocol」 = オープンなグラフプロトコル
💬 Facebookが2010年に策定した規格だよ。「Graph」はFacebookが人と人のつながりを表現するために使っていた「ソーシャルグラフ」から来ていて、Webページもそのつながりの一部として表現しようという考えなんだ
← 用語集にもどる