Edited at

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

More than 1 year has passed since last update.

前回は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;


本文書き出しの前処理を少し変更し、figureimgを加工しています。

これにより、処理前は

<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ヶ月

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