*

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

公開日: : 最終更新日:2017/05/14 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テーマ「Stinger PRO」

稼ぐサイトの設計図~[付録] STINGER PRO
ビジネスからブログまで、シンプルかつ高機能なテンプレートこの度「STINGER」の最進化系「STINGER PRO」を販売開始致しました。「STINGER PRO」は旧「STINGER+」の後継機であ

こちらは有料の WordPress テーマとなりますが、有料なだけに最初からブログやサイト作成に必要な機能が盛り込まれていてカスタマイズも自由自在。さらに AMP に対応する事もできますし、AMP に対応するページ、対応しないページを簡単に設定する事ができます。WordPress の設定も Stinger 設定として1画面にまとまっており、Analytics や Search Console の設定も簡単に行なえます。

Stinger と言えば昔から SEO に強い WordPress テーマとして有名で、今でも愛用者が多いテーマです。骨格が違うというキャッチコピーの通り、Google にとことんコンテンツが伝わりやすい設計になっているのです。

更にこのテーマには「稼ぐサイトの設計図」という読み物も付属されています。サイトやブログの作り方、WordPress のおすすめ設定、検索される記事の書き方など参考になる内容が盛り沢山です。

無料版 Stinger としては「Stinger8」があります。

無料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() という便利なものがありますが、これだと年月日全てが表示されてしまいます。投稿年月日を年・月・日と別に取得する方法はないかと結構頭を悩ませたんで […]

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

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

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

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

WordPress管理画面の投稿一覧で表示される投稿数を変更するには

WordPress の管理画面と言えば、WordPress でブログやサイトを運営しているなら必ず目にするものですが、投稿一覧に表示される記事の数を変更する必要がありました。普通にブログを書くだけなら、投稿一覧の記事数な […]

全記事一覧
WordPressで全記事一覧と投稿日を一緒に出力する方法

WordPress を使う前は Movable Type や Serene Bach を使用しておりましたが、その時は対して苦労しなかった「全記事一覧と投稿日を一緒に出力する」事が WordPress では結構実現に手間 […]

WordPressメディアライブラリ
WordPressでメディアライブラリの画像を検索しやすくする為にすべき事

WordPress でサイトやブログを運営していると記事数もさることながら、使用している画像もかなりの数にのぼると思います。WordPress のメディアライブラリには相当な枚数の画像が格納されているでしょう。 ある時、 […]

著者について

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

フォローはこちら

       

       
セブンイレブンからアイスキャラメルラテが発売されていたので感想など

セブンイレブンでお馴染みのセブンカフェからアイスキャラメルラテ

キャラメルがとろける贅沢なチョコクッキー東京限定の「キャラメルウィッチ」

先日東京へ行った時にまるでブランドバッグのようなお洒落さと高級

朝食もできる古民家パン屋カフェ、米原駅徒歩5分「ベーカリーカフェカシュカシュ」

2017年4月に滋賀県の米原駅東口から徒歩5分程度の場所にベー

大垣市の麺やらいじんが移転、一味違う豚骨スープとらいじんラーメンに舌鼓

かつて岐阜県大垣市浅中にあった「麺やらいじん」さんが2017年

ガソリンスタンドENEOSの看板にあるFCとは一体何?

ガソリンスタンドの ENEOS は日本全国にありますが、たまに

→もっと見る