スタッフブログ
スタッフブログを AMP 対応しました！
※画像のカルーセルスライダーはこんな感じになればいいな…というパロディイメージです。
AMP ( アンプ ) 対応になったスタッフブログからこんにちは。
アンプと読むらしいです。読み方は知っていてもエーエムピーと読む癖がついているので、いきなりアンプが～と言われてもまったく認識できませんでした。
対応方法や情報だけは前々から仕入れていましたが、個人的に盛り上がってない感やニュースサイトだけでいいのではと思っておりましたが、
スマホ対応が不要になる!? Google、通常のモバイル検索結果でスマホ向けページの代わりにAMPページを表示する実験を開始
https://www.suzukikenichi.com/blog/google-starts-experiment-to-replace-mobile-friendly-pages-with-amp-pages/
などを読むうちに急にやる気になり、重い腰をあげました。
WordPress を利用しているので、便利なプラグインにてささっと対応もできますが、( 現段階のプラグインだと、AMP の厳しい制限によりエラーがかなり多くなるようですが… ) より深く理解したかったので、オリジナルテンプレートで対応することにしました！
ということで実際作業した感想のレポートです。
※詳しい対応方法は解説記事を探すと大量に見つかるので省きます。
- 対応方法にて大変お世話になった参考サイト
URL はどうするか？
AMP 化の URL は自由に決めることができます。
使用できるタグや属性などが厳しく制限されているなか、URL は特に定まっていないのに衝撃を少し覚えました。
既に AMP 対応なされているメディアのブログ、個人のブログなどを参考に URL の末尾に ?amp を付与すると AMP 対応のテンプレートを見るように設定しました。
この記事の実際の AMP ページは下記のとおりです。
スタッフブログを AMP 対応にしました！ ( AMP )
https://www.fvs-net.co.jp/blog/11607?amp
どういうデザインにするか？
制限されているタグや属性の中で表現できる範囲内に関しては、デザインは自由なので、こちらもすでに AMP 対応なされているところを参考にしました。
いくつか見ていくうちに共通点がありました。
- スマホ対応にてよくつかわれるハンバーガメニュー ( ドロワー ) などは無し
- 記事のみに集中 ( サイドバーなどは排除 )
- 前後記事や似た記事などはあったりなかったり
- オリジナルテンプレートで対応している場合は、レスポンシブウェブデザインとかなり近い形で表現が可能
以上のことを踏まえ、レスポンシブウェブデザインの時に書いた CSS をもとに、ハンバーガーメニューやサイドバーを排除したテンプレートを用意し、細かい調整を行いました。
HTMLタグを AMP 用に置き換えるときに苦労したこと
画像 ( img ) や フレーム ( iframe ) などは、それぞれ対応したタグに置き換えなければならないので、テンプレート上にて処理を記述します。
何度も繰り返しになりますが、タグの制限などが厳しいため、間違いがあると、デベロッパーモードにて、すぐにエラーが出てしまいます。
URL の末尾に #development=1 を付与するとエラーチェックができます。
WordPress なので、 PHP の正規表現を駆使していくことになりますが、
iframe というタグだけても
- 普通の iframe を amp-iframe へ置き換え
- WordPress の記事埋め込みカード機能の iframe も amp-iframe へ置き換え
- YouTube の埋め込み iframe は amp-youtube へ置き換え
といろいろあり、正規表現が苦手なので、分岐に苦労させられました。
正規表現作るときはいつもこちらのリファレンスとにらめっこ…。
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php
最初のインデックスまでに1日！
AMP 対応ページは元の記事にメタタグにて指定を行うので、即時に公開できるのですが、サイトマップや Fetch as Google を行ったとしても、Search Console の Accelerated Mobile Pages にてインデックスされるまでに1日かかりました。
検索結果に雷マーク！
また、インデックスされたとしても、話題性がない普通のブログ記事は、トップニュースには載らないようです。
今日だったら台風とか天気に関することを書いて、アクセスが伸びれば載るのかな？という感じだと思います。
でもでも、ちゃんとインデックスされれば、下記のように検索結果に雷マークが付与されます。
いい感じ！
( ラベルがなくなっただけでランキングシグナルからは外れてません )
こちらが参考になると思います。
「スマホ対応」ラベルをGoogleが廃止！？モバイル検索結果から削除される・・・
https://www.peko.co.jp/seo/smartphone/sumaho-corresponding-label-google-abolition
エラーへの対処とまとめ
弊社の今までのブログ記事は、648件です。
毎日20件前後 AMP 対応ページがインデックスされ、
その中で1・2件ほどエラーが上がってきている ( PHP の置き換え漏れ、カバーできない範囲 ) のが現状です。
とりあえずの AMP 化対応はプラグインを使えばすぐに終わり、オリジナルなら半日か1日で終わるけど、その後の対応でエラーへの対処を図っていく必要があり、さらに今後の記事への品質管理も考えなければ ( AMP を意識した記事の書き方のマニュアルの整備など )、検索エンジンに対してよい評価がもらえないと思うので、今回の AMP 対応を通して仕組みづくりが大切で、大変なことだと学ぶことができました。
また、取り掛かり前と後では正規表現に関する知識もより一層蓄えることができたので、総じてプラスになったと感じております。
以上です。