【AMP修正】Cocoon使用時、AMPページエラーの対応方法。

スポンサーリンク

 

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

現在、Wordpressのテーマは『Cocoon』を使わせて頂いております。

AMPへすぐ移行できる素晴らしいテーマです。

大感謝。

 
AMPを有効にしたら、エラーが山のように出てきますので対処が必要ですが、今の所、自分の環境においては、AMPエラーの全てが自分のせいでした。

 
単純に、昔の埋め込みリンクがそのままだったり、昔のタグがそのままだったり、HTMLの単純なミスだったりがすごく多いです。

これを機に、ブログをクリーンな状態にできたらいいな、という思いもあり、一つ一つ対処して行くことにしました。

 

その中で、Coccon使用時AMPページのエラーを自分で解決した対処方法を羅列します。

全く詳しくないので、〇〇したら治ったと思う。。みたいな感じになっています。笑

その辺りを許容して頂いて、自分の環境とは違う部分もあるかもしれませんが、解決の何らかの参考になればと思います。

 

と、その前に、まず、Cocconを最新版にアップロードしましょう。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

 
AMPの不具合情報なども載っている公式フォーラムはこちらです。

Cocoon フォーラム
Cocoon ディスカッション掲示板

 
 

  1. AMPエラーの確認方法
  2. AMPエラーの修正方法
    1. タグ「amp-iframe」に不完全なレイアウト属性が指定されています。たとえば、属性「width」や「height」を指定してください。
    2. タグ「amp-iframe」の属性「src」の URL プロトコル「http」が無効です。
    3. 拡張機能「amp-animation」がこのページで検出されましたが、使用されていません。この拡張機能を削除してください。
    4. 拡張機能「amp-auto-ads」がこのページで検出されましたが、使用されていません。この拡張機能を削除してください。
    5. 拡張機能「amp-position-observer」がこのページで検出されましたが、使用されていません。この拡張機能を削除してください。
    6. 必須タグ「body」がないか、正しくありません。
    7. タグ「a」の HTML 属性「href」の URL プロトコルが無効です
    8. タグ「amp-img」のレイアウト「height」に含まれる属性の値が無効です
    9. 属性「clear」はタグ「br」で使用できません
    10. 許可されていない属性が HTML タグ「a」にあります
    11. タグ「iframe」はタグ「noscript」の子孫としてのみ使用できます。「amp-iframe」ではありませんか?
    12. タグ「style amp-custom」で指定された作成者のスタイルシートが 50000 バイトの上限を超えています
    13. タグ「a」の HTML 属性「target」の値が無効です
    14. タグ「img」はタグ「noscript」の子孫としてのみ使用できます。「amp-img」ではありませんか?
    15. 許可されていない JavaScript 属性がタグ「a」にあります
    16. 許可されていない属性が HTML タグ「p」にあります
    17. 許可されていない属性が HTML タグ「p」にあります
    18. カスタム JavaScript は使用できません
  3. 最後に
スポンサーリンク

AMPエラーの確認方法

AMP テスト - Google Search Console

とにかく、ここにAMPリンクを入れて「テストを実行」を押します。

どういうエラーで、それはどこで、どういう風に修正すればいいかが出てきます。

 
AMPエラー

AMP修正

緑になればOKです。
 
Google Search Console』でエラーの一覧が見られるので、一つのエラーの修正が終わったら『修正を検証』を押して検証、次のエラーに進んで、というやり方で修正していっています。

 
 

AMPエラーの修正方法

 

タグ「amp-iframe」に不完全なレイアウト属性が指定されています。たとえば、属性「width」や「height」を指定してください。

古いYoutubeを埋め込みリンクを貼っていたところを一旦削除して、新しい埋め込みリンクを貼り直したらOKが出ました。

古いGoogleMapの埋め込みとかも貼り直したらOKが出ました。

古いアフィリエイトリンクとか、アフィリエイト埋め込みとか、そういうのも削除したらOKが出ました。

古いツイッターの埋め込みリンクの貼り直しでOKが出ました。

古いインスタグラム埋め込みリンク貼り直しOKが出ました。

 

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

こちらも上記と同じでした。

古いYoutubeを埋め込みリンクを貼っていたところを一旦削除して、新しい埋め込みリンクを貼り直したらOKが出ました。

古いニコニコ動画の埋め込みリンクを貼り直したらOKが出ました。

古いGoogleMapの埋め込みとかも貼り直したらOKが出ました。

古いアフィリエイトリンクとか、アフィリエイト埋め込みとか、そういうのも削除したらOKが出ました。

古いツイッターの埋め込みリンクの貼り直しでOKが出ました。

古いインスタグラム埋め込みリンク貼り直しOKが出ました。

 

拡張機能「amp-animation」がこのページで検出されましたが、使用されていません。この拡張機能を削除してください。

こちらも上記と同じでした。

古いYoutubeを埋め込みリンクを貼っていたところを一旦削除して、新しい埋め込みリンクを貼り直したらOKが出ました。

古いニコニコ動画の埋め込みリンクを貼り直したらOKが出ました。

古いGoogleMapの埋め込みとかも貼り直したらOKが出ました。

古いアフィリエイトリンクとか、アフィリエイト埋め込みとか、そういうのも削除したらOKが出ました。

古いツイッターの埋め込みリンクの貼り直しでOKが出ました。

古いインスタグラム埋め込みリンク貼り直しOKが出ました。

 

拡張機能「amp-auto-ads」がこのページで検出されましたが、使用されていません。この拡張機能を削除してください。

こちらも上記と同じでした。

古いYoutubeを埋め込みリンクを貼っていたところを一旦削除して、新しい埋め込みリンクを貼り直したらOKが出ました。

古いニコニコ動画の埋め込みリンクを貼り直したらOKが出ました。

古いGoogleMapの埋め込みとかも貼り直したらOKが出ました。

古いアフィリエイトリンクとか、アフィリエイト埋め込みとか、そういうのも削除したらOKが出ました。

古いツイッターの埋め込みリンクの貼り直しでOKが出ました。

古いインスタグラム埋め込みリンク貼り直しOKが出ました。

 

拡張機能「amp-position-observer」がこのページで検出されましたが、使用されていません。この拡張機能を削除してください。

こちらも上記と同じでした。

古いYoutubeを埋め込みリンクを貼っていたところを一旦削除して、新しい埋め込みリンクを貼り直したらOKが出ました。

古いニコニコ動画の埋め込みリンクを貼り直したらOKが出ました。

古いGoogleMapの埋め込みとかも貼り直したらOKが出ました。

古いアフィリエイトリンクとか、アフィリエイト埋め込みとか、そういうのも削除したらOKが出ました。

古いツイッターの埋め込みリンクの貼り直しでOKが出ました。

古いインスタグラム埋め込みリンク貼り直しOKが出ました。

 

必須タグ「body」がないか、正しくありません。

こちらも上記と同じでした。

古いYoutubeを埋め込みリンクを貼っていたところを一旦削除して、新しい埋め込みリンクを貼り直したらOKが出ました。

古いニコニコ動画の埋め込みリンクを貼り直したらOKが出ました。

古いGoogleMapの埋め込みとかも貼り直したらOKが出ました。

古いアフィリエイトリンクとか、アフィリエイト埋め込みとか、そういうのも削除したらOKが出ました。

古いツイッターの埋め込みリンクの貼り直しでOKが出ました。

古いインスタグラム埋め込みリンク貼り直しOKが出ました。

 

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

「http」が『hhttp』になっていました。

単純な記載間違いでした。

間違いを修正したらOKが出ました。

 

タグ「amp-img」のレイアウト「height」に含まれる属性の値が無効です

「height=400」なのに、『height= 400』と空白が入っていました。

単純な記載間違いでした。

間違いを修正したらOKが出ました。

 

HTML タグの禁止された用法、無効な用法 属性「http://www.facebook.com/”」はタグ「a」で使用できません。

a href="https://www.facebook.com/ <br> target="_blank"

上記のように、リンクの部分に何故か「br」タグが入っていました。

単純な記載間違いだと思います。

それを削除したらOKが出ました。

 

属性「clear」はタグ「br」で使用できません

br clear="both"

この表記がダメだったぽいです。

昔、画像を横並びで表示していたphpのタグか何かの残りでした。

使わなくなったので、削除したらOKが出ました。

 

許可されていない属性が HTML タグ「a」にあります

aタグの時は「blank_target」できない???

よくわからなかったんですけど、古いGoogleの地図埋め込みを貼り直したらOKが出ました。

 

タグ「iframe」はタグ「noscript」の子孫としてのみ使用できます。「amp-iframe」ではありませんか?

もう一回やってみたらOKでした。

上の方の修正で、ついでに修正されたのかも知れません。

何となく、古いYoutubeの埋め込みリンクが怪しい感じがしました。

 

タグ「style amp-custom」で指定された作成者のスタイルシートが 50000 バイトの上限を超えています

こちらも、もう一回やってみたらOKでした。

同じく、上の方の修正で、ついでに修正されたのかも知れません。

 

タグ「a」の HTML 属性「target」の値が無効です

こちらも、もう一回やってみたらOKでした。

同じく、上の方の修正で、ついでに修正されたのかも知れません。

 

タグ「img」はタグ「noscript」の子孫としてのみ使用できます。「amp-img」ではありませんか?

こちらも、もう一回やってみたらOKでした。

同じく、上の方の修正で、ついでに修正されたのかも知れません。

 

許可されていない JavaScript 属性がタグ「a」にあります

こちらも、もう一回やってみたらOKでした。

同じく、上の方の修正で、ついでに修正されたのかも知れません。

 

許可されていない属性が HTML タグ「p」にあります

こちらも、もう一回やってみたらOKでした。

同じく、上の方の修正で、ついでに修正されたのかも知れません。

 

許可されていない属性が HTML タグ「p」にあります

こちらも、もう一回やってみたらOKでした。

同じく、上の方の修正で、ついでに修正されたのかも知れません。

 

カスタム JavaScript は使用できません

こちらも、もう一回やってみたらOKでした。

同じく、上の方の修正で、ついでに修正されたのかも知れません。

 
 

最後に

今の所は、以上になります。

昔の古い埋め込みリンクや、単純な間違いが多かったです。

今後も注意していきたいと思います。

 
Cocoon公式サイトはこちらです。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

Cocoon製作者のわいひらさんのツイッターはこちらです。

わいひら@寝ログ(@MrYhira)さん | Twitter
わいひら@寝ログ (@MrYhira)さんの最新ツイート ベッドで寝ながらブログを書いたりフリーソフトを作ったりしています。最近ではSimplicityとCocoonというWordpressテーマを作りました。 富山県

 
使いやすいCocconには大感謝しております。

今後とも、末長く使わせていただきたいと思います。

ありがとうございます。
 

次の日コンビニで受け取れるの最強だから
楽天の方はこっち!
AMP
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
まなべひろつぐをフォローする
スポンサーリンク
まなべやブログ

コメント