読者です 読者をやめる 読者になる 読者になる

まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

AMP (Accelerated Mobile Pages) 導入の流れ

こんにちは、まちいろの工藤です。

先日、b-monster 株式会社と共同開発したオウンドメディア「b-monster.fit」がリリースされました。 フィットネスやボディメイクに関する記事を中心としたオウンドメディアとなっておりますので、興味のある方はぜひ購読をお願いします!

f:id:mkudo-machiiro:20170110224437j:plain

http://b-monster.fit

b-monster.fit の構築にあたって、記事ページを AMP (Accelerated Mobile Pages) に対応してみましたので、今回はその AMP 対応の流れをご紹介したいと思います。

AMP とは

AMP とは Accelerated Mobile Pages の略で、GoogleTwitter で共同開発しているモバイル端末での Web サイト表示を高速化するためのプロジェクト、またはフレームワーク自体を指します。読み方は「アンプ」が正しいようです。

www.ampproject.org

AMP を知るにあたって、個人的には mozaic.fm の AMP 回が非常に勉強になりました。

mozaic.fm

AMP には様々なレギュレーションがあり、これらに則ることで Web の高速化手法 (非同期処理、プリレンダリング、CDN キャッシュ...等) が適用されて高速にページが表示できる、という仕組みです。

AMP のレギュレーションの代表的なポイントは以下の通りです。

  • JavaScript を利用することはできない
  • 代わりに AMP が用意するコンポーネントで代用
  • CSS は外部ファイルではなくインライン展開する必要がある
  • img/iframe 等、一部のタグは AMP 用のタグに置き換え必要
  • style 属性を指定することはできない

また、AMP はサイトを高速に表示するだけでなく、ニュース記事であれば Google 検索のトップニュース枠 (AMP カルーセルと呼ばれる) に表示される条件にもなります。 本記事執筆時点で「大統領」と検索すると、以下のトップニュースが表示されていました。

f:id:mkudo-machiiro:20170110233848p:plain:w300

※ AMP カルーセルにブログ記事等のニュース以外の記事が表示されるパターンは確認できませんでした。この辺の事情ご存知の方いましたらコメントいただけると嬉しいです。

以上のことから、現時点では記事サイト、特にニュースサイトの記事であれば AMP を導入するメリットがありそうです。実際に多くのニュースサイトでは既に AMP が導入されています。

記事ページを AMP 化する

それでは今回 b-monster.fit で行った AMP 対応をご紹介します。

※ AMP ページを作成するための手順を記述していますが、実際には通常の記事ページ用の実装と、AMP ページ用の実装の2種類が分岐しながら実装しているイメージとなります。

1. AMP ボイラープレートを適用する

公式サイトのボイラープレートをそのまま持ってきて適宜内容を変更します。

www.ampproject.org

2. AMP ページの URL を指定

通常ページには <link rel="amphtml"> で AMP ページの URL を、AMP ページでは <link rel="canonical"> で通常ページの URL を示します。 この設定をしておくことで、通常ページをクローラーした際に一緒に AMP ページまでクロールしてくれます。

ちなみに AMP の URL 構造にはパラメータを使っても OK なので、通常ページのURL?amp=1 といった URL でも OK でした。

3. CSS をインライン展開する

通常 CSS は外部ファイル化して <link href="xxx.css"> で読み込んでいると思いますが、AMP では <style amp-custom> タグの中にインライン展開します。

4. 構造化データの設定

Google 検索結果の AMP カルーセルに表示させるには、schema.org に準拠した構造化データの指定が必要です。 今回は schema.org/Article の仕様に準拠した指定を行いました。

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "url": "記事の URL",
    "headline": "記事のタイトル",
    "description": "記事の説明",
    "keywords": "記事のキーワード",
    "mainEntityOfPage":{
      "@type": "WebPage",
      "@id": "記事の URL"
    },
    "dateCreated": "記事の作成日時 (ISO 8601 フォーマット)",
    "datePublished": "記事の公開日時 (ISO 8601 フォーマット)",
    "dateModified": "記事の更新日時 (ISO 8601 フォーマット)",
    "author": {
      "@type": "Organization",
      "name": "b-monster"
    },
    "publisher": {
      "@type": "Organization",
      "name": "b-monster",
      "logo": {
        "@type": "ImageObject",
        "url": "ロゴ画像の URL",
        "width": 130,
        "height": 53
      }
    },
    "image": {
      "@type": "ImageObject",
      "url": "記事画像の URL",
      "width": 1000,
      "height": 600
    }
  }
  </script>

5. img タグを amp-img に置き換える

HTML に普通に <img src="xxx.jpg"> と記述していたところを、<amp-img src="xxx.jpg"> に置き換えます。

また、widthheight を必ず指定する必要があります。レスポンシブデザインを採用している場合は、layout="responsive" 属性を指定して、アスペクト比を保ったまま width 一杯に表示させることで対応が可能です。

6. Google Tag Manager の導入には amp-analytics タグを利用する

JavaScript を利用できないため、代わりにカスタムエレメント amp-analytics を利用します。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

...

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-xxxxxxx&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

7. JavaScript を使わずに CSS のみで UI を実装する

今回は初めから AMP 対応が決まっていたので、例えばドロワーを JavaScript を使わずにチェックボックス:checked 疑似クラスセレクタを利用して実装してたりします。 ただし、ドロワーに関しては amp-sidebar を使って AMP でも実装可能です。

AMP ページを検証する

1. URL に #development=1 を付けてデバッグ

Chrome で AMP ページを開いて URL に #development=1 を付けてリロードすると、AMP ページのバリデージョンが実行され Console にエラーが出力されます。 ローカルで開発する際はこの方法でエラーを潰していきます。

2. AMP テストツールを実行する

サーバーを構築したら、実際の URL を AMP テストツールに投げて問題が無いか検証します。

AMP テスト

合わせて構造化データもチェックしておきましょう。

構造化データ テストツール

3. Google Search Console でエラーを確認する

AMP ページに問題がある場合、Google Search Console にログが出力されますので、内容を確認して適宜修正します。運用が開始されたら基本はここをチェックします。

f:id:mkudo-machiiro:20170110224236p:plain

おわりに

b-monster.fit はまだ広告も動画も無いシンプルなサイトなので、ここで紹介した内容は AMP 対応の中でも基本的な内容となります。

既存サイトへの導入は難しいこともあるかもしれませんが、新規にサイトを構築する際は導入を検討してみてはいかがでしょうか。