ノウハウをいつでも。ウェブマーケティングのポータルサイト

制作日誌

ウェブサイトに必須!OGPについて最低限知っておきたいこと!

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
サイトへの流入を増やすために、OGP(Open Graph Protocol)設定は欠かせません。ソーシャルメディアの利用率が高まっている近年においては特に重要となっています。

しかし、OGPについて意外とよく知らない方は多いのではないでしょうか?今回はOGPについて最低限知っておきたい事項をお伝えします。まだ設定していない方はこの機会にぜひ導入してください!


OGPとは?






OGPは簡単に言うと、サイトがもっている情報をわかりやすく伝えるためのものです。通常のWebページやアプリケーションなどとFacebookなどのSNSを連携するため仕様です。

OGP未設定の場合
ogp1.jpg OGP設定した場合
ogp2.jpg

適切にOGP設定した場合、Facebookでシェアしたときに「タイトル」「概要文」「サムネイル写真」が表示されます。「クリックされやすさ」「読みたくなりやすさ」が明らかに違ってきます。

また、例えば、あるサイトに設置した「いいね!」が押された時、OGP設定した場合は以下のようにFacebook上で投稿されます。

like.jpg 上図のようなかたちで友達のニュースフィードに表示されるので、記事が拡散されやすくなります。

ただしOGPのルール通りにhtmlを書かないとfacebookのシステムがサイト情報をうまく把握できず、いいねがクリックされても記事が友達のニュースフィードに表示されません。せっかく「いいね!」ボタンをクリックしてもらっても、他の人の目に触れる事が少ないので、拡散率は明らかに下がります。ぜひしっかり設定するようにしましょう!



OGP要素

一般的なサイトでは、OGP設定として以下のような記述をhead内に書きます。


<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="サイトの説明文">
<meta property="og:type" content="blog">
<meta property="og:url" content="サイトURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content="サムネイル画像URL">

og:type ウェブページが何のページであるかを示します。代表的なのは以下の3つです。
  • article
    Webサイト上の記事を表します。ブログの記事やニュースサイトの記事ページの場合指定するのがよういでしょう。
  • profile
    人物を表します。有名人やミュージシャンに適していますが、個々のプロファイルに使用することができます。
  • website
    Webサイトを表します。一番単純なオブジェクトタイプです。Webサイト内に記事のあるページはarticleを使うべきです。
og:title ページタイトルを記入します。ブログでいう記事タイトルに該当します。
og:image サイトのサムネイル画像URLを指定します。URLは絶対パスで指定します。
og:url ページのURLを指定します。URLは絶対パスです。このURLには正規のURLを指定してください。URLにユーザー固有のパラメーターなどを付加してはいけません。
og:description ページの説明文を記述します。だいたい200文字ぐらいがベストです。
og:site_name サイトの名前を指定します。記事タイトルではなく、サイト名です。
上記が一般サイトではよく使われますが、その他にも以下のようないろいろなOGP要素があります。

og:emailまたはog:phone_number 連絡先
og:locality 場所
og:latitude,og:longitude 経度緯度での位置情報(ex. 37.416343,-122.153013)
og:country-name 国名
og:video 動画URL
og:video:type 動画タイプ
og:audio オーディオURL(MP3形式などの場合)
og:audio:title 曲名
og:audio:artist アーティスト名
og:audio:type オーディオタイプ

例えば、飲食店サイトであれば、連絡先や場所のOGPは必須でしょうし、曲を紹介する音楽サイトであれば、動画・オーディオ系のOGPは必要でしょう。OGPには様々な要素がありますので、サイトに応じて設定していくべきです。

(※さらに詳しいOGP要素についてはThe Open Graph protocolをご覧ください。)


特に重要となるOGP画像設定


OGPで特に重要となるのが画像設定です。他の人のFacebook投稿を見ているとページのタイトルや概要文は適切に表示されていますが、サムネイル画像が不適切にトリミングされていたり、タイトルに関連しない画像が出てきているケースがよく見つかります。

OGP画像を設定していない場合、ページに使われている画像の中から一定の条件を満たす画像が無作為に3種類選ばれ、画像はトリミングされて表示されることが多いようです。
2013年時点で、FacebookはOGPで指定する画像として「1200px × 630px以上の画像」の指定を推奨しています。大きいサイズで画像を表示する最低基準は600×315px。これ以下だと表示される画像は小さくなります。小さい画像の最低基準は200×200pxです。

また、Facebookは画像比率「1.91:1」を推奨しています。


画像の複数指定

「og:image」は以下のように複数指定するすることができます。


<meta property="og:image" content="http://example.com/画像1.jpg" />
<meta property="og:image" content="http://example.com/画像2.jpg" />

これによって、サイトに置いているFacebookシェアボタンをクリックした人に、タイムライン上でシェアする際のサムネイル写真を2つから自由に選んでもらうことができます。

また、画像のサイズも指定したい場合は以下のように記述します。


<meta property="og:image" content="http://example.com/画像1.jpg" />
<meta property="og:image:width" content="900" />
<meta property="og:image:height" content="500" />
<meta property="og:image" content="http://example.com/画像2.jpg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="400" /> 


OGPの確認方法






FacebookのOGPが適切に設定されているか確認できるツールとして、「Open Graph Debugger」があります。

OGPを記述したページのURLをコピー、「Open Graph Debugger」を開きます。URLをデバッガーにペースして、デバッグをクリックします。
devagor.jpg Object Debugger.jpg すると問題があるときは、「エラー文」で出てきます。表示された内容をもとに修正していきましょう。


さいごに

OGPを設定することで「シェアされた時の見栄え」が全然違ってきます。サイトへの流入元としてSNSの割合が増えてきたことを考えると、OGP設定は今や必須と言えるでしょう。サイトをシェアしてもらったときに自分たちの「看板」として出してもらうためにも、OGP設定の概要文や画像にはこだわっていきたいものですね!

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!