ブログをWordPressのプラグインを使ってAMP対応しました。

  • ブックマーク
  • Feedly

今回、このブログを若干リニューアルしました。
リニューアルした理由としては今までのサイト構造が悪くマルチデバイスにきちんと対応できていなかったため、思い切ってリニューアルをすることにしました。
また、折角の機会なのでAMPにも対応するなど、これからのトレンドを取り入れることにしました。

AMPとは

AMPとはAccelerated Mobile Pagesの略で、AMPはGoogleが推進しているプロジェクトです。

AMPを導入するメリット

AMPを導入することでWebサイトの表示が高速化され、ユーザ体験が高まるというメリットがあります。
AMPの公式サイトではこのように紹介されています。

Accelerated Mobile Pages は、読み込みを高速化しさらに快適なユーザー 体験を追求するため、さまざまな技術的手法を活用してコンテンツをほぼ瞬時に読み込めるようにした HTML ページです。

つまり、AMPを導入することでユーザ体験(ユーザエクスペリエンス)が向上し、結果的にWebサイトの検索順位にも影響する可能性がある、というものです。
注意が必要なのは、AMPを導入する=SEO対策になるということではありません。
あくまでもユーザ体験を向上させるための仕組みですので、目的を間違ってしまってはいけません。

AMPを導入するためには

AMPを導入するためにはAMP HTMLの仕様に準拠しコードを書く必要があります。
通常の静的htmlの場合は仕様に基づいて記載する必要がありますが、CMSを導入している場合、コードを書かずともプラグインで対応できるケースが殆どです。
今回は、タイトルにもあるとおり5分でAMP対応をするので、AMPプラグインを使って導入してみたいと思います。

Automattic社開発のAMPプラグインをインストール

AMP対応のプラグインはいくつかありますが、今回はAutomattic社が開発したAMPプラグインをインストールします。
なぜ、Automattic社のプラグインを選定したかというと、同社にはマット・マレンウェッグという人物がいます。彼は WordPress という OSS プロジェクトと Automattic という企業を始めた人であり、このプラグインとWordPressと親和性を考慮して選定しました。

インストールの手順

管理画面にログインをし、プラグイン→新規追加でAMPでプラグインを検索しましょう。
一番上にAutomattic社が開発したAMPプラグインが表示されます。

インストールをクリックして、プラグインのインストールを行います。
インストールが完了するとプラグインが自動的に有効化になります。

パーマリンクのリフレッシュ

念のためにパーマリンクのリフレッシュを行いました。

設定→パーマリンク設定→変更を保存

これだけです。

AMPに対応したかどうか確認する

最後にAMPに対応したかどうか確認します。確認する方法は、ページのURLに/amp/を入力します。
この記事だと、https://yutarofuji.com/archives/1522/amp/となります。

上記のリンクをクリックすると通常のWebサイトとは異なるデザインでページが表示されていると思います。
これは、AMP専用のデザインが適用されているためです。

デザインを変更することも出来ますが、今回は割愛します。

まとめ

今回はAMP対応のWordPressプラグインを導入してかんたんにWebサイトをAMP対応する方法をご紹介しました。
今後、AMP対応のWebサイトはユーザ体験においても重視されることは間違いないでしょう。
AMP対応のWebサイトは今後もっと普及すると考えており、重要な技術となるでしょう。
現段階で対応することで導入コストも抑えることができるので早めの対応をオススメします。

  • ブックマーク
  • Feedly

この記事を書いた人

藤 祐太郎

都内在住のWeb・アプリのディレクター。
都内Web制作会社勤務。
中規模~大規模サイトまでのディレクションを担当。現在は、アプリの開発ディレクションを担当する。

クライアントの課題解決に対して答えるべく日々活動している。