WebサイトにOpen Graph Protocol (OGP) 設定を追加する

先日 WebサイトにOGP ( Open Graph Protocol ) を利用するための設定を行ったので、これに関して書いてみます。
Magnolia CMS における対応方法も示します。

はじめに

ここ最近の暑さに、オフィスの熱帯魚を見て「やつらは涼しくていいなー」と思う今日この頃、皆さん、いかがお過ごしですか?

暫く前から技術記事を公開した際に twitter アカウント ( @agilegroup_tw ) でつぶやいています。
このつぶやきは 弊社のFacebookアカウント と連携されていて、Facebookにも投稿されているのですが、記事によっては、バナー画像が想定しているものと違ったものが表示されたりしていて、何とかしたいと考えていました。

OGP ( Open Graph Protocol )

OGP (Open Graph Protocol) を利用する事で、上記問題を解決する事が可能です。

OGP は通常のWebページやアプリケーション等と Facebook 等のSNS を連携するために策定された仕様といえばよいでしょうか。
Webアプリケーション等からOGPを利用するといった事も可能なようですが、この記事ではWebサイトからOGPを利用する場合の方法に関してのみ示します。

OGPに関しては、以下を参考にしました。

  • Open Graph Overview
    Facebook による OGPに関する説明が書いてあるページ ( 英語 )

OGP に関しては、検索すると色々な記事が見つかるのですが、仕様も色々と変更になっているようで、最終的には Facebook の開発者向けページを参考にするのが一番確実な気がします。

※このページの記載もいつ古い情報になるか判らない。

Webサイトで OGPの設定を行う

Webサイトで OGP の設定を行う場合、HTML 中に タグを記述する方法をとります。

適切なObject Typeを選択する

指定すべきタグの内容はWebサイトの内容によっても変わってきます。

OGP では Object Type が定義されていて、これによって指定可能なプロパティも変わってくるからです。
参考 : Open Graph Reference Documentation

以下に、Object Type の例を示します。

Object Typeコンテンツの種類
article記事
book本、出版物
music.album音楽(アルバム)
websiteWebサイト
個別の記事はarticleになる

一般的なWebサイトの場合には、website、及び、article が利用される事になると思います。
上の参考リンクには上の表以外の Object Type もリストされているので、より適切な Object Type がある場合、そちらを利用した方がよいかもしれません。

※Object Type、及び、Action Type は用意されているものを利用するのではなく定義する事も可能ですが、それに関してはここでは触れません。

※以前は blog という Object Type もあったらしい。

記事 ( article ) のマークアップ

弊社サイトの場合、新着記事の通知を Facebook で通知する利用目的なので、Object Type = article になります。

上記 Open Graph Reference Documentation から article のリンク を見ると、マークアップの方法が載っています。
この設定の通りにさせて頂きましょう。

以下の content= の部分をWebページに併せて適当な値を設定する事になります。

 <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <meta property="fb:app_id" content="FacebookアプリのID" /> 
  <meta property="og:type"   content="article" /> 
  <meta property="og:url"    content="記事のURL" /> 
  <meta property="og:title"  content="記事タイトル" /> 
  <meta property="og:image"  content="画像のURL" /> 

上記Facebookアプリのidは無い場合には指定しなくとも、Facebookウォール上の表記上は特に問題ないようです。但し、Facebook インサイトを利用して利用者のアクティビティをチェックしたいといった場合には設定が必要になるようです。
要件に従って、app_id の取得/設定を行うかどうかは決めましょう。

コードを書く

記述するべきコードが確定したら、上記コードがHTML中に出力されるようにコードを記述します。 head タグ中に記述する事になります。

Magnolia CMSにおける設定

Magnolia CMSで実現する場合の方法について以下示します。

  1. 管理コンソールから [STK]>[Templates] アイコンをクリックします。
  2. テンプレートの表示ウィンドウが開くので、templating-kit を展開し、/templating-kit/pages/global に移動します。
  3. htmlHeader をダブルクリックします。
  4. テンプレートの編集ウィンドウが開くので、以下内容 ( 抜粋 ) で編集します。

    ※ og:image の設定に関しては、設定するサイトに併せて適宜変更して下さい。

    
    [#assign siteTitle = stkfn.siteTitle(content)!homeTitle!homeName!]
    [#assign contentPageTitle = content.windowTitle!content.title!content.@name]
    
    
    <!-- for OGP Settings -->
    [#assign title = content.title!content.@name]
    [#assign hasTitle = title?has_content]
    [#assign abstract = content.abstract!]
    [#assign hasAbstract = abstract?has_content]
    [#assign imageModel = pageModel.imageModel!]
    [#assign hasImage = imageModel.image?has_content]
    
    <meta property="og:type" content="article">
    [#if hasTitle]
    <meta property="og:title" content="${title}">
    [/#if]
    [#if hasAbstract]
    <meta property="og:description" content="${abstract}">
    [/#if]
    <meta property="og:url" content="${state.originalBrowserURL}">
    [#if hasImage]
    <meta property="og:image" content="http://www.agilegroup.co.jp${stkfn.getAssetVariation(imageModel.image, 'gallery-zoom').link}">
    [#else]
    <meta property="og:image" content="http://www.agilegroup.co.jp/dam/agilegroup/img/logos/branding-hugelogo.png">
    [/#if]
    <!-- endof for OGP Settings -->
    
    
    <title>${contentPageTitle} : ${siteTitle}</title>
    
    
  5. 編集を終えたら、[テンプレートを有効にする]をチェックして保存します。
  6. head タグ自体は /templating-kit/pages/main を編集する事になります。
    main をダブルクリックし、htmlHeader と同様に編集します。
  7. テンプレートの編集ウィンドウが開くので、以下内容 ( 抜粋 ) で編集します。
    
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
    
    
  8. 編集を終えたら、[テンプレートを有効にする]をチェックして保存します。
    ※必要に応じて編集したテンプレートの[公開]も行います。

設定の確認

デバッガ ( Debugger ) での確認

OGPの設定が適切かどうかは、Open Graph Debugger - Facebook Developers ページで確認する事ができます。

チェックを行いたいページのURLを入力し、[Debug]ボタンをクリックします。

Open Graph Debugger

実際に弊社の技術記事ページをチェックした結果は以下のような感じになりました。

Open Graph Debugger

上のチェック結果では、"Open Graph Warnings That Should Be Fixed" という警告メッセージが表示されています。
OGPの設定に何らかの問題がある場合には、これ以外にも問題内容と対策を表したメッセージが表示されるので、必要に応じて適当な対策を行ってください。

ちなみに、上記警告の詳細ですが、

Meta with name instead of property The meta tag on the page was specified with name 'author', which matches a configured property of this object type. It will be ignored unless specified with the meta property attribute instead of the meta name attribute.

となっています。

超意訳すると、「metaタグ中に、このObject Type(=article)のプロパティと同じauthor が設定されているけど、meta property でなくて meta name で指定されているから無視するよ」といった感じの事を言っています。

CMSやブログツール等で meta name で author を指定するもの等は実際にあると思います。
Facebook では無視すると言っているので、こちらも気にせず無視して構わないでしょう。

もし、meta property で author 指定を行いたい場合には、article:author というプロパティが定義済みのようなので、以下のように設定する事で OGPにおける author 定義が行えるのだと思います。

article:author の説明には、"An array of Facebook profile URLs or IDs of the authors for this article" とあるので、以下のような設定になるかと思います。

※以下はあくまで一例です。

<meta property="article:author"   content="shinjikagawa" /> 

実際に上記 article:author プロパティを設定してDebugger で確認したところ、きちんとパースされたようです。( 香川さんの Facebook ID は 152966144759294 のようです (^^; )

Debugger-article:author

※上記 article:author を設定しても、上記警告は消えませんでした。

実際の投稿

デバッガの確認で問題が無さそうである事を確認したら、実際にウォールに投稿してみましょう。

想定していた通りの表示が行われればOKです。

以下は弊社でOGP設定前後のFacebookへのリンク投稿時の変化です。
( ただし、設定前は twitter からのプラグイン経由での投稿 )

OGP設定前後

画像に関しては、og:image で指定した画像の大きさによってトリミングのされ方が違ったりするようで、og:image ハックとでも言える解決手段があるようです。

これに関しては、OGP画像シミュレータ なるものがあるようなので、画像にこだわりたい方はこういったツールを利用されるのがよいのではないでしょうか。

この辺りに関しては、 ( 今のところ ) よく知らない&探究する気がないので触れません。

まとめ

OGPを適切に設定する事で、Facebook からの流入が増えたりするらしいです。
弊社Webでは設定したばかりのため、実感はまだありませんが、今後どのような効果があったか判明した際には、追加記事などで報告する事があるかもしれません。

とりあえず、Facebook の投稿で適切な画像が表示されるといった、見栄えが改善するだけでも記事を読んでもらえる機会を増やす事はできるのではないかと思います。

私的には、今後は、まったく関係無い画像が表示されているのを見たら、「あー。ちゃんとOGP設定してねーなー」とか思ってしまいそうです :  少し前まで自分もそうだったのは棚上げして :-p