プラグイン”AMP for WP – Accelerated Mobile Pages”で、WordPress（ワードプレス）をAMP化した際に発生するエラー『タグ「FORM [method=GET]」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。』の修正・直す・復旧方法を備忘録を兼ねてご説明します。なおあくまでプラグイン”AMP for WP”を使用されている方のみ限定での修正方法となります。
タグ「FORM [method=GET]」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。
プラグイン”AMP for WP – Accelerated Mobile Pages”で、WordPress（ワードプレス）をAMP化した方は多いかと思います。phpの知識が無くとも各設定が簡単でカスタマイズも容易に出来て至れり尽くせりで初心者にはありがたいプラグイン内容となっているからです。
AMP化はページがエラーを吐き出す事が大変多く、初心者ブロガーの頭を悩ます手間のかかる子供みたいですが、今回ご説明するのは
| エラー | タグ「FORM [method=GET]」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。 |
を上記プラグイン”AMP for WP – Accelerated Mobile Pages”でAMP化された方限定で、”AMP for WP – Accelerated Mobile Pages”の場合での修正・直す・復旧方法を備忘録も兼ねて詳しく解説したいと思います。
こちらがエラーを吐き出したときの、Google Search Console(グーグルサーチコンソール)の画面です。エラーが修正された後にキャプチャした画面なので最終的に修正されたグラフとなっております。
こちらが、エラーを吐き出した日。6月28日木曜日に281ものエラーを吐き出してしまっていました。
この「タグ「FORM [method=GET]」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。」を色々調べていたところ、エラーの原因が、当ブログで使用しているテーマ「Simplicity」の制作者であり「Cocoon」テーマも制作者でもある”わいひら”さんの「Cocoon」ブログの下記ページ
AMPを有効にしたところ、「タグ「FORM 」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。」とエラーが出ました。 <form class="amp-form search-box" target="_top" method="...
AMPと新着記事の不具合？ - Cocoon |
にエラーの原因がコメントのやり取りで言及されておりました。
(@hukuharay)
Active Member
参加:4か月 前
投稿: 8
追記です。詳しくないためワードプレスとAMPの仕様なのかはわかりませんが、原因がわかりました。
cocoon-master-0.4.7バージョンを適用
↓
ウィジェットの「検索ボックス」をページ内に設定する
→ AMP認証OK
ウィジェットの「検索ボックス」をサイトのどこにも設定しない
→ AMPエラー
「検索ボックスのタグがテーマ内にあるのに、ページのどこにも検索ボックスがないよ～」ってことでしょうか？検索ボックスを設置していないサイトだったため、エラーが出ていました。しかし「 https://idotdesign.net/blog/web/wordpress/searchform/ 」こちらのサイトの検索ボックスを入れてみると、検索ボックスをサイト内に設置しなくてもAMPエラーは出ませんでした。う～ん？
～途中省略～
(@yhira)
参加:5か月 前
投稿: 1551
不具合の再現方法を教えていただきありがとうございます！
手元のテスト環境でも不具合を再現できたので、取り急ぎ修正したものをアップしておきます。
https://github.com/yhira/cocoon/archive/master.zip
これでおそらく大丈夫だと思います。
検索ウィジェットを外した場合の動作確認については失念していました。
おそらく、僕は「検索ウィジェット」がないとAMP用のスクリプトを出力しない設定にしていたのですが、スライドインメニューの検索でも利用されていたので、「AMP検索ボックスがあるのにスクリプトがないよ」ということで、エラーが出ていたのだと思います。
出展：Cocoon「AMPと新着記事の不具合？ | 不具合報告 | Cocoon フォーラム」
「検索ボックスのタグがテーマ内にあるのに、ページのどこにも検索ボックスがないよ～」
これが原因でした。
もう修正してしまっているので参照出来ませんが、ページ内のインスタンスを見ると、ヘッダー検索ボックスがあるべき付近に「FORM [method=GET]があったように思います。
それならば、AMPページ内に検索ボックスを設置してやればエラーが修正され万事解決します。
“AMP for WP – Accelerated Mobile Pages”の場合は検索ボックスの設置も非常に簡単です。
「設定」⇒「AMP」からセッティングを立ち上げます。
「Header」⇒「Search」を「ON」にして下さい。たったこれだの簡単な設定でAMPページ内のヘッダーに検索ボックスが設置されます。
これが当ブログのAMPページです。わかりにくいですがヘッダーに検索ボックスが設置されているのが確認出来るかと思います。
ちなみにちゃんと検索出来ます(笑)
検索ボックスをタップした画面。
ユニクロと入力して見ました。
こちらが、AMP用の検索結果画面です。ちゃんと「ユニクロ」でフィルタされています。
せっかくなので、ユニクロページをどうぞ✨
そしてすっきりとエラーが無くなり無事解消されました。
7月3日火曜日には検証が終了し無事該当ページが0になり、タグ「FORM [method=GET]」には拡張機能 JavaScript の「amp-form」が含まれている必要があります。のエラーがめでたく修正されました。
原因さえわかれば、プラグイン”AMP for WP – Accelerated Mobile Pages”は本当に簡単で便利なのでAMP化を検討されている方には本当にオススメします。
“AMP for WP – Accelerated Mobile Pages”ダウンロードはこちら
一人でも多くの方のお役に立てれば幸いです。なお”AMP for WP – Accelerated Mobile Pages”の修正方法以外はわかりませんので、悪しからず！
以上
FORM [method=GET]には拡張機能 JavaScript の「amp-form」が含まれている必要があるの修正・直す方法
でした。
