この記事はウェブクルー Advent Calendar 2017の14日目の記事です。
昨日は@kouchanneさんの「Mavenプロジェクトを用いてAPP ENGINEにアプリをデプロイする」でした。
##AMPってなに？
AMPとはAccelerated Mobile Pagesの略でスマホでページを高速表示するためのプロジェクトのことをいいます。簡単にいうと表示するのが超速いページです。
##どういう仕組み？
通常、ページにアクセスしてからHTML、CSS、画像、javascriptなどを読み込みますが、AMPは事前にGoogleにキャッシュしてもらい、読み込み時間を削減することで高速表示が可能になります。
##どうすれば出来るの？
- AMP用のHTMLをつくる
- 元となるページにAMP用のHTMLの場所を教える
- googleにお知らせ
- 計測について
###1. AMPHTMLをつくる
・<html>要素にampを追加する。
<html amp>～</html>
・元となるページのURLを記述する。
<link rel="canonical" href="元となるページURL">
・<head>内に下記を記述する。
<script async src="https://cdn.ampproject.org/v0.js"></script>
**・<head>内にboilerplateのcssを記述する。**↓
<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以下で。超える場合はミニファイなどで回避。）
<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
・タグのルールが多々あります。
使えないタグやそのままでは使えないタグがあります。
<img src="/image/hoge.jpg" width="100" height="100">
↓
<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>内に下記を記述する。
<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内に下記を追加します。
<meta name="amp-google-client-id-api" content="googleanalytics">
通常ページに下記を追加します。
analytics.jsの場合
ga('create', 'UA-XXXXX-Y', 'auto', {'useAmpClientId': true});
タグマネージャの場合、タグの設定から「設定するフィールド」へ進んで以下を設定します。
フィールド名: useAmpClientId
値: true
これで正確なデータが計測できるようになります。
##作ってみる
実際に簡単な記事ページでAMPHTMLを作ってみました。
<!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 © 2011 WebCrew Inc.<br>All rights reserved.</footer>
</body>
</html>
↓
<!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 © 2011 WebCrew Inc.<br>All rights reserved.</footer>
</body>
</html>
##まとめ
AMP対応をするべきなのか、判断に迷うところだと思います。今のところGoogleはAMP対応が検索順位の要因にはならないと発表していますが、ユーザビリティ向上によるSEO効果はあると思っています。現に弊社サイトでもAMP対応しているサイトでセッション数、PV数は上がり、一部キーワードも検索順位上昇が確認できています。AMP対応を先延ばしにしているサイト運営者の方も、もう一度検討してみるのもいいかもしれません。
ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。