初心者の為のAMP対応まとめ 〜考え方から導入まで〜

 初心者の為のAMP対応まとめ 〜考え方から導入まで〜

いよいよAMP(アンプ)導入の時期になってきた?

日本のgoogle検索もAMP導入を行い、モバイルファーストインデックスを導入予定など、モバイルサイトの高速表示化の重要度が高まっていますね。
これら発表でSEO業者や制作会社から「モバイルサイト最適化」に関する案内も多くなっていると思います。
すぐには大きな影響は無いと言われていますが、将来的なユーザー利便性を考えると、やはりサイト表示の高速化は避けて通れない重要な対策となりますので、この時期にしっかりと考え直す良いタイミングだと思います。

 

そもそもAMP(Accelerated Mobile Pages)ってなに?

AMP を使用してウェブページを作成すると、静的コンテンツを高速でレンダリングできます。 以下は AMP を構成する 3 つの要素です。
AMP HTML は、パフォーマンスを保証するための制約が設けられた HTML で、 通常の HTML より優れたリッチ コンテンツを作成できる拡張機能が備わっています。 そして AMP HTML ページのレンダリングを高速化するのが、AMP JS ライブラリです。 Google AMP Cache は(必要に応じて)AMP HTML ページを配信します。

https://www.ampproject.org/ja/learn/about-amp/ より

上記の通り、AMP対応しているサイトはモバイル検索でコンテンツを高速表示させることができます。
AMP専用表示で、google検索上部にカルーセル表示と合わせてAMPマークが表示されます。これからはカルーセル表示以外にも通常検索結果にAMPマークが表示されるようですね。
ニュース系の情報取得をメインとするコンテンツで威力を発揮しそうです。

 

いどうやって導入する?

導入方法は https://www.ampproject.org/ja/docs/get_started/create で解説されていますが、ハードルが高そう…
そんな時はワードプレスのプラグインで対応してみましょう。
導入は簡単。こちらのプラグイン https://ja.wordpress.org/plugins/amp/ をインストール&有効化で導入できます。

 

設定したら正常に動作するかチェック!

あとはこちらのサイトでエラーが表示されないかチェックしましょう。 https://validator.ampproject.org/
画面上部のURL欄にアドレスを入力するだけの簡単操作です。
また実際のAMP表示はアドレスの最後に/amp/をつけてアクセスすれば確認できます。
ちなみにこの記事ページでは下記となります。
http://lala-rockets.com/web/2016/10/post-382.html/amp/

 

AMP導入はまずブログやニュースページから。ブランディングが重要なサイトでは通常の軽量化対応へ。

AMPでの高速表示はストレスなく記事を閲覧することができる為、ブログやニュース系サイトではとても効果的です。
逆を言うとブランディングが重要なサイトではAMPではなく通常の軽量化対策を行う方が有効と考えられます。
サイトを軽量化、高速化してユーザーが来訪してくれたとして、ブランディング目的のサイトの場合はそこでしっかりとしたイメージ訴求が必要な為、ページ容量と表現はバランスを見て調整しましょう。中にはSEO至上主義的になってしまい、サイト表現が簡素化する事で大幅にコンバージョン率が低下するリスクがあります。最近リニューアルされたサイトでも、以前は質感のある作り込まれたサイトが、新サイトではニュースサイトのような全く味気ないサイトに変貌してしまった事例を数件目の当たりにしましたので、本当要注意です。

 

何事も目的とバランスが重要。ユーザーメリットを第一に考えて。

このように必ず全ページをAMP対応させると言うよりは、検索エンジンから流入するユーザーをターゲットに、AMP対応する事でユーザーメリットがあるかどうかをしっかり考え対策を行う事が重要です。「SEO対策に役立てたい!」など運営者都合で物事を考えてしまうと、ユーザーを無視した非効率な対応を取ってしまいがちな為、「良質なコンテンツを快適に、最適な状態で伝える」事を第一に考えましょう!

コメントフォーム

*
*
* (公開されません)