*

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

おすすめトピックス

関連記事

WordPress管理画面の固定ページの属性の中にテンプレートが表示されないのは何故?

WordPress の固定ページの新規作成画面にテンプレートのドロップダウンメニューがない事に気が付きました。固定ページのテンプレートとは、固定ページに独自のデザインを適用するためのものです。WordPress をカスタ […]

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

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

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

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

アップロード中にエラーが発生しました。
WordPressで画像がエラーでアップロードできなくなる原因

WordPress でサイト(ブログ)を運営していて恐怖のエラーがあります。それはもう Windows で言えばブルースクリーンが発生した時のように蒼白になります。 それは新たに画像をアップロードできなくなるエラーです。 […]

WordPressのパーマリンクを連番にしたいがあるカテゴリだけ除外したい

WordPress のパーマリンクを連番にする方法は既に様々なブログで取り上げられておりここでは割愛しますが、それに加えてやりたい事があったのでメモします。 それは基本的にはパーマリンクは連番にするが、あるカテゴリの投稿 […]

WordPressカテゴリ
WordPressのサイドバーのカテゴリー欄で子カテゴリーを表示しない方法

WordPress でカテゴリーの設定は基本中の基本です。カテゴリーが全くないのでは見づらいですし、どんな内容の記事があるのかもわかりません。カテゴリーを正しく適切に設定する事によって、見る人もあなたも見やすいですし、G […]

著者について

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

フォローはこちら

       

       
千歳市のイタリアンレストラン「アキオカ」でパスタランチ

「アキオカ」は北海道千歳市にある格調高いイタリアンレストランで

Fuwattoまるやまキッチン!札幌市円山のふわふわオムライスとパンケーキのお店でランチ

札幌市の円山公園近くにある「Fwatto まるやまキッチン」は

札幌駅前の野菜が美味しいベジタブルバー「野菜バルMAHALO」ハワイな雰囲気を楽しめます

札幌駅前に野菜が美味しいベジタブルバーがあります。その名前を「

外国人にも人気な中部国際空港のガチャガチャコーナーが豊富

日本でお馴染みのガチャガチャ、正式名称をカプセルトイという所謂

Illustratorでオブジェクトの背景を画像にする為にスウォッチに登録する方法

Illustrator でオブジェクトの背景を画像にしたいとい

→もっと見る