【完全解決】Google Search Consoleから重大なエラー→「AMPページのエラー」は自分のせい？はてなブログの「AMPの関連記事」が関係してる？

最終更新 2017/09/01

CSSやHTMLに疎いので、詳しい方にお聞きしたいです！（9/1現在は解決しました！）

AMPページのエラーは関連記事のせい！？

Google Search Consoleからメッセージがきました。

タイトルは「AMP ページのエラーを修正してください」

お客様の一部の AMP ページが弊社のガイドラインに準拠していないことが判明しました。そのため、該当するページは Google 検索の AMP 関連機能の対象とはなりません。該当するページの一部は Accelerated Mobile Pages レポートでご確認いただけます。

 とのことです。

レポートを見ると28日から変化がありました。

17/08/27
インデックスに登録された AMP ページ数 33
重大な問題のある AMP ページ 0

17/08/28
インデックスに登録された AMP ページ数 32
重大な問題のある AMP ページ 1

17/08/29
インデックスに登録された AMP ページ数 15
重大な問題のある AMP ページ 18

何が問題になっているかというと、「無効な CSS スタイルシート（問題の重大性: 致命的）」らしい。

僕はAMPのCSSはほとんどいじってない(少しだけ最近いじった)。

問題の詳細は「詳細: タグ「style amp-custom」の CSS 構文エラー - 修飾ルールの前にスタイルシートの末尾があります。」

とのこと。

「ページをテスト」をクリックするとCSSのどこに問題があるのか明らかになりました。

「HTML タグの禁止された用法、無効な用法」

「属性「pubdate」はタグ「time」で使用できません。」

この無効な用法がページによって2つだったり5つだったり使用しているようでした。

「ソースコードを表示」。

ご丁寧にも何行目に「pubdate」のタグを使っているかまで教えてくれています。

その行を確認します。

あれ！？関連記事！？

AMPページって関連記事は表示されないですよね。なんでだろうと思っていたんですが…

staff.hatenablog.com

はてなでAMPページにも関連記事が表示されるようになりました！しかも今日から！

え！？これはてなさんのせい！？

と一瞬思ったんですが、ここ2日間くらいちょうど僕もAMPページにアドセンス広告入れる作業したり、それに伴って初めてAMPのCSSいじったり（アドセンス広告入れるためのCSSを入れたり）してたんですよね…。

タイミングがバッチリすぎて何が原因かわからない…。

もしかしたらはてなさんがAMPに関連記事表示させるタイミングで、それに食い合わせの悪いことを僕がやっちゃってるのかもしれないし。
シンプルに完全に僕がなんかやったせいかもしれないし…。

タイミング的にはてなさんを疑ってしまいそうになるけれど、タイミングが一緒だからって人を疑うほどCSSに詳しくないし、自分のせいかなという気もしているんですよね…。

もし同じような症状の人がいたら教えてもらえると助かります！

引き続き僕も自分で調べます！

--------

追記 2017/08/31

はてなブログのデザイン設定、スマホの設定で「関連記事を記事下に表示する」をオフにしたらエラーはなくなりました。

でもこれをオフにしちゃうとAMPページはおろかスマホページにすら関連記事が表示されなくなってしまう…！

time pubdateは日付を表すタグだった

よく見たらわかるんですけど、「time pubdate」って日付を表すタグなんですよね。

関連記事の日付表記のためにこのタグが使われているみたい。

なのでダメ元で日付の表記が変わる方法を調べて試してみました。

www.foxism.jp

こちらのサイトにある日付の表示内容をカスタマイズというやつでやってみたんですけど、やっぱりダメですね。

CSSをいじったところで、結局HTMLタグでエラーになってるので意味ないということですかね。

引き続き調べてみます。

--------

追記 2017/09/01

完全解決！！

どうやらやはり、はてなブログさんの方のちょっとしたミスのようでした。

【8月31日追記】HTML要素の修正を行いました

AMPで配信される記事下の関連記事部分にAMPのガイドラインに準拠しないHTMLの属性を誤って使用しており、本日8月31日（木）午前11時40分ごろに修正を行いました。現在は正しいHTML構造になっています。

引用：AMPで配信される記事下にも関連記事を表示するようにしました（追記あり） - はてなブログ開発ブログ

ここ3日間ソワソワしていましたが、解決してよかったです。

AMPページの記事下に関連記事が表示されるのはうれしいことですし、そもそもはてなブログのAMPページはβ版という扱いでもあるし、開発中にちょっとしたミスくらいすることありますよね、人間ですし。

今は解決してホッとしています。

はてなブログさん、これからもより良い開発よろしくお願いします。