こんにちは。
WEB制作をしているセリーナと申します。
今回はWEB制作時によく依頼されるOGPについてお話ししたいと思います。
OGPとは？？
いきなり、OGPと言われてもなんだこれは？と思う方もいらっしゃると思いますが、
Open Graph Protocolの略で、SNS(facebookやLINEなど)上で張り付けたURL内容を簡易的に表示させる仕組みです。
依頼される方の中では「facebookにURL張り付けたときのアレ」と言う方もいます。
表示させたいページにOGPのタグを設定しておくと、URLが張り付けられたときに指定された画像やタイトル、説明文descriptionが表示され、SNS発信する方にとってはページの簡易部分が伝わり便利な機能です。
では、どのようなタグをページ埋め込むか。
HTMLの<head>～～</head>の中に
|
1 2 3 4 5 6 7 8 |
<!-- OpenGraph --> <meta content="ここにホームページのタイトル" property="og:title"> <meta content="company" property="og:type"> <meta content="http://www.*******.jp/" property="og:url"> <meta content="ここにサイトの名前" property="og:site_name"> <meta content="ここに表示させたい画像名/img/fb.jpg" property="og:image"> <meta content="ここにサイトの説明文を入れる" property="og:description"> <!-- OpenGraph --> |
このタグを入れます！
基本的に会社様のよりご依頼を受けることが多いので
|
1 |
<meta content="company" property="og:type"> |
の部分はcompanyとすることが多いです。
|
1 |
<meta content="ここに表示させたい画像名/img/fb.jpg" property="og:image"> |
また、ここで使う画像の大きさは、1200x624pxで私は作っています。
どうやら比率が決まっているようで、その規格にあっていないとうまく拾ってくれないようです。
また、完成したURLをfacebookに張り付けてOGPも更新したのに変わらない！とおっしゃる方もいます。
そうなると、何回更新しても変わりません。
それは、faceebookがそのURLのOGPを記録してしまったために起こるので
その記録を消さなければいけません。
では、どうするのか。
https://developers.facebook.com/tools/debug/
ここのシェアデバッガーを使います。
まず、更新したいURLを
入力部分にいれ、右側の「デバッグ」ボタンを押します。
そうすると、そのURL(ページ)のOGP部分が表示され、一覧に表示されます。
（ここで、エラーがあった場合にはエラーが表示されます。）
そこで見れるのは、おそらく古い情報なので、次に、
「もう一度スクレイピング」というボタンをクリックします。
そうすると、新しいOGP部分が読み取られ、
最新版となり、その後、新に投稿部分にURLを入れると切り替わります。
更新されなくて悩んでいたから、ぜひ、このデバッガーを使って更新してみてくださいね。