WordPressで作ったブログをAMP対応するときに気をつけること5つ

    突然ですが、AMPの対応ってされてますか?

    ampサンプル!

    AMPって何?という方の為にかんたんに説明すると

    Accelerated Mobile Pagesの略でこの規格に沿って

    Webページを制作すると「ものすごく速くスマホサイトが表示」されます。

    WordPressは公式プラグインを入れるだけでAMPに対応できるようになるんですが、

    広告いれたり、画像表示したりとちょっとカスタマイズしようとすると色々とトラブルに遭遇します。

    しかもAMPの規格自体がまだ発展途上だというのもあるのですが、この手の対応記事があまりまだネット上にはないので自分が対応したことを書いておきます。

    インラインCSSは使えない

    WordPressでAMP対応をプラグインを使ってする場合は

    先ほど書いたように公式のプラグインを使って行うのですが、

    見た目の調整をする場合は

    /wp-content/plugin/amp/templates/single.php

    /wp-content/plugin/amp/templates/style.php

    を使って調整します。

    AMPは高速化するために多くの制限がありちょっとのことですぐエラーになる印象です。

    僕はAdsenseの表示位置の調整をしたくて下記のようなcssを書いていたのですが、それをsingle.phpに直接<style></style>で書き込んでしまいエラーになりました。

    この場合は正しくはstyle.phpにcssを書きます。(phpですが、実態はcssを書いています)

    amp-imgはサイズ指定必須

    レスポンシブ対応のページを作っていると画像サイズをimgタグには指定せず

    img { width:100%;}

    といった対処の仕方をしたくなるのですが、AMPの場合この書き方はNGでエラーになります。

    AMPの場合はimgタグの代わりにamp-imgタグを使って画像を表示させますが

    その際は必ずwidthとheightの値を設定するようにしてください。

    画像のレスポンシブ対応はcssではなく「layout=”responsive”」

    画像をレスポンシブ対応する場合は上記のamp-imgタグ内に「layout=”responsive”」 の指定をすることで自動で対応されます。

    amp-imgサンプル

    ↑このような表記の仕方です。

    広告はコピペするとエラーがでる場合がある

    これは広告だけに限らないですが、AMPでエラーが出てるのに コード上には一見問題なくコードが書けている場合、「”」ダブルコーテーションを打ち込み直してみてください。 単純なことですが、意外とそれで問題が解決することが多いです。

    独自Javascriptでエラーになる場合

    WordPressでAMP対応する場合、AMPのsingle.php上では書いてないのに、実際にサーバにアップすると 独自のJSが書き込まれている場合があります。

    書きはnewrelicが書き込むJSを向こうにする処理なのですが、僕のブログはこのプラグインやサービスを使っていませんでしたがこの処理を書き込むことでエラーが消えました。

    [cc lang=”php”] if (extension_loaded(‘newrelic’)) { newrelic_disable_autorum(); newrelic_ignore_transaction(); }[[/cc]

    コードの元ネタは以下のリンクから

    https://discuss.newrelic.com/t/disabling-apm-for-google-amp-pages/36094

     

    以上、参考になれば幸いです。

    SNSでもご購読できます。