[レベル: 上級]
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=1とChrome拡張、ウェブ版ツールのどれでも)で次のような警告が出るようになりました。
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プラグインの次のバージョン(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関連のほかのプラグインも使っているせいかもしれません。