はてなブログのAMPでは、アドセンスのコード（非同期）を自動変換する

先日（2017年5月5日）、はてなブログでAMP用に記事中にGoogle AdSense（アドセンス）をせっせこと設置していたのですが。

そのとき、広告の表示を統一だせる目的で、PCなどの従来の記事用とAMP配信の記事用と2つの広告ユニットのコードを並べて記入していたのですね。

それで表示確認をしたら、なんとその広告ユニット2つともAMP配信での表示テストで表示されていたのです。

どうやら、はてなブログでは従来のアドセンスのコードをAMP専用のコードに自動変換できるようになっているようです。

今回は、このことについて、まとめた記事です。

はてなブログで記事中のアドセンスのコードは、AMP形式に自動変換されるようになっています

今まで、はてなブログのAMP配信でアドセンスを設置したい場合、AMP専用のアドセンスのコードを作成して、記事中に書き込むという方法しかなかったようです。

しかし最近では、記事中に従来のアドセンスの広告ユニットのコードをそのまま記入しても、はてなブログのシステム側でAMP形式のコードに自動変換してくれるようです。

ただし非同期の広告ユニットだですよ。同期のユニットの場合は変換してくれませんから注意して下さい*1

広告ユニットがレスポンシブルの場合は非同期しかないので、気にする必要はありません。

表示のほうも問題はありません。モバイルのAMP経由でちゃんとアドセンスが表示されることも確認しています。

ちなみに元々の広告ユニットから変換したAMP広告ユニットは、どんなサイズを指定していても300×250のレスポンシブAMP広告ユニットになるようです。

ただし画像の大きさを指定するときのように、amp-adをmax-heightといったCSSで指定すると、高さ100ピクセル以下といったユニットを表示させれます。

はてなAMPでの画像の指定方法についてはこちらにも書いていますのでご参照ください。

これにより、はてなブログのAMPには二通りの設置方法があることになります。

以下、その特徴をあげてみます。

一つは以前から言われていようにamp-adの広告ユニットを別に作成して設置する方法です。

この方法は特徴として、PCといったAMP配信以外では表示されないということがあげられます。

メリットとしては広告ユニットのサイズを指定できるがあります。AMP配信でのアドセンスコードの作成の仕方や、サイズの指定方法はこちらをご確認ください。

デメリットとしては、AMP用に広告ユニットが増えるため、PCなどといった従来の配信の場合、ソースコードに余分なコードが増えることが挙げられます。

あと「スポンサーリンク」などの設置がPCの表示のときのはそれだけ表示したしまうので、CSSの::beforeなどでcontent:"スポンサーリンク"などと設定しなくてはいけないのも、デメリットになるかもしれません。

ちなみに作成したAMP広告ユニットを、はてなブログの記事中に挿入する方法は、先ほどの記事を見ていただいたら詳しく書かれていますが、簡単に言えば次のようにすれば設置できます。

こちらの場合、従来のものとAMP配信ものと同じ位置に広告ユニットを表示します。

メリットとしては、従来のソースコードに余分なコードが増えないということが挙げられます。

またPC・スマホ・AMP配信との広告ユニットの位置を統一することもできます。なので、前途のように::beforeなどで設定する必要もなくなります。

デメリットとしては、記事ごとに直接コードを記入していくので、多くの方がそうしているであろう記事上や記事下といったデザイン設定からのアドセンスの一元管理ができないということがあげられます。

あとAMP用広告ユニットが、全部300×250のレスポンシブ広告ユニットになるので、サイズを指定する場合はCSSで指定しなくてはいけないというのもあります。

どちらも一長一短ありそうです。

アドセンスの広告ユニットとかは、一元管理したほうがサイズ変更といった編集や変更にとても便利なことが多いのですが、コンテンツとして各記事ごと個別に配置するのも一つの方法です。

ここらへんは、管理者の好みやスタイルによって変わってくると思います。

AMPも、はてなブログのAMP機能もどちらも開発中です。なので、これからどのように変化していくのかわかりません。突然、機能が追加されたり、逆になくなったりするかもしれません。

ですが、とりあえず現段階では、AMPでアドセンスを設置する方法は二つあるということを覚えておいても損はないと思います。

*1:コードだけで見分けるときは、insタグがあるかないかで見分けられます。insタグがあるのが非同期で、scriptタグだけのものが同期です。

*2:AMPではコメントタグは使用禁止なのですが、はてなブログのシステムで自動的に削除してくれるので、エラーになることはありません。