以前、はてなブログの表示に十数秒かかって遅い、という記事を書きましたが( はてなブログの表示速度をちょこっとだけ改善してみる - うれしいブログ )、もう表示デザインとかいいからGoogle提唱のモバイル爆速表示の「AMP」やっちゃえばいいじゃん、という心境になったので試してみました。
<目次>
- AMPとは
- はてなブログの AMPをオンにする
- AdsenseでAMP用の広告ユニットを作成
- 記事の編集ページでタグを貼り付ける
- プレビュー機能でどう見えるのか確認
- 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/
から左メニューで「広告の設定」→「広告ユニット」→右ページの「新しい広告ユニット」を作成します。
広告ユニットは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のデザインはいじれないのでプレビューしようが公開しようが結果は同じなんですが、広告を貼る位置やサイズが問題ないか確認できるので便利です。
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用アドセンス広告の貼り付けは完全に手動です。いずれテーマ側で対応して、自動で表示されるようになると期待していますが、よく検索される記事から地道にコードはりつけていくしかないですね。。。全記事にいれるのは相当時間かかるぞ。。。
これで爆速ブロガーの仲間入りですね。
そんじゃーの!