AMPはサイト表示高速化や検索流入増加などの効果も期待できるということで、朝日新聞デジタル、サイバーエージェント（Ameba）など多くの企業が導入しています。本記事では、AMPの仕組みやメリット、設定方法について解説します。
AMPとは？
AMPとは、Accelerated Mobile Pagesの略で、モバイル向けページの表示を高速化する技術のことで、2015年10月にベータ版が立ち上がり、2016年から本格運用されたサービスです。設定をすると、検索結果の画面にAMPを表す雷のマークが表示されます。2016年に本格運用され、2020年現在は、検索結果のニュース枠にも表示されるようになりました。
AMPがSEOに与える影響
導入したからといって、すぐにSEOに良い影響を与えるわけではありません。ただし、コンテンツの表示速度が向上するため、Googleが掲げる「ユーザーにとって良いコンテンツ」に合致し、結果的に上位表示に結びつく可能性はあります。注意点として、AMPはJavaScriptなどを使った動的ページを正しく表示・作動しない場合もあるため、導入すると、かえって逆効果になることも。自分たちのコンテンツがAMPに適しているのか、判断してから導入をすすめることが大切です。
AMPの仕組み
通常、Webページにアクセスする場合、当該サーバ上にあるHTMLやCSSを読み込むことで画面が表示されます。しかし、AMPではGoogle側でキャッシュしたデータを表示させることで、通常よりも読み込み時間を短縮させることができます。
この表示高速化を実現するために、一部JavaScriptやHTMLは使用できず、オリジナルコンテンツとは異なる表示がされます。以前は、AMP上ではオリジナルコンテンツのURLを取得できない問題がありましたが、2017年2月以降は、URL直下のヘッダーにオリジナルコンテンツのリンクを取得できるボタンが設置されました。
AMPを導入するメリット
では、AMPを導入するとどのようなメリットが得られるのでしょうか。
ページ読み込み速度の向上
2018年にGoogleが発表した統計では、ページ表示速度が1秒から3秒になると直帰率が32%増加し、5秒で90%、6秒で106%、10秒で123%増という結果を伝えています。
今では多くのユーザーがモバイル端末からWebコンテンツを閲覧しています。情報であふれかえる昨今においては、良質なコンテンツであっても読み込みが遅いだけで、戻るボタンを押されてしまいます。
AMPを実装したページはキャッシュとして保存されるため、ページ読み込み速度が向上します。これにより、直帰率の改善、滞在率アップなどの効果を期待できます。
出典：Think With Google | New Industry Benchmarks for Mobile Page Speed
検索流入が増加する
AMPは検索順位における決定的な要因ではありませんが、リッチリザルトが表示される可能性が高くなると言われています。リッチリザルトとは、通常の検索よりも付加的な情報が掲載される検索結果方式で、さまざまなタイプが存在します。リッチスニペットとも呼ばれています。イベント、レシピ、FAQなど全部で29種類存在し、「カルーセル枠」もリッチリザルトの一つです。
このうち、特にカルーセル枠は視認性が高く、より多くのユーザーへリーチすることができます。
AMPを導入・設定する方法
AMPページを実装するには、AMPのルールを遵守しながら、「AMP HTML」という独自のマークアップを記述し、制作する必要があります。ここでは、技術的な詳細説明は省略し、導入手順について解説します。
AMPコードを記述する
AMPページを実装するには、「AMP HTML」を宣言し、AMP専用のコードをマークアップする
必要があります。いちから作成するのが面倒、または難しくて理解できない方は、下記のコードをコピペして記述しましょう。
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
引用：amp.dev | AMP HTML ページを作成する
これは、AMPページを作成する最もベーシックなテンプレートです。また、ホームページをWordPressで制作している場合は、「AMP for WordPress」という公式プラグインを使うと、スムーズに導入できます。
正規のページをcanonicalにて指定
AMP HTMLでは、canonicalタグの指定が必須です。これは、元のオリジナルページと重複コンテンツ扱いになってしまうためです。元のオリジナルページにはアノテーションタグを埋め込み、関係性を明示します。
AMPテストで正しく実装されているか確認する
AMPのコード記述、各設定が完了したらGoogle公式の「AMPテスト」というサービスを使い、正しく実装されているか確認します。使い方は簡単で、チェックしたいAMPページのURLを入力するだけ。
※詳しい制作手順や技術的制約についてはこちらをご参照ください
Google 検索 | Google 検索向けに AMP コンテンツを最適化する
amp.dev | AMP HTML ページを作成する
AMP導入にあたっての注意点
AMP導入にあたっては、いくつか注意点があります。
技術的な制約がある
AMPはWebサイトの表示高速化ができる反面、技術的な制約が存在します。最も大きいのが、JavaScriptの制約です。このほか、CSSは50KB以下など細かい厳格なルールに従ってコーディングする必要があり、Web制作に専門的な知見のある担当者が必要です。
AMPが向かない場合も
AMPは特にニュースコンテンツなど、画像や動画コンテンツが少ない静的ページにおいては大きな効果を発揮します。一方で動的コンテンツが多いSNSや動画・音楽ストリーミングサービス、ECサイトなどにおいては、ボタンが正しく機能しなかったり、表示崩れを起こしたりする可能性があり、かえって逆効果になる恐れがあります。また、広告にも対応していない場合が多く、すべて新しくタグを貼り直すことにもなりかねないので、静的ページかつ広告のないページから導入を進めましょう。
全てのページをAMP化する必要はない
全てのページをAMPにする必要はありません。、ユーザーがSEOなど検索流入で訪れる静的ページにAMPを実装することで、ユーザーの滞在時間を高めることができ、SEOにも良い効果を期待できます。
AMP設計はプロクルコンテンツに！
プロクルコンテンツでは、130種類1,500名の専門家の方が登録されており、専門家の知見を交えたコンテンツ制作はもちろん、AMPの設計なども含めたCMS構築から運用も対応可能です。約10年間、累計1万本の記事制作ノウハウをもとに、円滑な業務遂行を実現します。コンテンツ制作・オウンドメディア構築をご依頼される方は、こちらよりお問い合わせください。
