はてなブログは有料のProプランを利用すると「AMP（アンプ）」を利用することができます。
AMPはメリットがありながらも、なかなか厄介な機能です。
この記事は、はてなブログを始めてみたらAMP機能の存在に気づき「AMPってなんだろう？」という人にむけて書いています。
AMPの基礎知識から、はてなブログのAMP機能のクセについて考察し、整理しました。
- AMP（アンプ）とは？
- はてなブログでAMPを利用する方法
- はてなブログAMPの特徴
- はてなブログのAMPのメリット。エラーが出にくい
- はてなブログのAMPのデメリット。一括管理が難しい
- はてなブログ×AMP＝ニュースサイトに最適かも
- はてなブログのパワーアップはこちら
AMP（アンプ）とは？
AMPとは Accelerated Mobile Pagesの略。
日本語で言うと「モバイルページを高速に表示させるための手法」です。
AMPはシンプルなHTML、CSSで記述することが原則とされ、シンプルであるがゆえに、スマホでAMPページを観覧するとものすごく早く表示されます。
GoogleとTwitterの共同プロジェクトで、2016年頃から推進されています。
日本で使えるブログサービスでも、アメブロ、はてなブログ、Bloggerなどで利用可能。
もちろんWordPressで構築したブログでもプラグインなどの利用で実装できます。
個人ブログでAMPを利用するメリットは、まず何よりページの高速読み込みです。
ページの読み込みに3秒かかると、多くの読者はその記事を読むことなく離脱すると言われていますよね。
表示速度が遅いのは百害あって一利なし。
AMPひとつで表示速度が改善されるのは、大きなメリットです。
またAMPページはGoogle検索結果で「稲妻マーク」が表示されます。
もしユーザーがAMPページのことを知っていれば、稲妻マークがあることで安心してページを開けます。
よって、検索結果上でのクリック率上昇が期待できます。
さらにAMPページはGoogleのサーバーに一時保存（キャッシュ）され、Googleサーバーから配信される仕組みです。
そのおかげで急激なアクセス負荷にも耐え得ると言われています。
なにかの拍子にアクセスが急増した時、サーバーダウンしてしまうのは大きな機会損失。
もとのサーバーが脆弱でも、AMPページ自体はGoogleのサーバーにあるので、落ちにくいんですね。
もっとも、はてなブログの場合はそもそものサーバーが強力なので、このメリットはあまり関係ないかもしれませんが。
デメリットはエラーへの対応でしょう。
特殊なHTML、CSSで記述するので、気づかないうちにAMPに不適当な記述をしてしまう場合があります。
ふつうはブロガーが触らないブログサービス全体の記述だけでなく、ブロガーが書く記事内に置いても記述に不備が生じることがあります。
おそらくAMPを利用して、なにもエラーに遭遇しない人はいないのではないでしょうか？
ですからAMPを利用する際は最低限ググって解決法を模索できるリテラシーが必要です。
はてなブログでAMPを利用する方法
AMPの概要がわかったところで、はてなブログでAMPを利用する手順を紹介します。
はてなブログproが必須
まず前提としてproプランの加入が必須です。
月々600円（2年払い）から利用できます。
管理画面からボタンひとつでAMP化
はてなブログのAMP化は実にかんたんです。
管理画面の「設定」→「詳細設定」から「AMPを配信する」にチェック。
これで全記事がいっきにAMPページになりました。（トップページ、カテゴリーページ、固定ページなどはAMP化されません）
ちなみにチェックを入れてすぐにはAMPページは検索結果には反映されないと思います。
ブログの規模に応じて、少しづつAMPページが配信されていくはずです。
はてなブログAMPの特徴
WordPressや他のブログサービスと比較しながら、はてなブログのAMP機能の特徴をまとめました。
カスタマイズしたヘッダー、記事上、記事下、フッターの記述は無効になる
はてなブログではヘッダーや記事上、記事下、フッター部分にHTMLを記述できます。
しかしAMPページではここに記述したことは反映されません。
例えばヘッダーにナビゲーションバーを設置している。
記事上にアドセンスコードを張り付けている。
そのようなことが反映されません。
よって、ブログの回遊率や収益に影響を与えます。
回遊を促せるように記事内の内部リンクを工夫する。
アドセンスは1記事ごと記事内に記述する。
など、AMPを前提としたブログ運営が必要です。
大きな文字や文字色が使えない
はてなブログのAMPでは、記事内のstyle属性が破棄されます。
style属性とはHTML内にCSSを記述する方法。
はてなブログでは、文字の大きさや文字色の変更は、style属性で記述されます。
よってAMPページではそれらが反映されないことになります。
ユニークな表現を追求している人にはちょっと残念かもしれませんね。
AMP用のCSSを記述できる
CSSに関してはAMP専用のものを記述できます。
これにより「見出し」などのデザインは通常ページと同じデザインにすることが可能です。
おそらくほとんど通常ページと変わらないデザインにできるのではないでしょうか。
余談ですが、このAMP用CSSに文字色や大きな文字のCSSを書いて、記事内でclass要素で指定あげれば、AMPページでも文字色を変えたりできると思います。
まぁ、めんどくさいのであまり現実的なないでしょうが…。
アドセンスは通常コードが自動でAMPコードに変換される
Googleアドセンスでは通常のアドセンスと「AMP用アドセンス」のコードが別途発行されています。
しかしはてなブログでは、通常のアドセンスコードをはれば、AMPページでも反映される仕様のようです。
関連記事：はてなブログのAMPページにアドセンスを貼る方法→普通のアドセンスコードを貼ればOK
通常ページ用、AMPページ用と貼り分ける必要がないので、これはありがたいですね。
ちなみにアフィリエイトリンクに関しては、
- テキストリンクなら、そのままで問題なさそう
- バナーリンクならAMP用コードが必要
と見えます。
要は、はてなブログはimgタグを自動でampｰimgタグに書き換えてくれるようです。
バナー広告は抜本的にAMP用と通常用のコードが違うので、これはAMP用が必要でしょう。
しかしアフィリエイトリンクについては確定的なことは言えません。
わたしの環境では、通常コードで張ったアフィリエイトリンク（テキストリンク）がAMPページでもちらほら発生しています。
しかし通常ページに比べてCV率などを比較していないので、計測もれしている可能性は否定できません。
気になる方はASPに問い合わせるのをおすすめします。
記事を個別にAMP or 非AMPを選べない
WordPressのテーマやプラグインで実装するAMP機能の多くは、個別に記事をAMP化したりしなかったりできます。
この記事はAMP…この記事は通常…と選べるんですね。
対してはてなブログではAMP機能を入れると、全記事いっきにAMP化されます。
なかなか潔い仕様ですよね(笑)
よって、AMPに適さない動的なページがあるブログは、はてなブログでのAMP化は難しそうです。
動的なページとは、例えばbuzzfeedのクイズコンテンツや診断、占いコンテンツなどです。（そもそもはてなブログでそんなことできなさそうですが）
以上、はてなブログのAMP機能の特徴を羅列しました。
以下では、これらの特徴とわたしの経験をふまえて、メリット・デメリットを考察します。
はてなブログのAMPのメリット。エラーが出にくい
わたしはWordPressでもブログを運営しています。
そのブログでは、いくつかの記事をテーマの機能を用いてAMP化しています。
しかし…！
自分でなにもしていないのに、突然AMPエラーが出ることがけっこうあるんですね。
これはWordPressがもつ、そもそもの複雑性が関係しています。
WordPress本体がアップデートした際、テーマもそれに合わせてアップデートする必要がありますが、その際AMP機能をおざなりにしてしまうことがあるようです。
またプラグインでAMPを実装しても、テーマがそのAMPプラグインを前提としていない場合、やはりエラーが出ることがあります。
このようにWordPressは拡張性があるがゆえに複雑性があり、それがAMPの運用を妨げることがあります。（ありました）
対して、はてなブログをAMPを使っていると自分のミス以外でAMPエラーが出ることがほとんどありません。
この安定性はすごくありがたいです。
はてなブログのAMPのデメリット。一括管理が難しい
- ヘッダーや記事上が使えないこと
- AMP化を個別に選べないこと
を考えると、全記事に対していっきにカスタマイズを反映させるのが難しくなります。
例えば、
「記事下にはったディスプレイ広告の収益性が悪いから、関連コンテンツに変えよう」
なんて時、はてなブログのAMPを使っていると、1記事ずつ張り替えるハメになります。
これはちょっとめんどうですよね。
ただわたしの経験から言うと、アドセンスでもなんでも、1記事ずつチューニングした方が結局、収益性が高まります。
ですからわたし自身は（主に広告の）一括管理できないデメリットはそれほど重要視していません。（2020年に実装された「定型文張り付け」機能のおかげでコードを張るのもずいぶん楽になりましたし）
はてなブログ×AMP＝ニュースサイトに最適かも
いづれにしても、ブログの運営方針とはてなブログのAMP機能の特徴を照らし合わせながら、利用の可否を決定する必要があります。
おおむねニュースサイトのように、毎日数記事更新するタイプのブログなら「はてなブログ×AMP」はかなりおすすめできるのではないでしょうか。
そもそもはてなブログは堅牢性が高く、何千記事も記事を格納しても、サーバーコストが変わりません。
さらにAMP機能もWordPressのそれより安定感があります。
これはニュースサイトにとって、かなりメリットに思います。
個人でもネタフルさんやきんどうさんのようなタイプのブログ運営を描いているなら、なかなか良い選択肢ではないでしょうか。
ちなみにこのブログは2021年3月現在、はてなブログでAMPを利用しています。
- 表示速度を最重要視している
- 文字装飾は使わない
- アフィリエイトやアドセンスはそこそこで、まーいいか
といった理由からです。（最後、適当ですが(笑)）
わたしの経験では、表示速度ほど大きな影響を与える要素はないなと感じています。
またAMPページは自然とコアウェブバイタルで良いスコアを出してくれます。
要は、
- AMPページの方がユーザーファーストなページになる
- はてなブログ×AMPならそのためのコストが安い（かんたん）
と、判断した次第。
こればっかりは各々のブロガーの判断によりますが、この記事が判断の一助になったらうれしいです。
AMP機能を利用したい人は、proプランが必須です。
※2022年1月29日 追記
現在ではAMPを解除し、通常モードで運営しています。
はてなブログでコアウェブバイタルの対策が進んでおり、その点ではAMPを使う必要がなくなったと判断。
もちろんページスピードはAMPのほうが早いですが、そこはカスタマイズの工夫でなんとかしのいでいます。
また収益化にも本格的に取り組み始めたので、AMPと通常の数値の違いを見ながらも今後も柔軟に対応していきます。
はてなブログの高速化や収益化については以下↓
はてなブログのパワーアップはこちら
基本設定からカスタマイズ術、収益アップ、SEO対策など、ワンランク上のはてなブログを運営する方法をまとめました。
ぜひ合わせてチェックしてください。
関連記事：はてなブログの始め方。アカウント登録、記事の書き方、収益化まで
