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 の略で、Google と Twitter で共同開発しているモバイル端末での 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"> に置き換えます。

また、width と height を必ず指定する必要があります。レスポンシブデザインを採用している場合は、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>