【あきらめない!】WordPress AMP対応 エラー対処方法のまとめ【テーマCocoon編】

WordPress

「Google検索のパフォーマンスが改善されるというWordPressブログのAMP対応。でも調べてみると作業はかなりしんどいみたい!それでエラー対処方法を知りたいんだけど。ちなみにテーマはCocoonです。」

この記事はそんなブロガーの役に立つかもしれません。

▶ この記事を読んでメリットを感じる人。

  • WordPressのAMP化をよどみなく終了させたい方。
  • WordPressテーマ「Cocoon」を利用している方。

自宅で週に約16時間だけブログに費やすことで同年代のサラリーマン並の収入を得、他の時間は家事や自分のやりたいことをして生活している @Ama119(アマモ)です。気持ちはいつもネクタイを着けています。

いずれ避けては通れないGoogle仕様の爆速規格「AMP」。

これまでずっと先伸ばしにしてきましたが、WordPressのテーマをテーマレベルでAMP対応可能な Cocoon  に変えたこの機会に、勇気を出してAMP化しました。AMP化プラグイン等は一切使いませんでした。

といってもエラー続出

AMP化を断念しかけましたが、以下の方法でエラーを少しづつ解消しましたので、同じ悩みを抱えるブロガーの皆様にお役に立てたらと思いメモしておきます。

スポンサーリンク

記事が大量にあるなら少しずつAMP化しよう

エラー対処方法を云々する前にWordPressのテーマ「Cocoon」でAMP化する方法を紹介しておきます。といっても説明するまでもないですが「Cocoon 設定」から「AMP」タブで「AMP機能を有効化する」にチェックを入れて「保存」するだけです。

ここが大切ですが、AMP化をしたくないカテゴリーがあれば、下の欄にチェックを入れておきます。

ブログ記事が大量にあるなら、このAMP除外機能を上手に利用して、カテゴリーごとに少しづつエラーチェックをしてゆきましょう。

AMPエラー修正の流れ

これからがしんどいです。8年近くブログを運営しているこのブログは3000近くの記事があり、AMPではエラーになってしまうひどいHTMLタグが山積していました。

AMPエラーのエラーチェックの流れは以下の2つがあると思います。

  1. Search Console のAMPエラーを利用
  2. 記事を一つ一つ確認

記事が大量にあるブログは「2.記事を一つ一つ確認」はしんど過ぎます。私もそうでした。なお記事を一つ一つチェックしたい方は Chromeの拡張機能 AMP Validator – Chrome ウェブストア が役立ちますよ。

それでおすすめは記事カテゴリーごとにAMP化してゆき、数日後に「Search Console」の「Accelerated Mobile Pages(AMP)」でエラー確認し、記事を修正してゆくのが良いと思います。(私のブログではAMP対応にして2日でインデックスされました。一つのカテゴリーだけですが。)

メール購読している場合は「Google Search Console Team <sc-noreply@google.com>」から「AMP ページのエラーを修正してください」というメールが来ます。

上の画像はAMP化して記事でGoogleがクロールした291記事中、47記事にAMPエラーが発生していることを示しています。このAMPエラーを一つ一つ解決します。ここであきらめないでね!

以下に典型的なエラーと対策方法を並べてみます。

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

これはマイナーな例だと思います。

WordPressの「投稿」でHTMLが整理されずに保存されているためのようです。

この症状の殆どは、「投稿編集」のエディタの「テキスト」モードと「ビジュアル」モードを行き来して「更新」すると解消できました。

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

AMPには使える<iframe>は決まっています。

AMPでは利用できない<iframe>を記事内に挿入している場合、このエラーが表示されますので、それをまるごと削除すればOKです。

<ahref>は利用できません。

このエラーが表示されると、「こんなタグなんて使っていませんよ!」とつぶやきました。

どうやらこのエラーはコメント欄で「link」ボタンを利用して<a>タグを挿入する際に生成される「rel=”nofollow noopener”」という属性が問題になっているようです。

ですから、これを「rel=”nofollow”」に変更すればOKです。

このエラーが頻発するブログは WPプラグイン Search Regex | WordPress.org を利用して、コメント内容を検索し、「rel=”nofollow noopener”」を「rel=”nofollow”」に一括で置換するればOKです。

なお コメントのリンクは必ず「rel=”nofollow”」が必要みたいですよ。

他のエラー

他にも大変悩まされたAMPエラーと解決策をメモしておきます。

ショートコード[ TOC ]によるもの

WordPressでは簡単に目次を生成するプラグイン「Table of Contents Plus | WordPress.org」を利用している人も多いと思います。

記事の任意の場所にショートコード[ TOC ]を入れて置くと、そこに自動で目次が生成されるという優れものです。

しかし我がブログでは、Cocoonの「目次」を利用しているために、コードの残骸が残ってのおかげで、AMP化した記事がレスポンシブ表示になりませんでした。(プラグインを停止すると記事に[ TOC ]が表示されてしまうので、停止にしていなかった。)

ですからこのショートコード[ TOC ]も上記で紹介したプラグイン  Search Regex | WordPress.org で一括で取り除き、プラグイン「Table of Contents Plus」そのものを削除しました。疲れる!

プラグイン Associates Link Builder によるもの

私はAmazon/楽天/ヤフ-ショッピングのアフィリリンクを入れる際、カエレバを利用していません。 Amazonの公式プラグイン「Associates Link Builder」を利用しております。(商品テンプレートを編集して楽天やヤフーショッピングのリンクも入れております。)

しかしこれが厄介でした。

AMP化対応になっているはずのですが、バグが入ったままなのです。

その解決策として採用させていただいた方法は WordPressでAmazon Associates Link Builder Amazonアフィリエイト公式プラグイン にありますので、同じエラーが派生するブログは参考にしてください。

プラグイン WP-Apbox によるもの

アプリのスタイリッシュなアフィリリンクを簡単に記事内に挿入できる  View: [WP-Appbox] Support | WordPress.org もかなり前から利用していましたが、このプラグインで吐き出されるCSSはAMP非対応です。

しかし英語ですが  Topic: Mobile CSS for AMP | WordPress.org  にあるCSSを テーマCocoon の 「amp.css」にコピペしてあげると一部の画像を除きキレイに表示されますよ。

ただしプラグインのオプション「Output」でデザインを「Compact Badge」に指定しておかねばなりません。

属性「action」はタグ「FORM [method=POST]」で使用できません。

つまり入力フォーム入りの記事は基本的にダメです。コメント可能なページもAMP対象ではない。

問題のページは固定ページ「お問い合わせ」でした。

これは消せないので、Cocoonの設定でAMPしない設定にしました。

属性「height」はタグ「table」で使用できません。

tableタグに height を入れた覚えはありません。

これはWordPressが勝手に挿入していたかもしれません。

エラー『属性「?」はタグ「a」で使用できません。』と同様に投稿を「更新」すれば修復しました。

まとめ

AMPエラー対処方法は以上ですが、しばらくAMPエラー対策は続きますので、他のエラー解決方法を上記に追記するかもしれません。お役に立てれば幸いです。

 

コメント