見出し画像

OGP(Open Graph Protocol)を知る

Webページをシェアする際に、掲載されるURLや画像、タイトル、ページの説明文はOGP設定によって指定できるそうです。

RESUMEというサービスに登録しているのですが、作成したWebサイトを紹介しようとリンクを貼ったら、サムネイル画像がスコーン!

架空のcafeのサイトでして、cafeですのでスコーンでも良いのかもしれませんが、紅茶専門のcafeとして制作したので、スコーンより適した画像があるはずです。スコーンの店ではないのです。

画像を変更する方法を検索してたどりついた結果、OGPという聞きなれないワードが出てきました。マーケティングの講座もざっと受けていますが、読み飛ばしていたのでしょうか。

いずれにしても自分で表示する画像を設定できるということだったので、コードに追加しました。

タイトルや説明はすでに設定済でしたので画像のところだけをOGPで追加しました。

基本的なOGPタグ、HTML内に記述

<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの簡単な説明" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:url" content="ページのURL" />

スコーンからの脱却

ティーセットの画像に変更できました。
紅茶専門ということがこれで伝わりやすくなったのではないでしょうか。





いいなと思ったら応援しよう!