Open Graph ProtocolとSEO

f:id:bobchan1915:20180831015141p:plain

はじめに

皆さんは、特定のURLをMessenger, Slack, Twitterなどで送付したときに、展開されてサムネイル画像や、概要が出たりして、便利だと思ったことはありませんか。

たとえば、以下のようなものです。

Messenger

f:id:bobchan1915:20180831041245p:plain

Slack

f:id:bobchan1915:20180831041254p:plain

Line

f:id:bobchan1915:20180831041402j:plain

このようなページはほとんどの場合は自動的に決まるわけではなく、Open Graph(OG)というプロトコルでメタデータとして記述しているのです。

1. Open Graph Protocolとは

公式ページは以下のリンクです。

ogp.me

このように、このリンクは埋め込みとして機能していて、ただ単にURLがあるよりは情報量が違いますね。

Open Graph Protocolとは

コンテンツをリッチに埋め込むためのプロトコル

ということができます。

注意点としては必ずどのサイトもOpen Graphに対応しているわけではなくて、あくまでもプロトコルの一つにすぎません。

1.0 宣言する

実際にOpen Graph Protocolを使うときは、htmlの属性として宣言することが推奨されています。

以下のように宣言します。

<html lang="en" prefix="og: http://ogp.me/ns#">
...

<html>

1.1 基本的なメタデータ

以下の表のメタデータを<head>の中に<meta>タグで書き込みます。

注意点としてはページごとにそれぞれ固有のものを指定するのが望ましいです。 下にもありますが、ページをシェアするとog:urlなどはURLに対してIDを発行します。

IDとは、永続的にそのページを特定するものです。つまり、異なるページに同じIDを付与することになるので、やめた方がいいです。

指定属性	概要	例
`og:title`	シェアしたときのヘッダーラインとなるもの	`My Blog`
`og:type`	どのようなページか	`website`
`og:image`	ページのサムネイル画像のようなもの	`[画像の絶対パス]`
`og:url`	ページのURL。一旦シェアするとそのURLにIDが付与され、永続化される。	`[ページのURL]`

1.2 構造化されたメタデータ

og:imageはさらにメタデータを付与できます。

属性	概要
`og:image:url`	`og:image`と全く一緒ですが、この表のメタデータを指定するなら`og:image:url`の方が望ましい
`og:image:alt`	イメージが何であるかで、キャプションではなく、視覚障害者や表示されなかった時にイメージを言葉として伝える役割がある。`og:image`系を使うのなら使うべき。
`og:image:width`	イメージの幅
`og:image:height`	イメージの高さ
`og:image:type`	MIMEタイプ

しかし、og:image:urlはParser Mismatched Metadataが出るのに対して、og:imageにするとエラーが消えます。理由がわからないので、StackOverFlowなどで聞いて、答えがでたら追記します。

1.3 配列

以下のように同じ属性を複数指定することができます。

最初に定義したのがルートタグになります。

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

2. SEOとの関連

拡散されやすいコンテンツにするには必須です。

たとえば、以下のように二つの同じコンテンツのリンクがあるとすると、どっちに行ってみたいと思いますか。

https://keisukeyamashita.com/

https://keisukeyamashita.com/keisukeyamashita.com

もちろん、見た目だけで安直に「こっちがいい！」と決めることはできないので、効果に関してはA/Bテストなどを検証してください。

3. デバッグ

だいたい概要を掴めてきたので、実装に入ります。

以下のFacebook for Developersのシェアデバッカーというものを使用します。

自分のポートフォリオサイトを検証します。

ちなみに私のポートフォリオサイトの<head>タグは以下の通りです。ここで<meta name="robots" content="ALL">はクローラーのための設定なので気にしないでください。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="google-site-verification" content="SITE_TOKEN" />
  <title>KeisukeYamashita</title>
  <meta name="description" content="Portfolio Site of Keisuke Yamashita. This site contains his interest, history and contacts.">
  <meta name="keywords" content="engineer, software, hardware, portfolio">
  <meta name="robots" content="ALL">
  <meta name="og:title" content="Portfolio site of Keisuke Yamashita">
  <meta name="og:type" content="profile">
  <meta name="og:description" content="Portfolio Site of Keisuke Yamashita. This site contains his interest, history and contacts.">
  <meta name="og:url" content="https://keisukeyamashita.com">
  <meta name="og:image" content="https://storage.googleapis.com/keisuke-portofolio/myface.jpg">
  <meta name="og:site_name" content="KeisukeYamashita">
  <meta content="telephone=no" name="format-detection">
  <meta content="address=no" name="format-detection">
  <link rel="shortcut icon" href="./static/favicon.png">
</head>

3.1 URLを入力

f:id:bobchan1915:20180831014205p:plain

3.2 デバックを見てみる

以下のような結果が出ました。

f:id:bobchan1915:20180831014424g:plain

特に重要なのは

何がだめか

f:id:bobchan1915:20180831014840p:plain

と

何が設定されているかです。

f:id:bobchan1915:20180831014905p:plain

3.3 結果をもとに実装・修正する

まず、修正しろと言われているものを考えます。

Inferred Propertyですが、トップURLと一致しているため「もしトップURLじゃなくて別のページなら、ページ固有に指定しろよ」のケースもあるようです。

また、気づいたのですが

<meta name="keywords" content="engineer, software, hardware, portfolio">

で、name属性ではなくて

<meta property="keywords" content="engineer, software, hardware, portfolio">

propertyでした。

今回はシングルページアプリケーションなので修正する必要がないので無視します。

次はShare App ID Missingですが、フェイスブックのアプリ登録から指定するべきです。Facebookが管理者情報を管理するのに使います。どうやらFacebookがいいね！だったりを管理するのに使うそうです。

アドテクの分野かなと思います。

3.3.1 FacebookインサイトでFacebookアプリケーションを作る

以下のリンクにいって、「ページインサイトを見る」を押してください。

www.facebook.com

「アプリを作成」をおします。

f:id:bobchan1915:20180831023759p:plain

そして開発者登録、アプリケーションを登録します。

f:id:bobchan1915:20180831023823p:plain

以下の箇所でfb:app_idを取得します。

f:id:bobchan1915:20180831023915p:plain

プライバシーポリシーは以下の通りに設定しますが、今回は長くなるので設定せずfb:app_idは仮です。書き方は以下のリンクを参照してください。

https://watashinoikigai.com/%E3%83%96%E3%83%AD%E3%82%B0-%E3%83%97%E3%83%A9%E3%82%A4%E3%83%90%E3%82%B7%E3%83%BC%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC-%E6%9B%B8%E3%81%8D%E6%96%B9/watashinoikigai.com

以下をすべて変更したあとのものです。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="google-site-verification" content="SITE_TOKEN" />
  <title>KeisukeYamashita</title>
  <meta name="description" content="Portfolio Site of Keisuke Yamashita. This site contains his interest, history and contacts.">
  <meta name="keywords" content="engineer, software, hardware, portfolio">
  <meta name="robots" content="ALL">
  <meta property="og:title" content="Portfolio site of Keisuke Yamashita">
  <meta property="og:type" content="profile">
  <meta property="og:description" content="Portfolio Site of Keisuke Yamashita. This site contains his interest, history and contacts.">
  <meta property="og:url" content="https://keisukeyamashita.com">
  <meta property="og:image:url" content="https://storage.googleapis.com/keisuke-portofolio/myface.jpg">
  <meta property="og:image:alt" content="Keisuke Yamashita sitting an a rock crossing his legs">
  <meta property="og:site_name" content="KeisukeYamashita">
  <meta property="fb:app_id" content="ADD_YOUR_APP_ID">
  <meta content="telephone=no" name="format-detection">
  <meta content="address=no" name="format-detection">
  <link rel="shortcut icon" href="./static/favicon.png">
</head>

3.4 再度デバッグ

再度、デバッカーで行うと以下のようになりました。

f:id:bobchan1915:20180831025230p:plain

f:id:bobchan1915:20180831025239p:plain

だいぶ変わりました。比較してみます。

f:id:bobchan1915:20180831025731p:plain

f:id:bobchan1915:20180831025739p:plain

Extraneous Property、Parser Mismatched Metadataを見ます。理由はわかりませんが、og:image:urlからog:imageに変更すると消えました。

公式サイトには、一緒と書いてあるのですが、、、

また、og:typeでprofileを指定している場合は、og:site_nameを指定することはできません。なので消します。

最終的にエラーはなくなりました。

4. ベストプラクティス

以下のリンクにベストプラクティスが書かれています。

ベストプラクティス - シェア機能 - ドキュメンテーション - 開発者向けFacebook

特にog:imageの画像の大きさは重要です。

4.1 og:imageのサイズ

以下のような制限があります。

最低でも200px X 200pxであること。

これを満たさない場合はエラーがでます。

また、画像は

高解像度デバイス上で最適に表示されるよう、1200 x 630ピクセル以上の画像を使用します。
小さい画像だと600 x 315ピクセルより小さい場合も、リンクページ投稿には表示されますが、サイズは非常に小さくなります。

また、縦横比ですが

できるだけ1.91:1に近づけると画像がカットされずに表示されます。

自分の場合は以下のようになっていました。

f:id:bobchan1915:20180831035129p:plain

サイズも8MBまでなので、まだまだ解像度を高められます。

なので以下の画像に変更しました。

f:id:bobchan1915:20180831035447p:plain

すると大きな画像用に変更されました。

f:id:bobchan1915:20180831035828p:plain

アスペクト比が1.91:1になっていないので端が切れています。

5. Hatenaでも確認する

綺麗に表示されました。