AMP対応やめました。理由?プログラムコードがちゃんと表示されなから

JAVAScriptを使ってWebサイトのレイアウトや記事内になにかしらの細工や装飾をしているようなサイトのAMP対応は考えたほうがよいです。

例えば、私のブログだとSyntaxHighlighterを使ってプログラムコードの装飾を行っていますが、HTMLタグなどをコードとしてそのまま表示しようとした際に問題がでます。

あ、AMPは、「Accelerated Mobile Pages Project」の略です。

AMP対応した場合に出る問題の例

「百聞は一見にしかず」なのでまずは、この画面を見てください。

これは、Webサイトのカスタマイズ記事の中で紹介している<script>タグを使ったサンプルコードをAMP非対応の状態で見た画像です。

今度は同じ記事中のサンプルコードをAMP対応したページで見てみます。

サンプルコード中に記載されているhtmlタグの”<“と”>”が全て”&lt;”と”&gt;”で表示されてしまっています。

なぜこのような問題が発生するのか

私のブログでは、コードをきれいに見やすくするためにWordPressのプラグイン「SyntaxHighlighter」を使っています。

SyntaxHighlighterを使ってHTMLタグを使ったサンプルコードを表示する場合、”<“や”>”はタグの記号となるため、タグ記号ではなくただの文字としてそのまま表示したい場合は、”<“を表す”&lt;”、”>”を表す”&gt;”に置き換えて記述する必要があります。

そうすることでSyntaxHighlighterが”&lt;”を”<“に、”&gt;”を”>”に変換して表示してくれます。

WebページをAMP対応にするためには、AMPの規定基づく非常に制限されたシンプルなhtmlとCSSを使う必要があるため、本来ページ表示時に読み込むべきJAVAScriptなどを削ぎ落とすことになります。

今回ブログのAMP対応については、ブログのテーマに使用している”simplicity2″のAMP有効化機能を使用しています。

“simplicity2″のAMP有効化オプションを有効にするとAMP対応のhtmlを自動生成してくれるのですが、この中でJAVAScriptの読み込み部分が削り落とされます。

その結果この例のようにSyntaxHighlighterの機能を実現するためのJAVAScriptが使用できず、入力された文字がそのまま表示される結果となります。

結果的に変換される文字が変換されず、わけのわからないサンプルコードに見えてしまっています。

もちろんこのままサンプルコードをコピペしてもエラーとなって動作せず、サンプルコードとしての役目を果たしてくれません。

AMP対応するメリット

今現時点でAMP対応によるメリットを以下に記載します。

ページ表示が爆速

確かにページ読み込みが異常に速いです。

速いというより、読み込みしていないかのように表示されます。

試しにスマホのブラウザで”朝日新聞”を検索してカルーセル表示(赤四角部分)されていて右上に稲妻マーク(赤○部分)のあるページをクリックしてみてください。 瞬時にページが表示されます。

検索結果にカルーセル表示されるため、記事が目立つ

上記の画像にあるように、AMPページは検索結果にアイキャッチ画像が表示され、その下に記事タイトルが表示される、”カルーセル”表示になるため文字だけの他の記事より間違いなく目立ちます。

人の目は文字より先に画像に視線が行くので当然記事が読まれる確率が格段に上がるかと思います。

SEO的に有利になる(かも)

今のところGoogleは、AMP対応してるかいなかによって検索結果の順位に影響が及ぶことはないと言っています。

今のところはそうかもしれませんが、Googleが推進している以上、遅かれ早かれ検索順位を決める評価の指標の一つになることは間違いないかと思います。

AMP対応すべきか、待つべきか

次に上げるような特徴をもつWebサイトの場合はAMP対応をすすめる価値があると思います。

  • サイト訪問者の参照デバイスのほとんどがスマホ
  • ページビュー数を重要視してる(アドセンスやアフィリエイトで稼ぐサイト)
  • 記事(Webサイトのページ)の構成要素が文章と画像のみ
  • Webサイトのレイアウトや記事内でJAVAScriptを読み込まないと使えないようなアクションや装飾を行っていない

営利目的でサイトを運営しているならAMP対応は必須でしょうね。

“目立つ”というのは何より大事でしょうから。

ページ表示が爆速というのもメリットではありますが、ユーザー離脱につながらない程度のロード時間で済んでいるなら今はまだAMP対応しなくても良いのではないでしょうか。

結局AMP対応はやめた

Simplicity2だと簡単にAMP対応できるので一旦は有効化したものの、結局やめました。

なぜなら、私のブログの場合訪問者のほとんどがPCからであり、ブログの性質上、記載しているサンプルコードなどの正確性を重視する必要があると考えたからです。

つまりAMP対応のメリットよりデメリットのほうが大きかったということです。

今後周りのサイトの動向や抱えている問題の解決策が見つかったりしたらもう一度検討しようかと思います。