WordPressをプラグインなしでAMP対応させる試み【その2:改良編】 #WordPress

前回はWordPressにプラグインを使わずAMPを導入するための試行錯誤をまとめましたが、そのままではなにかと表現力が低下したままのですので、改良をほどこしていきたいと思います。

画像のクラスを保持する

前回は失われていたWordPress側で画像に付加されるクラスを保持する試みです。

テストしてわかったことはAMPで展開される画像amp-imgは、同レベルの要素があるとそれを巻き込んで画像が縦に伸び、テキストは裏側に回るという動作をするということです。これはfigureに対するfigcaptionでも例外ではありません。

そこですべてのamp-imgをラッパーに入れ、figcaptionはそのラッパーレベルに持ち上げ、全体のラッパーにWordPressが付与するクラス（.aligncenterなど）をそのまま移動します。

amp-single.php

    ...省略...

    $content = preg_replace(
      '/<figure.*?class="(.*?)".*?><img(.*?>)<figcaption .*?>(.*?)<\/figcaption><\/figure>/i',
      '<div class="amp-figure \1"><div class="amp-img-wrapper with-caption"><amp-img layout="responsive"\2</div><div class="amp-caption wp-caption-text">\3</div></div>', $content);
    $content = preg_replace(
      '/<img class="(.*?)"(.*?)\/>/i',
      '<div class="amp-figure \1"><div class="amp-img-wrapper"><amp-img layout="responsive"\2></div></div>', $content);
    echo $content;

本文書き出しの前処理を少し変更し、figureとimgを加工しています。
これにより、処理前は

<figure class="wp-caption aligncenter" />
  <img src="ほにゃほにゃら"... />
  <figcaption class="wp-caption-text">はにゃらはにゃら</figcaption>
</figure>

<img class="aligncenter  wp-image-715" src="あにゃらあにゃら".../>

だったソースが、処理後

<div classs="amp-figure wp-caption aligncenter">
  <div class="amp-img-wrapper with-caption">
    <amp-img layout="responsive" src="ほにゃほにゃら"... >
  </div>
  <div class="amp-caption wp-caption-text">はにゃらはにゃら</div>
</div>

<div classs="amp-figure aligncenter  wp-image-715">
  <div class="amp-img-wrapper">
    <amp-img layout="responsive" src="あにゃらあにゃら"... >
  </div>
</div>

となり、WordPressのレイアウト用クラスが有効かつamp-imgもくずれない構成になりました。あとはスタイルを当てるだけです。

Search Consoleから強制クロールさせた方がよい？

公開から4日経過。実は昨日テストとして、AMP対応ページをSearch Consoleから強制クロールさせたページ群と、何もせずに放置する群に別けてみました。すると、どうやらクロールさせたものの方が早くインデックスに登録されている雰囲気。対象ページ数17のうち「インデックスに登録された AMP ページ数」は現在7となっています。もう少し様子をみてみます。

公開から7日

おととい対象AMPページが全てインデックス登録されたことを確認。細かな更新を行って、やはりSearch Consoleからクロールされると反映は早い傾向はあるけども、そうじゃないページもほどなく更新されるので、ページ数も多いので今後は放置することに決定。

検索順位は？

今のところ変わらない。すでに食べログ直下まで行ってたし、結局大手もどんどんAMP対応しているのでね。もちろんアクセスも横ばいです。費用対効果ってどうなんでしょうか？
フロントエンド屋の商品の幅が広がるという意味ではよいかも。

公開から約1ヶ月

一部のページで蓋をされていたサイトの上位にくることがある。ただし不安定。