AMPページの広告掲載にはamp-ad用のJavaScriptの読み込みが必要に

[レベル: 上級]

AMPページに広告を掲載する際に、定められたJavaScriptの読み込みが必要になりました。
設定していなくても広告は表示されますが、将来的には、AMP HTMLのバリデーションエラーの原因になる可能性があります。

amp-adのJSがないとバリデーション警告

AMPページで広告を表示するには、amp-adタグを使います。
amp-adを使用しているページでは、次のJavaScriptを読み込ませる必要があります。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

このJSの読み込みがない状態だと、AMP HTMLのバリデーションチェック(#development=1Chrome拡張ウェブ版ツールのどれでも)で次のような警告が出るようになりました。

amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error.

The tag ‘amp-ad extension .js script’ is missing or incorrect, but required by ‘amp-ad’. This will soon be an error.

amp-ad 拡張タグのJSスクリプトが存在しないか正しくありませんが、amp-ad には必要です。これはまもなくエラーになるでしょう。

このJSに関して、amp-adを説明するAMPプロジェクト公式サイトは次のように説明してます。

Note: amp-ad may still work without this script, but we highly recommend it for future compatibility

注意: amp-ad はこのタグがなくても引き続き機能するかもしれませんが、将来の互換性のために(設定することを)強く推奨します。

スクリプトの設置は以前からも要件に含められていたのですが、この注意書きが加わったのは、少なくとも今月に入ってから、おそらく9月10日より後です。
またバリデーションチェックで警告が出るようになったは、数日前です。

今のところは警告にとどまっているものの、放置しておくとゆくゆくは有効なAMPページとして認識されなくなってしまうかもしれません。

広告をAMPページに掲載していなければ関係ない話ですが、掲載しているなら対応することをおすすめします。

WPプラグインの対応方法

僕のブログのように、AMP公式のWordPressプラグインでAMP対応している場合の対応方法を説明します(この記事を書いている時点での最新バージョン、0.3.3が対象です。ここを参考にしました) 。

amp-post-template-actions.php を編集します。
ファイルの場所は、amp/includes です。

次の関数を追加します(編集する前に必ずバックアップを取っておくこと!)。

add_action( 'amp_post_template_head', 'amp_add_amp_ad_js' );
function amp_add_amp_ad_js( $amp_template ) {
 $post_id = $amp_template->get( 'post_id' );
 ?>
 <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
 <?php
}

追加場所は「絶対にここ」という場所はないのですが、とりあえず25行目あたりにしましょうか。
AMPページに必須のスクリプトである https://cdn.ampproject.org/v0.js を読み込ませた後です。

このJSを読み込ませるコードも含めると次のようになります(強調したところが追加するコード)。

<script src="<?php echo esc_url( $amp_template->get( 'amp_runtime_script' ) ); ?>" async></script>
<?php
}

add_action( 'amp_post_template_head', 'amp_add_amp_ad_js' );
function amp_add_amp_ad_js( $amp_template ) {
 $post_id = $amp_template->get( 'post_id' );
 ?>
 <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
 <?php
}

編集が完了すると、このようにAMP HTMLに出力されます。

AMP HTMLに出力されたamp-adのJavaScript

これで、バリデーションの警告は出なくなり、一件落着です。:)

AMPプラグインの次のバージョン(v0.4が進行中)で、amp-ad のスクリプトがもとから挿入されるようになるかもしれませんが、すぐに修正したければこの記事で説明したやり方で対応できます。

P.S.
ちなみに関数を使わなくても、下の1行をそのまま追加しても解決できます。

<script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script>

こっちのほうが楽かも。

single.php に追加して解決できたという例もあるようですが、僕は出力されませんでした。
AMP関連のほかのプラグインも使っているせいかもしれません。