ホームページ制作 SEO対策 AMPでモバイル表示速度が驚異の3倍に！

代表取締役原川丈
2018.04.18

皆様こんにちは。営業部の原川です。

第1回目の記事「構造化マークアップ」はお試し頂けたでしょうか。
https://www.akindo2000.net/blog/structured-markup

第2回は、デザイナーの杉浦と取り組んだ「ページのAMP化（Accelerated Mobile Pages）」についてご紹介します。
ちなみに読み方（通称）はアンプのようです。

それでは第2回本編です。

AMP（Accelerated Mobile Pages）とは？

AMP（アンプ）とは、Accelerated Mobile Pagesの略で、
モバイル端末でのウェブページが驚くほど速く表示される！というものです。

モバイルで検索するとAMP対応されている記事はこのように表示されます。
（カミナリマークのアイコンが表示されている）

AMPページが高速に表示される仕組み

AMP対応されたページはGoogleやTwitter側にキャッシュとして保存されます。
ユーザーがアクセスすると専用のサーバに保存されているキャッシュからコンテンツを返します。
本来のページがあるウェブサイトへのアクセスが発生しないので、コンテンツを高速で表示することが可能になっています。

AMPのメリット

表示速度が上がる（UX向上）

AMPに対応したページは通常の3～4倍の速度で表示されます。
そのため、ユーザーはストレスを感じる事が少なくなり、滞在時間や回遊率が大幅に飛躍します。

検索結果にカルーセル表示される。

カルーセル表示されると、ユーザーの目に止まりやすく記事が読まれる確立が上がります。

ただしAMP対応しても、必ずカルーセル表示されるわけではないので注意してください。

SEOに有利になる

SEO効果についてはGoogleは”2018年 2 月 1 日以降、AMP ページのコンテンツを（オリジナルの）正規ページのコンテンツと同等にすることがポリシーによって義務付けられます。”と言っています。
この事から今後はAMP対応する事によってSEOに強くできると言えるでしょう。

参考：https://support.google.com/webmasters/answer/7451184
https://webmaster-ja.googleblog.com/search/label/AMP

AMPの実装

AMPは現在のWebページをAMP HTMLの仕様に習って修正することで、AMP対応が可能となります。
AMP HTMLのコンポーネントについてはこちらのサイトでいろいろと紹介されています。
https://ampbyexample.com/

主な仕様手順

1.<html lang=”ja”>を変更

<html lang=”ja”>を<html ⚡ lang=”ja”> または <html amp lang=”ja”>に変更します。

2.viewportを指定する

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

上記の記述でないとエラーになるようです。

3.タグ内に下記コードを設置

<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>

4.通常ページとAMPページに以下の記述を追加

通常ページ

<link rel="amphtml" href="https://www.akindo2000.net/amp/">

AMPページ

<link rel="canonical" href="https://www.akindo2000.net/">

5.CSSは専用のスタイルタグ内にインラインで指定する

<style amp-custom>
	この中にスタイルをインラインで読み込む
</style>

スタイルに!importantを使用しているとエラーになります。

6.画像はimgタグの代わりにamp-imgタグを使用する

AMP対応の際は必須となるコンポーネントになると思います。

<amp-img src="example.jpg" alt="" height="250" width="250" layout="responsive"></amp-img>

※画像にはサイズ指定しlayout=”responsive”を足すことによりレスポンシブに対応できます。

7.javascriptの使用に制限がある

基本的にはjavascriptは自由に使えませんが、用意されているjavascriptに関しては使用可能です。

・ハンバーガーメニュー
・スライダー
・アコーディオンメニュー
・Google mapの表示
・iframe
・lightbox

これらの機能はいろいろなアニメーションのデモが用意されていて、やり方が紹介されています。

カルーセルの実装例：まずは専用のjsをを読み込む

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

htmlはこんな感じ

<amp-carousel width="500" height="170" layout=responsive type=slides autoplay loop delay=5000>
<amp-img src="example.jpg" width="497" height="177" alt="hoge" layout="responsive"></amp-img>
<amp-img src="example.jpg" width="497" height="177" alt="hoge" layout="responsive"></amp-img>
<amp-img src="example.jpg" width="497" height="177" alt="hoge" layout="responsive"></amp-img>
</amp-carousel>

8.デバッグでの確認