ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応せざるを得なくなるんじゃないかなぁと思っています。AMP とはスマートフォンなどのモバイル端末でのウェブ閲覧を爆速化するプロジェクトです。AMP に対応したウェブサイトは通常の4倍の早さで表示できると言われています。
現在は Google 検索において AMP 対応が検索順位に影響するわけではありません。あくまで今は、というだけで今後は影響するようになるかもしれません。
しかし、現時点で AMP に対応しているサイトは Google 検索で「AMP」と表示されるようになっています。AMP と表示されているサイトの表示が早いという事が世間一般に知れ渡ったら AMP が表示されているサイトが優先的に選ばれそうじゃないですか。そう思うともう手をこまねいて AMP 対応を渋っている場合じゃない気がしてきます。
でも通常の4倍の早さで表示されるのは大変魅力的です。このサイトも AMP に対応してみようかなと思ったわけです。
目次
自力でＡＭＰ対応は超難関です
https://syncer.jp/amp
上記サイトに AMP 対応方法がまとめられていますが、早々に自力での AMP 対応を諦めました。AMP にはかなり厳密なルールがあります。表示速度を爆速化するために様々な物を排除しています。例えば、javaScript や jQuery は AMP 関連以外は使用禁止されています。つまり、独自に jQuery を使うことは不可能です。
そして、従来では CSS は外部ファイルとして読み込むというのが世の常でしたが、AMP では CSS の外部ファイルは禁止されています。全てインラインスタイルとして head タグ内に書く必要があります。更に 50KB のサイズ制限もあります。
他には img タグは amp-img タグを使用、iframe は amp-iframe を使用しなくてはいけないなど。かなり膨大な作業量が必要になりそうで、あ、もう無理。
WordPressのAMPプラグイン
WordPress を AMP に対応させるプラグインがあります。
従来のスマートフォンページとは別に AMP 対応ページが作られます。つまり同じページが2つできる事になります。それって重複コンテンツになって Google からペナルティの対象じゃないか！と思われるかもしれませんが、その辺は大丈夫です。canonical 属性を使って AMP に対応した同ページだよと Google に知らせてくれます。
これで簡単に AMP には対応できますが、デメリットはあります。
- 他のサイトとデザインが一緒
- iframe を使った外部リンク「ブログカード」が動作不可
- アクセス解析はAnalytics以外不可
他の WordPress サイトが AMP プラグインを導入したら全くデザインが同じページになってしまいます。独自のデザインにするにはカスタマイズが必要です。
また、よく見かけるブログカードという上図のような iframe による外部リンクは利用不可能になります。（クリックしてもリンク先へ行けない）。iframe じゃなければ問題ありません。これを何とかするには普通のリンクに置き換えるか、別の方法を考える必要があります。
そして、アクセス解析は Analytics 以外は不可です。他社製アクセス解析は、script タグが決められた物以外禁止されているので AMP ページとして認識されなくなります。
AMP準拠WordPressテーマ
AMP プラグインを導入すると同じデザインになってしまいますが、それを避ける為には AMP に準拠したテーマを使う方法があります。
有料WordPressテーマ「Stinger PRO」
https://on-store.net/stingerpro/
こちらは有料の WordPress テーマとなりますが、有料なだけに最初からブログやサイト作成に必要な機能が盛り込まれていてカスタマイズも自由自在。さらに AMP に対応する事もできますし、AMP に対応するページ、対応しないページを簡単に設定する事ができます。WordPress の設定も Stinger 設定として1画面にまとまっており、Analytics や Search Console の設定も簡単に行なえます。
Stinger と言えば昔から SEO に強い WordPress テーマとして有名で、今でも愛用者が多いテーマです。骨格が違うというキャッチコピーの通り、Google にとことんコンテンツが伝わりやすい設計になっているのです。
更にこのテーマには「稼ぐサイトの設計図」という読み物も付属されています。サイトやブログの作り方、WordPress のおすすめ設定、検索される記事の書き方など参考になる内容が盛り沢山です。
無料版 Stinger としては「Stinger8」があります。
無料WordPressテーマ「Sentry」
WordPress の APM プラグインを入れる事で独自の AMP ページを生成してくれる WordPres テーマが登場していました。Sentry というテーマです。AMP 対応だけではなく、数々のプラグインと連携し人気記事表示、SNS ボタンなど自動で表示してくれます。カスタマイズで Analytics や Adsense も導入する事ができます。
当ブログに適用したらこのようになりました。しかし、最初からこのテーマでブログをやるのならまだしも、途中でテーマを変更すると不自然な所を直すのに多大な手間がかかりそうです。
ちなみに、IE では最低限の表示のみで対応していません。
無料WordPressテンプレート「Simp」
https://www.sho-yamane.me/entry/2016/05/30/160811
WordPress AMP デザインテンプレート「Simp」は、現在のページはそのままに、AMP ページのデザインを整えます。面倒な AMP 対応作業はもう最初から盛り込まれています。画像も自動で amp-img タグに置き換えてくれます。
最初から関連記事の表示、SNS シェアボタンが導入されています。カスタマイズでデザインを変更する事もできますし、Analytics や Adsense も導入する事ができます。
当ブログではこちらの方法で AMP に対応してみました。
おわりに
今ではスマートフォン対応ページも当たり前となったように、今後は AMP も当たり前になっていくと思います。しかしまだ AMP 対応はハードルが高い状態です。スマホ対応も今ではやりやすくなったように、AMP もいずれ簡単に対応できるようになるのではないかと思います。