*

WordPressを簡単にAMPに対応するテーマやテンプレートを紹介

公開日: : WordPress

AMP

ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応せざるを得なくなるんじゃないかなぁと思っています。AMP とはスマートフォンなどのモバイル端末でのウェブ閲覧を爆速化するプロジェクトです。AMP に対応したウェブサイトは通常の4倍の早さで表示できると言われています。

現在は Google 検索において AMP 対応が検索順位に影響するわけではありません。あくまで今は、というだけで今後は影響するようになるかもしれません。

amp2

しかし、現時点で AMP に対応しているサイトは Google 検索で「AMP」と表示されるようになっています。AMP と表示されているサイトの表示が早いという事が世間一般に知れ渡ったら AMP が表示されているサイトが優先的に選ばれそうじゃないですか。そう思うともう手をこまねいて AMP 対応を渋っている場合じゃない気がしてきます。

でも通常の4倍の早さで表示されるのは大変魅力的です。このサイトも AMP に対応してみようかなと思ったわけです。

自力でAMP対応は超難関です

AMPの対応方法まとめ
AMPに対応したウェブページを作成する方法を、初心者向けにまとめてみました。

上記サイトに AMP 対応方法がまとめられていますが、早々に自力での AMP 対応を諦めました。AMP にはかなり厳密なルールがあります。表示速度を爆速化するために様々な物を排除しています。例えば、javaScript や jQuery は AMP 関連以外は使用禁止されています。つまり、独自に jQuery を使うことは不可能です。

そして、従来では CSS は外部ファイルとして読み込むというのが世の常でしたが、AMP では CSS の外部ファイルは禁止されています。全てインラインスタイルとして head タグ内に書く必要があります。更に 50KB のサイズ制限もあります。

他には img タグは amp-img タグを使用、iframe は amp-iframe を使用しなくてはいけないなど。かなり膨大な作業量が必要になりそうで、あ、もう無理。

WordPressのAMPプラグイン

WordPress を AMP に対応させるプラグインがあります。

AMP
WordPress サイトを Accelerated Mobile Pages (AMP) 対応にします。

従来のスマートフォンページとは別に AMP 対応ページが作られます。つまり同じページが2つできる事になります。それって重複コンテンツになって Google からペナルティの対象じゃないか!と思われるかもしれませんが、その辺は大丈夫です。canonical 属性を使って AMP に対応した同ページだよと Google に知らせてくれます。

これで簡単に AMP には対応できますが、デメリットはあります。

  • 他のサイトとデザインが一緒
  • iframe を使った外部リンク「ブログカード」が動作不可
  • アクセス解析はAnalytics以外不可

他の WordPress サイトが AMP プラグインを導入したら全くデザインが同じページになってしまいます。独自のデザインにするにはカスタマイズが必要です。

amp3

また、よく見かけるブログカードという上図のような iframe による外部リンクは利用不可能になります。(クリックしてもリンク先へ行けない)。iframe じゃなければ問題ありません。これを何とかするには普通のリンクに置き換えるか、別の方法を考える必要があります。

そして、アクセス解析は Analytics 以外は不可です。他社製アクセス解析は、script タグが決められた物以外禁止されているので AMP ページとして認識されなくなります。

AMP準拠WordPressテーマ

AMP プラグインを導入すると同じデザインになってしまいますが、それを避ける為には AMP に準拠したテーマを使う方法があります。

無料WordPressテーマ「Sentry」

最強の無料Wordpressテーマ「Sentry」〜AMPにも対応したスマホファーストテンプレート〜 | ultimate-ez.com

WordPress の APM プラグインを入れる事で独自の AMP ページを生成してくれる WordPres テーマが登場していました。Sentry というテーマです。AMP 対応だけではなく、数々のプラグインと連携し人気記事表示、SNS ボタンなど自動で表示してくれます。カスタマイズで Analytics や Adsense も導入する事ができます。

amp4

当ブログに適用したらこのようになりました。しかし、最初からこのテーマでブログをやるのならまだしも、途中でテーマを変更すると不自然な所を直すのに多大な手間がかかりそうです。

ちなみに、IE では最低限の表示のみで対応していません。

無料WordPressテンプレート「Simp」

WordPressのAMPデザインテンプレート「Simp」を無料配布
GoogleとTwitterが共同開発したAMP(Accelerated Mobile Pages)ですが、現在のところGoogleの検索結果をはじめとして、Gunosyなどのキュレーションアプリやは

WordPress AMP デザインテンプレート「Simp」は、現在のページはそのままに、AMP ページのデザインを整えます。面倒な AMP 対応作業はもう最初から盛り込まれています。画像も自動で amp-img タグに置き換えてくれます。

最初から関連記事の表示、SNS シェアボタンが導入されています。カスタマイズでデザインを変更する事もできますし、Analytics や Adsense も導入する事ができます。

当ブログではこちらの方法で AMP に対応してみました。

おわりに

今ではスマートフォン対応ページも当たり前となったように、今後は AMP も当たり前になっていくと思います。しかしまだ AMP 対応はハードルが高い状態です。スマホ対応も今ではやりやすくなったように、AMP もいずれ簡単に対応できるようになるのではないかと思います。

上部広告

  • Pocket

おすすめトピックス

関連記事

pasokon-pc
WordPressで投稿日時の年月日を別に取得する方法

WordPress には投稿日時を取得する関数 get_the_date() という便利なものがありますが、これだと年月日全てが表示されてしまいます。投稿年月日を年・月・日と別に取得する方法はないかと結構頭を悩ませたんで […]

Stingerで特定記事だけAdsenseを表示しないようにする

このブログでも使っている WordPress の人気テーマ Stinger3 で Adsense を表示しないようにする方法を紹介します。Stinger5 でも同様です。 目次1 Adsenseを非表示にする必要性2 S […]

wpX
WordPress専用超高速サーバー「wpX」へ移転で詰まった事

当ブログを WordPress 専用レンタルサーバー「wpX」へサーバー移転を行いました。高速サーバーを謳うレンタルサーバーはとても月額費用が高くてなかなか手を出せなかったのですが、wpX は月額1,000円(12ヶ月契 […]

知識不要!簡単にWordPressに画像スライダーを付けられる「Easing Slider」の使い方

ウェブサイト上で一枚の画像が次々と切り替わっていくものを画像スライダーとかスライドショーと言います。企業サイトや個人サイトでも至るところで見かけるようになりました。 このスライドショーは色々なタイプの物が jQuery […]

wordpressサイト高速化
【WordPress】画像を最適化でサーバー容量削減!「EWWW image optimizer」が便利すぎ

遅いサイトと速いサイト、どっちが良いですか?と聞かれたら、それは多分速いサイトと答える人が圧倒的なのではないかと思います。ウェブサイトを見る人にとっても検索ロボット(クローラー)にとってもね。 サイトを表示するまでの早さ […]

wordpress
【WordPress】テーマ「Stinger3」のスマホページでCSSが効かない

WordPress のテーマで Stinger3 というものがあります。これが結構人気テーマで、このブログでも使わせて頂いています。 「必要な物は、揃っている。」というキャッチコピーの通り、主要プラグインに類する機能、ス […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
小谷城スマートIC
小谷城スマートICが開通したので近隣の観光地やお店を紹介するよ

2017年3月25日15時より、小谷城スマートインターチェンジ

Amazonプライム限定のクレヨンしんちゃん外伝は地上波とは違う面白さがある

クレヨンしんちゃん25周年を記念して2016年8月から Ama

Chromeでテーブルの列をコピー、矩形選択ができる拡張機能「Copytables」

ウェブサイト上でもデータをまとめる際に表がよく使われます。これ

キャッシュトレイ
三菱東京UFJ銀行でもコンビニATM手数料を無料にする事が可能です(条件有り)

セブンイレブンやローソンなどに設置してあるコンビニ ATM は

サングラス
車を運転中に朝陽が眩しくて信号が見えないのでサングラスで対策した

先日車を運転中にヒヤリとする出来事がありました。それは信号に気が付かな

→もっと見る