AMP化するまでの５つの手順 - とろろこんぶろぐ

概要

AMPは何なのかなんとなくわかったけど、結局何すればいいの？というときのためのAMP化までの工程を５つの手順にまとめる。

0. 準備

まずAMP化したい記事やポストがあることが前提。

1. AMP化のおまじない

AMP化するためのおまじないを書く。

htmlにAMPマーク（⚡or amp）をつける

<html> → <html ⚡>

headにAMP用のscriptとstyleなどを追加する

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"/>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>

2. script全てとstyleの読み込みを消す

AMPではampカスタム要素以外のscriptは許されていないので、scriptは全て消す。cssもlink relで読み込みが禁止されているので全て消す。必要最低限のものだけinlineに展開する。

<style amp-custom>
header .flex {
  margin-left: 0; }
  ...
</style>

3. 構造化データを用意する

AMP化した記事をカルーセルに載せるためstructured dataを用意する。以下のような形式でhead内に追加する。

    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Article",
      "author": "編集部",
      "description": "XXXの魅力を紹介します。",
      "headline": "XXXの魅力は、YYYで...",
      "name": "記事のタイトル",
      "datePublished": "2019-04-27T01:07:29+09:00",
      "publisher": {
        "@type": "Organization",
        "name": "組織名",
        "logo": {
            "@type": "ImageObject",
            "url": "~.jpg",
            "width": 320,
            "height": 240
        }
      },
      "image": {
        "@type": "ImageObject",
        "url": "~.png",
        "width": 320,
        "height": 240
      }
    }
    </script>