モバイル検索における大きな変化に注目が集まっています。本稿では、AMPの基本的な仕組と、実際に導入する方法について紹介します。Pages)は、モバイルページ高速化によるユーザー体験の向上を目的として、2015年にGoogleが発表したプロジェクトです。Twitter、Pinterest、WordPress.com、LinkedInや、BBC、産経デジタルなどのパブリッシャーがAMPのパートナーに参加。2016年2月から、Google検索結果での表示が開始されました。HTML」などが新たに策定されています。Cache」で構成されています。HTML:既存のHTML/CSS/JavaScriptの一部を制限することで、高いパフォーマンスを実現します。JS:高速レンダリングを実現するためのJavaScriptライブラリです。HTMLページを取得、キャッシュし、配信するための仕組み(CDN)です。詳しくは、プロジェクトページをご覧ください。GitHubではソースコードも公開されています。Project(英語)AMPのメリットは?ユーザーにとっては、ページ表示速度が早くなり、データ転送量も少なくなるというメリットがあります。抑えられるため、ほとんどのページが瞬時に表示されます。Blogより)サイト運営者にとっては、Google検索結果などにAMP対応ページが表示され、トラフィックを獲得することができます。具体的には、スマートフォンから、今ニュースになっているキーワードで検索すると、「トップニュース」枠にカルーセル形式で表示されます。記事執筆時点では、タイムリーなキーワードを含む、ニュースサイトのAMPページしか検索結果に表示されません。「トップニュース」枠のAMPページをまだ目にしたことがない方は、一旦Googleからログアウトすると、表示される場合があります。AMPを試してみようそれでは、早速AMPを試してみましょう。手順は以下のようになります。HTMLを作成します。JSON-LDを導入します。HTMLに書き換えていきます。そのままコピーして使えますが、テキストエディタによっては絵文字が表示されない場合もあります。lang="ja">でもOKです。通常のHTMLのURLを指定します。href="./regular-html-version.html">また、通常のHTMLの方には、AMPバージョンのURLを指定します。viewportの指定viewportも必須です。styleの指定AMPの決まり文句を追加します。amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>2015年10月のAMPが発表された当初は、styleに指定するのはopacityに関する記述のみの短いコードでしたが、記事執筆時点では、上記のように長くなっています。src="https://cdn.ampproject.org/v0.js"></script>AMPプロジェクトからJavaScriptを非同期で読み込みます。AMPがサポートしているJavaScript以外は読み込みできません。アクセス解析や広告配信についてはライブラリがあるので、必要に応じて追加で読み込みます。height=300></amp-img>imgタグをamp-imgに変更します。AMPタグの一覧は下記をご覧ください。HTMLができました。HTMLの主な仕様HTMLタグの対応表です。HTMLタグに置き換えが必要なタグや、使用が制限されているタグがあります。ほとんどOKJSON-LDAMPには、JSON-LDによる構造化データも必要です。検索結果、トップニュース枠のカルーセルの表示内容などに使用されます。HTMLのheadに含めます。詳しくは下記をご覧ください。Ltd.(リキッドデザイン株式会社)リキッドデザイン株式会社代表。Web/Appデザイナー。大手IT企業でポータルサイトやアプリのデザイン/企画に携わり、独立。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。