「ダメ人間2.0」by地雷屋 リアルタイムでレビュー中!

【解決】AMPエラーを知識0で対処する方法

「暇つぶしにもならないな」って人はこちら
「暇つぶしにもならないな」って人はこちら

このページは…

AMPページでエラーが発生した場合についてのページです。
目を通しておく事で、AMPページでのエラーに対処することができるようになります。
このページでは、AMPエラーの型や原因、影響、対処法などについて、簡単な説明を行っていきます。

結論

AMPエラーは、大した問題ではないです。
殆どの場合、簡単に解決することができます。
また、放っておいても特に悪影響はないという側面もあります。
ただし、Google 検索結果に表示されなくなるという影響はあります。

次に、こうした結論に至った理由を説明します。
AMPエラーに関して、集めた情報を公開します。

おすすめな人

  • 「AMPエラーを解決したい!」
  • 「AMPエラーの通知が来て不安…」
  • 「解決できなくて困っている!」
  • ……など

AMPエラーについて

AMPエラーについては、これらの項目に分けられます。

  1. 経緯
  2. 主なAMPエラーの型
  3. 影響
  4. 主な原因
  5. 確認
  6. 解決できない場合
  7. その他

それぞれ解説していきます。

経緯

  • ある日メールが来た
  • 「AMPのエラーが検出されました」的な

  • Google search console(サチコ)で確認してみた
  • 一通り調べて修正を行った
  • 全て解決とはいかないまでも、特に問題はなくなった為、書き残しておく
  • AMPとは、Googleが推進するモバイルページ高速化の仕組み

主なAMPエラーの型

エラーと警告の2種類があります。

まずはエラーについて

“タグ「a」の HTML 属性「href」の URL プロトコルが無効です”

    誤字脱字とかをチェック

    タグの閉じ忘れ、URLの打ち間違い、半角全角、空白など

  • 修正したのに検証できない
  • “検証プロセスを続行できません”

    放置した

    いつの間にか消えてた

“許可されていない属性が HTML タグ「FORM ❲method=POST❳」にあります”

    Cocoonの設定でAMPしない設定にする

    記事の編集画面→AMPをOFF

  • 問い合わせというか、コンタクトフォーム プラグインに原因があるらしい
  • form actionはAMPでは現在サポートされていないようだ。

“このページには AMP コンポーネントの「script」タグが必要ですが、このタグがありません。”

“HTML タグに必須属性がありません。”

  • 検索順位に影響はない?
  • cocoonを利用している場合、設定でAMPロゴが空になっていないか確認
  • 何かロゴを作って設定する
  • ↑が面倒なら、次のURL を設定すると修正できる
  • https://ドメイン/wp-content/themes/cocoon-master/images/no-amp-logo.png

    デフォルト画像を使用するURL

“属性「〜」はタグ「a」で使用できません。”

  • 「投稿編集」でエディタのテキストモードとビジュアルモードを切り替えて「更新」→解消?
  • 問題の属性を削除すれば直る?

“タグ「amp-iframe」の属性「src」の URL プロトコル「http」が無効です。”

  • AMPでは利用できないiframeを記事内に挿入している場合、このエラーが表示される
  • 削除して解決

“は利用できません。”

  • 原因は、コメント欄で「link」ボタンを利用する時に生成される「rel=”nofollow noopener”」という属性?
  • 「rel=”nofollow”」に変更すればOK

    プラグインのSearch Regexを利用して、一括で置換すると便利

  • コメントのリンクは必ず「rel=”nofollow”」が必要

その他

エラーの他に警告もある

警告

  • “必須の構造化データ要素のエラー”
  • “HTML タグに同じ属性が複数含まれています。”
  • “推奨サイズより大きい画像を指定してください”
  • 画像の横幅が1200px以上ないとダメ?

影響

  • Google 検索結果に表示されなくなる。
  • インデックスはされる
  • Google曰く、悪影響はない

Q. エラーが出ているAMPページがあったとしても、クロールやインデックス、ランキングには悪い影響を与えないはず。 「与えない」と言い切ってもらえる? A. 与えない。エラーが出ていてもネガティブな影響は出ない。エラーのあるAMPページが有効なAMPページとして認識されないだけ。

引用元: 「AMPエラーはランキングに悪影響を与えない」ほか、Googleのジョン・ミューラーにAMPについて質問してきた at #SMX Munich 2016 | 海外SEO情報ブログ

主な原因

確認

  • メールが来る
  • 「AMPエラーが検出されました」
  • サチコなどで対処

    サチコで確認

  1. 「AMP」
  2. エラーの型を選択
  3. 「例」のURLをクリックすると、エラー個所が表示される
  4. 「インスタンス」でエラー個所を選択
  • サチコを見てエラーの型やメッセージを確認
  • サチコの指示に従う、エラーメッセージで検索などして対処

    Chromeのデベロッパーツールで確認

  1. AMPページのURLの末尾に「#development=1」を付けてページを表示させる
  2. デベロッパーツールを起動する
  3. ショートカット、もしくは右クリックで「検証」
  4. Consoleメニューを選択する
  • 1行目に「Powered by AMP ⚡ HTML – Version xxxxxxx」が表示→少なくともAMPページとしては認識されている
  • エラーがある場合、その後にエラーが指摘される
  • 正常であれば、「AMP validation successful.」 が表示
  • Firefoxでも「開発ツール」の「Web コンソール」でチェック可能

    手順はChromeとほぼ同様

解決できない場合

    諦める

  • AMP表示しない
  • 記事の編集画面や、テーマの設定画面でAMPをOFF

    noindexにする

  • サイトマップの設定を忘れずに
  • カバレッジエラーが発生するので

  • XML site mapでカテゴリーまたは記事を除外する

    待つ

  • サチコのタイムラグやクロール待ちということもある
  • URL検査の「インデックス登録をリクエスト」で、早くエラーが解消される可能性はある
  • しかし、リクエストには使用回数制限がある

その他

  • cocoonはAMP化に対応している為、積極的に利用したいところ
  • cocoonならAMPページのテストや表示も確認できる
  • アフィリエイトやってる人にはAMP用広告がある
  • ページ表示速度は速い方がいい
  • AMPエラーを修正しても、反映されるまで時間がかかる
  • リンクスイッチはJavaScriptを使用する必要があるので、AMPページで使用できない?
  • アイキャッチが無いと、AMPエラーが出る?

まとめ

まとめると、このようになります。

  1. ケアレスミスによるものが多い
  2. 放っておいても悪影響はない
  3. 修正しても反映されるまで時間がかかる
  4. 初心者のうちは別に気にしなくていいのでは?

しかし…

AMPエラーに関しては、放っておいても問題ないようです。

とはいえ、ページの表示に関してチェックするのは重要です。

快適なサイトにする為には、主に下記の項目に関してチェックする必要があるでしょう。

  • 表示の正確さ
  • 読込の速さ
  • デバイスごとの見え方

これらの条件を満たすことができれば、快適なサイトを作ることができます。

快適なサイトを作ることができれば、アクセスアップに繋がります。

では、ページの表示に関してチェックするには、どうすれば良いのでしょうか?

というわけで、次のページです。

次のページ

ページの表示テスト関連

【要約】

ページの表示テストについてのページです。

AMPやレスポンシブ・表示速度など、様々な項目でページの表示が正常に行われているかをチェックします。

【意味】

目を通しておく事で、快適なサイト作りを図ることができます。

快適なサイトを作ることは、アクセスアップに効果的です。


Webマーケティング
Siri
Siri

『悪口を広めるのは、やめてくださいね』

記事の最後に「シェアしてください」って入れるのが定番になってますが、あれ嫌ですよね。
企業とかのキャンペーン企画でならまだしも、普通のブログをシェアしたところでユーザーには何のメリットも無いわけですから。

でも、SEOについて学んで、サイトへのアクセスを安定させることができれば、そんなシェア乞食サイトにはならずに済みます。
今回触れた内容をしっかり理解して、ユーザーの為になるサイトを生み出しましょう!

Siri
Siri

シェアしてください

広告
Hey,Siri!「ニート 生き方 どうすれば」を教えて!

自由なコメント