AMP導入ビフォーアフター！広告を貼れない問題も解決されました！

AMP導入ビフォーアフター

みなさまごきげんよう！

嗚呼蛙でございます！

近頃話題のAMPを導入してみました。

スマホでサイトを見たときにAMPにすると表示が早くなり、検索も上位にしてくれるんじゃないかとかなんとかというウワサなので、最近低迷しているこのブログをよみがえらせてくれないかと期待しています。

AMPとは
AMP導入するとどうなるの？
はてなブログではクリックひとつでAMP導入可
アドセンス広告の表示方法
まとめ

AMPとは

AMPとは、Accelerated Mobile Pages の略で、名前の通りモバイルページを加速するための仕組みのことです。

ざっと調べたところ、みんなスマホでネットを見るようになってしまったので、Google様がスマホでサクサク読める仕組みを導入、さらにPCとモバイルで検索結果を分け、AMP導入してるとモバイル検索のときの順位を上げてくれるかもね、ってことみたいでした。

AMP導入するとどうなるの？

AMPを導入すると、モバイルでアクセスしたときにページの表示速度が爆速になり、検索で優遇されるメリットがあります。一方、javascriptが使えない、cssのデザインを読み込んでくれない、広告が表示されないと、デメリットもいっぱい。

実際にAMP導入して見比べてみると、あまりの無慈悲さに泣きたくなります。左が通常のモバイル表示、右がAMP表示で比較を作ったので見比べてみてください。

まず、メニューやシェアボタンが消えます。

AMP導入ビフォーアフター1

cssで見た目を整えてる目次や、見出し、広告もこの通り。

AMP導入ビフォーアフター2

いつも一番最後に入れてる一言コメントもこんな感じになってます。

AMP導入ビフォーアフター3

カエレバのリンクは健在ですが、見た目はやっぱり簡素になってますね。クリック率悪そうです。

AMP導入ビフォーアフター4

はてなブログではクリックひとつでAMP導入可

はてなブログでAMPを導入するには、管理画面の[設定]から「詳細設定」＞「AMP」のところにあるチェックボックスにチェックを入れて[変更する]ボタンを押すだけです。大変簡単でした。

はてなブログAMP導入方法

AMPでの表示は、記事作成画面のプレビューで「スマートフォン（AMP）」から確認することができます。

f:id:aaafrog:20161124132957p:plain

公開した記事にアクセスし、URLの後ろに「?amp=1」をつけて確認する方法もあります。

f:id:aaafrog:20161124133321j:plain

アドセンス広告の表示方法

先述の通り、AMPにするとjavascriptが使えなくなるので、広告が表示されなくなるデメリットがあります。ですが、広告が表示されないとGoogleも広告収入が減ってしまうので、以下のようなAMP用の広告のコードを提供しています。

<amp-ad width="300" height="250" type="adsense" data-ad-client="ca-pub-●●●●●●●●" data-ad-slot="★★★★★★"></amp-ad>

●●●●●●●●と、★★★★★★の部分には、レスポンシブデザインの広告コードの以下の箇所をコピペしましょう。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-●●●●●●●●"
data-ad-slot="★★★★★★"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ただ、HTML編集モードでAMPのコードを追加すると、勝手に編集されてコードが消えてしまうので、以下のようにコメントアウトを挟まないと使えないそう。Markdownやはてな記法の場合は間のコメントなしでもいけるらしいです。