こんにちは、
GMOアドマーケティングで主にYomerumoのフロント周りを担当しております、y.aです。

もう2016年の夏が終わるんですね。8月末といえば溜まりに溜まった夏休みの宿題の消化かと思いますが、Yomerumoも溜まりに溜まったタスクを消化してついにAMP対応しました！

Yomerumoは芸能・エンタメ中心に、有名人の情報やニュースなど様々な情報を豊富に取りそろえているニュースサイトです。

news.merumo.ne.jp

今回はまだAMP未対応の方向けに、
YomerumoがAMP化にあたって行った作業をシェアしたいと思います。

AMPとは

AMPとはGoogleが公表した「Accelerated Mobile Pages(AMP)」というモバイル端末でウェブページを高速で表示するためオープンソースプロジェクトです。

2016年2月末以降、Google検索結果の「トップニュース」の枠にて、カルーセルあるいはテキストリンクの下に「AMP」とラベルがついたリンクを見かけるようになったかと思います。

これがAMPページへのリンクでして、クリックすると分かりますが表示までとても早いです。

これはAMP対応ページがGoogleのクローラーにキャッシュされ、リンクがクリックされた際にはそのキャッシュ済みのコンテンツが表示されるためです。
AMPの情報については他のサイトでも多く見かけると思いますので、ここでは詳細は省いて主にYomerumoでどのようにAMP対応したか流れを説明します。

AMP対応の流れ

基本的にはGoogle Developer Japanにて公表していた「AMP 導入ガイドの日本語版PDF」に沿って進めました。以下大まかな流れです。

1. URLパスの検討
2. AMPのためのテンプレート準備
3. 構造化データ用意
4. アナリティクス埋め込み

1. URLパスの検討

GoogleにAMPページをキャッシュしてもらうには元の記事ページ(正規のバージョン)の<head>タグ内に

<link rel="amphtml" url="{{AMPの該当記事URLパス}}">

1	<link rel="amphtml" url="{{AMPの該当記事URLパス}}">

が入ってることが必要です。

そのような仕組みのため、導入ガイドにもありますが、URLパスはどのようなものでも大丈夫のようです。

http://www.example.com/myarticle/amp
http://www.example.com/myarticle.amp.html

Yomerumoの場合は新たにAMP用のディレクトリを切る形にしました。

2. AMPのためのテンプレート準備

JavaScriptの削除

基本的には従来の記事ページをベースに進めていきましたが、JavaScriptは使用できないため、使用している箇所(記事本文下にある「Good」「BAD」ボタンなど)は泣く泣くAMPから削除いたしました。

タグの置換

今回最も苦労した点です。
AMPでは<img>タグなど一部のHTMLタグはそのままでは使用できません。通常のHTMLの拡張をしたAMPカスタムタグを使用することになります。
それぞれのタグについてはAMP Projectで公表しているので参照頂ければと思います。

YomerumoではAMP対応した提供元記事はまだ限られるものの、外部フィードから送られてくる記事については様々なHTMLタグがあるため、当初大量のエラーにぶつかってしまいました。
対応としてはAMPタグ置換用のクラスを用意し、ひたすらValidatorとにらめっこしながら正規表現を駆使して作業していったという感じです。

なおAMPのエラーチェックとしてURL末尾に「#development=1」をつけると、ブラウザのConsoleにてエラーログを確認できます。
ただGoogle Chromeを使用されているのであれば、Chromeの拡張機能として「AMP Validator」を入れれば先ほどのハッシュを付けずとも、下の画像のようにエラーログを表示してくれます。

3. 構造化データ用意

検索結果の「トップニュース」にAMPリンクを表示させるには、構造化データを正しく実装する必要があります。
Yomerumoの場合は以下のように入れております。

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": "{{AMPページURL}}",
    "headline": "{{見出し}}",
    "datePublished": "{{配信開始日}}",
    "dateModified": "{{配信更新日}}",
    "author": {
        "@type": "Organization",
        "name": "{{提供元名}}"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Yomerumo",
        "logo": {
            "@type": "ImageObject",
            "url": "{{ロゴ}}",
            "width": {{ロゴサイズ}},
            "height": {{ロゴサイズ}}
        }
    },
    "image": {
        "@type": "ImageObject",
        "url": "{{AMPページの見出し画像}}",
        "width": {{AMPページの見出し画像サイズ}},
        "height": {{AMPページの見出し画像サイズ}}
    }
}
</script>

{

"@context": "http://schema.org",

"@type": "NewsArticle",

"mainEntityOfPage": "{{AMPページURL}}",

"headline": "{{見出し}}",

"datePublished": "{{配信開始日}}",

"dateModified": "{{配信更新日}}",

"author": {

"@type": "Organization",

"name": "{{提供元名}}"

"publisher": {

"@type": "Organization",

"name": "Yomerumo",

"logo": {

"@type": "ImageObject",

"url": "{{ロゴ}}",

"width": {{ロゴサイズ}},

"height": {{ロゴサイズ}}

}

"image": {

"@type": "ImageObject",

"url": "{{AMPページの見出し画像}}",

"width": {{AMPページの見出し画像サイズ}},

"height": {{AMPページの見出し画像サイズ}}

}

</script>

4. Analytics

アナリティクスのタグを埋めることによってどのページにアクセスが来たのか測定できます。
アナリティクスのタグもAMPではカスタムタグに変えないといけません。
ドキュメントにもありますが、新たにプロパティを作成して、既存のレポートと分けるのがよいと思います。
Yomerumoでは現状PV測定に特化して、シンプルにまとめてあります。

<amp-analytics type="googleanalytics" id="{{任意のID}}">
<script type="application/json">
{
    "vars": {
        "account": "{{プロパティ_ID}}"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}
</script>
</amp-analytics>

<amp-analytics type="googleanalytics" id="{{任意のID}}">

{

"vars": {

"account": "{{プロパティ_ID}}"

"triggers": {

"trackPageview": {

"on": "visible",

"request": "pageview"

}

</script>

</amp-analytics>

その他にもイベント設定も可能ですので詳しくはドキュメントを参照ください。

インデックスされているか確認

AMPはGoogle Search Consoleでページのインデックス状況を確認できます。
反映には少し時間がかかるようでして、Yomerumoの場合AMPページが検索結果「トップニュース」内に表示されるようになっても、Search Consoleに反映するまでには2日ほどかかりました。
（なお｢トップニュース」には公開してから3時間足らずで表示確認できました。）

反映されるとインデックスされたページと、エラーが起きているページを表示してくれます。

ちなみにエラーについても同様に、修正してもすぐには反映しませんので、これもまた気長に待ちましょう。

公開してから今のところ

当初AMPについてはJavaScript使用の禁止を始めとして多くの制限があることを知ってたので、デザイン、広告、本サイトの流入減少など様々不安がありました。

ただ公開してからまだ数日ですが、AMPが表示されてから特に本サイトのPVが減少したということはなく、むしろそこからの経由流入もあったりでプラスの面の方を感じています。
おそらくうまくAMPページから本サイトへの導線を作ることが出来れば、AMPも本サイトPV増に貢献してくれるのではないかと思います。

またAMPは<amp-ad>というタグを利用すれば、AMP対応したアドネットワークの広告も入れることが可能です。これによってAMP単体でも収益をもたらせるので、大きくマイナス影響をもたらすことはないのでしょう。

AMP化は一人でもできる？

結論、AMP化は一人でできると思います。
使用タグの制限などルールも多々ありますが、やること自体の難易度は高くありませんでした。
また間違っていたら「ちゃんと」Consoleにエラーが出るので、開発も詰まることはありませんでした。

強いて言えば、私は普段は主にフロント対応なので、その分バックエンド側のコントローラ、タグ置換に時間取ってしまったかもしれません。

ただそれでも一般的なフロントエンジニアであれば問題なく対応できると思います。
何かしらバックエンドを触ることになると思うので、個人的にはコーダーなり、フロントエンジニアが「少し一歩先」に踏み出しくなったときの、ちょうど良い教材になるのではないかなと思います。
（もちろん最後はコードレビュー受けることが大事です！）

以上ざっとですがAMP導入についてでした。

なおYomerumoはAMPに負けず劣らず、高速で記事をサクサク閲覧できるアプリもあります！
iOS
https://itunes.apple.com/jp/app/yomerumo-news-yomerumonyusu/id371083834?mt=8
Android
https://play.google.com/store/apps/details?id=jp.ne.merumo&hl=ja

こちらも何卒よろしくお願いいたします！

y.a