AMP対応とは|記事タイプ別に徹底解説。CREATIONMARKETINGDMP/AIPINTO!ブログSEO対策AMP対応とは|記事タイプ別に徹底解説。SOLUTIONAMP対応とは|記事タイプ別に徹底解説。PDMチーム2013年中途採用でPLAN-Bに入社。東日本エリアの営業マネージャーを経て、2017年にビジネス開発ユニットを立ち上げ、メディア運用と事業開発を行う。その後、2018年よりJuicer事業部へ異動。自社開発DMP「Juicer」の販売戦略を中心としたマーケティング活動に従事。現在はPDMチームにてプロダクトオーナーとして新規事業の立ち上げを行っている。構造化データマークアップについてニュース記事(NewsArticle)の構造化データマークアップ記事(Article)の構造化データマークアップブログ記事(BlogPosting)の構造化データマークアップレストラン情報(Restaurant)の構造化データマークアップレシピ情報(Recipe)の構造化データマークアップ各種チェックツールのご紹介AMP対応のチェックツール構造化データマークアップのチェックツールAMP対応の将来性Googleの動向ユーザーの認知度まとめ現代のメディアでは「必須の取り組み」とされているSEO対策。SEOの知識は、長期的に安定したユーザーを獲得するために、必要不可欠です。今回は数あるSEO対策の中でも、2016年の2月に導入された「AMP」の対応についてご紹介します。Pages」通称「AMP」と呼ばれるこのフレームワークは、直訳すると「モバイルページの高速化」です。普及が進むスマートフォンやタブレットでのユーザビリティ向上を図り、GoogleとTwitterが共同開発した「サイトのスピードをより高速化するため」のシステムです。一説では表示速度が従来に比べて4倍近くのスピードになるとも言われており、よりユーザーを獲得しやすくなると言われています。2016年11月時点で、AMPに対応しているページは下記の通りとなります。ニュースページブログ記事ページ記事ページレシピページレストランページAMPの仕組みAMPは、コンテンツをキャッシュすることでデータ量が少なくなり、、アクセスにかかっていた時間を、大幅に短縮します。そのため、ニュース記事など、定期的に更新される動的なコンテンツで大きな効果を発揮するフレームワークです。現在では朝日新聞や日刊スポーツ、毎日新聞などメディアに導入する会社が増え、GoogleのカルーセルでもAMP対応のページを頻繁に見ることができます。AMPに対応しているページには、検索結果画面上で稲妻マークが付きます。AMP導入のメリットAMP導入のメリットは下記の3点です。ページ読み込み待ちによるユーザー離脱を防げるまず、最初に挙げられるのはユーザビリティの向上です。サイトの表示速度が高速になるということは、ユーザーの利便性が大きく増すこととイコールです。高速でモバイルページが表示されるので、ページの読み込みが遅い事によるユーザーの離脱を防ぎます。一説には、サイト表示速度が2秒違うと、サイト直帰率が50%も増加するという話もあります。ページの表示だけでなく、コンテンツ自体が保存されているため、ユーザーがストレスを抱える場面が圧倒的に少なくなり、よりユーザーの人気を獲得できるでしょう。カルーセルに表示されることで、クリックされやすくなる自然検索ではなくカルーセル形式で大きく表示されるため、クリックされる確率が圧倒的に高くなると考えられます。※自然検索形式の表示も確認されています。今後、順位上昇に影響する可能性がある現在AMP対応はランキングシグナルには導入されていませんが、Googleはモバイルでのページスピードを重要視しており、今後AMP対応しているページが、検索結果の上位に表示される可能性があります。AMP導入によるデメリットしかし、現段階でAMP対応を導入することに対してデメリットも何点か挙げられます。フレームワークの制約まずは、今までのフレームワークに比べて制約が多すぎること。Scriptがほとんど使えないことは、大きな弱みとも言えるでしょう。Scriptに対応できるようGoogleが開発を進めていますが、現段階ではまだ大幅な仕様変更の可能性が無いと言い切れないため、知識を得るコストを考えると、現段階での導入はリスクもあります。管理するページが2倍になる可能性が...通常のHTMLページと、AMP用HTMLページの両方の管理が必要になる可能性があります。※一括で管理できるCMSも存在しております。コンテンツ・デザインが変更になる可能性があるAMP用HTMLでは使用を禁止されているタグが複数存在しております。これにより、従来のコンテンツやデザインのままでは表示できないものが出てくる可能性があります。HTML<html>amp属性が必要。<script>JSON-LDのみ使用可能。<style>amp-custom属性が必要。Webフォント以外の外部ファイルの読み込みはできない。<link>rel=”canonical”のみ使用可能。<meta>http-equiv以外は使用可能。<img><amp-img><video><amp-video><audio><amp-audio><iframe><amp-iframe><frame>使用不可。<object>使用不可。<embed>使用不可。<form>使用不可。<input>使用不可。<button>使用可能。href属性にjavascriptは指定できない。AMPの実装方法では、実際にAMPの実装方法を代表的なプログラムごとに紹介していきます。HTMLAMP対応のHTMLは、テキスト以外のコンテンツに制約が課されています。Scriptはほとんど使えないためimgやvideoなどは、カスタムエレメンツでコードを書かなければなりません。普通のHTMLと記述の方法が異なる場合もあるため、チェックが必要です。Googleでは、構造化データのマークアップが必須となるので気を付けておかなければなりません。charset=”utf-8′′>文字コードはutf-8を指定します。content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>ビューポートの設定を行います。href=“通常版のURL”>AMPページのcanonicalタグでは、AMPではない通常版のページ(対応するPCページなど)のURLを記載します。対応するページが存在しない(AMPページのみが存在する記事)の場合はAMPページのURLを記載します。JSライブラリを読み込むための記述を行います。HTMLでは外部ファイルのCSSを読み込む事はできません。amp-custom>タグを使用して記述します。CSSでは総容量が50KBまでという点も注意が必要です。Scriptについて改めて触れておきます。現段階ではAMPにおいて許容されていないため、ほとんどが使用できません。非同期スクリプトのみ使用することができます。現在は開発中ではあるので、将来的に許容される可能性においても言及しておきます。使用できるのはJSON-LDを記述するためのタグのみとなります。type="application/ld+json"></script>AMPページをGoogle検索結果に表示させるためには、JSON-LDを使用した構造化データが必要になります。type=“application/ld+json”>と</script>の間に、必要な構造化データマークアップを行います。WordPresswordpressのAMPプラグインを使うことでAMP対応を比較的容易に行うことができます。プラグインとは、ソフトウェアに機能を追加する際に用いられるもので、AMP対応には、Wordpress公式のAMPプラグインを用います。ダウンロードも簡単に行うことができ、手順は、web検索でプラグインと検索し、数分で完了するダウンロードを行うのみです。Wordpressプラグインを使ったAMP対応をすることで、既存のページにAMP対応が完了したページを作成することができます。HTMLでは<video>タグの代わりに、<amp-video>タグを使用します。縦横の幅をピクセルで指定することが必須となります。layout="レイアウトの調整">構造化データマークアップについてAMPページを検索結果に表示するには、@typeに合わせていくつかの構造化データが必須です。見出しは110字以内に収める。記事内に直接含まれる画像のみして可能。画像の横幅は696px以上で、jpg、png、gifのみ使用可能。