AMP（Accelerated Mobile Pages）について

この記事は[ウェブクルー Advent Calendar 2017](https://qiita.com/advent-calendar/2017/webcrew)の14日目の記事です。
昨日は@kouchanneさんの「[Mavenプロジェクトを用いてAPP ENGINEにアプリをデプロイする](https://qiita.com/kouchanne/items/016f12672f38f711e438)」でした。

##AMPってなに？
AMPとはAccelerated Mobile Pagesの略でスマホでページを高速表示するためのプロジェクトのことをいいます。簡単にいうと表示するのが超速いページです。

##どういう仕組み？
通常、ページにアクセスしてからHTML、CSS、画像、javascriptなどを読み込みますが、AMPは事前にGoogleにキャッシュしてもらい、読み込み時間を削減することで高速表示が可能になります。


##どうすれば出来るの？

1. AMP用のHTMLをつくる
1. 元となるページにAMP用のHTMLの場所を教える
1. googleにお知らせ
1. 計測について

###1. AMPHTMLをつくる
**・`<html>`要素に`amp`を追加する。**

```html
<html amp>～</html>
```

**・元となるページのURLを記述する。**

```html
<link rel="canonical" href="元となるページURL">
```

**・`<head>`内に下記を記述する。**

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

**・`<head>`内にboilerplateのcssを記述する。**↓

```html
<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>`内に任意のcssを記述する。（50KB以下で。超える場合はミニファイなどで回避。）**

```html
<style amp-custom>
body {background-color:#FFF;}
h1 {font-weight:bold;}
</style>
```

**・JSON-LD形式のschema.orgで構造化マークアップをする。**
下記URLを参考にこのページは記事なのかレシピなのか商品なのか詳細なマークアップをおこないます。
http://schema-ja.appspot.com/docs/full.html
※一般的なLPなどはどこに該当するのか悩みます。。解釈によりますが、私は広義的な意味で記事にしたりします。

**・javascript使用不可。**
javascriptは使用できません。AMP専用のコンポーネントを使います。随時追加されていますので下記URLを参考に組み込みます。
https://ampbyexample.com/#components

**・タグのルールが多々あります。**
使えないタグやそのままでは使えないタグがあります。

```html:img
<img src="/image/hoge.jpg" width="100" height="100">
```

↓

```html:amp-img
<amp-img src="/image/hoge.jpg" width="100" height="100" layout="responsive"></amp-img>
```
タグの一覧：https://www.ampproject.org/ja/docs/reference/spec#html-tags

**・トライ&エラーの繰り返し。**
``AMPHTMLをつくる→確認ツールで確認→エラー対応をする``
これを繰り返せばしっかりとしたものができあがります。

・構造化マークアップが正しいか（google）
https://search.google.com/structured-data/testing-tool?hl=ja

・AMPを正しく実装できているか（google）
https://www.suzukikenichi.com/blog/three-ways-to-inspect-amp/

・ChromeでAMPを正しく実装できているか
1.検証したいAMPページのURL末尾に``#development=1``をつける
2.Chromeのデベロッパーツールをひらき``Console``で結果を確認
3.``AMP Validation successful.``と表示されればOK。

・ソースコードを貼り付けて正しく設定できているか
https://validator.ampproject.org/

・Search Consoleで確認してエラーがでていないか

###2.元となるページにampHTMLのありかを教える
元になるHTMLの``<head>``内に下記を記述する。

```html
<link rel="amphtml" href="AMP用HTMLのURL">
```

###3.その後
Googlebotが、元となるページに記述されている`<link rel="amphtml" href="AMP用HTMLのURL">`を読み込むことでAMPページもクロールしてくれます。
完成したらサイトマップを送信してクローラーがまわるようにしましょう。

###4.計測について
Googleアナリティクスも専用のコンポーネントを使用しますが、計測には問題があります。AMPは同じユーザーでもCookieを引き継ぐことができないため、AMPページに訪問したユーザーと通常のページに訪問したユーザーが異なるユーザーとして認識されてしまいます。つまり直帰率が跳ね上がってしまいます。
【解決策】
2017年11月に解決方法が発表されました！
AMPページのhead内に下記を追加します。

```html
<meta name="amp-google-client-id-api" content="googleanalytics">
```

通常ページに下記を追加します。
analytics.jsの場合

```js
ga('create', 'UA-XXXXX-Y', 'auto', {'useAmpClientId': true});
```

タグマネージャの場合、タグの設定から「設定するフィールド」へ進んで以下を設定します。
フィールド名: useAmpClientId
値: true

これで正確なデータが計測できるようになります。

##作ってみる
実際に簡単な記事ページでAMPHTMLを作ってみました。

```html:元のHTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AMPについて</title>
<meta name="description" content="AMPについて記事を書いてみました。">
<meta name="keywords" content="AMP,記事">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1, maximum-scale=1.0">
<link rel="amphtml" href="https://hoge.hoge/amp.html">
<link rel="stylesheet" href="/stylesheet/style.css">
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto', {'useAmpClientId': true});
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body>
<header><h1>AMP</h1></header>

<article>
<h1>AMPについて</h1>
<img src="/main.jpg" alt="">
<p>AMPについて記事を書いてみました。</p>
</article>

<footer>Copyright &copy; 2011 WebCrew Inc.<br>All rights reserved.</footer>
</body>
</html>
```

↓

```html:AMPHTML
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<title>AMPについて</title>
<meta name="description" content="AMPについて記事を書いてみました。">
<meta name="keywords" content="AMP,記事">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1, maximum-scale=1.0">
<meta name="amp-google-client-id-api" content="googleanalytics">
<link rel="canonical" href="https://hoge.hoge/">
<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>
<style amp-custom>
html, body, 
h1, h2, h3, h4, h5, h6, 
div, p, dl, dt, dd, ol, ul, li, 
span, a, strong, em, b, i, del, dfn, img, ins, kbd, q, samp, small, sub, sup, var, 
table, caption, tbody, tfoot, thead, tr, th, td, 
fieldset, form, label, legend, input, select, textarea
object, iframe, blockquote, pre, abbr, address, cite, code, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font-weight:normal;
}
body {
	background-color:#FFF;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "AMPについて",
"mainEntityOfPage": "https://www.hoge.hoge/amp.html",
"description":"AMPについて記事を書いてみました。",
"author": {
	"@type":"Organization",
	"name":"AMP"
},
"publisher": {
	"@type":"Organization",
	"name":"AMP",
	"url":"https://www.hoge.hoge/",
	"logo":{
		"@type":"ImageObject",
		"url":"https://www.hoge.hoge/logo.png",
		"width":100,
		"height":60
	}
},
"datePublished":"2017-12-01T10:00:00+09:00",
"dateModified":"2017-12-01T10:00:00+09:00",
"image": {
	"@type":"ImageObject",
	"url":"https://www.hoge.hoge/main.jpg",
	"width":800,
	"height":600
	}
}
</script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
	"vars": {
		"account": "UA-XXXXX-Y"
	},
	"triggers": {
		"trackPageview": {
		"on":"visible",
		"request":"pageview"
		}
	}
}
</script>
</amp-analytics>
<header><h1>AMP</h1></header>

<article>
<h1>AMPについて</h1>
<amp-img src="/main.jpg" width="800" height="600" alt="" layout="responsive"></amp-img>
<p>AMPについて記事を書いてみました。</p>
</article>

<footer>Copyright &copy; 2011 WebCrew Inc.<br>All rights reserved.</footer>
</body>
</html>
```

##まとめ
AMP対応をするべきなのか、判断に迷うところだと思います。今のところGoogleはAMP対応が検索順位の要因にはならないと発表していますが、ユーザビリティ向上によるSEO効果はあると思っています。現に弊社サイトでもAMP対応しているサイトでセッション数、PV数は上がり、一部キーワードも検索順位上昇が確認できています。AMP対応を先延ばしにしているサイト運営者の方も、もう一度検討してみるのもいいかもしれません。




ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。

[開発エンジニアの募集](https://hrmos.co/pages/1004681658307198976/jobs/0000005)

[フロントエンドエンジニアの募集](http://www.webcrew.co.jp/recruit/creative.html)

[データベースエンジニアの募集](https://hrmos.co/pages/1004681658307198976/jobs/0000023)