Kekeの日記

エンジニア、読書なんでも

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:urlParser 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との関連

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

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

1.

https://keisukeyamashita.com/

2.

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は仮です。 書き方は以下のリンクを参照してください。

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 PropertyParser Mismatched Metadataを見ます。理由はわかりませんが、og:image:urlからog:imageに変更すると消えました。

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

また、og:typeprofileを指定している場合は、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でも確認する

綺麗に表示されました。

keisukeyamashita.com

まとめ

  • SEOは実際の現場では大事
  • 効果は観測して検証すべき
  • og:imageはすることが多い
  • 常にリファレンスを片手に置いておこう

まだまだ勉強します!!!

参考文献

ogp.me

developers.facebook.com

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)