AMPページを改善する 〜PVを上げるためにPR TIMESでおこなったこと
PR TIMESフロントエンジニアの山田です。
AMPに関する前回の記事で導入の顛末をまとめました。
AMP対応はGoogleの検索結果にも影響!PR TIMESへの導入記。 - PR TIMESデザイナー&エンジニアブログ BREAK TIMES
実はその後もいくつかの施策を試しながらアクセスの増減を見ていました。
そうした中でさらにAMPへのアクセスを増やすことが出来ましたので、まとめてみます。
こちらが今回の施策をおこなう前後でのAMPページヘのアクセスです。
今回の施策を実施後のアクセスを見ると10〜20倍もPVが増え、実施前がほとんど0に近くなって見えるくらい伸びています。
ここで実施したこととは、「構造化データをきちんと整えること」です。
これによって検索エンジンにきちんと情報を理解してもらいやすくなり、SEO的にも効果が上がってきます。
構造化データを検索エンジンが読んで理解すると、検索したときやGoogleニュースなどで、カルーセル部分も含めてトップニュース枠に表示される確率が高くなるのは非常に大きいですね。
また、一部のコンテンツではリッチスニペットとして検索結果に表示され目立たせることが出来るんです。
みなさんもGoogle検索したときに、このリッチスニペットを目にしたことがあると思います。
レシピ
まだ、ニュースコンテンツの画像表示などには対応していないみたいですが、これから広がって行くことが予想されるので、対応しておくと良いでしょう。
さて、この構造化データを検索エンジンに伝えるためには、どうすれば良いのでしょうか。
PR TIMESで実施したのはJSON-LDをhead内に設置することです。
具体例を挙げて見てみましょう。
PR TIMESが出したプレスリリース詳細のAMPページです。
− YouTuberへリリース配信する時代に - PR TIMESが日本最大級YouTuberネットワーク「BitStar」と業務提携 | 株式会社PR TIMESのプレスリリース
head内に以下のようなJSON-LDが設置してあります。
<script type="application/ld+json"> { "@context":"http://schema.org", "@type":"NewsArticle", "mainEntityOfPage":{ "@type":"WebPage", "@id":"/main/html/rd/p/000000676.000000112.html" }, "headline":"− YouTuberへリリース配信する時代に - PR TIMESが日本最大級YouTuberネットワーク「BitStar」と業務提携", "datePublished":"2016-08-09T11:30:02Z", "dateModified":"2016-08-09T11:31:44Z", "description":"株式会社PR TIMESのプレスリリース(2016年8月9日 11時30分)− YouTuberへリリース配信する時代に - PR TIMESが日本最大級YouTuberネットワーク[BitStar]と業務提携", "author":{ "@type":"Organization", "name":"株式会社PR TIMES" }, "publisher":{ "@type":"Organization", "name":"PR TIMES", "logo":{ "@type":"ImageObject", "url":"http://prtimes.jp/common/v4.1/images/html_m/logo_amp.png", "width":"298", "height":"60" } }, "image":{ "@type":"ImageObject", "url":"http://prtimes.jp/i/112/676/origin/d112-676-459903-3.jpg", "width":"1500", "height":"1500" } } </script>
contextで指定しているschema.orgというのは構造化データをマークアップする共通仕様の指定です。
Google、Yahoo、Microsotなどが参加しています。
PR TIMESは速報性もあるニュースコンテンツなので、タイプにはNewsArticleを指定しています。
ニュース以外にも動画、トップページ、商品、イベント、レビュー、人、料理レシピなど様々なタイプがあり、先ほど述べたように一部のタイプでは検索結果を目立たせることができるんです。
そして、PR TIMESのトップにはこちらの構造化データを指定しています。
(一部抜粋)
"@context":"http://schema.org", "@type": "WebSite", "url": "http://www.prtimes.jp/", "potentialAction": { "@type": "SearchAction", "target": "http://prtimes.jp/main/action.php?run=html&page=searchkey&search_word={search_term}", "query-input": "required name=search_term" },
SearchActionを指定することで、検索結果にサイト内検索のフォームを表示させることもできます。
これは便利です。(一部のサイトでは構造化データがなくても表示されるようです)
このように構造化データを指定することで、検索したユーザーにきちんとコンテンツを届ける一助になりますね。
構造化データの詳細な仕様はこちらで確認してください。
Introduction to Structured Data | Search | Google Developers
最後にこちらのテストツールで記述が合っているかチェックしましょう。
構造化データ テストツール