2016年の夏ごろ、話題になったAMP(アンプ)。Accelerated Mobile Pagesの略称なのですが、だいぶ、市民権を得てきた気がします。
たとえば、お手持ちのアイフォンでも、アンドロイドでもどちらでもいいですが、スマホで、Googleで、「食べログ 渋谷 イタリアン」で検索してみてください。
Googleの検索結果に出てくる この雷マークのwebページは、AMP対応されたページです。
このページは、とても速く表示されるページなんです。
この雷マークはGoogleが推奨しているAMPというマークアップ方式を取り入れたページにつくものです。
今回は、簡単に、AMP(アンプ)について解説していきます。AMPにすると、何がいいのか、そして、SEO効果は、どうなのか？ AMPのメリット、SEO対策においてなど、いろいろとまとめてみました。
簡単解説！AMP(アンプ)とは？
AMP(アンプ)とは、「Accelerated Mobile Pages」の略称です。
スマホ端末での表示を変えてくれる仕組みです。
AMP(アンプ)は、WEBサイトの表示を高速化するプロジェクトのことをさしているのですが、今では、ここから派生した技術についてもいいます。
AMPプロジェクト公式webサイト（英語）
https://www.ampproject.org/
AMPプロジェクト公式webサイト（日本語）
https://amp.dev/ja/
AMP(アンプ)の言葉の使い方は、
たとえば、
AMP対応したwebサイト、というと、
AMP(アンプ)用のマークアップ(コーディング)のされたwebサイト
という意味です。
AMP(Accelerated Mobile Pages)は、Googleが推奨しています。
というのも、AMP(アンプ)は、GoogleとTwitterの共同開発だからです。ちなみに、AMP(アンプ)は、フレームワーク(AMP HTML)という扱いもされています。
表示の高速化！AMP(アンプ)の仕組み
AMP(アンプ)は、webサイトの文字情報を、GoogleやTwitter側に保存できる仕組みになっています。つまり、テキスト情報をGoogleが保存しておいてくれているので、Googleの検索結果からの表示が、めちゃくちゃ速くなるのです。
もちろん、これは、twitterでも、同じことがおきます。
GoogleもTwitterも、ユーザーの利便性を考えて、このAMP(アンプ)の仕組みを提供してくれているわけです。
ただ、それだけではなく、webサイトのテキスト情報を、GoogleやTwitterが、AMP(アンプ)を通して、保存できることは、広告ビジネスにおいても利点になります。
どんな情報についてのwebサイトが多く、そこには、どんなキーワードをコンテンツとしているかを把握できるからです。
ユーザーメリットだけではなく、広告収入面でも、Googleや、Twitter（ツイッター）にメリットはあるんですよね！
AMP(アンプ)対応のwebページを作るうえで理解したい構成要素
AMP(アンプ)の構成要素は、以下の４点です。
- AMP HTML
- CSS 3（スタイルシート）
- AMP JS（要するに、Javascriptです）
- AMP Cache
ちなみに、AMPは、Javascriptが動く環境を想定しているので、基本、webブラウザでも、動くは動きます。
たとえば、Chromeのデバックモードで、スマホ検証のモードにすれば、AMP化されたページを見ることが可能です。
そして、2019年の春くらいから、amp-script を使うことで、今までは、決まったjavascriptしか使えなかったのが、自分で作ったjavascriptでも動かせるようになりました。
＊ただし、WebWorker コンテキストの中のみ
AMP JSについて詳しく知りたい場合はこちら
https://qiita.com/mizchi/items/c7d648eafb03d4c5378a
なお、AMP HTMLというフレームワークはオープンソースです。
AMPのスピード！なんと、平均４倍
AMP(アンプ)は、Googleのお話だと、表示スピードが、今までのwebサイトの4倍！
AMP のテクノロジーを利用しているウェブページは、従来に比べ平均 4 倍の速度で表示され、データ量も約 1/10 に抑えられるため、ほとんどのページが瞬時に表示されます。
引用：Google Japan Blog モバイルウェブをもっと速く
https://japan.googleblog.com/2016/02/blog-post_25.html
WEBページの表示速度は、とても重要です。
いろいろなwebマーケティングのサイトで、以下のような話があります。
サイト表示が2秒遅いだけで直帰率は50％増加！ DeNA事例から学ぶWebの自動最適化手法／日本ラドウェア
引用：Web担当者Forum
https://webtan.impress.co.jp/e/2014/07/08/17757
遅いサイトの順位が下がるのではなく、速いサイトの順位が上がる
引用：Google Webmaster Central Blog
https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
Googleのディープラーニングによる予測では、「表示速度が1秒から3秒に落ちると、直帰率は32%上昇」し、なんと「10秒に落ちると、直帰率は123%上昇」するという結果が出ています。
引用：幻冬舎 ウェブマ
https://www.gentosha-webma.com/knowledge/high-speed/
こんな状況なので、4倍の速さを提供してくれるAMPは、すごいですよね！
AMP(アンプ)対応のメリット
AMP(アンプ)対応のメリットは、
- スマホでwebページの表示速度向上
- Googleのスマホサイトで、写真＋テキストで上位表示されやすくなる
＝クリックされやすくなる＝集客につながる - Google検索結果で上位表示されやすい
- webサイト訪問者のページ遷移を促せる
＝直帰率低下へ
という4つがあります。
メリットが多くある、AMP対応。
企業のwebサイト担当者が、導入しないわけがないですよね！
AMP対応、導入方法は？
もし、AMP対応をしようと思ったら、web制作会社に聞いてみてください。
得意なweb制作会社さんもいます。
私もいくつか知っていますし。
結構、マークアップ、コーディングのルールが細かいので、
ここは、プロに頼んだほうがいいです！！
実際に、知っている会社さんでは、
JRさんのオウンドメディアや、アルバイト情報サイトなどでも
導入をされていて、PV増加につながったそうです！
AMPの導入後、実際にwebページがAMPに対応されているかどうかは、
AMPテストツールで確認できますよ。
Googleさまが提供しています！
AMPテストツール
https://search.google.com/search-console/amp
AMPのSEO対策での効果
前述したとおり、私は、AMP対応することで、SEO対策になると思っています。
実際に、スマホで、検索をしてみてください。
多くのAMP対応したwebページが、検索結果の上位に表示されます。
また、先ほど書いた画像＋テキストでの露出効果。
Googleのリスティング広告並みに、クリックされやすくなります。
これは、webマーケティング上、効果ありますよね、集客においても、そして、CVにおいてもです。
ページの表示速度が上がるので、サイトの評価が高くなる確率が高いわけですからね。
以下を読んで、SEO対策の参考にしてくださいね！！
参考：Google検索
AMP が検索結果にどのように表示されるかを理解する
https://developers.google.com/search/docs/guides/about-amp
AMP対応が、アクセス数を増やした！などの成功事例
AMPを導入したことで、webページにプラスが増えた！！という事例は、たくさんあります。Googleさんが、AMPの公式サイトで、がんがん載せています。
AMP導入の成功事例
https://amp.dev/ja/success-stories/
Ameba がブログ記事ランキングページを AMP Stories として公開
リリース直後の数値では、各ページからブログ記事へのCTRは20%、ストーリーの完了率は50%を記録しました。これは、半数以上の利用者がストーリー形式のコンテンツに満足し、また、それぞれのブログ記事に興味をもったことを意味します。さらに、ストーリー形式のページは、既存のリスト形式に比べ滞在時間が1.5倍になりました。
引用：AMP公式サイト
https://amp.dev/ja/success-stories/ameba/
上記で、おっ！と思いますよね。
AMP Storiesについては、次に解説しますね！
AMP Stories（アンプストーリー）とは？
AMP Stories(アンプストーリー)は、AMP対応のWebページの形式が、インスタグラムのストーリー形式になっているものです。
AMP Stories(アンプストーリー)が表示場所は以下になります。
- Google Discover
- モバイル検索結果
- AMP stories専用スペース
そして、AMP Stories(アンプストーリー)の作り方は、Wordpressなら、さくっとできます！
ワードプレスで AMP Stories(アンプストーリー)の作り方
アンプストーリーのコンテンツ投稿をするために、Google提供のAMPのWordPressプラグインを使います。
なんと、４STEPで、AMP Stories は、投稿できます！
- まずは、「AMP」プラグインをインストール
- AMPプラグインの設定で「Stories」を有効化
- 左メニューにでてくる「Stories」の「New」をクリック
- あとは、インスタグラムのストリーズを作るように、テキスト、画像をいれるだけ。
これで完了です。
ちなみに、AMP storiesは、WebサイトがAMP対応していなくても、投稿できます。
AMP storiesは、AMP対応できていないワードプレス、webサイトでも、AMPを積極的に使ってね！というためのツールみたいなものなんですよね！！
ちなみに、以下のように、ピクシブは、このアンプストーリーを活用しているようですね！
AMPStoriesを作った記事が出ましたよぅ https://t.co/Fj0XmqK3U1 #pixiv_inside @pixiv_corpさんから
— namazu (@namazu510) January 31, 2020
twitterのコメントも、POPな、ピクシブさんですね！
amp対応 デメリット
もりあげておいて、なんですが、amp対応について、良いことばかり書いてきました。
もちろん、amp対応には、デメリットもあります。
amp対応は、
- キャッシュ化による高速表示
- 簡易表示による高速表示
というメリットが、裏目にでます。
amp対応のデメリットを箇条書きすると、
- コンテンツが反映されにくい
- ユーザーがURLのコピーがしにくい
- 凝ったWebデザインが生きてこない
コンテンツが反映されにくいのは、キャッシュによる影響です。掲示板などのCGMサイトでは、情報更新が頻繁に起きるため、都度、その内容が反映されていた方がよいのですが、AMP対応をするということは、コンテンツをキャッシュ化をするために、結果的に、Google側に、データが保存されます。それゆえ、掲示板や、フォーラム、SNSのような情報更新の多いWebサイトの場合、情報が更新されにくい、というデメリットがあります。
ユーザーがURLのコピーをしにくいというデメリットは、amp対応することで、Googleのサーバー側を、ユーザーが読みにいくようになってしまうからです。
これにより、SafariやChromeといったWebブラウザで表示されるURLが、GoogleのURLになってしまいます。ブラウザから、直接URLをコピーしていたユーザーからすると、長いamp対応したURLをコピーするのは、スマホで操作する場合、面倒になることがあります。
amp対応することで、Webページは、簡易表示されます。そもそも利用できるタグに制限もありますから。
その結果、凝ったデザインのWebページでは、わかりやすくしたはずのWebデザインが、崩れてしまったりもします。
それでは、せっかく作ったuiが無駄になってしまいますよね。
ワードプレスのamp対応のプラグインを活用している場合、程度によっては、元になるphpの修正も必要になります。こうなると、Webページ 制作コストにも影響でてきますからね。
amp優遇がなくなる？
2022年の春くらいには、Googleによるampページの優遇は、なくなるようです。別のフォーマットでの展開になるのかもですね。
ampは、表示スピードも出るので、いいサービスだと思ってますが、操作性の悪い面がありますからね。
amp好きには、ちょっと残念なニュースですね。
まとめ：AMPで、webサイトを高速表示！スマホユーザーにイライラさせない
AMPについて、ご理解いただけましたでしょうか。
最近注目され始めている AMP Stories についても解説してみました。
AMPの仕組みは、専門的な話ですが、AMPの導入メリットはわかりやすいと思います。
スマートフォンでの検索結果が重要視される2020年。
モバイルファーストインデックスに強制移行されるのですから、AMP対応ができているwebサイトは、集客に強くなりますよね！