LoginSignup
4

More than 3 years have passed since last update.

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
4