ゆーすけべー日記

天然パーマです。

そのURLが表示される時

2015-08-25

Facebookで「URL」付きの投稿をポストした際に以下のような「URLが参照するコンテンツのサマリーを考慮した表示」になるのはご存知だろう。

f:id:kamawada:20150825100629p:plain

こうした「URLの表示」はFacebookのみならず様々なプラットフォームで行われつつあり、混沌としつつも、ウマく活かせば閲覧者にとって便利な機能となる。

僕のメインワークである「ボケて」の開発は、かなり近い将来に大きめのマイルストーンを掲げている。 ただ、リソースの都合上その開発に入る前に、今現在は「コマイ作業」をやっているところだ。 その一環として各種プラットフォームでの「URLの表示」を工夫し、実際にどう見えるのか？、そしてその効果を測るというのを実験的に行っているというわけである。

今回はどのようなプラットフォームでどのような施策をし、どのようにURLが表示されたのか？を紹介する。

Facebook

Facebookの場合はOpen Graph protocol = OGPと呼ばれる約束事をベースに「URL表示」が実装されている。 対象となるURLのHTMLにOGPに従ったMETAタグを記載すれば良い。 例えば、とある僕のお気に入りのボケは以下のように表現される。

 <meta property="og:type" content="article" />
<meta property="og:site_name" content="Bokete" />
<meta property="og:title" content="あれ？俺のポカリはどこだ？" />
<meta property="og:url" content="http://bokete.jp/boke/34651020" />
<meta property="og:image" content="http://d2dcan0armyq93.cloudfront.net/photo/odai/600/2c6530d95dc299170b59e35f0bbf6a22_600.jpg" />
<meta property="og:description" content="写真で一言 ボケて（bokete）" />

これをシェアするとFacebookのタイムラインでは以下のように表示される。

f:id:kamawada:20150825103346p:plain

おお〜 ボケては「写真で一言ボケる」ことを趣旨とするWebサービス。 このように多少見きれてしまうが、写真が大きく載り、その下にボケのテキストが大きく掲載されると本家サイトほどでは無いが、それなりに説得力のある表示である。 ちなみに、Facebookオフィシャルのモバイルアプリの場合はこんな感じ。ほぼ同じような具合だ。

f:id:kamawada:20150825103651p:plain

この見せ方はOGPの記述もあるが画像のサイズがキモになってくる。 2015年8月現在、Facebookでは、横幅が600px以上ないと全デバイスで写真が大きく表示されない。 実はボケてで配信している写真は「横幅もしくは縦幅の大きい方を400pxに合わせる」という仕様だったために、対策をする前はこれほどインパクトのある見せ方は出来なかった。 ただ、Retinaディスプレイをはじめ高解像度な画面を搭載した端末が増えているという理由で解像度を上げることを検討していたことも事実。 そこで、思い切って大きな写真を配信するようにしたら中々いい具合である。

実際Facebookからの流入を、対策をしたここ1ヶ月とその前期間で比べて見ると、たまたまシェアされやすいボケが最近生まれたという差はあれど、 Google Analytics上では格段に「増えている」ことが分かる。

f:id:kamawada:20150825105311p:plain

Twitter

TwitterはTwitterでOGPでもない「Twitter Card」なるMETAタグ記述を推奨している。

 <meta name="twitter:site" content="@boketejp" />
<meta name="twitter:creator" content="@boketejp" />
<meta name="twitter:description" content="写真で一言 ボケて（bokete）" />
<meta name="twitter:card" content="photo" />
<meta name="twitter:title" content="あれ？俺のポカリはどこだ？" />
<meta name="twitter:url" content="http://bokete.jp/boke/34651020" />
<meta name="twitter:image" content="http://d2dcan0armyq93.cloudfront.net/photo/odai/600/2c6530d95dc299170b59e35f0bbf6a22_600.jpg" />
<meta name="twitter:image:width" content="600" />
<meta name="twitter:image:height" content="598" />

name属性の値がtwitter:cardである要素のcontentをphotoにすることで写真をメインとしたコンテンツのURLですよ〜 と定義している。 これが一番見栄えが良かったからだ。TwitterのページもしくはTwitterのオフィシャルクライアントだといい感じに表示される。

f:id:kamawada:20150825110353p:plain

しかし、ページにMETAタグばっか増えてきたな...

Google

表示が重要なのはSNSのみじゃない。スタンダードとなったGoogleでの検索結果の表示もだいぶ工夫してみた。

結果的には以下の点が改善されている。

  • descriptionを見直し表示される概要を整えた
  • PC向けWebとスマホ向けWebとの関係を強化した
  • 検索結果の表示に投稿された日付が表示されるようにした
  • 検索結果の表示にパンくずが表示されるようにした

例えば以下のボケの場合の表示を見てみよう。

って、はてなブログにembedしたらOGP読んでくれてるっぽいやん！！

というのは置いといて... Googleの表示。

f:id:kamawada:20150825111351p:plain

「2015/08/10」と投稿された日付が出てるし、パンくずのおかげでこのURLは「ボケて」の「ボケ」というコンテンツの「バカ」というカテゴリーなんだな、みたいなのがなんとなく分かる。 これらを実装するには主にGoogleが推奨している「構造化データ」にのっとり、今回はMicrodataというスペックを使った。パンくずを構成するol要素の中身はこのような具合だ。

 <li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">
  <a itemprop="item" href="http://bokete.jp/boke">
    <span itemprop="name">ボケ</span>
  </a>
  <meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">
  <a itemprop="item" href="http://bokete.jp/boke/category/%E3%83%90%E3%82%AB">
    <span itemprop="name">バカ</span>
  </a>
  <meta itemprop="position" content="3" />
</li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
  <a itemprop="item" href="http://bokete.jp/boke/34505325">
    <span itemprop="name">新アトラクション″室伏″の終わり方が心配でたまんない</span></a>
  <meta itemprop="position" content="4" />
</li>

ボケてのサイトは日付の掲載を「XX時間前」とか「XX日前」というような現在からの差分のテキストでのみ行って来た。 今回Googleの検索結果にタイムスタンプを掲載するにあたってまず、個別ページのみ「2015/08/25」形式での記載をする策を打った。 それに加え、構造化データのSchema.orgに従いitemタイプを http://schema.org/Article として投稿された日付をメタ表記。 この2つで日にちの表示が叶ったわけだが、どちらが影響しているのかちょいと不明。

 <meta itemprop="datePublished" content="2015-08-10T02:25:18+09:00"/>

以下はモバイルSafariを使ってのiPhone上での表示。ちゃんと「スマホ対応」って文字も出てる。

f:id:kamawada:20150825114512p:plain

正直Googleからの流入はサイト名「ボケて」や「bokete」を入れて来るケースがほとんど、かつ、この施策をしたのが直近なので効果がそこまで分かってない。 ただ、ロングテール的な意味でも、検索結果として分かりやすくするということでも、この対策はアリだったと思っている。

Gunosy

これはあまり一般的では無いが、ボケてではGunosyにコンテンツ提供をしている。 Gunosyへの配信コンテンツ一覧の更新タイミングが1日に1回0時に行われるという仕様だと、どうしても「一気にドバーッと」ボケが更新されるだけで、他の時間帯をカバーしきれない。 なので、適当にロジックを考え、最近面白いボケが1時間に3個前後ほど追加される一覧をつくってGunosyに読んでもらうようにした。 これは昨日やった施策なんだけど、早速「おもしろ」タブにコンスタントにボケてのネタが入ってて良い。

今後の対策

今回色々と実験出来てよかった。 また、iOS9が出るタイミングを待ってから、いわゆる「ディープリンク」と呼ばれるモバイルアプリとの連携を色々と試していきたいね。 あとはまぁー、冒頭で話した「かなり近い将来の大きめのマイルストーン」が実装されたら、もっとコンテンツのファインダビリティ上がるので頑張りたいです！

おしまい。

役だった本

頼られるWeb担当者になる! Googleウェブマスターツールの教科書

頼られるWeb担当者になる! Googleウェブマスターツールの教科書