中小企業のためのネットビジネス&キーワード最新事情

今さら聞けない、SNSで情報を拡散するためのOGP入門

FacebookなどのSNSで、下のような、写真と説明文つきのリンクを見かけることがありませんか?

OGPのリンク例

このようなリンクは、どんな仕組みで表示されているのでしょうか? 実は、このようなリンクは [OGP] という仕組みで表示されています。

OGPが正しく設定されていると、ウェブサイトの情報をSNSでリンクをシェアした時に、あらかじめ指定した写真と説明文が表示されるようになります。

写真と説明文があると、リンク先のページの内容がよくわかり、SNSの利用者の目を引くことができます。写真が魅力的だったり、説明文が分かりやすいと、ウェブサイトの訪問者が増えます。

今回は、 OGPについてご紹介します。

OGPとは

OGP とは一体何でしょうか?

OGP とは [Open Graph Protocol (オープン・グラフ・プロトコル)] の略称です。3つの言葉の頭文字を合わせて、OGP と称されています。

OGPはもともと、Facebook が策定した仕様です。今では Facebook だけではなく、mixi など、様々なSNSでも利用されるようになりました。

OGPを利用すると、リンクの元となるコンテンツにどのような情報が含まれているか、効率良く伝えることができます。

OGPの設定例

それでは、OGPを利用するには、どのようにすればよいのでしょうか。OGPの設定は、htmlのソースコード中の、<head>-</head>タグ内に記述することになっています。

以下は、OGP の設定例です。シックス・アパートが運営するオウンドメディア [Six Apart ブログ] の中から、ある記事の OGP を抜き出してみました。

元の記事はこちらです。

この記事のOGPの一部が以下となります。


<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="Six Apart ブログ">
<meta property="og:title" content="シックス・アパートが独断と偏見で選ぶ2015年の海外ITイベント24選 - Six Apart ブログ">
<meta property="og:type" content="article">
<meta property="og:url" content="http://blog.sixapart.jp/2015-01/2015-overseas-events.html">
<meta property="og:image" content="http://blog.sixapart.jp/2015/01/4603112671_ae88561a30.jpg">
<meta property="og:description" content="2015年に開催される海外のITイベントの中から、ニューヨークやサンフランシスコの著名な展示会場を中心にピックアップしました。">

各タグは、それぞれ以下のような意味を持ちます。

og:locale
このコンテンツが何語で書かれているか、言語の指定を行います。Six Apart ブログは日本語で書かれているコンテンツなので[ja_JP]と記述しています。
og:site_name
このコンテンツが含まれるウェブサイトの名前を記述しています。ここではブログ名の「Six Apartブログ」と書かれています。
og:title
リンク元のコンテンツのタイトルを記述します。htmlの<title>タグとほぼ同じ情報であることが多いです。
og:type
リンク元にはどんな種類のコンテンツが含まれているかを記述します。ここでは、ウェブサイトやブログの記事を表す「article」と書かれています。一般的に、ウェブサイトやブログの場合は[article]と各ケースが大多数です。og:typeには、他にも「place」や[music]など、スマホアプリで使うときに便利なタグも存在します。
og:url
リンク元のURLを記述します。
og:image
リンク元の内容を表す画像URLを指定します。ここに記述されたURLの画像が、SNS上でシェアされます。>
og:description
リンク元のコンテンツの概要を記述します。ここに記述された文章が、SNS上でシェアされます。

例で取り上げた記事を実際にSNS上でシェアすると、このように表示されます。

OGPの実例

OGPで指定した情報が使われていることがお分かりいただけると思います。

今回紹介したタグ以外にも、OGPには多数のタグが用意されていて、必要に応じて使えるようになっています。ウェブサイト以外にも、さまざまな用途で使うことを想定したOGPタグが多数存在します。

実際にOGPを設定するためには

先ほど、『OGPはhtmlのソースコード中の<head>-</head>内に記述する必要がある』と説明しました。

ブログやCMSを使ってウェブサイトを更新している場合、このタグ内は通常設定変更できないことが多いです。OGPを適切に設定できるようにするためには、ブログやCMSをカスタマイズする必要があります。

以下は、[Six Apart ブログ]の記事投稿画面です。

Movable Type の編集画面例

記事本文の入力欄とは別に、[OGPイメージ]という入力欄に、写真が挿入されているのが分かりますか?Six Apart ブログでは、投稿画面からOGPに使われる画像を設定できるように、Movable Type をカスタマイズしています。

もし自社のウェブサイトでOGPを使えるようにしたい、という場合は、ウェブ制作会社などに相談するとよいでしょう。

OGPを理解する上で参考となる情報

OGPは、都度仕様が更新されます。必要に応じて、最新情報をチェックするようにしましょう。

最後に、OGPを理解する上で参考になる情報をご紹介します。

og:image 徹底解説、意味も設定画像スペックもこれでばっちり!2015年5月時点最新版

Six Apart ブログの、OGPに関する解説記事です。必要に応じて、情報をアップデートしています。

Open Graph Stories

Facebookの公式情報ページです。英語で書かれており、主に技術者、制作者向けの情報となっています。少々敷居が高いかもしれませんが、公式情報なので、一度読んでおいて損はないでしょう。

※この記事は2015年5月時点の情報を元に記述しています。あらかじめご了承ください。

2015/05/29 14:15:33

シックス・アパート株式会社 エバンジェリスト 長内毅志
シックス・アパート株式会社 エバンジェリスト 長内毅志

Movable Type プロダクトマネジャーを経て、現在、Movable Type エバンジェリスト兼デベロッパーリレーションマネジャー。

ワークスタイル変革教本vol.1 ワークスタイル変革教本vol.2

Google Adsense