ブログ

Googleが推奨するAMPとは?-特徴から対応方法まで基礎解説

今回はモバイル高速化でおなじみの「AMP」の概要を初心者の方向けに簡単にまとめてみようと思います。
まず、AMPについて知らない方のためにAMPとはどんなものかをご説明します。


AMPとは

AMPの正式名称は「Accelerated Mobile Pages」で、モバイルサイトの高速表示を目的としたGoogle主体のプロジェクトのことです。
また、「AMP HTML」というAMP公式のオープンフレームワークが公開されており、これを指してAMPと呼ぶケースもあります。

2015年の10月くらいに公式アナウンスがあって以来、2016年1月後半にGoogleSearchConsoleにAMPページのエラーレポートが実装されるなど、最近になって賑わいつつあります。

現在、世界中で多数の大手パブリッシャーがAMPを取り入れており、日本では毎日新聞や朝日新聞、マイナビニュースなどがAMPを使ったページを公開しています。

AMPを使っているパブリッシャー一覧

以下、AMPが高速表示を実現する際の特徴をご紹介していきます。

AMPの特徴

ファーストビュー優先

AMPでは自動的にファーストビューの部分(Above the fold)であることと、CPU負荷の高くないエレメントであることを判断してブラウザに伝えることで、クリックすると即座にファーストビューが素早く表示されます。

キャッシュ

Google・Twitter側にキャッシュされたコンテンツを返すことによって、高速表示を可能にしています。

Javascript

javascriptは表示速度を低下させている原因の一つであるとしており、これを徹底的に排除する仕様になっています。
したがって、自前のjavascriptやサードパーティ製のプラグイン等、AMPが提供しているjavaScript以外のjavaScriptを含めることができません。
一方で、スマートアド等の広告やGoogleアナリティクス等のアクセス解析を埋め込む際にjavascriptを使用しますが、AMPではjavascriptが使用できないため、AMPが提供するカスタムタグやライブラリを使って埋め込むことになります。

コンテンツサイズの事前定義

画像等を表示する際には必ずサイズを設定する必要があります。
これによりサイズの計算処理が減り、レンダリングが速くなります。

実際に体験してみる

以上のAMPの特徴をまとめると、ページの表示が速くなるというところまではご理解頂けたかと思います。

では、実際にどのくらい早いのかを体験してみましょう。

以下のDEMOサイトにスマホでアクセスしてみてください。

スマホが手元になければ、PCブラウザのスマホエミュレート機能等でも大丈夫です。

DEMO(g.co/ampdemo)

DEMOページを開いてキーワードで検索します。
今回はサンプルとしてキーワード「オープン戦」で検索してみました。

※現在AMPが使用されているかどうかの確認方法ですが、検索結果ページの上部に「これはAccelerated Mobile Pages のデモです。」のメッセージが表示されていればOKです。

キーワード「オープン戦」では、ファーストビューに「トップニュース」の一覧が表示されています。

(スクリーンショット参照)

blog-201604-0002

このカルーセル表示のニュースの中で、AMPのロゴマークがついている記事がAMP仕様になっているページになりますので、クリックしてみてください。画像付きの記事が素早く表示されたかと思います。

ここで注目して頂きたいのが、AMP記事ページのURLです。

https://www.google.co.jp/amp/www.xxxx.com/yyyy
といった形で、実際に作ったAMPページ(www.xxxx.com/yyyy)がGoogleドメイン配下に入っています。

これは先ほどご説明した通り、AMPで作成したページがGoogle側にキャッシュされ、そのキャッシュページを表示することで高速化を実現しているためです。

それでは、次にAMPでページを作成する方法を簡単に見ていきましょう。

AMPページの作り方

以下、AMPページを作成する際の必須ルールになります。
必須ルールの詳細はgithub-AMP HTMLでご確認頂くことができます。

  • <!doctype html>でdoctype宣言する
  • document-topのhtmlタグを<html ⚡> または <html amp>で始める
    HTMLに絵文字を書きこむ事に抵抗がある方も多いと思います。<html amp>で記述する方が多いかもしれませんが、結論、どちらでもOKです。
  • <head>と<body>を省略せずに記載する
  • canonicalを記載する
  • headタグの先頭に<meta charset=”utf-8″>を記載する
  • headタグに<meta name=”viewport” content=”width=device-width,minimum-scale=1″>を記載する

    さらにcontentにinitial-scale=1を付け加えることが推奨されています。
  • headタグに<script async src=”https://cdn.ampproject.org/v0.js”></script> を記載する
  • headタグにAMP Boilerplate Codeを記載する
    cssのような記載があるように見えますが、AMPの機能を実現するための「お決まり」として
    github-AMP Boilerplate Codeからコピー&ペーストしておきます。

AMPで使えるタグ

github-AMP HTML Tag Addendumによると、HTML5で使われるタグは大体使えるとのことです。
scriptタグは使用可能ですが、JSON-LD(application/ld+json)以外のカスタムjavascriptの記載は許可されていません。
したがって、<a href=”javascript:~”>のようなjavascriptスキーマを使った指定などもNGです。
githubのソースを見る限りでは、AMPComponentsの読み込みや、構造化データを記載するために使用されているようです。

また、AMPComponentsと呼ばれるAMP特有のカスタムタグも用意されており、広告やyoutubeを表示するためのタグもあります。

AMP Components 一覧

現在使用可能なAMP Componentsの一覧を記載します。(※2016/03/30 現在)

  • amp-img
  • amp-audio
  • amp-anim
  • amp-ad
  • amp-pixel
  • amp-video
  • amp-brid-player
  • amp-brightcove
  • amp-carousel
  • amp-font
  • amp-lightbox
  • amp-iframe
  • amp-instagram
  • amp-springboard-player
  • amp-twitter
  • amp-vine
  • amp-youtube


参考までに、よく使うものとしてはGoogleアナリティクスがあるかと思いますが、Googleアナリティクスを表示する際にはamp-pixelというタグを使用することになっています。

詳しくはgithub-AMP HTML Componentsで紹介されています。

まとめ

今回は昨年からgoogleが押しているAMPについて、基本的な概要をご説明しました。
また機会があれば、AMPについてより深くご紹介できればと思います。





無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

監修者:笹本 雅人

記事一覧

SEOシニアコンサルタント

2013年株式会社ブレインネットに入社し、会社合併を経てサクラサクマーケティング株式会社に合流した後も現在に至るまでSEOコンサルタントとして大小問わず様々なクライアントの集客向上に貢献。

特にシステム開発がからむSEOを得意としているほか、自社メディアのブログの作成・監修を行い、数多くのキーワードで上位表示を達成している。



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. サイトリニューアルで失敗しない為のSEOチェックポイント

    制作してから年月が経過したWebサイトでは、リニューアルを行うケースもあるかと思います。 メインとする目的は様々でしょうが、その際、検索流入を失いたくないというのはすべてのWeb担当者が持つ共通の思いでしょう。 この記事 […]...

    1. インスタグラムの公式な投稿埋め込み方法がSEOに不向きな理由

      ブログやWebサイトだけでなく、インスタグラムやtwitterなどのSNSを運営していて、ブログ上でSNSの紹介や、逆にSNS上でブログの紹介をされる方も多いかと思います。 ブログ上でSNS投稿を紹介する場合、投稿埋め込 […]...

おすすめコンテンツ

  1. SEO対策(検索エンジン最適化)とは?初心者にもわかりやすく解説します

    SEO対策とは「検索エンジン最適化」のことで、数あるWeb集客手法の中でも、検索エンジンからの成果を最大化することです。基本的にはユーザーや検索エンジンからより評価されるように、WebサイトやWebページの変更・改修を続 […]...

    1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

      ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP