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

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

テンプレート付き - AMPの対応方法について

f:id:mochizuki_p:20170107174707p:plain

AMPについての概要はこちら

www.utali.io

あなたのWebページをAMPに対応させるには規格に準拠したHTMLのマークアップを行う必要が有ります。

その規格はついての概要を列挙すると・・

  • HTMLの宣言
  • HTMLタグの書式
  • head bodyタグは必ず含む
  • AMPファイルに対応するHTMLファイルを指定する
  • 文字コードは必ずUTF-8
  • viewportは固定
  • AMP用のJavaScriptファイルを読み込む
  • head内に以下のボイラープレートタグを追加する
  • AMP用のタグへの置き換え

htmlの宣言

<!doctype html>

ここは変わりません

htmlタグの書式

絵文字の⚡かampを追加します。具体的に書いてみると

<html ⚡>

または

<html AMP>

となります。

head bodyタグは必ず含む

これはHTMLでは任意ですが、AMPでは必要です

AMPファイルに対応するHTMLファイルを指定する

例えば、AMP用のファイルに対応する元記事があるとしたら AMPファイル内のHTMLで、以下の形式で、その存在を示す必要が有ります。

<link rel="canonical" href="https://example.com/mysite" /> 

文字コードは必ずUTF-8

<meta charset="utf-8">

viewportは固定

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

AMP用のJavaScriptファイルを読み込む

 <script async src="https://cdn.ampproject.org/v0.js"></script>

通常のHTMLの中でAMPファイルへのリンクを指定する

例えば、AMP用のファイルに対応する元記事がある場合 そのファイル内のHTMLで、以下の形式で、その存在を示す必要が有ります。

元記事 https://example.com/mysite 内のHTMLで以下を追加

<link rel="amphtml" href="https://example.com/amp/mysite" /> 

head内に以下のボイラープレートタグを追加する

要は必ずこれを入れろよということです。

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

AMP用のHTMLタグを利用する

結構面倒です。

例えば画像ファイルであれば

<img src="http://hoge.jp/image.jpg"/>

で済んでいたのが

画像のサイズを正確に指定する必要があり

<amp-img src=http://hoge.jp/image.jpg
 width=300 height=300></amp-img>

となります

詳しくは以下のページを

www.utali.io

その他の制約

HTMLの各要素の属性値について

onで始まるJavaScriptのリスナは使えない

これはダメ

<div onclick="popup()"></div>

styleは使えない

これもダメ

<p style="color:#f5f5f5">hoge</p>

スタイルシートのカスタマイズ

linkを使って外部からcssファイルをロードすることはできない

linkを使ったCSSファイルの読み込みはダメ

これは無効

<link rel="stylesheet" href="/hoge.css">

headの中で以下のタグを使って指定できる。

style amp-customでスタイルを指定

<style amp-custom>
h1{
 font-size:32px;
 color:#ababab;
}
p{
 font-size:12px;
 color:#f5f5f5;
}
</style>
  • このタグは1つのAMPページで1つだけ使用が許可されている
  • i-amp- や amp-を含むclass・id名は使わない
  • !importantは使わない
  • behavior, filter, moz-bindingは禁止

これはOK

p{
  font-size:12px;
  color:#fff;
}

これはダメ

.item{
  font-size:12px;
}

AMPのテンプレート

AMPのテンプレートは以下にあります

あなたの好きなように書き加えてください

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP テンプレート</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.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>
  </head>
  <body>
    <h1>AMP テンプレート</h1>
    <p>段落</p>
    <h2>小見出し</h2>
    <h3>小見出し</h3>
    <blockquote>
       引用
    </blockquote>
    <a href="https://google.co.jp/" target="_blank">target="_blank"の指定は必須です</a>
  </body>
</html>

必須ではないがあると望ましいもの

schema.orgでのマークアップ

これはクローラにページの内容を正確に解釈させるのに役立ちます。

    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>

TwitterCardやOpen Graph Protocolのmetaタグ

これも入れておくことが推奨されています。