wpテーマトールを使って感じたamp&pwaについて ~amp編

  • 2019年8月29日
  • 2019年10月10日
  • ideas

このブログを立ち上げ、気づけば2ヶ月が経っていました!

2ヶ月間の中で、良いこともあればうまくいかないこともいっぱいあったんだけど、今回は2ヶ月の節目ということで、ここまでの記録的な内容にしてみようと思います。

 

特にその中でも、このブログで使っているWP有料テンプレートのトールについている2大機能。AMPとPWA!この二つについてこの2ヶ月の中で起こったことや感じたこと、行った対策などをまとめてみます。

また折角なので、それ以外にもトールのテーマ上で気づいたことなどもちょこちょこ書いてみようと思います(◜◡◝)

トールのAMP機能について感じたこと

先々のことを考えると、グーグルが推進しているAMP機能は一度入れてみたいと思っていました。

既にあるサイトにAMPを追加するよりは、新規立ち上げのタイミングで導入した方がスムーズに感じたので(エラーなど)、いい機会だと思って入れてみることにしました。

 

トールだったらAMPの設定がワンタッチで終了という手軽さと、レビューにも「トールのAMPはエラーになりにくい」と書かれていたこともあり、物は試しで入れてみました。

※AMPに対応しているテーマはまだ少ないので、既に対応しているトールに単純に興味が湧きました

ただ、トールのAMPは問題点が多く、最初から使ってない人や途中で外した人もちらほら見受けられたので、そこは正直気がかりでしたが、やらないで後悔するよりは、一度やってみた方がスッキリすると思う性質があるのでその衝動のままに進んでみました(笑)

ブログ公開後、徐々にAMPエラーが起き始める

公開直後は全く何も起こらず、逆に拍子抜けしたくらいです(笑)

このまま何も起こらないでほしいな♪・・という私の希望は儚く砕け散り、ブログ公開から1~2週間後、一つまた一つとサーチコンソールでAMPエラーの表記が見られるようになりました(笑)

しょうがないので一つ一つエラーの内容やエラーの該当箇所をサーチコンソール上で見ていると、画像を入れていない記事なのに「推奨サイズより大きい画像を指定してください」と意味のわからない指示が(笑)

(その後しょうがないので、試しに画像を入れてみたらエラーが解消したページもありましたw)

 

しかもその他のエラーページも、エラーが起きている部分を見てみると、投稿画面からは変更ができない箇所でのエラーばかりでした(笑)

「きっとphpの知識がある人だったらどこをどう直せばいいのかピンと来るんだろうなぁ」と思いつつも、私にはお手上げ\(^o^)/

 

ちなみにトールの機能では「お知らせ」という機能があって、私も活用させて頂いているのですが、謎にこのお知らせページはエラーが続出していましたっ(笑)

 

大したこと書いてないお知らせ機能でエラーが続出するのはどうなのかw?

むしろ内容もなく文字量も少ないお知らせページがindex表示されても、悪いことしかないのでは?

 

という結論に達したので、お知らせページ全体をnoindexにして様子を見た所、一週間ほどでAMPエラーは徐々に消えていきました。

(エラーが消えるにはある程度時間がかかるようです)

noindexを個別に設定するならyoastSEO

トールは標準装備で、ページごとにnoindex化をワンタッチで可能にする機能がついています。

ただお知らせページは何故かnoindexに対応してなかったので、プラグインのyoastSEOを入れて、個別noindexができるように設定し直しました。

 

トールはyoastSEOやAllinOneSEOを入れなくてもSEO対策ができる=高速化可能という特性があったため、極力SEO系のプラグインは入れたくなかったのですが、背に腹は変えられず結局入れることにしました(;;)

※AllinOneSEOと比べるとyoastSEOはかなり軽めのプラグインなので、高速化対策には向いていると思います!

(でも本当は入れたくなかったっ・・笑)

yoastSEOを入れても特に表示速度は変わらなかった

ちなみに心配だったので、Googleのテストマイサイトでページの速度表示を調べたところ、最初と変わらず2秒ちょうどという表示速度だったので一安心でした。

早くも遅くもなく平均的な結果ですが「トール=爆速」が売りのテンプレの様なので、本当はもう少し早いとありがたいw・・(汗)

エラーがどうしても解消されない時は切る!

あと、どんなに頑張ってもどうしてもAMPエラーが消えてくれない投稿ページは、全部AMPを切ってました(笑)

※トールはnoindex同様、amp個別非対応も、ワンタッチでできます(でも投稿ページのみw)

ちなみにアマゾンのリンクを貼ってるページは、ほぼ100%エラーが来てました!(笑)

 

その話マジでよく聞く。

広告の形を変えたり、a8経由にしたり、色々しましたが全部パッとしなかったですねぇ(笑)

そこまで細かくやってたけど・・結局AMP自体切ったw

何とかできるものなら何とかしたいと思って対応してたのですが、私は重大な点を見落としていたんです!

AMP対応すると、見た目がすっごい ダサくなるっっ/(^o^)\

 

正直、私はそれまでAMPに対応させたページをじっくり見ていなかったんです。

自分で投稿内容を確認する時も、表示されるのは通常ページでした。

 

通常ページのレビューは見れても、AMPページのレビューは見れないので、なんかこう、ないものだと思っていたんです。都市伝説的な(笑)

 

でも実際は、一つの投稿に対して通常ページとAMPページが同時に存在していて、見てくれる人も双方に分散される、という形だったんです。

ちなみに、このことに気づいたきっかけは、自分がツイッターで拡散した記事をツイッター経由で開いてみた時です。

 

普段は自分が拡散したリンクを自分で踏むことはないんですが、その時はたまたまツイッター経由で自分のブログを開いたんですが、

装飾が見事に排除されてる\(^o^)/

なんかもう、うちのブログでおなじみのヒヨコとニワトリのふきだしが、むっちゃブサイクな猫と犬に変えられてるし(笑)

※トールのデフォルトキャラです(汗)

太文字とか大きめの文字とか色とかも全部排除ww

ここまで見た目変わると、これ下手したら、文面ニュアンス変わって来るぞぉぃ(汗)

・・と危機感を覚えました(笑)

 

考えてみれば、何と言ってもAMPはツイッターと共同開発しているそうなので、そりゃ表示されるのもAMPになるわな・・・と納得した瞬間でもありましたが(汗)

このことに気づいた瞬間、私はAMPを外すことを決めました/(^o^)\

 

さちこんには「AMP対応」と書かれているのに、検索画面に雷マークが出ない怪奇現象w

ってことで、無事AMPを外すことで方向性が決まった訳なのですが、さすがに理由は見た目の問題だけじゃなかったですよっ。

 

タイトルの通り、サーチコンソール上は「AMP有効」と書かれているのに、有効になっている筈のページを見てみても、雷マークがどこにもついていません(笑)

「雷マーク=AMP」やんっ。これ誰がどう見てもうちのブログAMP対応してないやんっ(;;)

ということで、グーグルのAMPテストもしてみましたが、見事に玉砕\(^o^)/

 

有効になるだけではAMPへの対応は完了していない、ということなんだと思います。

ただ、何をすれば良いのかは結局わからずじまい。

 

そんな色んな事情が複雑に絡み合った結果、AMPを切りました(笑)

 

ただAMPを切ったって、たいそうな響きですが、実際にやったことはトールのカスタム画面でAMPチェックを外しただけ。

ものの0,5秒です(笑)

 

本当にこれだけで大丈夫なんだろうか・・正直ちょっと不安になりました。

でも、何もやりようがないのでしばらく様子を見ることにしました。

※二週間ほどでAMPエラーページやAMP対応ページが徐々に減っていきました!

 

この間に心配だったことは、ウチのブログは今AMP対応なのかそれとも非対応なのか?ということでした。

というのも、Googleリキャプチャの設定やアドセンスなど、AMP対応か否対応かでそれぞれ設定の方法が変わるようだったからです。

 

むしろ、公開当初はリキャプチャの設定で「AMP対応サイト」の欄にチェックを入れてなかったことが原因でコメント機能が使えなくなっていました。

親切にご指摘を頂けたお陰でそれに気づき、AMP対応にチェックを入れたことでコメントが正常に使えるようになったんですね(;;)

 

AMP切ったからもう一度チェックは外してみたけど大丈夫かなぁ・・心配だなぁ・・とはやっぱり思ってしまいます(´ω`。)

広告でも起きたAMPの怪奇現象

このブログはお勉強を推進するという目的があるため、うちで実際に子供や私が使った教材を紹介しています。

 

その時に使っている広告はA8さんとafbさんなのですが、どちらも大手なだけあり、きちんとAMP対応コードを作ってくれています。

なので最初私は意気揚々に,ampコードを得意げにブログ上に貼った訳なのですが、プレビューかけると

なんも見えない/(^o^)\ 真っ暗

しょうがないから、AMP非対応の通常広告を貼ったところ、ちゃんと表示がされたんです。

だから、そのままずっと通常コードを貼ってました(笑)

 

a8さんはborder=”0″を外せばエラーが起きないと色んな方が書いていたので、その通りやって見たら本当に大丈夫でした!afbさんはそのまま変えずに貼ってましたが問題なしでした(v´∀`*)

むしろそれAMP外す時も楽なヤツ(笑)

 

つまり、ここまでの話をまとめると、リキャプチャは「AMP対応」にしていなかったからエラーになったけど、ASPの広告リンクはampコードを貼るとエラーになる。

なんのこっちゃか分かりませんでした( ´.‸.` )

 

今回、AMPで悩んでいる方の解決策を提案できるお話にできれば最善なのですが、正直今回うちのブログでとった対策が最善かどうかもわからない状態です。

(もっと良い方法があったり、もっと根本的な理由があるのかもしれないですよね)

手探り感が半端ないので、結論は出さず一つの体験談として参考になれば幸いです。

とりあえず、「下手に入れない方がいい」と言ってる人が多い理由は身を持って理解した、という感じですね\(^o^)/

 

あと!AMPの導入が出来るからトールにしよう!と思っている方は別にトールじゃなくても良いかもしれません。お伝えした様にトールのAMPは未だに不完全(2019年8月末)だし、あとAMPを入れたかったらAMPのプラグインで十分補えます!笑

もぶこむ。とりちき。どうしたものか困惑

 

気づけばAMPの話で長くなりすぎた・・(;;)

書いててやっと気づいたんですが、私は自分で思ってた以上にAMPに苦しめられていたようです。

 

書きながら「そういえばこんなこともあったぞ!あんなことも!」なんて足していくうちにとんでもない量になってしまいました_| ̄|○

 

長くなりすぎて申し訳ないので、PWAについてはまた明日にでも続きを書かせていただければと思います(;;)

 

この計画性のなさを笑えこのやろーっ。

ゆきちき。もぶこむ。ライン公式アカウント友達募集中

なまらおすすめ。最新情報 ( *´ω`* )
>LINEお友達を募集しています!

LINEお友達を募集しています!

ゆきちき。LINEアカウントでお友達を募集しています!もぶこむ。&動画の感想やご要望、その他リクエストなど頂けるとむっちゃ励みになりますっ。お友達になってくれた方には、たまにゆきちき。のつぶやき&更新情報なんかが届いたり、ごく稀に何か不思議なものが届くかもっ(´`*)笑

CTR IMG