スポンサーリンク

2017年11月24日 Google Search Console Teamからのメール AMP ページのエラーを修正してください そして、修正しましたの件(基本が大事)

スポンサーリンク
はてなブログProでブログを始める
スポンサーリンク
スポンサーリンク
スポンサーリンク

問題発生

今朝、10:00頃にメールを

チェックしたところ

Google Search Console Team

からメールを頂いていました。

AMP ページのエラーを

修正してくださいとのこと。

 

“Search Console
AMP ページのエラーを

修正してください

三日月の夜 | 役に立つ情報を記事にします

のウェブマスター様

お客様の一部の AMP ページが

弊社のガイドラインに

準拠していないことが判明しました。

そのため、該当するページは

Google 検索のAMP 関連機能の

対象とはなりません。

該当するページの一部は

Accelerated Mobile Pages

レポートでご確認いただけます。”

 

f:id:mikazuki1:20171124132704j:plain

早速、メールにあった、

“レポートを開く”

をクリックすると、

Google Search Console

が出てきました。

これです。

f:id:mikazuki1:20171124132820j:plain

どうすればいいのか、

ググりました。

でも、他の方のブログでは、

答えは見つかりませんでした。

よって、今、

この問題に直面している方の

参考になれば、と思い、

記事にしました。

 

ちなみに、はやい段階、

まだ記事が少ない段階で、

アラートして頂いたのは、

不幸中の幸いです。

100記事以上も書いたあとだったら、

どの記事のどこにエラーがあるのか、

障害箇所の一次切り分け作業が、

大変になるところでした。

 

このエラーの履歴は、

ダウンロードできます。

あとあとのために、

ダウンロードしておいた方が

いいと思います。

csvファイルで

ダウンロードしたところ、

私の環境では、文字化けしました。

よって、Google ドキュメントで

ダウンロードしました。

 

 

>

スポンサーリンク

私が修正した手順

 

この画面の右下にある>>を

クリックします。

すると、この画面が出てきます。

f:id:mikazuki1:20171124134148j:plain

どれでもいいので、

右にある>>をクリックします。

すると、この画面が出てきます。

 

f:id:mikazuki1:20171124134345j:plain

この画面で1のAMPリファレンスを

クリックすると、AMPについての

解説があります。

いちおう、一通り読みました。

しかし、CSSに詳しくない私には、

レベルが高い内容でした。

AMPについては、なおさら、

なに、それ、おいしいの?

です。

 

2のページをテストをすると、

この画面が出てきます。

f:id:mikazuki1:20171124141444j:plain

 

丁寧に、エラーの箇所を

指摘して頂きました。

ただ、私には、ググっても

理解できませんでした。

数時間かかりました。

 

下にあるAMP URLの右をクリック

すると、この画面が出てきます。

f:id:mikazuki1:20171124141339j:plain

 

元のURLの末尾に ?amp=1 が

ついているURLです。

AMPに対応したスマホから

このブログを見ると、

こうなっているらしいです。

タイトルから下が、真っ白です。

CSSがエラーだからだそうです。

らしいと書いたのは、

はてなブログのプレビュー画面で、

AMPでも普通に見えているので、

何がエラーなのか、わかりません。

また、私が持っている、

Androidのエクスペリアでも

iOSのiPadでも

普通に見れていますので、

謎は深まるばかりです。

 

この機会に、CSSとAMPについて、

勉強しようと思いました。

今回は、はしょります。

 

 

>

スポンサーリンク

私が思いついたこと

このエラーで思い当たったのは、

AMPの画面で、

アドセンスの広告が表示されないこと。

それと、昨日、はてなブログの

設定からではなく、個別の記事の

HTML画面で、アドセンスの広告

ユニットで作ったAMPのコードを

最初の行に貼り付けていったことです。

これで、アドセンス違反になることで、

AMPでもエラーなのか、

と思いました。

そして、個別の記事ごとに、

また、HTML画面で、

AMPのコードを削除して、

記事の更新をすれば、解決、

と思いました。

ただ、この作業は、

とても時間がかかるので、

何か、他に手はないものか、

と思案しました。

そして、思いついたのが、

これです。

 

スポンサーリンク

今回の答えが、これです。

はてなブログのAMP対応は、

まだ、試験中なので、

もしかしたら、

スマホ用の設定、一番下にある

詳細設定をクリックした所にある、

AMP用CSSを

いじればいいのかも、と。

そして、貼り付けてあった、

コードを一度全部、

バックアップとして、

メモ帳に貼り付けて保存してあと、

AMP用CSSの欄を全部消去しました。

結論から書くと、このまま保存して

終了でエラーは、出なくなりました。

ページをテスト、

をクリックすると

この画面が出てきました。

 

f:id:mikazuki1:20171124142644j:plain

せっかく、設定していた

AMPのコードを削除した

結果がこれです。

有効なAMPページです。

皮肉なものです。

AMPのコードがないのに、

有効とは。

私の修行が、

まだまだ足りない

ということです。

 

このあと、この画面にある、

Google に送信をクリックすると、

この画面が出てきます。

f:id:mikazuki1:20171124142803j:plain

Google にページが

インデックスされる、

予約ができました。

 

その前に、

貼り付けてあったコードの一部に

コピペのエラーがあったかどうか、

確認する為に、

ひとつずつ貼り付けて検証しました。

その結果、どのコードを

貼り付けても、

エラーになりました。

よって、これは、もしかして、

はてな側の問題なのかも、

と思いました。

ググった結果でも

はてな側の問題を指摘している

ブログもありました。

 

私がどんなコードを

貼っていたかは、

長くなりますので、

また、別の記事で書こうと思います。

とりあえず、今回の結論は、

バックツーザフューチャー

ではなく、

バックツーザベーシック

ということで、

基本に戻る、白紙に戻す、

デフォルトに戻す、

ということです。

AMP用CSSの欄を

ブランクにしたあと、

AMPのURLをクリックすると、

この画面が出てきました。

 

 

f:id:mikazuki1:20171124141254j:plain

 

正常にブログの画面が出てきました。

ちなみに、

Googleにページが

インデックスされる

予約ができても、

すぐには反映されません。

よって、

 

Accelerated Mobile Pages >

無効な CSS スタイルシート

(問題の重大性: 致命的)

 

の画面も、修正したあと、

数日、エラーの状態が、

続くと思います。

サイトマップも2種類

送信してみました。

しかし、このエラー画面は、

そのままです。

次回、クロールされるのを

数日待つしかないようです。

 

さらに、ちなみに、

スマホ画面の上に設定した

アドセンスのコードは、

このAMPのエラー問題とは、

直接は関係ないようです。

(間接的には、ありそうです。)

よって、各個別記事のHTMLで

貼り付けたアドセンスのコードは、

そのままにしてあります。

もし、アドセンスで注意されたら、

消去する予定です。

 

では、また。

コメント