OGPを設定することによって、ユーザーの興味を引いてみよう!

記事公開日:2018.07.26

最終更新日:2018.07.27

815 PV

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設定をしっかり行い、たくさんの方に見てもらえるようなサイト作りを心がけていきましょう。

 

このエントリーをはてなブックマークに追加

筆者

A.Yabe

Bigmac制作部に所属。まだまだひよっこなので、早く一人前になれるよう、勉強の日々です。覚えることは沢山ありますが、新しい知識が増えることがとても楽しいなと感じます。ぼんやりと空を見上げていると、気持ちがリフレッシュし、新しいアイデア浮かんだりするので好きです。好きなデザインに出会えると、恋をしたようにドキドキが止まりません。人の心を射止めるようなデザインができるように頑張っていきたいです。よろしくお願いします。

筆者が最近執筆した記事