こんにちは。
えびが嫌いでも伊勢海老は食べられる。
魚卵が嫌い。でも子持ちししゃもは食べられる藤原です。
遅ればせながら、AMPについてまとめます。
正式名称は、アクセラレイティッド・モバイル・ページ。
噛みそうですね。
GoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のこと
http://www.seohacks.net/basic/terms/amp/L
昨年から徐々に導入されて少し前にモバイル爆速化!とかでに話題になっていましたね。
僕は「エー・エム・ピー」ってよんでたんですが、「アンプ」というらしい。
AMPが、Googleさんから正式に発表されたのは、昨年の10月。
Googleオフィシャルブログ:
https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html
モバイルでの検索結果から導入したページのリンクをタップすると爆速で表示されます。
通常検索結果のリンクをタップしてからHTMLの読み込みが始まってページが表示されるまで読み込みでその分時間がかかりますが、AMPを導入したページの場合は、読み込みというモーションがなく一瞬でページが表示されます。
スマホでたとえば「iPhone」とかで検索すると、AMP記事がカルーセルで表示されるので見てみてください。表示されなければ最近なにかと話題なキーワードで検索しても出てきます。
GoogleあるいはTwitter側が、ページのHTMLをあらかじめキャッシュして、検索結果からのタップでHTMLを読み込んで〜ということがなくなる。その分表示にかかる時間を短縮できるということです。
ちなみに、Googleさんのブログでは、
従来に比べて平均4倍の速度で表示され、データ量も約1/10に抑えられるため、ほとんどのページが瞬時に表示される、とのこと。
Google Japan Blogより:
https://japan.googleblog.com/2016/02/blog-post_25.html
モバイルでのGoogleの検索結果ページに、カルーセル形式で表示され、通常のページとは差別化されて表示されます。Twitterと共同開発されただけあって、カルーセルで並んでいてツイッターっぽいUIです。
ちなみにカルーセルじゃない場合も見たことがあるのだけど、もうカルーセルに統一されたのかな…。
共通しているのは、AMP対応しているページは、アイコンの⚡がつきます。
ハリーポッターのおでこについてるアレですね。
グリフィンドォオオオル!
「⚡」ついてますね。
はい、グリフィンドールに10点。
ちなみに話題になった当初、3日以内の記事しか表示されない、とかいう記事もみたのですが、現在は数週間前までのも表示されるようになっているようです。過去の記事をどこまで遡って表示してくれるのか調べきれていないのですが、カルーセルで10件表示されており、新しい記事から最大10件まで表示されているものと思われます。
10件目が、1時間前の場合もあるし、3週間前の場合もある。
はい、グリフィンドールに30点。
検索結果で上のほうにカルーセルで表示されることで検索順位があがると錯覚してしまいそうですが、厳密にはAMPに対応しても検索順位は上がらないとのこと。Googleさんが、「AMPへの対応は検索順位には影響がない」と発言しています。ですので、検索順位を上げるという目的で導入するものではないです。
検索順位上がるわけではないですが、カルーセルで取り上げられることで、サイトの露出は上がることになるので、SEOに有利か有利じゃないか、というと、有利なんじゃないのかなーと個人的に思います。
また、GoogleさんがAMP対応してるとGoogle Newsのトップへ優遇して表示するよ、なんて発表もあったので、これはメリットですね。
GoogleがAMPを使っている高速ロードWebページをGoogle Newsのトップへ優遇
http://jp.techcrunch.com/2016/04/21/20160420google-gives-speedier-amp-powered-web-pages-a-top-spot-in-google-news/
そのプロジェクトやサイトの状況による、と思います。
大手のニュース系のメディアサイトでは、はやばやと導入されていましたし、今現在どんどん対応しているサイトが増えてきていて、有名なメディアサイトや個人的によくみるメディア系のサイトはだいたい対応している模様。
導入すると検索結果での表示が差別化され、目につきやすくなることで、アクセス数向上につながるかもしれません。カルーセルで3つ目以降の記事はユーザが意図的に左にスワイプしてくれないと見えないのですが、それでも他の検索結果と差別化されて表示されることは、少なからずアクセス数に貢献するんじゃないかと。
カルーセルのひとつ目に表示されるのが効果的なので、ばんばん更新されるサイト、更新頻度の高いメディア系のサイトでは、ぜひ対応しておきたいところです。
あくまでGoogleの検索結果からの表示に限られた話なので、競合の他サイトが対応していることで、Googleからの流入が減ったとか、そういう可能性考えられるのであれば対応は検討すべきかと思います。
が、もともとGoogleからの流入にがほとんどないサイトであればマイナスに働くことはないと思う。
ただ対応するとGoogleかの流入が見込めてアクセス数増えるかもしれん、と。
かもしれん、というのは、僕の場合はあまりAMPに触れる機会が少ないから果たしてどのくらい効果があるのかはやってみなければわからないしサイトにもよるだろう、という思うのです。
自分の見たい情報は、ニュースアプリで見ているし、キュレーション系のアプリでも勝手に届くし、Googleで記事を検索すること自体が少ないので、出会うことがほとんどない。
通常のページのほかに、AMP用のページを用意する必要があります。そしてそのお互いのページで相互にmetaタグでリンクを記述しておきます。hoge.htmlというページがあったとしたら、headタグ内で以下のように設定。
・通常ページ(AMPページのURLを記述)
→ <link rel=”amphtml” href=”hoge.apm.html”>
・AMPページ(通常ページのURLを記述)
→ <link rel=”canonical” href=”hoge.html”>
こうしておくことで、Googleさんがモバイルでアクセスしてきた場合はAMPぺージ、
PCでのアクセスの場合は通常ぺージ、という具合に自動で振り分けしてくれます。
なので既存サイトのAMP対応をするには大きく以下の2点の対応が必要。
(1)AMP用のぺージを新規に作成する。
(2)通常ぺージにはそのAMPぺージへURLを追記する。
実際に対応しているページを見てみるとこんなかんじ。
ライブドア
●通常ページ
http://news.livedoor.com/lite/article_detail/11551970/
●AMPページ
http://news.livedoor.com/lite/article_detail_amp/11551970/
ギガジン
●通常ページ
http://gigazine.net/news/20160521-iphone-name-in-china/
●AMPページ
http://gigazine.net/amp/20160521-iphone-name-in-china/
APPBANK
●通常ページ
http://www.appbank.net/2016/05/23/iphone-application/1207013.php
●AMPページ
http://www.appbank.net/2016/05/23/iphone-application/1207013.php?amp=1
AMPが話題になり始めた頃は割りと簡素なデザインのAMPページが多かった気がしますが、最近はもう通常のスマホ版のデザインとほとんどおなじデザインが多い気がしました。
各ページ、対応をしていくといろいろ問題が発生すると思います。
AMP HTMLは、数々の制約があります。たとえば img 要素を、amp-imgにしなければいけない、などです。
この例は簡単ですが、既存ページに手を加えるというところで完全な対応がむずかしいという場面がでてくるはず。面倒そうなのはjavascriptで表示処理をしているところなんかかなーと個人的に思います。
全部やろうとすると時間もコストもそれなりにかかってしまうので、できるところから徐々にはじめるのが得策かと思います。
・技術的に簡単に対応できそうなページをまず手始めに。
・対応が無理そうな要素はAMPページではまるっと削除してしまうのもあり。
・とりあえずWebサイトの1コーナーのみで対応して様子を見る。
など。正直、AMP対応することと、しないことのメリットデメリット、費用対効果は、徐々に対応して検証が必要かなぁと思います。
一気にやるのではなく、ミニマムに導入し、やる価値があると判断できてからサイト全体に適用していくなどのほうが良いかと思います。一気にやろうとすると費用対効果やらなんやかんや大人の事情がからみだして、腰が重くなってしまったりもしますしね。。。
簡易にやるのであれば、AMPページのデザインは、無駄な装飾は省き、スタイルシートを切ったHTMLそのままの構造をベースにしたデザインでよいとおもいます。SmartNewsやニュース記事アプリであるすぐに読むとか、Webビューとテキストビューがありますが、そのテキストビュー版のようなかんじ。可読性、視認性、判読性を担保した上で必要最低限のあしらいや装飾でデザインがされていれば十分だと思います。
ちなみに弊社の事例ではまだ導入しているサイトはありません。
話題にあがりつつも、実装までには至らずというところです。
タグそのまんま使えないから、基本フォーマットに沿って置き換えてね、禁止したタグもあるから使わないでね、などの数々の決まりごと、AMPプロジェクトの公式サイトにすべてが載っています。詳しくは公式サイトをご確認ください。
AMP プロジェクトの公式サイト
https://www.ampproject.org/
https://www.ampproject.org/docs/get_started/about-amp.html
Githubリポジトリにまとめられたものもあるので参考に。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags
さて、AMP HTMLの仕様にのっとって正しく記述できてるのかコレ、って気になりますよね。
正しく記述できているかは、Chromeの開発者ツールで確認ができます。
URLの末尾に “#development=1″ をつけることで、開発者ツールのConsoleに検証結果が表示されます。
http://www.gekkouseisaku.com/hogehoge/amp/
というページの検証の場合はこれで確認↓
http://www.gekkouseisaku.com/hogehoge/amp/#development=1
※このURL自体は存在しないです。あくまで一例ということで・・・申し訳。
対応後は、どの程度AMPページからの流入があるのか検証したいので、Analyticsはぜひいれておきましょう。詳しくは公式ページにてどうぞ。簡単です。
・AMPはアンプって呼ぶよ
・導入するとGoogleの検索結果でカルーセル表示されるよ
・検索結果から爆速で表示されるよ
・アクセス数は増える「かも」
・Googleの検索結果だけでの話なので導入は状況によって検討すればいいよ
・バンバン更新するサイトなら対応するといいよ
・いきなり全部じゃなくてライトにまず対応するのもありだよ
・ハリーポッターは関係ない
・ニュースアプリやキュレショーション系のアプリ使ってると目に触れる機会すくないよ
レスポンシブウェブデザインで1ソースで実装が主流になりつつある今、わざわざ別のファイルを用意する必要があるというところで若干解せぬ…という感じですね。
正直、通常のHTMLページの自動変換が好ましいですが、それが難しい場合、1ソースでの一元管理ができなくなるので保守性あがりそう。PCスマホとは別にガラケーサイトがある、みたいなのと同じような印象を受けました。ガラケーは、GoogleさんやYahoo!さんがPCサイトを勝手に携帯サイトモードで変換してやってくれましたけど、AMPもGoogleさんが自動変換でやりやがれくださいとおもうのだけどなぁ。
徐々に増えてきているので今後どうGoogleさんが展開していくのか、ユーザがどう認知していくのか、動向を見守りたいと思います。
※つい先日、日本のGoogleニュースもAMPを導入したみたいですね。
https://www.suzukikenichi.com/blog/google-news-japan-supports-amp-now/
では、最後にこの記事を書くにあたって参考にさせてもらったサイトを書いて終わります。
参考にさせていただいたサイト、ありがとうございました。
●公式サイト
https://www.ampproject.org/
https://www.ampproject.org/docs/get_started/about-amp.html
https://www.ampproject.org/docs/reference/spec.html
●GitHub
https://github.com/ampproject/amphtml
●AMPとは
http://www.seohacks.net/basic/terms/amp/
●いよいよ導入されるAMP(Accelerated Mobile Pages)の基礎知識から対応方法まで!まとめ
https://webkikaku.co.jp/blog/seo/accelerated-mobile-pages/
●AMP(Accelerated Mobile Pages) HTMLしてみたという話
http://masup.net/2015/10/fits-amp-html.shtml
●AMPとは~対応HTMLを作ってみてわかったこと~
http://www.brain-solution.net/blog/seo/amp-html/
●GoogleAMPの経過報告とWordPressプラグイン「AMP」の導入方法
http://ocadweb.com/web/amp?utm_content=buffer94b4c&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
●AMPって導入すべき?表示速度は4倍でも、今AMPを導入しない理由
http://liskul.com/amp-12753
●モバイルウェブが爆速に! GoogleがAMP (Accelerated Mobile Pages) を立ち上げ
https://www.suzukikenichi.com/blog/accelerated-mobile-pages-amp/
●【WordPress】プラグイン無しでAMP(Accelerated Mobile Pages)に対応にする手順
http://creatorclip.info/2016/02/wordpress-accelerated-mobile-pages/
●Google の高速ページ表示フォーマット AMP (Accelerated Mobile Page) をちょっと紐解く
http://kaiinui.hatenablog.com/entry/2015/10/10/033932
●Google の AMP に対応した HTML を書く
http://kaiinui.hatenablog.com/entry/2015/10/10/211636
●AMPの対応方法まとめ
https://syncer.jp/amp
●Google AMP HTML に対応してみた件
http://blog.lqd.jp/html/001023.html
●AMP ページが Google 検索結果に出る基準の調査
https://q-az.net/amp-google-carousel/
●Accelerated Mobile Pages Project
https://www.ampproject.org/
●AMP ページの Google 検索ガイドライン
https://support.google.com/webmasters/answer/6340290?hl=ja
●Googleの検索結果で上位表示されるAccelerated Mobile Pagesに、はてブやLINEも対応表明
http://www.atmarkit.co.jp/ait/articles/1604/08/news113.html
●モバイルサイトの爆速表示を実現するAMP-HTML-Page作成方法まとめ
http://funnis.net/blog/knowledge/amp-html-procedure/
●AMP (Accelerated Mobile Pages) HTML を出力するようにしてみたけど面倒くさかった話
https://hyper-text.org/archives/2016/01/get_started_accelerated_mobile_pages.shtml
● モバイル検索がより高速に/Google AMP本格始動!
http://innova-jp.com/201603-google-accelerated-mobile-pages/
●AMPを導入してどうだったのか?
http://ameblo.jp/ca-seo/entry-12159258765.html