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

ブログ運営-はてなブログ ブログ運営 ブログアフィリエイト SEO

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やはてな記法の場合は間のコメントなしでもいけるらしいです。

<amp-ad width="300" height="250" type="adsense" data-ad-client="ca-pub-4166973356804490" data-ad-slot="8297887237"><!--ad --></amp-ad>

 

こちらの記事に詳しく書いてありました。自分はHTML編集を使っているので、消えるコードに悩まされAMP導入をためらっていたのですが、おかげで解決されました。ありがたいです。

www.weblog-life.net

 

ちなみに、AMP広告はAMP以外では表示されないので、通常の広告と併記して使うことができるのだそうですよ。

 

 

まとめ

  • AMPにすると表示が速くなる
  • モバイルの検索結果で優遇されるかも
  • 広告はAMP用のコードで入れられる

とりあえずAMPにしてみましたがどうなるでしょうね。通信速度がもっと早くなればいらない機能になりそうな気もしなくもない。

 

 

では、今日のところはこの辺で。

嗚呼蛙でした。

 

Â