Webページの表示速度を上げるAMP(Accelerated Mobile Pages)を導入してサイト運営者もいるでしょう。
自身のサイトをAMPに対応するだけで、検索流入によるページ表示速度が大幅に上昇できたり、サーバーへの負荷を抑えることもできます。
それだけでなく、検索順位の上昇やGoogle Discoveryへの掲載にも繋がる可能性がありますが、メリットばかりではありません。
AMP化はメリットだけではない
AMP化したサイトを適切に運用できればメリットのほうが大きいですが、うまく理解せずAMP化した場合はデメリットの方が多くなる可能性が高いです。
デザインがシンプルになりすぎる可能性
AMP化をプラグインを使って行った場合、デザインが非常にシンプルになってしまう可能性があります。
例えば、インストールして有効化するだけでAMPに対応できるプラグイン「AMP」を使うと、どのようなブログであったとしてもシンプルなデザインに変わります。
こちらが通常ページ
そして以下がAMPプラグインで自動生成したAMPページです。
このように、かなりデザインがシンプルになるため、サイトによっては少々都合が悪いかもしれません。
ニュースメディアなど、テキスト主体で画像をほとんど使わないブログなどであれば問題ありませんが、そうでない場合はプラグインでのAMP対応はあまりお勧めできません。
スムーススクロールなどの機能が使えなくなる
目次をクリックすると瞬時にクリックした見出しに移動するのではなく、滑らかにスクロールしながら見出しに移動できる「スムーススクロール」という昨日使っているサイトもあるでしょう。
しかし、スムーズスクロール機能はAMPページで利用できないjQueryで開発されているため、AMPページではスムーススクロール効果が働きません。
スムーススクロール以外にも、jQueryを使った機能が軒並み無効化されるため、AMPページでは一部コンテンツが表示されないなどのトラブルが発生する可能性があります。
ちなみに画像の遅延読み込み(lazy load)はAMPページなら自動対応なので気にする必要はありません。
コメントフォームを表示できない
AMPページではコメントフォームを含むフォーム操作ができなくなっています。
そのため、せっかくサイトを訪れてくれたユーザーがコメントを書き込もうとしても、書き込む場所が存在しないため誰もコメントを残すことができないのです。
AMPページから通常のページへと移動してくれればコメントを書き込むことができる(AMP特有の制約がないため)のですが、わざわざそのような手間を踏んでくれる人はいないでしょう。
サイト内検索の検索フォームがjQueryを使うものだった場合、こちらも利用できないので注意が必要です。
AMP未対応プラグインが使えない
AMPページで使用されるファイルが根本的に異なっているため、AMPに対応していないプラグインの機能を使うことはできません。
CSSだけ反映されないことが多い
目次の自動生成する「Table of Contents Plus」や各種ショートコードプラグインなど、記事内に直接コンテンツを追加するものはそのまま追加されて出力されます。
ですが、それらプラグインによって追加されたコンテンツを正常に表示させるCSSだけ反映されないことが多いです。
こちらは適当に作った見出しですが、ただの番号付き箇条書きリストになっているのがわかるはずです。ちなみに元のデザインは以下のようになってます。
この問題を対策する方法はありますが、プラグインファイルをカスタマイズする知識とCSSスキルが必要になります。
AMPページでもプラグインのCSSを適応させたいという場合はお問い合わせください。
AMP化はルールの把握が必要
AMPはWebページを高速で表示するために厳格なルールが定められています。
仮にAMP化できるプラグインを使ったとしても、利用しているテーマや他のプラグインの影響で、AMPページとして認識されなくなる可能性もあるので気をつけましょう。
CSSの合計容量は50000バイトまで
AMPページ1つで使うCSSの合計容量は50000バイトまでとされています。50000バイトを超過するとルール違反となってAMPページとして認識されなくなるので注意が必要です。
CSSの外部読み込みは不可
AMPページでCSSを使う際の注意点として、URL を指定した外部ファイル読み込みは禁止されています。
つまり、以下の記述でCSSを読み込むことができません。
HTMLに直接書き込む必要があるので気をつけましょう。
JavaScriptを使いたい場合は独自のスコープ概念の理解が必要
以前まではAMPページではあらゆるJavaScriptが使えない成約がありましたが、現在はある程度制約が緩和されています。
緩和されているとはいえ、おしっこなんでもかんでも JavaScript を書けるというのではなく、少し変わった書き方をする必要があります。
AMPスクリプト用のタグで囲んだ中でのみJavaScriptを使えるようになっていて、制限されている間数も少なくありません。
また、それと合わせてスコープの概念も必要になってくるので、それなりのJavaScriptスキルを求められます。
AMPページでのJavaScriptに関するご相談がありましたら一度お問い合わせください。
画像はwidth・height両方設定しないと表示されない
AMPページでの画像サイズは明示的に指定する必要があります。
また、通常のimgタグではなくAMP-imgタグを使わなければならないという点もあり、imgタグだけだとAMPページでは正しく表示されないことがあります。
画像を使う際は、width・height値の自動挿入に関しても気を付けなければなりません。
コメントアウトの記述はNG
ページ容量が増加する原因でもあるため、AMPページ内でのコメントアウトは禁止されています。
開発中のAMPページであれば大丈夫ですが、本番用の公開するAMPページではコメントアウトを全て削除するようにしましょう。
一つでもAMPルールを守れないとAMPページとして認識されない
AMPルールはかなり厳しく、何か一つでもルール違反を犯した場合はAMPページとして認められません。
AMPページとして認められないということは、Google検索結果にAMPページが表示されないということであり、AMPページを用意した意味が全くありません。
そして、AMPルールは上に上げたものだけでなく、非常に多くのルールが用意されています。それらすべてを覚えて把握することは困難であるため、簡単に正しいAMPページかどうかチェックする方法が用意されています。
正しいAMPページかチェックする方法
正しいAMPページかどうかチェックする方法をGoogleが用意しています。
こちらのページでAMPページのURLを入力して検証することで、AMPページかどうかのチェックを行えます。
ここで入力するURLは通常ページのURLではなく、AMPページの URLであることに気をつけてください。
AMPページは末尾に「?amp=1」が付くので、URL を検証する際は忘れないようにしましょう。
AMP化でお悩みなら当サイトまでお問い合わせください
AMPに対応するだけで検索流入によるページ表示速度を大幅に上げることができますが、AMP導入コストが思ったより高かったりします。
デザインにこだわらず文章重視で運営しているサイトであれば「AMP」というごくシンプルなプラグインを導入するだけで解決ですが、そうでない場合は個別に開発する必要があります。
- AMPプラグインの導入＆検証
- 通常ページのデザインを可能な限り反映したAMPページの開発
両方とも当サイト「WordPress のお医者さん」で対応できますので、自サイトのAMP化に興味がある方はご相談下さいませ。
