OGPを設定してみよう!

記事公開日:2018.03.23

最終更新日:2018.03.29

103 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
    表示させるページの種類です。
    ウェブサイトのトップページだったら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の設定が完了しました。

次は使用するサムネイル画像についてです。

OGP画像のサイズは?

facebookの場合は1200×630が適切な画像サイズです。

Twitterの場合、「summarylargeimage」でしたらfacebookと同じサイズで使用することができます。「summary」の場合、比率が変わりますので注意が必要です。同じものを使用すると、一部しか表示されないので新しくTwitter用に作成しましょう。

上記で、画像の設定も完了しました。

実際どのように表示されるか気になりますよね。最後に、OGPの確認方法についてです。

OGPの確認方法

デバッカー
Facebook開発者向けのツールです。ツールにURLを入れ込むことにより、実際にどのように表示されるのか確認することができます。うまく表示されない場合はOGP設定が間違っているということです。もし、表示されなかったらOGPタグを見直してみましょう。

まとめ

ちょっとしたことですが、WebページにOGPを設定することにより、多くのユーザーの興味を引くことができます。OGP設定はサイト制作において大切ですね。今後も、OGP設定をしっかり行い、たくさんの方に見てもらえるようなサイト作りを心がけていきたいです。

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

筆者

A.Yabe

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

筆者が最近執筆した記事