はてなブログをAMPで爆速表示、そしてGoogleアドセンス広告を貼る方法

以前、はてなブログの表示に十数秒かかって遅い、という記事を書きましたが( はてなブログの表示速度をちょこっとだけ改善してみる - うれしいブログ )、もう表示デザインとかいいからGoogle提唱のモバイル爆速表示の「AMP」やっちゃえばいいじゃん、という心境になったので試してみました。

<目次>

AMPとは

AMPとは、Gooogleが提唱するモバイルページを爆走表示させるという新しいWEBの規格みたいなもの。基本はHTMLで、Javascriptとか、フレーム等の遅そうな要素をすべて使用禁止にしたもののようです。

ようはデザインを犠牲にしてでも、コンテンツの内容をいち早くユーザに届けたい!、という目的のものです。

ためしに手書きのHTMLで書いてAMPの練習をしてみようとしましたが、解説サイトを見てをよくわからなくて放置してました。

はてなブログにもAMP機能があり、チェックボックス一つでオン・オフが切り替えできます。ブログの全記事に反映されるようです。もう練習ページとかはいいので、オンにして効果をためしてみることにしました。

ちなみにまだベータ版です。AMP自体がまだ一般的でないしベータ版的な感じですしね。設定したかぎり特に問題ないように見受けられましたので、このまま説明をつづけます。

はてなブログの AMPをオンにする

設定→詳細設定→AMP

で、「ベータ版機能:Accelerated Mobile Page (AMP)を配信する」にチェックをいれ、ページ下の「変更する」ボタンをクリックするだけ。簡単ですね。

AdsenseでAMP用の広告ユニットを作成

これまではてなブログでアドセンス広告をいれていましたが、収益率にどのくらい差があるのか確認しやすいように、AMP用の広告ユニットを別途つくることにします。

https://www.google.com/adsense/

から左メニューで「広告の設定」→「広告ユニット」→右ページの「新しい広告ユニット」を作成します。

f:id:kiyoshi_net:20170306102554p:plain

広告ユニットは2つつくります。ページ上部(タイトル下=本文上)と、記事のお尻につけるやつです。

上と下でどちらがクリックされやすいか、後日効果を確認するためです。

上用はレスポンシブで、下用は300x250固定で作ってみました。下用もレスポンシブでもいいとおもうんですけどね。いちおう。

「コードを取得」で、それぞれのコードをテキストでどっかにメモっておきます。

記事の編集ページでタグを貼り付ける

タグをはりつけ。編集モード(Markdown記法、はてな記法、見たままモードなど)によって使うタグがちょっと違うみたいです。

筆者は Markdown記法を使っていますので、ここではMarkdown記法でのタグ貼り付けについて説明します。それ以外のモードを使っている場合は以下のブログが参考になります。

http://www.kazumiso.info/entry/amp-adsencewww.kazumiso.info

AMPページ用のアドセンス広告のためのタグなので、通常のスマホページ・PCページではその広告は表示されないので安心して貼り付けれます。

ページ上部用の広告は でかいのにすると小さいスマホ(iPhoneSE等)で表示するとタイトルと広告しか表示されなくなってしまうため、小さいサイズにします。タテ幅(heightを100固定にします。

(下の例のXXXXXXXXの部分は先程の手順でメモっていたものを代入します。メモリ忘れたらアドセンスのページの広告ユニット→「コードを取得」で確認します)

<div>
<amp-ad height="100"
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXX">
</amp-ad>
</div>

ベージ下部用は、記事を読み終わったあとなのででっかいのを貼ります。詳しいルールは知りませんが300x250が一般的みたいです。

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

はてな記法の場合は<div></div>無しでOK

ベージ上部用

<amp-ad height="100"
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXX">
</amp-ad>

ベージ下部用

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

プレビュー機能でどう見えるのか確認

AMPのデザインはいじれないのでプレビューしようが公開しようが結果は同じなんですが、広告を貼る位置やサイズが問題ないか確認できるので便利です。

f:id:kiyoshi_net:20170306105727p:plain

AMPページを見る方法

基本はグーグルの検索結果にAMPマーク付きで表示されます(下図参照)

記事投稿後、すぐにはクロールされないでしょうから、手動で表示を確認します。

やり方は簡単。記事URLの末尾に「?amp=1」を追加するだけ。

例えばこの記事のURLは

http://kiyoshi.hatenablog.com/entry/2017/03/06/111454

ですので、「?amp=1」をつけると以下のように。

http://kiyoshi.hatenablog.com/entry/2017/03/06/111454?amp=1

デメリット

いまのところ、AMP用アドセンス広告の貼り付けは完全に手動です。いずれテーマ側で対応して、自動で表示されるようになると期待していますが、よく検索される記事から地道にコードはりつけていくしかないですね。。。全記事にいれるのは相当時間かかるぞ。。。


これで爆速ブロガーの仲間入りですね。

そんじゃーの!

関連記事

kiyoshi.hatenablog.com