AMP徹底攻略ガイド

  • AMP (Accelerated Mobile Pages) とは

    スマートフォンでGoogleで検索すると以下のような検索結果が表示されます。左の検索結果にはカルーセルの表示方式で会社のロゴと、ニュースの画像、見出しの下に「AMP」と表示されています。右の検索結果には、表示方式が異なりますが、検索結果のト…

  • AMPの仕組み

    AMPではどういった仕組みでコンテンツの表示速度を速めているのでしょうか?   表示の速さの理由は大きく2つあります。AMP HTMLと呼ばれる専用の記述方式を定義して出来ることを制限しているのと、AMPの配信の仕組みです。AMP…

  • AMP対応サイト構築① ~ AMPの設計と実装 ~

    ここではAMP対応に必要となる具体的な設計と実装について説明していきます。まずAMP対応をするにあたって企業は何から始めればいいのでしょうか? 大きくは以下の3つがあります。 AMP対応の目的を明確にする 目的に合致した対象ページを決める …

  • AMP対応サイト構築② ~ AMP HTMLと記述の基本ルール ~

    目的が明確になり、対象ページも決まり、モバイルサイトへの導線設計が明確になったら実際のAMP対応サイトの実装になります。AMPでは表示を高速化させるために、HTML、CSS、JavaScriptの記述に制限を設けており、具体的には以下のよう…

  • AMP対応サイト構築③ ~ AMPの公開方法 ~

      AMP対応サイトの公開方法ならびに公開後の確認方法について記載します。   公開の手順 AMP HTMLで記述したHTMLを公開しただけでは、AMP対応サイトとして公開することができません。Googleが生成されたペ…

  • AMP対応サイトのレイアウトと対象ページ

    実際に表示されているAMP対応サイトですが各サイトを見てみると、レイアウトにいくつかの共通点を見つけることができます。   各社のAMP対応状況   [Response.] [楽天レシピ] [WIRED]   …

  • 検索結果にみるAMPの表示内容

    2016年10月21日から日本でも公式に「AMPラベル」の表示がされるようになり、AMP対応したページは色々な形式で検索結果に表示されるようになりました。 [カルーセルタイプ①] [カルーセルタイプ②] [リストタイプ] 検索結果への表示は…

  • 可能性を広げるAMPの先進的な事例

    ECサイトの対応事例としては米国のeBayがAMP対応すると報じられており、実際にいくつかの商品リストページでAMP対応がされていますがサイト全体という訳ではありません。 情報系のサイトの場合には、前章でご覧いただいたようにサイト全体をAM…

  • AMPの今後

    国内検索エンジンシェア AMP対応している検索エンジンはGoogleとBing社だけでしたが、2017年11月にYahoo!がAMP対応を行いました。   下のグラフは、StatCounterによる日本国内のモバイルでの検索シェア…

Rabbit または AMP に関するご相談は
お気軽にお問い合わせください

お問い合わせフォームへ