ホシノガク&よしえのブログ

アラサーカップルのブログです!

はてなブログにAMPを導入するのはこんなに簡単だったのか!

スポンサーリンク

 

f:id:hoshinogaku:20180327134011j:plain

Googleが推し進めてるAMP!

はてなブログでも簡単にAMP化できるということでやってみました。

 

 

はてなブログにAMPを導入してみた 

はてなブログをAMP化しようと思ったキッカケは、この方の記事を読んだから。 

AMP化した記事がサイト全体で3ヶ月未更新にも関わらず1ページ目に! - かんすけの頭の中

 

AMP化したら、記事の順位がアップしたという!

デザインテーマが反映されないとか設定がめんどくさいとマイナスな情報しか知らなかったけど、もう新たな時代が迫ってきてるみたい。

曲がりなりにもブログで飯を食ってる身として、こういう新しいものに抵抗感を持っていてはダメじゃないかと自分に喝!

 

 

【はてなブログ】のAMPのやり方は簡単だった 

えいやー!と気合いを入れて臨もうとしてたけど、はてなブログにAMPを導入するのは拍子抜けするほど簡単だった(笑)

 

f:id:hoshinogaku:20180327011920p:plain

はてなブログにログインして、「設定」「詳細設定」と進み、「AMP」の項目にチェックを入れるだけ。

(PROじゃないとAMP化はできません)

 

 

AMPの確認方法 

パソコンで見たところ、特に変化は無いなと思ってたけど、俺のバカ。

AMP(Accelerated Mobile Pages)は、スマホでの表示を早くするよって機能じゃん。

こんなレベルでも、ブログって書いていいんです(笑)

 

f:id:hoshinogaku:20180328032813p:plain

プレビュー画面を見ると、スマートフォン(AMP)という項目が追加されてる!

 

 

f:id:hoshinogaku:20180328034409p:plain

AMP無しとAMP導入後の違いは、こんな感じ。

AMP導入後はかなりシンプルな印象ですが、特別デザインにこだわってる訳でもないので全然OK!

  

AMPになるまでの時間

はてなブログでAMPの設定をしても、すぐには反映されませんでした。

1日経って見てみると、

 

f:id:hoshinogaku:20180328040006p:plain

AMPの記事だという証「イナズママーク」が付いてる!

ただ、記事によっては付いてない。

予想だと、これから時間と共にAMPに順次切り替わっていくんだろうと思います。

 

 

Googleアドセンスの広告 

ブログをAMPにすると、Googleアドセンスの広告がうまく表示されないという記事を見ていたので、やる前から不安でした。

 

ただ実際やってみると、アドセンス広告が表示されてるぞ( ゚д゚)

 

Googleアドセンスのホームページで確認してみたら、自分のIDを広告に貼り付けて使えばOKということだったけど、レスポンシブ広告を使ってたので何もしなくても表示されてました^^

 

でも、記事下のレスポンシブじゃない広告は確かに表示されませんでした。

記事下に自動で広告が入るコードにレスポンシブ広告を入れてみたのですが使えず。

これは記事に直接入れていくしかないのかな(これは地味にめんどくさいぞ泣)

 

 

最後に 

小池都知事の都民ファーストのように、Googleはモバイルファーストを推し進めてる。

それならGoogleに対応しながら、Googleの力をお借りして、ブログを楽しもうじゃないの^^

 

 

追記

広告を自動で入るよう設定したけど、AMPに対応した広告を入れることができなかったから、AMPを辞めました。

はてなブログが対応するようになるのを待つか、ワードプレスに以降しない限り、この問題は解決しないかも(笑)