AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages)とは、ウェブページを高速に表示できる仕組みです。AMPに対応したウェブページを作成するには、HTMLやCSS、JavaScriptに決まりごとや制約があります。この記事自体もAMPで作成しています。

HTML

AMPに対応するには、HTMLを次のように記述する。

<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <title>AMP (Accelerated Mobile Pages)</title>
    <link rel="canonical" href="amp.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=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}}@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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
  </body>
</html>

HTML要素

AMPのHTMLでは、html要素にamp属性を指定する。

<html amp>

文字コードはUTF-8

AMPのHTMLはUTF-8で作成する。Shift JISで作られたHTMLはAMP化できない。

<meta charset="utf-8">

ビューポートの指定

AMPのHTMLでは、必ずビューポートを指定する必要がある。

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

ボイラープレート

AMPのHTMLには、AMPボイラープレート(鋳型)コードを含める必要がある。

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

AdSense

AMPにAdSenseを入れるには、head要素に次のスクリプトを入れる。

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

次のコードを任意の場所に入れる。ただし、レスポンシブ広告ユニットで自分のサイト運営者ID(data-ad-client)と広告ユニットID(data-ad-slot)を確認して、該当部分を置き換える。

<amp-ad width="100vw" height=320
  type="adsense"
  data-ad-client="ca-pub-1234567891234567"
  data-ad-slot="1234567890"
  data-auto-format="rspv"
  data-full-width>
  <div overflow></div>
</amp-ad>

CSS

AMPでCSSを指定するには、style要素にamp-custom属性を指定する。

<style amp-custom>
  /* properties */
</style>

AMPでのCSS使用には、次のような制限がある。

JavaScript

AMPでは非同期のJavaScriptのみ使用を許可されている。

AMP検証ツール

AMPが正しく作られているか検証できるツールが用意されている。

https://validator.ampproject.org/

SE学院 > HTML

SEO [PR] !uO z[y[WJ Cu