無料レポートDLSEO無料診断ホームブログGoogleが推奨するAMPとは?-特徴から対応方法まで基礎解説ブログGoogleが推奨するAMPとは?-特徴から対応方法まで基礎解説2016/4/8ブログAMPアナリティクス構造化データTweetShare+1HatenaPocketfeedly今回はモバイル高速化でおなじみの「AMP」の概要を初心者の方向けに簡単にまとめてみようと思います。AMPについて知らない方のためにAMPとはどんなものかをご説明します。Pages」で、モバイルサイトの高速表示を目的としたGoogle主体のプロジェクトのことです。HTML」というAMP公式のオープンフレームワークが公開されており、これを指してAMPと呼ぶケースもあります。2015年の10月くらいに公式アナウンスがあって以来、2016年1月後半にGoogleSearchConsoleにAMPページのエラーレポートが実装されるなど、最近になって賑わいつつあります。現在、世界中で多数の大手パブリッシャーがAMPを取り入れており、日本では毎日新聞や朝日新聞、マイナビニュースなどがAMPを使ったページを公開しています。以下、AMPが高速表示を実現する際の特徴をご紹介していきます。fold)であることと、CPU負荷の高くないエレメントであることを判断してブラウザに伝えることで、クリックすると即座にファーストビューが素早く表示されます。キャッシュGoogle・Twitter側にキャッシュされたコンテンツを返すことによって、高速表示を可能にしています。Javascriptjavascriptは表示速度を低下させている原因の一つであるとしており、これを徹底的に排除する仕様になっています。したがって、自前のjavascriptやサードパーティ製のプラグイン等、AMPが提供しているjavaScript以外のjavaScriptを含めることができません。一方で、スマートアド等の広告やGoogleアナリティクス等のアクセス解析を埋め込む際にjavascriptを使用しますが、AMPではjavascriptが使用できないため、AMPが提供するカスタムタグやライブラリを使って埋め込むことになります。画像等を表示する際には必ずサイズを設定する必要があります。これによりサイズの計算処理が減り、レンダリングが速くなります。実際に体験してみる以上のAMPの特徴をまとめると、ページの表示が速くなるというところまではご理解頂けたかと思います。実際にどのくらい早いのかを体験してみましょう。以下のDEMOサイトにスマホでアクセスしてみてください。スマホが手元になければ、PCブラウザのスマホエミュレート機能等でも大丈夫です。DEMO(g.co/ampdemo)DEMOページを開いてキーワードで検索します。今回はサンプルとしてキーワード「オープン戦」で検索してみました。」のメッセージが表示されていればOKです。キーワード「オープン戦」では、ファーストビューに「トップニュース」の一覧が表示されています。(スクリーンショット参照)このカルーセル表示のニュースの中で、AMPのロゴマークがついている記事がAMP仕様になっているページになりますので、クリックしてみてください。画像付きの記事が素早く表示されたかと思います。ここで注目して頂きたいのが、AMP記事ページのURLです。https://www.google.co.jp/amp/www.xxxx.com/yyyyといった形で、実際に作ったAMPページ(www.xxxx.com/yyyy)がGoogleドメイン配下に入っています。これは先ほどご説明した通り、AMPで作成したページがGoogle側にキャッシュされ、そのキャッシュページを表示することで高速化を実現しているためです。それでは、次にAMPでページを作成する方法を簡単に見ていきましょう。以下、AMPページを作成する際の必須ルールになります。HTMLでご確認頂くことができます。amp>で始めるHTMLに絵文字を書きこむ事に抵抗がある方も多いと思います。amp>で記述する方が多いかもしれませんが、結論、どちらでもOKです。content=”width=device-width,minimum-scale=1′′>を記載するさらにcontentにinitial-scale=1を付け加えることが推奨されています。Codeからコピー&ペーストしておきます。Addendumによると、HTML5で使われるタグは大体使えるとのことです。scriptタグは使用可能ですが、JSON-LD(application/ld+json)以外のカスタムjavascriptの記載は許可されていません。href=”javascript:~”>のようなjavascriptスキーマを使った指定などもNGです。githubのソースを見る限りでは、AMPComponentsの読み込みや、構造化データを記載するために使用されているようです。AMPComponentsと呼ばれるAMP特有のカスタムタグも用意されており、広告やyoutubeを表示するためのタグもあります。Componentsの一覧を記載します。現在)amp-imgamp-audioamp-animamp-adamp-pixelamp-videoamp-brid-playeramp-brightcoveamp-carouselamp-fontamp-lightboxamp-iframeamp-instagramamp-springboard-playeramp-twitteramp-vineamp-youtube参考までに、よく使うものとしてはGoogleアナリティクスがあるかと思いますが、Googleアナリティクスを表示する際にはamp-pixelというタグを使用することになっています。Componentsで紹介されています。まとめ今回は昨年からgoogleが押しているAMPについて、基本的な概要をご説明しました。機会があれば、AMPについてより深くご紹介できればと思います。無料メルマガのご登録(無料)SEOの最新情報を無料でお届けします!メルマガのご登録、誠にありがとうございます。記事一覧SEOシニアコンサルタント2013年株式会社ブレインネットに入社し、会社合併を経てサクラサクマーケティング株式会社に合流した後も現在に至るまでSEOコンサルタントとして大小問わず様々なクライアントの集客向上に貢献。システム開発がからむSEOを得意としているほか、自社メディアのブログの作成・監修を行い、数多くのキーワードで上位表示を達成している。TweetShare+1HatenaPocketfeedlyサクラサクLABOブログ開設しました。無料メルマガのご登録(無料)SEOの最新情報を無料でお届けします!メルマガのご登録、誠にありがとうございます。学ぶ】なぜ中小企業のWEBマーケティングは失敗するのか?vol.1:市場環境編サクラサクマーケティング株式会社の社長の根岸です。今回は中小企業ならではのWEBマーケティングが苦戦する理由を弊社の顧客、また弊社自身の事例から解説していきたいと思います。[...]...令和時代に活躍出来るWEBコンサルタントとして押さえておくべき4つのスキル初めまして。私がサクラサクマーケティングに入社してから4年。[...]...【SEO検証】オリジナル画像を使うと順位が上がるのか?サクラサクラボ事例を公開!記事などに画像を使用する際には、PIXTAやShutterstockなどの素材画像を使用することも多いかと思います。その他の記事を見るおすすめコンテンツSEO対策(検索エンジン最適化)とは?初心者にもわかりやすく解説しますSEO対策とは「検索エンジン最適化」のことで、数あるWeb集客手法の中でも、検索エンジンからの成果を最大化することです。[...]...コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説しますここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。Editorカリフォルニアワインの世界サクラサクLABOでは、WEBマーケティングでもっとも重要な最新のSEO情報を提供しています。初心者の方からプロのコンサルタントの方まで、幅広くご活用ください。