SNSでリンクが付いているものをシェアをすると、サムネイル画像が表れるものと表れないものがありますよね。OGPを設定しているか、していないかの違いです。
今回はOGPについてと、OGPの設定方法についてご紹介致します。
OGPとは
OGPとは「Open Graph protocol」の略です。FacebookページやTwitterなどのSNSに、サムネイル画像やタイトル、URL、内容を表示させる仕組みであり、ソースに埋め込むことで表示が可能です。リンクをクリックをしなくても、大まかにページの飛び先の内容がわかるため、ユーザーにとって手間が少なくなります。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
OGPの設定によりユーザーの興味を引く
OGPを設定することにより、リンクのクリック率が上がります。サムネイル画像やタイトルがきちんと表示されているからです。パッと大きく情報が目に入ると、気になる情報や記事なら尚更、クリックやシェアをしたくなりますよね。
OGPが設定されていない状態だと、サムネイル画像ももちろんありませんし、タイトルや内容も設定されていないので、違う内容のものが表示されてしまうこともあります。クリックしてもらえなければ、せっかく良い情報を載せていても、読んでもらえず、勿体ないことになります。
文字だけより、サムネイル画像の表示される方が目立ち、ユーザーの目に留まりやすくなるので、OGP設定は大切です。
OGP設定をしてみよう
早速OGP設定をしてみましょう。OGPには必須のプロパティがありますが、難しくなく、簡単に設定できます。
metaタグを設定しよう
<head></head>内に以下のOGPタグを記述することで、表示が可能です。
<meta property=”og:type” content=”種類” />
<meta property=”og:url” content=”URL” />
<meta property=”og:site_name” content=”サイト名” />
<meta property=”og:title” content=”タイトル” />
<meta property=”og:description” content=”ディスクリプション” />
<meta property=”og:image” content=”サムネイル画像URL” />
- og:type
表示させるページの種類です。Webサイトのトップページだったらwebsite、他のページ（トップページじゃないページやブログなど）だったら、articleを入れます。
- og:url
ページのURLを入れます。
- og:site_name
サイトのタイトルを入れます。
- og:title
ページのタイトルを入れます。
- og:description
ページの簡単な説明を入れます。
- og:image
表示させるサムネイル画像のURLを入れます。URLを入れることにより、サムネイル画像が表示されます。
さらにTwitterの場合は、以下の記述も必要となります。
twitter:card
Twitterカードに表示するサムネイルの大きさを指定します。「summary」
「summarylargeimage」「appcard」「playcard」と、現在は4種類の設定が可能です。主に使うのは前2つだと思います。
「summary」がよく見かけるタイプで、「summarylargeimage」が「summary」より大きく画像を表示させることが可能です。後ろ2つはアプリ配信や動画を使う場合です。何を伝えたいかによって使い分けていきましょう。
以上で、OGPの設定が出来ました。
サムネイルのサイズについて
Twitterの設定を「summarylargeimage」で、Facebookは1200×630のサイズで作成をした場合、同じ画像を使うことが可能です。しかし、「summary」の場合、比率が変わりますので注意が必要です。比率が違うものを使用すると、一部しか表示されないので新しく画像を作成しましょう。
上記で、画像の設定も完了しました。
OGPの確認方法
Facebook開発者向けのツールです。ツールにURLを入れ込むことにより、実際にどのように表示されるのか確認ができます。うまく表示されない場合はOGP設定が間違っているということです。もし表示されなかったら、OGPタグを見直してみましょう。
OGP設定を見直したら、WEB公開をする前にチェックも行いましょう。以下の記事を参考にしてください。
webサイト公開前に確認したいチェックリスト
まとめ
ちょっとしたことですが、WebページにOGPを設定することにより、多くのユーザーの興味を引けます。OGP設定はサイト制作において大切ですね。
今後も、OGP設定をしっかり行い、たくさんの方に見てもらえるようなサイト作りを心がけていきましょう。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
