WordPressを一発でAMP化してくれるプラグインとして有名な「AMP」ですが、このブログを訪れてくれるかたの大半が 「iPhone + Safari」 か 「iPhone + Chrome」 なんですよね。
だからというか、これは完全に自分のミスなのですが……
実機での検索結果の確認などをしておりませんでした。
その結果、iPhoneで検索をかけて見に来てくれている方がAMPのページに飛んでいるのを知らなかった(ﾉ∀`)
AMPページの修正をしなくてはいけませんが、とりあえず修正しなければいけないと思うところをあげていこうと思います。
AMPプラグインに対応しただけの見え方
これが記事画面の一番上ですね。
WordPressで設定しているものがそのまま表示されているだけでなんとも味気ないものとなっております。
その次に表示されるのがWPPをつかった目次なんですが、開閉できないだけではなく表示もCSSが適応されていない状態になっています。
これはWPPのCSS適応を解除しているからだと思うのですが、正直良い見た目だとはいえません。
次は「カエレバ」の商品リンクの画像ですね。
誰がこれでクリックするんだと……
毎日クリックされていますが、iPhoneから見ている人はまずクリックしていないでしょう。
私だったら絶対にしません。
これがフッター部分になりますが、私のブログはコメント欄を開放していないので「コメントを残す」なんて機能があっても邪魔なだけです。
そのうえ他記事への導線が自分で記事内に貼っているリンクしか無いため、この記事から別の記事を読むということがほぼありえません。
そりゃあ直帰率高いはずだよ……って感じです。
最後が見出し。
見てもらえばわかるように、文字サイズが変更されている以外に装飾が一切なされていません。
これでは見出しと本文の区別がつきにくいので、読んでくれている方に不便をかけています。
AMPページの修正箇所を考える
とりあえず修正しなければいけないと思うところと、その理由を上げていきます。
ヘッダーとフッターの修正
当たり前のことですが、AMPページではない通常のページと違いがありすぎます。
これではAMPページを見た方が他のページを見たときに、どうして見た目が違うんだ？ と思ってしまうはずですので、通常ページと同じに統一しなくてはいけません。
見出し+本文内の装飾+フォントの変更
本文と見出しをはっきりと区別させるために見出しの装飾は必須です。
これは通常ページのCSSをそのまま流用すれば問題ないのですぐに解決できますね！
フォントもすぐに変更できるんので問題はないでしょう。
関連記事や新着記事一覧などの他記事への導線が不足
これがあると無いとでは回遊率が変わってしまうので、早急に改善しなければいけません。
PVの底上げにもつながるはずですので、絶対に設置するようにしましょう！
カエレバなどのツールのCSSを修正
商品リンクを貼っても見た目がゴミでは誰も購入してくれませんし、クリックもされません！
これもCSSの設定をコピペするだけで済むはずなので、出来る限り早く修正しましょう。
プラグインを直接修正するのは危険
これらの修正をするさいに、プラグインを直接編集してしまうのが一番手っ取り早いのですが……
プラグインを直接編集すると「AMP」の更新があったとき、せっかく編集した場所がすべてもとに戻ってしまう可能性があります。
ですので、使用しているテーマの中に「AMP」という名前のフォルダを作り、そこにそれ専用のファイルを制作しなくてはいけません。
ぶっちゃけ面倒ですね(;´Д｀)
0からAMPプラグインに対応しているように作らなければいけないので、通常の記述方法と異なったりすることもあるでしょうし……
まとめ
「AMP」プラグインは非常に便利なものですが、AMP対応ページをカスタムできる能力がないとクソみたいなデザインのページを吐き出します。
なので、HTML+CSS+PHP+javaScriptの知識を持っている方は、導入してすぐに改変することをオススメします。
私は今からその作業に入らないと……(;´Д｀)
コメント