サイバー・バズの@kashira2339です。
最近巷を賑わせているAMPと、導入にあたって検討されるであろうことがらについて
サイバー・バズでの取り組みにあわせて触れていきたいと思います:)
急いでいる人用
AMPを導入すると...
- モバイルページの表示が早くなる
- 検索結果にカルーセルUIが表示される
- Twitter、FacebookなどSNSのシェアボタンが設置できる
- サイドメニューやアコーディオンUIは拡張コンポーネントで使える
- 限られた広告は表示できる
- テンプレートエンジンの駆使で仮想的に外部ファイルが読み込める
- サードパーティのレコメンドエンジンは海外に強い会社を中心に対応されている
- 現状、記事ページのみ対応可能
- SEOに直接影響はない
- GoogleAnalyticsが使える
- SNSの投稿やyoutubeも埋め込める
- 10人日程度の工数がかかる
AMPとは
AMPとは、 Accelerated Mobile Pages の略称です。
正確には、GoogleとTwitterが協同で策定したプロジェクト名がAMPであり、
オープンソースでAMP HTMLというフレームワークが公開されています。
その名の通り、モバイル端末でのWEBページの表示の高速化を目的とした技術です。
Googleのモバイル端末での検索結果に表示されたAMPのリンクをクリックすると、
驚くべき速さでページが表示されます。
みなさんも、Googleの検索結果に表示された「トップニュース」のカルーセルに見覚えがあるのではないでしょうか。
サイバー・バズで運営しているDoctors Meでも
記事ページにAMPを導入しているため、検索キーワード次第ではこのように表示されます。
しかし、AMPで策定された仕様に則ってページを構築するにはいくつもの制約・規約に従う必要があり、
その手間や技術的課題からAMPの導入を迷っているサイト運営者も非常に多いのではないでしょうか。
特に、AMPページでは普段使っているJavaScriptが利用できないことから
導入を見送ってしまっているケースも多いのではないかと思います。
この記事では、私たちが実際に検討した項目とその解決方法について触れていきたいと思います。
検討事項とその解決
1. Twitter、FacebookなどSNSのシェアボタンが設置できないのではないか
こちらは、 問題なく設置できます。
<amp-social-share type="twitter"
width="60"
height="44"> </amp-social-share>
<amp-social-share type="facebook"
width="60"
height="44"
data-attribution=254325784911610></amp-social-share>
<amp-social-share> というタグがあり、typeには標準でいくつかのSNSが指定できるようになっています。
Doctors Meでもシェアボタンを４パターン用意しています。
LINEとはてなブックマークは外部リンクとして立ち上がるため、もとより問題なく動作します。
参考: https://ampbyexample.com/components/amp-social-share/
2. モバイルページ特有のサイドメニューなどが実装できないのではないか
こちらも用意されているコンポーネントの利用で実装可能です。
JavaScriptのライブラリを使う程度の感覚で実装できるので、
特に難しいことはありません。
実装のためにはamp-sidebarというタグを使います。
<amp-sidebar id='sidebar'
layout="nodisplay"
side="right">
幅などはCSSで、向きはsideプロパティで決めることができます。
参考: https://ampbyexample.com/components/amp-sidebar/
3. 広告が表示できないのではないか
限られた広告のみですが、表示可能です。
AMP HTMLには、アドネットワーク用のタグも用意されています。
amp-ad(GitHub)
まだ対応しているアドは多くなく、WEBサイトによっては現在導入している
全ての広告をAMPでも使うことは難しいかもしれません。
Google傘下であったり、海外に強い企業は既にamp-adに対応しているケースはあります。
上のリンクや、AMP HTMLの公式ページから使いたい広告が対応しているか確認してみましょう。
[2016/08/16 追記 (SPthx:@banakemiさん)]
GitHubでも対応広告一覧が確認できます。
参考: https://www.ampproject.org/docs/reference/amp-ad.html
4. JavaScriptやCSSを外部ファイルから読み込みたい場合はどうすれば良いのか
AMP HTMLではCSSやJavaScriptを外部ファイルとして読み込むことができません。
それを制約として高速化を図っている以上は、仕方のないことです。
そこで、GitHubに挙げられている公式の例では以下の方法を採用しているようです。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<style amp-custom>
{{> css/material.css}}
{{> css/styles.css}}
{{{styles}}}
html, body {
margin: 0;
height: 100%;
width: 100%;
}
...
このように、テンプレートエンジンを利用して
<style amp-custom>タグの中に外部ファイル化されたCSS挿入しています。
サンプルはmustacheを使っているようですが、
Doctors MeではThymeleafを使っています。
こうすることで、cssを従来通り外部ファイルとして管理しつつも、
レンダリングされる際にはvalidなAMPページとして出力することができます。
5. サードパーティのレコメンドエンジンが利用できないのではないか
AMP導入を検討しているWEBサイトに、他社様のレコメンドエンジンを利用している場合も少なくないでしょう。
ですが、AMPに対応したレコメンドエンジンは現在も続々と増えています。
- popIn Discovery
- TAXEL byGMO
- logly lift
- Outbrain
- Taboola
どちらかといえば海外に強いプレイヤーが多いようなので、
どうしても使わなければいけないレコメンドエンジンがAMP対応しているかどうかは、要チェックです。
6. どんなページをAMP対応させるべきなのか。
AMPはニュース、コラムなどの記事ページのみに導入することができます。
具体的には、下の3つのタイプのschema.orgとなります。
schema.org/Article
schema.org/NewsArticle
schema.org/BlogPosting
Doctors Meでも、AMP対応の記事ページにて
JSON-LDフォーマットで以下のような記述をしています。
{
"@context": "http://schema.org",
"@type": "NewsArticle",
....
このように記述されており、かつAMPの制約を守られて作られているページが
冒頭のように検索結果に表示されます。
ただし、記事ページではないにもかかわらず上記のような記述をすると、
検索結果には表示されなくなってしまうようです。
7. SEOの観点におけるメリットはあるのか
AMP導入を検討する際、SEOにおけるメリットを考慮して導入したいというケースもあるのではないかと思います。
現状、AMPを導入したからといって検索順位をあげるということはないようです。
ただ、AMP HTMLを導入すると
- ページ表示速度の向上が期待出来る
- 検索結果に「トップニュース」として、カルーセルUIで表示される可能性がある
といったメリットがあり、間接的に自然検索からの流入を生む可能性はあります。
Google Search ConsoleではAMPのサポート用の機能がいくつか用意されています。
8. 解析系ツール（Google Analyticsなど）が利用できなくなるのではないか
AMPはGoogleAnalyticsに対応しています。
amp-analytics
amp-analytics(GitHub)
たとえば、ページビューをトラッキングするだけであれば以下の記述だけで実装できます。
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "XX-xxxxxxxx-x"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
リンク先を見ればわかる通り、ページビューだけでなく
クリックイベント、スクロールイベント、経過時間でのトラッキングも可能です。
これらのルールを理解すれば基本的なイベントはおおよそ実装できるでしょう。
9. SNSのコンテンツやYouTubeなどの埋め込みができないのではないか
AMPでは、特定のSNSなどの外部サービスの埋め込み専用のコンポーネントが用意されています。
例えば、youtubeでは以下のようになります。
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480" height="270">
</amp-youtube>
また、Facebookやインスタグラム、Twitterなどの埋め込み専用のタグが用意されています。
<amp-facebook width=486 height=657
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
昨今、ブログなどに自身のTwitterなどのSNSでのツイートを引用し埋め込むケースなどもあるので、
記事ページにおいては重要なタグとなるでしょう。
参考: https://www.ampproject.org/docs/guides/third_party_components.html#include-a-youtube-video
10. やはり、工数が膨れあがってしまうのではないか
Doctors Meでは、実装にかかった工数は10人日程度でした。
AMP HTML対応のためには、もちろん多少の工数は覚悟する必要があるでしょう。
なぜなら、画像サイズを適切に指定したり、現在のJavaScriptの動作に相当する挙動を実装する必要があるからです。
ただ、実際にどれくらいの工数がかかるかは現状のWEBサイトの仕組みにもよります。
Doctors Meではチームメンバーの人数の増減もなく、ざっくりとした所感ですが
思ったほどの工数はかからなかったな、と思っています。
まとめ
AMPには思った以上に、実際のプロダクトでの利用に耐えうるレベルで
モバイルページに必要なコンポーネントが揃っていました。
そのため、記事ページを有するWEBサイトにおいては
「◯◯ができないからAMPの導入はやめよう」という決断には
ならなくなってきたのかなと感じています。
ですが、現時点では数人日の工数をかけても
WEBサイトへの集客に重要なSEOに直接的な利点が無いのも事実です。
もちろん、今後はAMPを導入していることがGoogleでの検索結果の
順位付けの一要素となっている可能性もあるかもしれません。
ですが、しばらくはSEOとしての効果への期待よりは、
モバイルページ高速化というAMP本来の目的や検索結果へのカルーセルUI表示、
今後を見据えた技術的チャレンジのような意味合いが強くなるかと感じます。
AMPは、現状のサービス方針に合わせて導入を考える価値はあるが、
直接的メリットはまだ少ないので余裕のあるときの追加の一手とする
のが良さそうです。
おわりに
[サイバー・バズでは一緒にサービスを創れるエンジニアを募集しています :)]
(https://www.wantedly.com/projects/57067?list=5)