【HTML】OGP画像設定方法と表示されないときの対処法

そもそもOGP・OGP画像とは
OGP画像設定・設置方法
OGPが設定できているか確認する方法
URLはあっているのに表示されない場合は？

そもそもOGP・OGP画像とは

OGP（Open Graph Protcol の略）とはSNS・ソーシャルメディアなどでリンクを貼り付けたときに表示される画像やメタ情報です。サイトへの集客率を高めるためにもぜひ設定しておきましょう。

OGP画像設定・設置方法

以下の記事にてheadタグで置くべきコードをまとめています。（OGPも含まれています。）

こちらの中のコードをコピペして、コーディングするサイトの情報に書き換えていけば、基本的に大丈夫だと思います。

OGPが設定できているか確認する方法

私が納品前にOGPが設定できているか確認するときは、泣く子も黙るラッコツールズさんで確認しています。

OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ🔧

URLを入力すると各SNS（facebook・twitter・はてなブックマーク・LINE）でページをシェアした際のOG...

URLを貼り付けて確認するだけなので、とても便利です。

URLはあっているのに表示されない場合は？

OGP画像を設定したのに表示されないときによくあるミスは相対パスで設置していないか？絶対パスで設置しているか？を確認してください

<!-- 表示されない例（相対パスで設置している） -->
<meta property="og:image" content="image/○○.png" />


<!-- 表示される例（絶対パスで設置している） -->
<meta property="og:image" content="https://coding-shop.net/wp-content/uploads/2023/05/cookie-the-pom-gySMaocSdqs-unsplash-scaled.jpg" />

ご参考までに。