危険！AMPを導入すべきでない4つのWEBサイトとは？【2023年版】
Googleの検索エンジンはユーザーにより良いサービスを提供するために、日々新しい技術の開発・導入に努めています。
スマートフォンの普及によりモバイル端末で検索を行うユーザーが増えたことから、2016年にリリースされた新しい技術が「AMP」です。
AMPはモバイルページの表示を高速化するための機能で、検索ユーザーの快適なコンテンツ閲覧はもちろん、検索エンジンからの評価にも影響するとされています。
しかし、中にはAMPを導入すべきでないサイトも存在しています。
今回は、AMPの概要からAMP対応によるメリット・デメリット、具体的な実装方法までを解説します。
1.AMPとは
AMPとは「Accelerated Mobile Pages」の略で、モバイルページの表示速度を高速化するための技術のことです。
Googleは2015年に、Twitterと共同でモバイルユーザーの検索体験向上を目的に、モバイルページを高速化するプロジェクトを立ち上げました。AMPはプロジェクト名とAMPの仕様の呼称となっていますが、一般的には技術仕様のことを指します。
AMPは、AMPガイドラインに則って記述されたAMPページを検索エンジンがキャッシュして、検索クエリと関連性の高い場合はキャッシュされたページを表示することで、表示速度高速化を実現しています。
AMPをWebサイトに導入するためには、処理を重くする要素を排除したAMPページをルールに則って記述する必要があります。
AMPページは、以下の3つの要素で構成されています。
○AMP HTML
高速表示のために、一部のタグを制限したHTMLファイルです。ページコンテンツの大部分を記述する要となるファイルとなります。○AMP JS
AMPページに掲載される画像や動画の読み込みに使用されるものがAMP JSです。AMP HTMLで記述されたコードを解釈して、画像や動画の表示を生成します。 JSとはJavaScriptの略で、AMPにおいては非同期処理を用いることで高速化を実現しています。○AMP Cache
クローラーがAMPページをキャッシュするためのデータ提供を行うものが、AMP Cacheです。AMP対応を実現する上で必要不可欠な仕組みとなります。 AMP仕様に基づいたページを別途用意することで、WebページをAMP対応にすることができます。2.AMP対応のメリット・デメリット
AMPはメリットとデメリットが色濃く分かれる技術です。そのため、実装するにあたり、メリットとデメリットの両側面をよく検討してから行う必要があります。
ここでは、AMP対応の代表的なメリット・デメリットについて解説します。それぞれの特徴を把握して、施策の実施に役立ててください。
2-1.【メリット】表示速度の改善によるSEOの効果
AMP導入の主な目的はWebページの表示速度を高めることであり、Webページをスムーズに表示することによりユーザーの検索体験を向上すれば、検索エンジンから評価されることが期待できます。
2018年にページの読み込み速度が遅いサイトの順位が下がるスピードアップデートが行われたことにより、Webページの表示速度が検索順位にも影響を及ぼすようになったためです。
表示速度を速めることが上位表示に直接繋がるわけではありませんが、順位下落を防ぎ上位表示の可能性を高めることがAMP実装の大きなメリットです。
2-2.【デメリット】運用工数の増加とデザインの崩れ
WebサイトをAMP対応させる場合は、AMP HTMLを用いて専用ページを作成する必要があります。既存のページに加えてAMPページの管理も行う必要があるため、運用工数が増えることとなります。
また、WebサイトをAMP対応させるためには、一定のルールに則ってソースを記述しなければなりません。既存のサイトに後からAMPを導入して変更を加えると、デザインやレイアウトが崩れてしまう場合があります。
新たにサイトを構築する場合でも、理想とするデザインやレイアウトを実現できないケースは珍しくありません。
HTMLやPHPの細かい調整で対応可能な場合もありますが、相応の知識と労力がかかることを念頭に置いておきましょう。
3.AMP対応に向いているサイト・導入すべきでないサイト
ここでは、上記で解説したAMP対応のメリット・デメリットを踏まえた上で、AMP対応に適したWebサイトと適していないWebサイトを解説します。
Webサイトの読み込みスピードが遅いと、僅かな時間でも検索ユーザーの離脱率は跳ね上がります。技術的な障壁をクリアできるのであれば、AMP対応にするべきです。
特にモバイルユーザーの比率が高いサイトでは、AMP化によってユーザビリティーが向上し、ユーザーの増加に繋がるため、工数を割いてでも実装する価値はあります。
AMP対応は相応の工数と技術的制約があり、上記のようなWebサイトではデメリットのほうが目立つため、あえてAMP対応を行う必要はないと考えらえます。
あなたが、もしAMP対応に適しているWebサイトを運用しているなら、以下の実装をすすめてください。
■AMP対応に適しているWebサイト
- Webサイトの構造がシンプルで、複雑なデザインを使用していない
- モバイル環境からの検索ユーザーが多い
- サイトの読み込みが遅い
- 快適でスムーズな閲覧を実現したい
■AMP対応に適していない4種類のWebサイト
- Webサイトの規模が大きく構造が複雑
- サーバー環境などから現にスピーディーな表示を実現できている
- AMP対応が難しい技術を使用している
- モバイル検索のニーズが低い
4.AMP対応の実装方法
ここでは、AMPタグを用いたソースコードの記述方法やテスト方法を具体的に解説します。
AMPは一定のルールに則って記述する必要があり、不備があると検索エンジンから有効性を認められません。
正しく実装するためにも、ぜひ一連のプロセスを確認しておいてください。
4-1.AMP対応に必須のHTMLタグを使ってマークアップする
ここでは、AMP用HTMLファイルの作成方法を解説します。
AMP対応ページを作成するためには、AMP用のタグを用いてコードを記述する必要があります。
■AMP HTMLであることを宣言する
まずは、AMP HTMLであることを宣言するために、下記のようなコードを記述します。
<html amplang=”ja”>■AMP HTML用のヘッダーを設定する
AMPで指定した文字コードとビューポートを設定するために、<head>内に以下のように記述します。
文字コードの指定
<meta charset=”utf-8”>ビューポートの指定
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">canonical属性を指定
AMPページには専用のURLが生成されますが、「AMP URL」と「AMP URLではないもの」を区別するために、環境に合わせてcanonical属性を指定する必要があります。
○サイト内のURLがAMP URLのみの場合
<link rel=”canonical” href=”http://example.com/amp/”>○AMP URLと非AMP URLが混在する場合
▼AMP URLに記述
<link rel=”canonical” href=”http://example.com”>▼非AMP URLに記述
<link rel=”amphtml” href=”http://example.com/amp/”>スタイルシート（boilerplate）の指定
<head>内には、上記の他にAMP専用のスタイルシートと、JSライブラリ読み込みを指定する必要があります。JSライブラリは<head>タグの最後に記述します。<style amp-boilerplate>body{-webkit-animation:-amp-start8ssteps(1,end)0s1normalboth;-moz-animation:-amp-start8ssteps(1,end)0s1normalboth;-ms-animation:-amp-start8ssteps(1,end)0s1normalboth;animation:-amp-start8ssteps(1,end)0s1normalboth}@-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><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>AMPJSライブラリ読み込み
読み込みを非同期にすることで、読み込みの速度を上げることができます。<script asyncsrc=”https://cdn.ampproject.org/v0.js”></script>■専用タグを用いて<Body>内をマークアップする
基本的なマークアップ方法は通常のHTMLファイルと同様で、ネスト（入れ子）で記述します。
ただし、AMPページには通常のHTMLタグから代替してマークアップする必要があるタグが多くあります。例えば下記のようなタグです。
画像やフォントなどの比較的頻繁に使用するタグも、通常のHTMLタグで記述するとエラーとなるため、AMP専用タグで記述しなければならない点に注意が必要です。
| タグの種類 | 概要 |
|---|---|
| amp-img | 画像を表示するタグ |
| amp-video | 動画を表示するタグ |
| amp-youtube | Youtubeの動画を表示するタグ |
| amp-audio | 音声を表示するタグ |
| amp-twitter | Twitterのツイートを表示するタグ |
| amp-font | フォントを読み込んで表示するためのタグ |
4-2.AMP対応のページで使えないHTMLタグや属性に注意する
モバイルページの表示速度を上げるためには、AMP対応されたAMP用HTMLタグで正しく記述することが重要です。しかし同時に、使えないHTMLタグや属性に注意する必要もあります。
以下は、AMP対応ページで禁止されているタグ・属性です。
基本的に処理が重くなる埋め込みタグや、旧Webデザインで使用されていたタグが使用禁止とされています。
上記のタグはWebコンテンツ制作において必須のタグですが、AMP対応ページにそのまま記述することは禁止されています。冒頭にampを付与した代替タグに置き換えて記述する必要があります。
AMP対応ページでは、動作が重くなる属性や、ampの仕様と干渉する恐れのある属性も禁止されています。
■AMPページに使用が禁止されているタグ
- base
- frame
- frameset
- object
- param
- applet
- embed
- picture
- form
- input
- textarea
- select
- option
■AMP用に代替する必要があるタグ
- img → amp-img
- video → amp-video
- audio → amp-audio
- iframe → amp-iflame
■AMP対応ページで使用を禁止されているHTML属性
- “Amp”または”i-amp”で始まるHTML属性
- “on”で始まるHTML属性
- XMLに関するHTML属性
4-3.AMP対応が適切に行えているか確認する
AMPの実装が完了したら、Webページが正しくAMP対応しているかをテストします。
Googleが提供するAMPテストツールに、AMP対応したページのURLまたはソースコードを入力して、「URLをテスト」ボタンを押します。
「有効なAMPページです」と画面に表示されれば、適切にAMP対応されていることとなります。検索エンジンにもAMPページとして認識されています。
ソースコードにエラーや不備がある場合は、「有効なAMPページではありません」というメッセージとともに原因となる項目が表示されます。
エラーや不備があった場合は、該当箇所を修正して、再びGoogle AMPテストツールを実行してAMPの有効性をチェックしましょう。
まとめ
モバイルページの高速表示を可能とするAMPは、検索ユーザーに快適なサイト閲覧を提供する技術として、ニュースサイトやWebメディアを中心に様々なサイトで利用されています。
AMPは仕様が複雑で実装の難易度も高い技術ですが、Webサイトの表示速度が検索ユーザーの離脱率に与える影響は非常に大きく、検索エンジンからの評価にも影響を及ぼします。
また、モバイル端末を利用しているインターネットユーザーは増加傾向であることからも、AMP対応による恩恵は今後ますます大きくなるでしょう。コストと時間が許すならば実装するべきです。
モバイルページの表示速度を改善したい方は、SEO対策にもユーザビリティーにも有益なAMP対応を、ぜひ検討してみてください。
