「 Google Search Console 」で「 AMP ページのエラーを修正してください 」とメッセージが来たので対処方法などをあれこれまとめます。
AMP とは?
AMP とは 「Accelerated Mobile Pages の略です。AMP を使用して、容量が軽く、特にモバイル端末での読み込みが速いウェブページを作成できます。」とGoogleのサイトで解説されています。GoogleやTwitterなどが共同開発していて、その仕組み、そのためのHTML規格を指しています。
WordPressの場合、対応しているテーマやプラグインも多くあります。
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 |
こちらの記事にわかりやすくまとめてありましたので参考までに。
で、具体的に置き換えについて。色々方法があると思いますが、下の例は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」で解説されています。こちらも使い勝手のいいテーマです。
自己紹介
インディーズでミュージシャンをやっていたのですがいつのまにか...
とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。
現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発「 Excel VBA 」を活用した効率化ツールの開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。
今年7月、代表取締役に選任され、8月に第一子が誕生、公私ともに慌ただしくしています(笑)
お問い合わせはJTクラウドシステムホームページからお願いします。