OGP対応のホームページ制作について

OGP対応のホームページ制作について

こんにちは。
WEB制作をしているセリーナと申します。
今回はWEB制作時によく依頼されるOGPについてお話ししたいと思います。

OGPとは??
いきなり、OGPと言われてもなんだこれは?と思う方もいらっしゃると思いますが、
Open Graph Protocolの略で、SNS(facebookやLINEなど)上で張り付けたURL内容を簡易的に表示させる仕組みです。
依頼される方の中では「facebookにURL張り付けたときのアレ」と言う方もいます。
表示させたいページにOGPのタグを設定しておくと、URLが張り付けられたときに指定された画像やタイトル、説明文descriptionが表示され、SNS発信する方にとってはページの簡易部分が伝わり便利な機能です。

Open Graph Protocolのイメージ
Open Graph Protocolのイメージ

では、どのようなタグをページ埋め込むか。
HTMLの<head>~~</head>の中に

このタグを入れます!

基本的に会社様のよりご依頼を受けることが多いので

の部分はcompanyとすることが多いです。

また、ここで使う画像の大きさは、1200x624pxで私は作っています。
どうやら比率が決まっているようで、その規格にあっていないとうまく拾ってくれないようです。

また、完成したURLをfacebookに張り付けてOGPも更新したのに変わらない!とおっしゃる方もいます。
そうなると、何回更新しても変わりません。
それは、faceebookがそのURLのOGPを記録してしまったために起こるので
その記録を消さなければいけません。

では、どうするのか。

https://developers.facebook.com/tools/debug/
ここのシェアデバッガーを使います。

facebookシェアデバッガー
facebookシェアデバッガー

まず、更新したいURLを
入力部分にいれ、右側の「デバッグ」ボタンを押します。
そうすると、そのURL(ページ)のOGP部分が表示され、一覧に表示されます。
(ここで、エラーがあった場合にはエラーが表示されます。)
そこで見れるのは、おそらく古い情報なので、次に、
「もう一度スクレイピング」というボタンをクリックします。

そうすると、新しいOGP部分が読み取られ、
最新版となり、その後、新に投稿部分にURLを入れると切り替わります。
更新されなくて悩んでいたから、ぜひ、このデバッガーを使って更新してみてくださいね。