SimplicityのAMP機能を使って一月

WordPress用テンプレート「Simplicity」がAMPに対応したのが2016/10/2に公開されたバージョン2.3.1。その翌日にはSimplicityを使っているサイトのAMP機能をオンにしたので、使い始めて一月ほどが経ったことになります。

AMP対応は機会があったらやってみようと思っていた程度だったので、Simplicityの対応に乗っかった感じでした。

作っているサイトが速報系ではないうえにAMP対応が無理なページも多いため、修正はぼちぼちやってきました。

どの程度のぼちぼちだったかというと、GoogleのSearch Consoleで発生しているエラーを折りを見ては、嫌にならない範囲で修正する、といった具合で、遅々とした進み方でした。

が、先ほど潰せる限りのエラーが消えたのを確認し、修正作業が完了しました。

 

AMPに対応してみて

AMPに対応して思ったことは

  1. AMPページからの流入が意外とある
  2. エラーが想像以上に発生
  3. Simplicityが原因のエラーがほとんどない

の3点です。

1.AMPページからの流入

AMPページ(cdn.ampproject.org)からの流入は、カルーセル表示されるわけでもないからせいぜい1割だろうと思っていたのに、はるかに上回っていました。スマホからのアクセスが多いサイトであれば、あってもいいかな、という印象です。

2.エラーが想像以上に発生

エラーのほとんどが、外部ストレージに置いた画像を参照する際にheightを省いていたために発生したものでした。Wordpressのメディアファイルから使う場合はそういうことは生じないのですが、ベタ打ちしていたので、幅だけ合わせていたのが原因でした。

3.Simplicityが原因のエラーがほとんどない

Simplicityが原因で発生したエラーで気づいたものはformのみでした。不具合は結構あったようですが、アップデートが早かったために気づかないうちに修正されていたようです。
ampでは使えるようになったformがエラーになる

formがampページでも使えるようになったのですが、Simplicity バージョン2.3.7(2016/10/24公開)ではinvalidになります。

actionに指定できるプロトコルはhttpsのみです

Simplicity2.3.7でフォームが使えない理由

理由1

ampでformを使う際に必要な属性target=””の記述が、Simplicityのampページでは省かれてしまう。

2.3.7だと

<form method=GET action="https://yaruszuo.net" target="_blank">
 が
<form method=GET action="https://yaruszuo.net">
こうなってしまう。

理由2

form用エクステンションスクリプトが必要(自分でhead_customに加えれば解決)。

理由3

method=”GET”では使えるactionが、method=”POST”の場合はだめ。POSTならaction-xhrにしなければならない。

これは投稿者が気を付ければいいことですが、落とし穴っぽいんで一応ということで。

 

AMP対応した感想

AMPに対応した感想はというと、「今のうちにやってよかった」です。時間はそれなりに取られたものの、どう書けばエラーにならないのかを把握できたので、これからの記事はエラーと無縁になれるからです。

ampの仕様の追加やSimplicityの対応によって、これからも変化があるとは思いますが、どう変わるかが理解できるようになったのでついていきやすい(はず)。

Simplicityを使ってりうならボタン一つでAMP対応できるのだから、とりあえずやってみるのも手だと思います。エラーが出てても無視すればいいだけですからね。

付記 SimplicityでAMPページを表示する方法

Simplicityを使っているサイトでAMPページを表示するには、AMP機能を有効にした状態でページURL末尾に?=amp1と入力するだけです。

AMP機能を有効にしないと表示されないので、まだの方はカスタマイザーの中ほどにあるamp(β機能)から「AMPの有効化」にチェックを入れて有効にしてください。

文法チェックの仕方はSimplicity作者のサイトに詳しく書かれています。

手軽にAMPエラーをチェックする方法(Chrome拡張「AMP Validator」の使い方)

スポンサーリンク

WordPress