LoginSignup
20
4

More than 3 years have passed since last update.

ウェブクルーAdvent Calendar 2017Day 14webcrew
@wc-kobayashiTin株式会社ウェブクルー

AMP（Accelerated Mobile Pages）について

Last updated at Posted at 2017-12-14

この記事はウェブクルー Advent Calendar 2017の14日目の記事です。
昨日は@kouchanneさんの「Mavenプロジェクトを用いてAPP ENGINEにアプリをデプロイする」でした。

AMPってなに？

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

どういう仕組み？

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

どうすれば出来るの？

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

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
<img src="/image/hoge.jpg" width="100" height="100">

↓

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>内に下記を記述する。

<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を作ってみました。

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

↓

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対応を先延ばしにしているサイト運営者の方も、もう一度検討してみるのもいいかもしれません。

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

開発エンジニアの募集

フロントエンドエンジニアの募集

データベースエンジニアの募集

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
Sign upLogin
20
4