AMP化HTML・CSSの作り方の基礎

AMP化することで様々なメリットがあり、様々なサイトでAMP化が進んできていますよね。

WordPressや一部の無料ブログだと、プラグインやボタン１つでAMP化できるとこが増えていますが、それ以外だったらどうしたら良いのか。

AMP化する際にHTMLやCSSをどのように変更したら良いのか、その基礎を解説していきます。

コード

今回、基礎の解説に使用するコードは以下のようなものです。コードの解説は後でご紹介します。

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>タイトル</title>
    <link href="main.css" rel="stylesheet">
</head>
<body style="color: #555">
    <main>
        <h1>見出し</h1>
        <p>あいうえお</p>
        <img src="https://louliz.com/image/20190201062604644494239" alt="">
    </main>
</body>
</html>

２つ目の以下のコードは、AMP化前のHTMLのためのCSSファイルです。

３つ目の以下のコードは、AMP化後のHTMLで別のCSSファイルはありません。

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html ⚡>
<head>
    <meta charset="UTF-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="main">
    <title>タイトル</title>
    <style amp-custom>
        body {
            color: #555;
        }
        main {
            max-width: 600px;
            margin: 0 auto;
        }
        img {
            width: 100%;
        }
    </style>
    <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>
<body>
    <main>
        <h1>見出し</h1>
        <p>あいうえお</p>
        <amp-img src="https://louliz.com/image/20190201062604644494239"
            width="800"
            height="533"
            layout="responsive"
            alt="">
        </amp-img>
    </main>
</body>
</html>

解説

先程のコードで、AMP化で追加される部分と変更される部分について簡単に解説していきます。

htmlタグ

htmlタグは以下の２種類のどちらかに書き換える必要があります。終了タグは変更する必要がありません。

エンコード指定

AMP専用タグのためのJavaScript

AMP化ページでは、様々なタグがAMP専用のものに置き換える必要があります。そのタグを処理したりするために、以下のJavaScriptを読み込みます。

canonical

非AMPページとAMPページの２つがある場合、非AMPページへのcanonicalが必要です。非AMPページが不要な場合は、AMPページ自身へのcanonicalが必要です。

CSS

AMP化ページでは外部のCSSを読み込むことが出来ないため、HTMLの中に styleタグを使用して書き込む必要があります(カスタムフォントは別です)。

また、以下のように『amp-custom』を styleタグに追加して下さい。

!important

AMP化ページでは以下のように『!important』を使用することは出来ません。

style属性

AMPページでは、以下のように style属性を用意することは出来ないので、CSSはstyle要素に記述する必要があります。

ボイラープレート

以下の１行は、AMP JSが読み込まれるまでの間に必要なものです。

HTML

1
<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}}<

span class="p">@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>

画像

AMP化をする場合、imgタグは『amp-img』に置き換え、終了タグの『</amp-img>』も必須になります。

また、基本的にwidth属性とheight属性が必要になり、画像の縦幅と横幅のピクセル数を指定します。

AMPで表示する画像は、画像の大きさをそのまま表示させようとしてしまい、画面幅が600pxしかないのに画像幅が800pxあると、画面外へはみ出してしまいます。

これを防ぐために『layout="responsive"』が必要です。これを記述することで、画面幅に対して常にアスペクト比を維持しつつ100%の幅で表示されるようになります。

HTML

1
2
3
4
5
6
<amp-img src="https://louliz.com/image/20190201062604644494239"
    width="800"
    height="533"
    layout="responsive"
    alt="">
</amp-img>

さいごに

公開しているウェブページのAMP化でしたら『AMP テスト(Google)』でテストすることが出来ますので、エラーがないかチェックしてみて下さい。