はてなブログでAMPを導入する前に確認しておきたいこと

採用しているサイトも増えてきたAMPですが、PVが増加したとか、あるいは自分のブログには合わなくて止めてしまったとか様々な情報を目にします。

実際の効果のほどはどうなのでしょう？

自分のWebサイトをAMP化するとどのようになるのか試してみたいと考える人も少なくないことでしょう。

今回は「はてなブログ」のAMP化を実行すると投稿ページにどのような変化があるのか、AMPを導入する前に知っておきたいことをまとめてみました。

目次非表示

導入にあたっての疑問
はてなブログＡＭＰ化の方法
導入後の変更点
WordPressのAMPとの違い
AMPによる効果

導入にあたっての疑問

AMPについて調べてみると評価はいまだに賛否両論ですが、自分のサイト（ブログ）にAMPを導入すると何が起きるのか知りたいところです。

はてなブログではAMPを導入すると通常のページURLの末尾に「?amp=1」という文字記号が付加されたAMP用のページがもう一つ作成されます。

これがモバイルでの検索結果に表示されるAMP用ページというわけです。

AMP導入後に確認したいページのURLの右に「?amp=1」と書き入れてアクセスればAMP化されたページが表示されます。（PC用ブラウザでも表示可能）

確認だけで、数分でAMPを解除してしまえばサイト運営にはほぼ影響がなく何も起きないと思われます。

この記事を書いている時点で「はてなブログ」のAMPはまだベータ版ではてなブログPROを申し込んだ利用者でなければ導入できないことになっています。

はてなブログＡＭＰ化の方法

肝心のAMP化の方法ですが、はてなブログでは設定画面からAMPのチェックボックスをONにするだけです。

すぐに非AMPサイトに戻したいときはこのチェックを外せば元に戻せます。

※AMP化の実施は公式ブログなどで情報を確認し充分な検討が必要

AMP対応後にはデザインの設定画面からAMP用にCSSが追加記述が可能になります。

また作成されるAMPページが記事編集画面からプレビュー可能になりますが、これらの機能はAMPのスイッチをONにしないうちは利用できません。

導入後の変更点

AMP導入によりWebサイトに見られる変更点は、先に書いた通りモバイル表示用のAMPページが作成され、そのページは既存ページのURLに「?amp=1」がついたものになります。

AMP用ページの自動生成

新たに作成される「?amp=1」のページはモバイル検索用に特化した仕様で、従来のデスクトップ用のページのデザインやCSSなどを引き継いでいない状態になります。

例えば、AMP用のCSSや広告などはAMP化後に自分で追記して補う必要がるため、この辺の操作に煩わしさを感じAMPを解除してしまう人が多くいらっしゃる模様です。

特に広告の挿入は現時点ではscriptによる自動挿入が出来ずページごとに記述が必要になってきます。

従来の記事に手動で広告を入れている場合はAMPページでも表示できる場合があるようですが、広告の種類に依存するのと今後も継続してAMPページに表示が可能かどうかは不透明なところでしょう。

動画や地図の埋め込みはどうなる

コンテンツ内へのYouTube動画を埋め込んでいる場合、従来の記述のままではGoogleSearchConsoleのエラーが出る可能性がありますが、編集画面のツールバーを使用して動画の埋め込み設定をやり直せばAMPのエラーは修正されるようです。

※もともとツールバーから埋め込んだコンテンツならエラーは出ないのかもしれません。

地図（グーグルマップ）の埋め込みについては、幅や高さの設定を適正な値で設定していれば、特に問題なくAMPページでも表示が可能のようです。

動画も地図も、はてなブログでは「amp iframe」を使った記述に書き直す必要はなさそうです。

なお、記事を書いている時点においてAMP用CSSの記述以外に使用できるオプションはなく記事前後へのカスタムスクリプトの挿入も効きません。

その代わり、編集画面でツールバーを用いて埋め込んだYouTubeやAmazonアソシエイトの広告リンクなどはAMPページでも表示が可能になっています。

検索結果への反映に要する時間

AMP対応により「?amp=1」の付いたモバイル用ページにアクセスできるようになると、その新しいページには従来ページに向けた「canonicalタグ」が設定されます。

従来からあるデスクトップ用のページには新しいAMPページに向けた「alternateタグ」が追加されます。

これにより、クローラが従来のページを巡回したときにAMPページが新しく生成されたことを知りINDEXが可能になるという仕組み。

実際に検索結果に反映され、検索一覧に雷マーク付きでAMPページが表示されるまでにかかる時間はサイトごとで異なると思われますが、当サイトでは数日経過してからジワジワと反映されてきたといった感じです。

ページによっては一月以上かかるものもあるのではないでしょうか。

設定すれば全てのページがAMP化される

はてなブログのシステムでは、一度AMPを導入するとサイト内のすべてのページがAMP化され一部の記事だけAMP化を見送りたいといったことができない仕様です。

ページ数が多ければAMP係るチェックすべき点も多くなることが予想されます。

WordPressのAMPとの違い

WordPressなどでプラングインを用いてAMP化をする場合はサイトのデザインも自由度が高い設定が可能です。

その反面、PC表示に近いCSSやカスタムスクリプトの導入はSearchConsoleからのエラー対処に迫られることになりかねません。

はてなブログの場合、AMP導入により複雑なエラーが出てしまう部分は管理者が設定できない仕様になっています。

よく言えば、小回りが利かない分コンテンツの充実に専念できることがAMPに関しては「はてなブログ」を利用する強みでしょう。

埋め込みコンテンツの面倒な変換も自動でやってくれる部分が多くあります。

AMPによる効果

はてなブログをAMP化すると一時的にアクセス数が増加しますが、その後も安定した検索流入が期待できるかどうかはコンテンツの質次第といったところでしょう。

スタイルシートの適用や、scriptの使用が限定されるためページのデザイン、メニューの表示なども限定的なものになることから直帰率が悪化するという意見もあります。

気になるサイト内の滞在への影響についても、実際のところは扱うコンテンツによりまちまちなのではないのでしょうか。

この辺を改善したくても思う通りにいかなかったというのが、AMPを止めてしまう理由になってしまうことでしょう。

※記事下に関連記事を表示できる機能は従来の設定が引き継がれAMPページでもアイキャッチ付きで記事下に「関連記事」の表示ができます。

AMPの導入によりモバイル検索からの流入は期待できるようになるので、アンプ対応によってアクセスしてきたユーザーを満足させるコンテンツになっているかがAMP導入の是非を見際める一つのポイントとも言えます。

しかし、ここ最近の動向を見るとAMPを利用しているサイトの数が増加していることもあり、非AMPのままの状態で訪問が見込まれていたモバイルユーザー数がAMPサイトに奪われてしまうことも懸念しなくてはならないでしょう。

はてなブログの場合、AMPの設定はチェックボックスの操作でON/OFF可能で簡単ですが、AMPによる成果の善し悪しは検索結果に影響をもたらす部分ですので慎重に検討する必要があると言えます。