素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

投稿日: 2018年11月15日
最終更新日:

【StaticPressも対応】WordPressのサイトを「AMP for WordPress」プラグインを使ってサクッとAMP対応しちゃおう【インストール/使い方】

YouTubeも見てね♪

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/03/15 15:06:44時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥29,280 (2024/03/15 19:06:01時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥7,180 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

AMP

What’s?

皆さんはAMPと言う言葉をご存じでしょうか?

AMPとは、Accelerated Mobile Pagesの略で、Googleが推進しているモバイルページを高速に表示させるための技術が適用されているページの事を指します。

こちらは2015年10月に、モバイルユーザーのUX向上を目的としてGoogleとTwitterが協力し、オープンソースプロジェクトとして発足しました。

では、このAMPにはどのようなメリット/デメリットがあるのでしょうか。

メリット

ページの表示速度アップ

ページの表示速度が約4倍ほど早くなると言われています。

これは、Google側でキャッシュを利用している点と、AMPページのデータ通信料量がとても少ない点を利用して実現しています。

さらに、このキャッシュに含まれる情報はAMPのルールに沿った厳しく制限されたミニマムなhtmlとCSSのみとなるため、必然的に少なくなります。

検索結果にAMP対応の表示が出る

こちらは直接的に何かに影響があるわけではないですが、Googleの検索結果にAMPに対応している事を表す表示が出るようです。

一般ユーザーにはあまり影響ないかもしれませんが、同業者でAMPの存在を知っているからは参考にしようとするサイト訪問が増えるかもしれませんね。笑

SEOに間接的に効果が出る可能性がある

AMP対応をしたからといって検索順位が上がることはありません。
しかし、表示速度が改善されるので間接的に順位が上がる可能性はあります。

デメリット

修正が必要

AMPを利用するには、通常のHTMLとは別のAMP HTMLというものを用意する必要があります。

これは、利用出来るタグなどが制限されたHTMLとなっているので、2種類のHTMLを作らないといけません。

うまく表示出来ない可能性がある

前述の通り、利用出来るタグが異なるので正しくページが表示されなくなる可能性がります。

また、AMPではJavaScriptも利用出来ないのでJavaScript前提のサイトだとうまく動作しなくなる可能性が非常に高いです。

SEOに直接効果があるわけではない

GoogleはAMP対応の有無によって検索順位が変わることはないと明言しています。

ですので、順位を気にしてAMPの導入を考えているのであれば、急いで対応する必要はありません。

WordPressならプラグインを入れるだけで対応可能

自前で用意するととても大変そうなAMPですが、さすがWordpress様。

なんとプラグインを入れて有効にするだけでAMP対応が可能になってしまうのです!!

ただ、利用しているプラグインテーマによっては別途対応が必要な場合もあります。
筆者も何点か修正を行って別の記事にしているのでそちらも参考にして頂ければなと思います。(※後述)

今回実際に入れてみましたのでご紹介致します。

手順

プラグインをインストール

今回はAMP for WordPressというプラグインをインストールします。

有効化するのを忘れずに。

たったこれだけで準備は完了です。

確認

AMPプラグインを有効にすると、パーマリングの末尾に amp をつけることでAMPページにアクセスする事が可能になります。

こちらが元ページです。

そして、こちらがAMPページです。

広告やサイドバーなどが消え、記事本文のみのシンプルなレイアウトに変わっています。

また、さらに細かいチェックについては、コチラ からURL単位でテストが出来るので試してみると良いでしょう♪

以下のように判定されると、スマホ端末でGoogle検索した際にAMPページが自動で表示されるようになります。

StaticPressにも対応

また、こちらのプラグインを導入するとheadタグ内に、自動でampページへのリンクが差し込まれます。

なので、自動でAMPページも出力対象になります。


これは助かりますね♪

場合によってはうまく表示されないことも

しかし、StaticPressGoogleAnalyticsGoogleAdsenseAmazonJSを利用していると、AMPで使えないタグが出力されてしまったり無効になってしまったりすることがあります。

その場合は以下の対応をする必要がありますので、そちらも参考にして頂ければなと思います♪

また、デザインやレイアウトはデフォルトのものになってしまうので、通常ページに寄せたカスタマイズをすることも可能です。

終わりに

今後、注目が集まるであろうAMP対応がWordPressのプラグインを入れるだけで実現出来るのはとても助かりますね。

新しい技術をどんどん盛り込んで時代遅れのサイトにならないように気をつけましょう♪

CATEGORIES & TAGS

IT