昨日サーチコンソールに検証を確認してもらったページが、今日サーチコンソールで検証結果を見たら「合格」となっていた。
やっぱり、CocoonのAMPタブを更新したあとの手順的には、やり方はこれでOKなんだ！
ということは、続々と記事を再更新する必要があるのか…
今日の検証で保留が３記事。
過去記事の再更新をしないことには、新記事を作る集中力もなくなるよね。
今回の記事では昨日のサーチコンソール検証結果、保留になっている記事の再更新の手順、サーチコンソールのAMP合格がどう重要なのかの３つをお伝えしていきます。
Cocoonの設定でスキンを使ったら、AMPにクロールエラーの警告が出てしまった時の対処法が知りたいかたは、まずはこちらの記事から読んでみてくださいね。
AMPのエラーを修正し検証した結果は合格と新たな保留URL
サーチコンソールを見ると、昨日修正して検証中だった記事は、待つことなく「合格」していてホッとしたのですが、新たに保留としてAMPバージョンのURLが現れていました。
考えられることは、cocoon設定AMPタブの上書きの更新は、「すでに投稿してある記事のCSSには反映しない」ということなのでしょう。
せっせと再更新するしか、他に方法を知らない私、ままんです。
保留のURLの記事を更新してみる
AMPバージョンのURLの正規バージョン記事の再更新は、更新日を特に変更せず更新してみました。
<style amp-custom>ここが長すぎて50000バイトを超えているよ</style>
サーチコンソールの警告は、スキンのスタイルシートのタグが長すぎが理由だったので、もし記事の内容のHTMLに、AMPに対応していない箇所があれば違う警告で教えてくれるはず。
ということで記事内容について、今回は特に手をつけませんでした。
再更新しても合格しなかった場合は、他の部分に問題があるということになります。他の問題が現れたら、それはそれで学ぶチャンスと思って、AMPエラーをマスターしていきましょう。
AMP タグ「a」の属性「href」のURLプロトコルが無効です
サーチコンソールの拡張（稲妻マーク）AMPを開くと、エラーの詳細を見ることができます。エラーの行をクリックすると、どこにエラーがあるのかHTMLタグが「背景色赤系」で表示されます。
あれ？このエラー、修正したような気もするけど気のせいか？…
というわけで、記事に戻って確認。
リンク先のタグはAMP HTMLになっているを確認してみる？
赤い背景色のタグは、a８ネットのタグだなぁ…
Cocoon設定のアフェリエイトタグの短縮URLを使わないで貼ったタグだなぁ…
そうだったんだ！
外部にリンクしたタグの相手側のURLがAMPに非対応だから、検証が不合格って、もしかしたら考えられるよね！
私の知識では、それしか考えられないので、トライ&エラーでやってみよう！
外部リンクのHTMLテキストリンクを、Cocoonのアフェリエイトタグの短縮URLに書き換えて更新してみました。
過去記事の更新するときに更新日の変更をしたかどうかを確認？
もう１つのパターンは【AMP タグ「a」の属性「href」のURLプロトコルが無効です】の警告があって、警告の部分は修正した記事なのでもう大丈夫なはずだったのですが、更新日の設定をイジっていたパターン。
初めて公開した日時
途中までに、警告部分のHTMLの書き換えをして更新したけど、更新日の変更を「更新しない」にしていた記事を改めて更新。
最初に記事を作成したのが2018.10.30です。途中に更新しているはずなのに、「更新日の設定で修正」したか、「更新日を消去」「更新しない」
どうやって更新したのか忘れてますって…
修正して更新したURLの記事をサーチコンソールで検証
記事の更新ができたので、サーチコンソールに検証を開始してもらいました。
検証を開始すると、最初は「失敗しました」が「２」だったのが、「保留」が「２」に変わっています。
サーチコンソールの検証の結果を待って、ほかにも不具合があればまた考えて修正してみることにします。
許可されていない属性または属性値がHTMLタグにあります
今回、「AMPで許可されているHTMLに修正してね」って、言われた部分はテーブルタグでした。テーブルタグは画面を縮小するとセルの並びが変わったり、スクロール対応だったり、慣れないと難しく感じてしまうのです。
どう修正したらいいのか、いますぐ理解できなくて赤い部分のタグを取り除いて、あっさりと単純なテーブルタグにして更新してみました。
更新したページのレスポンシブテストの画面には、特に変わった様子は出ていないようなので、余分なタグだったのでしょうか。
久しぶりにレスポンシブテストの画面を見て、グローバルメニューがグローバルメニューとして機能していないことに気がつきました。
他のブラウザからはどう見えているのか、テーマのアップデートなどがあった時には、Cocoonに限らずとも、ちゃんと確認したほうがいいのかもしれません。
更新した記事の日付
AMP Validator Crome でページの状況を確認は簡単
Google Chromeの検索窓に【AMP Validator Crome】と入力すると、AMP ページのテストとプレビューができます。
今ほど検証した記事↑のURLを入力して【テストを実行】してみました。記事内のテーブルタグの部分は大丈夫？
警告のタグ
<table class= 許可されていない属性または属性値がHTMLタグにあります>
こちらが検証結果です。
よかったです。
モバイルから見ても、離脱されにくい瞬足ページになりました。
まとめ
AMPのHTMLは、いくつかの制限のあるHTMLです。
AMPの警告は、Cocoonだからこの程度で済んでいるのではないかなと、私は思います。WordPressの種類は世界中に数え切れないほどあるのですから。
AMPが発表されたのは2016年、本格的に動き出したのは2018年くらいからなんですよね。だから、WordPressにCSSを追加して長すぎるCSSのブログは、私と同じように警告が出ているはずなんです。
- AMPのエラーを修正し検証した結果には合格と、新たな保留URLが現れるけど焦らず修正箇所を見てみよう
- 修正した記事はその日の日付で更新してみよう
- 【AMP タグ「a」の属性「href」のURLプロトコルが無効です】のタグの種類や記述の修正には色々なパターンがある
- 【許可されていない属性または属性値がHTMLタグにあります】は、とりあえずタグを減らして軽くしてみる
- ブラウザのレスポンシブテストで、表示の崩れがないか確認すると安心だよ
- AMP Validator Crome でページの状況を確認を確認すると便利
モバイルWebの高速化、それをしないとどんなに素晴らしい記事やコンテンツでも、モバイルでは１秒の遅れが離脱に繋がってしまうということで、警告には早く反応して修正するようにしましょう。
インターネット上にインデックスされていて、インデックスカバレッジの有効数がどれだけ多くても、モバイルで表示スピードや表示ができなくては「ゴミ」ってわけなんです。
サーチコンソールの警告は各ページにさまざまな要因で、エラーが複数確認されるようです。１つ修正すると次のタグの修正が要求される状況もあります。
警告されたエラーの部分を修正したら、必ず更新してもう一度検証してみましょう。
エラーを修正しても、うまくいかないときはCocoon設定のキャッシュを削除から、AMPのキャッシュを削除してみます。
昔、デスクトップパソコンからノートパソコンのほうにユーザーが増えてきた移り変わりの時代に、HTMLに禁止タグが増えました。
その頃と似たような状況だなと思います。ブラウザ動作テストや、どんな記述のタグにすればいいのか、タグ打ちテストの掲示板まであったくらいでした。
今、移り変わりの最中です。長年個人サイトを運営してきた方々も、スマホで読めなくては困るからホームページ代行を頼んだりするくらい。だから今、しっかり諦めずに、覚えていくチャンスなんです！
学んで自分の知識にしていくには、トライ&エラーが大事です。でも、基礎知識を習得しながら進むほうが確実ですよね。
記事をひとつひとつ確認していくのは大変な作業ですが【AMP Validator Crome】を利用すると、現在の状況がわかります。
Chromeウェブストアで【AMP Validator】の拡張機能を追加しておくこともできます。
プラグインがAMP HTMLで作られていなかったりだとか、AMP警告の原因はいろんなところから起こります。ひとつひとつ丁寧に、意味が分かるまで修正と検証をして、スマホでも離脱されにくいページ作りをしていこう。
今、AMPのエラーの修正からAMP HTML CSSを覚えるってチャンスなんです！
![[書籍] 書きながら覚えるHTML＆CSS入門ワークブック【10,000円以上送料無料】(カキナガラオボエルHTML&CSSニュウモンワクブック)](https://i0.wp.com/thumbnail.image.rakuten.co.jp/@0_mall/gakuhu/cabinet/m97847741/m9784774196268.jpg?resize=128%2C128&ssl=1)
