「 Google Search Console 」で「 AMP ページのエラーを修正してください 」とメッセージが来たので対処方法などをあれこれまとめます。
AMP とは？
AMP とは 「Accelerated Mobile Pages の略です。AMP を使用して、容量が軽く、特にモバイル端末での読み込みが速いウェブページを作成できます。」とGoogleのサイトで解説されています。GoogleやTwitterなどが共同開発していて、その仕組み、そのためのHTML規格を指しています。
WordPressの場合、対応しているテーマやプラグインも多くあります。
| Simplicity2.3.1からAMPに対応しました。 以下では、簡単にSimplicityでのAMP機能の使い方を説明します。 とは言っても、そこまで難しいことをする必要はないかと思います。 AMP機能を有効にする まずSimplic SimplicityのAMP機能の使い方。カスタマイズ方法など。 - Simplicity |
| Enable Accelerated Mobile Pages (AMP) on your WordPress site. AMP - WordPress.org |
HTML タグの禁止された用法、無効な用法
こちらがメッセージの詳細。
ん？と思うような内容…。しばらく考えこんでしまいましたが、答えは単純でした。
本文中に半角で＜＞を使っていたのが、タグとなっていたようです。とりあえず、全部全角にしてみたところ改善しました。
同等の AMP タグがある HTML タグの使用禁止
これだけだと、私の単純なミスの修正話で終わってしまいそうなので…。こちらのエラーについても少し記載します。
AMP では、使えるタグと使えないタグ、置き換える必要のあるタグがあります。
注意するタグ
| タグ | 説明 |
|---|---|
| script | application/ld+json 以外使用禁止 |
| img, video, audio, iframe | 置き換えが必要 |
| frame, frameset, object, param, applet, embed, form, input elements | 使用禁止、但しbuttonはOK |
| style | headタグ内は使用可能、amp-custom属性が必要 |
| link | canonical 以外使用禁止、一部ホワイトリスト登録可能 |
| meta | http-equiv のみ使用禁止 |
| a | javascript の使用は禁止 |
置き換える必要のあるタグ
| タグ名 | 置き換えるタグ |
|---|---|
| img | amp-img |
| video | amp-video |
| audio | amp-audio |
| iframe | amp-ifame |
こちらの記事にわかりやすくまとめてありましたので参考までに。
| # AMP とは**AMP（Accelerated Mobile Pages）** は、Googleが発表したモバイル高速化技術です。4,500社以上のパブリッシャーや、WordPress.com がパートナーに参加し、2016年... AMP HTML ざっくりまとめ - Qiita - Qiita |
で、具体的に置き換えについて。色々方法があると思いますが、下の例はPHPの「 preg_replace 」を使う方法。
//videoをamp-videoに置換する $pattern = '/<video/i'; $append = '<amp-video'; $the_content = preg_replace($pattern, $append, $the_content); $pattern = '/<\/video>/i'; $append = '</amp-video>'; $the_content = preg_replace($pattern, $append, $the_content);
AMPに対応しているか確認できるGoogleのサイトです。
https://search.google.com/test/amp
導入時期とか…
個人的にはAMP導入は今すぐ急ぐ対策ではないと思います。とは言え、プラグインやテーマでAMPを導入している場合は、エラーがあれば対処すべきだとは思います。もし同様のエラーが「 Search Console 」で表示されていたら、参考にしてください。
WordPressを勉強するにあたって一番最初に購入した参考書です。掲載されている無料テーマ「Bizvektor」は非常に扱いやすいテーマです。最新版では「lightning」で解説されています。こちらも使い勝手のいいテーマです。
自己紹介
インディーズでミュージシャンをやっていたのですがいつのまにか...
とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。
一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました（笑）
現在勤めているJTクラウドシステムでは、「 Excel VBA 」を活用した効率化ツールの開発、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、テロップ入れや映像の切りはりなどの簡単な動画編集なども、まとめて行なっています。
お問い合わせはJTクラウドシステムホームページからお願いします。