【THE THOR】AMPエラーの対処法を超丁寧に解説！

ここあです。

こちらの記事にも書いてある通り

私はこのメインブログのテーマを2019年11月

「STORK」から「THE THOR」へと切り替えました。

その一番大きな理由がSEO対策の1つとなる

「サイトの表示速度を速くするため」。

実際、ワードプレステーマを

STORKからTHE THORに切り替えたことで

↓PC版の表示速度測定のスコア

SRORK（変更前）

THE THOR（変更後）

↓スマホ版の表示速度測定のスコア

STORK（変更前）

THE THOR（変更後）

このように劇的に表示速度を改善することができました。

とは言え、スマホ版の表示速度はまだまだ

「完璧に改善された」というには、ほど遠いスコアなので

私はTHE THORの目玉でもあるAMP機能を使うことにしてみました。

ところが、

THE THORのAMP機能はただ設定を「ON」にすれば、

誰でも簡単に設定できると思っていたのですが

実はそうではなかったのです＾＾；

なぜなら、

AMP機能の設定をした途端、Googleから

たくさんのエラーメッセージが届くようになったからです。

つまり、AMPページの設定というのは

ただ機能設定をONにすれば良いと言うものではなく

AMP機能のルールに基づいて

きちんと調整しなけれなりません。

もしもそのルールを無視してしまうとどうなるか？

検索結果に表示されなくなってしまいます＾＾；

「それはないでしょ、Googleさん！」ひどくない？

「THE THOR」のAMP設定はある意味

誰でも簡単にクリックだけで出来るというのが売りです。

だからもちろん、

AMPの設定をONにするのだけは簡単にできます。

ですが、問題なのはそこから。

人それぞれサイトの作り方が違う上に

「AMPページの表示ルール」がかなりきついため

AMPページのエラー無くして設定を完了することはできません。

つまり、

「THE THORのAMP機能が悪い」というわけではありません。

悪いのは「THE THOR」でもなく、あなたでもなく

中途半端なAMP機能を開発したGoogleが悪いのです。

今回私は、自分でAMP設定を進めてみて

初めてそれが分かりました。

なので、これからTHE THORを使って

• AMP設定をしたいと考えている
• THE THORのAMP機能に興味がある

というあなたに

少しでもお役に立てるよう

私がAMP化するにあたって解消したエラーを

備忘録として残しておきます。

だから、もしも今、AMP設定をしてみたけど

エラーの解消方法が分からず「自分には無理だ」と

諦めているあなたはぜひ参考にしてみてください。

AMP（Accelerated Mobile Pages）とは？

私は今回、STORKからTHE THORに切り替えたことで

初めてAMP機能に向き合っています。

なぜなら、STORKにはそんな機能はなかったし

AMPはTHE THORがいち早く導入した「最先端の機能」だからです。

そして、THE THORのマニュアルサイトには

AMPに関する詳しい設定事項はほとんど書いてありません。

だから正直、私も

AMPについて詳しいことは分かりません＾＾；

ということで、一緒に勉強していきましょう！

AMP（Accelerated Mobile Pages）とは

単語から見て分かるように

「モバイルページの高速表示化」という意味です。

つまり、AMP設定はモバイル表示のための設定であり

PC表示には一切関係がありません。

まずは、そこをきちんと押さえておきましょう。

AMPは「スマホユーザーのため」だけのものです。

また、AMPというのは、今から４年前の2015年10月に

GoogleとTwitterが共同開発でオープンソースとして立ち上げた

プロジェクトでもあります。

なので、当然のごとくAMP設定では

Google様のご命令に従うしかありません＾＾；

とは言え、AMPを実装するとページの表示速度が約4倍。

データ量が1/10になるとも言われています。

つまり、SEO効果を考えると

「AMP機能を使わない手はない」ということです。

ただし、THE THORで可能なAMP設定はあくまでも

「記事ページのみ」となりますので、お忘れなく。

AMPページの設定方法

それでははまず、これからAMP設定をしたいというあなた。

もしくはTHE THORを導入してAMP設定をしてみたいというあなたのために

AMP設定の方法から順番に解説させていただきます。

なので、すでにAMPの設定が完了しているというあなたは

この段落は読み飛ばしてくださいね。

AMP機能設定

AMP機能を設定する場合はダッシュボードメニューから

外観 → カスタマイズをクリック。

画面なかほどにAMP設定［THE］という項目がありますので

クリックします。

そうするとこのように以下3つの項目が表示されますので

一番上にあるAMP機能設定をクリックしましょう。

AMP機能設定をクリックすると

さらに3項目の設定ができますので、必要に応じて設定します。

もちろん一番上のAMPページを「表示」にしなければ

AMPページにはなりませんよ＾＾；

以下の画面はすでにAMP化に成功している私のスマホ版の表示画面ですが

Googleのエラーメッセージをクリアにして、AMP設定が完了すると

このようなAMP対応の画面が表示されるようになります。

②の検索ボックスや、③の通常ページへのボタンを表示させた場合、

AMPの設定に成功すると上記のような表示画面になります。

なお、AMP設定をした際、場合によっては、

記事の画面がきちんと表示されない場合があります。

なので、そんな場合に備えて③の「通常ページへ」のボタンを

表示させておく方が、万が一、表示画面が崩れている際、

ネットユーザーにワンクリックで変更してもらえますので

ユーザビリティやあなたへの信用という意味でも

③の設定は「表示する」にしておく方が安心です。

なお、②の検索ボックスに関しては、

任意の設定で全然大丈夫ですが、URLプロトコルがSSL化された

「https」から始まるURLでしか対応しておりませんのでご注意ください。

※サイトのSSL化に関してはサーバー側で設定してください。

また、AMPロゴに関しては、

サイトロゴのサイズが「縦60 × 横600px 以下」と

寸法が決まっておりますので、こちらも再登録が必要になります。

さらに、Googleアドセンスなどの広告に関しても

AMP対応の仕様に変更する必要があります。

なので、Googleアドセンスをされているあなたは

以下、Googleアドセンスのヘルプページを参考に

AMP対応のディスプレイ広告ユニットを作成する

AMP広告コードを取得して

AMP広告の設定欄にコードを貼り付けてください。

AMP設定に関してひとまずは、

• AMPの表示ON/OFF
• サイトロゴの再設定
• AMP対応アドセンス広告コードの貼り付け

これらの設定さえできれば、AMPの下準備は完了です。

ある意味、ここまでは誰でも簡単に設定できます。

ただし、問題なのはここからです。

ということで、AMPエラーの解消方法を

順番に解説していきますね。

なぜAMPページエラーが出るのか？

そもそもAMPを設定したのに

「なぜエラーが出るのか？」ということですが

AMPを設定する際にはモバイル版の表示速度を早めるために

「禁止タグ」というのがあるんですね。

そんなもん、ズブの素人からしたら

「知るか〜！」という感じですけど…（笑）

ただ、ルールはルール。

きちんと守らなければAMPで表示されるどころか

検索エンジンにも表示されなくなってしまいます。鬼かっ！

しかも、このルールがものすごく面倒で厄介＾＾；

私も今回、自分で設定して初めてそれを知ったわけです。

だからと言って、私はそのまま放置して諦めるほど

潔い良い人間ではありません。

往生際の悪さは「良い意味でピカイチ」です（笑）

なので、分からないことはとことん自分で調べました。

だから、今回、AMP設定は初めてでしたが

例えAMPに関するエラーが出てもきちんと表示させることができたのです。

つまり、何事も諦めさえしなければ

誰でも必ず解決できるということ。

ということで、以下のタグは使用禁止です！

こんなもん見ても分かりませんよね？

「いいんです！それで…（笑）」

ただ「禁止タグ」があるとさえ認識していただければ。

ということで、ここからは

エラーの解消方法や手順について詳しく解説していきます。

なので、先にお伝えしておきますが

この記事は少しだけ長くなりますので心して読んでくださいね。

AMPページエラーの確認方法

THE THORで先ほどの「AMP設定」を完了させたら

あとはしばらくGoogleのクローラーにクロールされるのを待ちましょう。

というのも「AMP設定」をしたからと言って、

すぐにAMP対応になるわけではありません。

「AMP」の設定完了後、Googleのクローラーにクロールされ

AMPエラーがなく、合格したページのみが

順次AMP対応のページとして検索エンジンに表示されます。

ということで、一旦、

Googleさんがクロールするのを待つことになるのですが、

念のため先に、あなたの記事ページが

AMPページに適しているかどうかテストすることが可能です。

GoogleのAMPテストでチェックしてみよう！

ひとまずTHE THORでAMP設定ができたら

どの記事でも構いませんので、一度テストしてみましょう。

テスト方法は簡単です。

通常の記事URLの末尾に「?type=AMP」をつけたものが

AMP対応の記事ページのURLとなります。

例えば、あなたが今、読んでいるこのページ。

このようになります。

ということで、まずは一旦こちらのテストページで

あなたの記事がAMPページとして有効になっているかどうかを

確認してみてください。

テストする場合は、以下のサイトにAMP対応のURLを入力し、

「URLをテスト」のボタンをクリックするだけ。

そうすると、AMPテストの結果が表示されて

有効か、そうでないかがすぐに分かります。

AMPページにエラーがない場合

テストページにAMP対応のURLを入力し

特にエラーがない場合は、

以下のような「有効なAMPページです」という画面が表示されます。

この画面が表示された場合は、

そのページがきちんとAMP検索機能の対象となりますので

あとはクロールされて検索エンジンに表示されるのを待ちましょう。

AMPページにエラーがある場合

逆にAMPページにエラーがある場合は

以下のような

「有効なAMPページではありません」という画面が表示されます。

なので、「有効なAMPページではありません」と表示された場合は

それで諦めるのではく、きちんと解決できるまで頑張りましょう＾＾

AMPページエラーの確認方法

AMPページでエラーが表示された場合は

エラー箇所を確認することができます。

例えば以下、画像の場合は

「height」タグが「amp-img」にないということが分かります。

そして、さらに「1個のスタンス」という部分をクリックすると

どこにエラーがあるのかがエラー箇所として表示されます。

またエラー箇所の「行」をクリックすると

右側にエラーを起こしている場所が表示されますので

記事の編集画面を見ながら正確なエラー箇所を確認することができます。

コードの修正方法は後述しますが、

修正箇所を把握しエラーコードを修正した後は

再度、先ほどのテストページでAMPテストをしてみましょう。

修正後、新たにテストしてみて

以下「有効なAMPページです」と表示されたらOKです。

AMPページエラーの解消方法

AMPページのルールがかなり細かいため

様々なエラーが出るとは思いますが

今回、私が経験したエラーは以下の5つです。

1. 属性「border」はタグ「amp-img」で使用できません。
2. 必須属性「height」がタグ「amp-img」にありません。
3. タグ「amp-iframe」の属性「src」の URL プロトコル「http」が無効です。
4. テキストが小さすぎて読めません（クリック可能な要素同士が近すぎます）。
5. HTML タグに同じ属性が複数含まれています。

ある意味、エラーの少なさを考えると

THE THORのAMP機能はかなり優秀だと思います。

上記5つのうち③と④は

モバイルユーザビリティに関するエラーですが

合わせて解消方法を解説しておきます。

ということで順番にAMPページエラーの

解消方法について解説致しますので

該当するエラーがある場合はぜひ参考にしてみてくださいね。

なお、それ以外のトラブルに関しては

私はまだ経験がありませんので、解決することができません。

あらかじめご了承ください。

属性「border」はタグ「amp-img」で使用できません。

AMP化のルールの中に、

画像に「ボーダータグはつけてはいけない」という

禁止事項があります。

つまり、分かりやすく言うと

画像の周りに罫線（囲み罫）を付けてはダメだということです。

とは言え「そんなん付けた覚えはないんだけど？」と

思う場合がほとんどだと思います。

それではなぜそんなエラーが出るのか？

その多くはほとんどがアフィリエイト広告による

画像のエラーだからです。

なので、このエラーが表示された時は

アフィリエイト広告のHTMLタグをチェックしてみてください。

そうすると、アフィリエイト広告のHTMLタグの中に

ボーダーを表す「border=”0″」といったタグを見つけることができるはずです。

例えば、以下のコードはASP「a8.net」で生成できる

アフィリエイト広告のコードですが、よく見ると「border=”0″」という

ボーダータグが２箇所に入っています。※コードはダミーです。

なので、上記コードの「border=”0″」を消してしまえば

ボーダータグによるエラーは簡単に解消することができます。

↓このように「border=”0″」の部分を2箇所とも消してしまえばOK。

また「a8.net」のようにすでに「AMP対応の広告リンク」を発行できる

ASPなどもありますので、

↓a8.ntの「AMP対応広告リンク」

AMP対応の広告リンクを発行できる場合は

そちらのコードに丸々差し替えてしまうという方法もあります。

必須属性「height」がタグ「amp-img」にありません。

上記、タイトルの場合も画像に関するAMPの表示エラーですが

必須属性「height」がタグ「amp-img」にありません。

というエラーが表示された場合は

画像のHTMLコードの中に画像の表示サイズを表す

「width」や「height」といったコードが欠落している可能性があります。

例えば、以下の画像は

「人気ブログランキング」へのリンク画像ですが

私がエラーチェックした時は表示コードが

となっており

画像寸法の表記がなく、エラーを起こしていました。

なので、画像の寸法表記となる「width」や「height」を

HTMLコードに表示させる場合は

記事に貼ってある画像をクリックすると

画像の上に編集メニューが表示されますので

続いて「鉛筆マーク」をクリック。

そして、そのまま何もせず「更新ボタン」をクリックしましょう。

「更新ボタン」をクリックすると、

わざわざあなたが画像の寸法を入力しなくても、このように

HTMLコードの中に「width」や「height」のコードが

きちんと自動で入力されます。

なので、上記2点をまとめるとAMP化する際に

画像データで気を付けなければならないのは

• 画像に罫線を付けてはだめ（「border=”0″」の部分は消す）
• 画像の寸法表記がないとだめ（width=”00″ height=”00″がきちんとあるか確認する）

これら2点です。

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

こちらのエラーメッセージが表示されている場合は

主にYoutubeに関するリンクエラーです。

Youtube動画はリンクのURLをそのまま

ビジュアル編集モードで貼ることもできるし

投稿記事編集メニューから

メディアを追加 → URLから挿入という形で

YoutubeのリンクURLを貼ると

以下のようなコードで貼ることができます。

しかし、実はそのコードが良くありませんでした。

なので、基本的にYoutubeのコードを貼る場合は

Youtube動画のページから「共有」をクリック。

さらに、ポップアップ画面から「埋め込む」をクリックします。

そうすると動画の右側に

「埋め込み用のコード」が表示されますので

その「埋め込み用コード」をコピーします。

あとはその「埋め込み用コード」を

ワードプレス側で「テキスト編集モード」にして貼り付ければOKです。

これでYoutube動画に関するAMPページのエラーは解消されます。

Youtube動画を確実にレスポンシブ対応にする方法

ちなみに、私が

Youtubeの埋め込み用コードを貼り付けたままにしていたら

Googleから「モバイルフレンドリーではない」という

エラーメッセージが飛んできました。

なぜかというと、Youtube動画の動画サイズが

モバイル画面より大きく、スマホの表示画面に

収まっていなかったからです。

ということで、私はちょっとしたコードを追加して

Youtube動画を完全にレスポンシブ対応に変えて

エラーを解消しました。

その方法というのは以下の通りです。

① まず最初に、埋め込み用コードの

以下の部分（ピンク文字の部分）を消去します。

② 続いて、そのコードを挟むように、新たに

HTMLコードを追記します。

上記、①、②の準備ができたら一旦「保存」してください。

③ 最後にダッシュボードメニューから

外観 → カスタマイズ → 追加CSSをクリックし、

「追加CSS」の部分に以下のCSSコードを追記しましょう。

こんな感じで追記できればOKです。

そうすることでPC版でも、モバイル版でもきちんと

Youtube動画の画面サイズが調整されます。

なので、モバイルフレンドリーとなりますので

Googleからのエラーメッセージが解消されます。

テキストが小さすぎて読めません（クリック可能な要素同士が近すぎます）。

続いて「テキストが小さすぎて読めません。」という

表示エラーの解消法です。

こちらのエラーもモバイルフレンドリーに関する

エラーメッセージです。

このエラーが出ている記事を確認したら私の記事は、

全て表（テーブル表示）に関するエラーでした。

なぜなら、先ほど説明したYoutube動画と同じで

テーブル表示がスマホの画面にきちんと

収まっていなかったからです。

なので、ただこちらのテーブル機能で表作成していると

表組がきちんと収まらずエラーが出ます。

しかし、THE THORには親切にも

「スマホテーブル横スクロール」という

表組をスマホ対応させるための機能があります。

なので、テーブル機能で作成した表を

このスマホテーブル横スクロールの中に入れることで

スマホに対応した表組へと簡単に変えることができます。

※以下のように「スマホテーブル横スクロール」のボタンをクリックし、その枠内にテーブルのデータをコピペするだけ。

なので、表組に関するエラーが表示されている場合は

「スマホテーブル横スクロール」の機能を使って

モバイルフレンドリーに対応したテーブルへと変更してみてください。

HTML タグに同じ属性が複数含まれています。

最後に「HTML タグに同じ属性が複数含まれています。」と

表示された場合のエラー解消法です。

私の場合は、少し特殊かもしれませんが

上記エラー表示されていた箇所を確認すると

見出しタグにIDが付いていました。

見出しタグのIDとは、例えばこんな感じ。

なぜ見出しにIDが付いていたと言うと

他の記事から、この見出しまで直接リンクで飛ばすためです。

ですが、AMPではそれがダメみたいです＾＾；

ということで削除しました。

通常、見出しタグにわざわざIDの設定をする人は

よほどのことがない限りいないとは思いますが

もしも「HTMLタグに同じ属性が複数含まれています。」と

エラー表示が出た場合は、そんな見出しタグも

疑ってみてくださいね。

また、それ以外の記事ではもう1つ

リンクURLの中に「rel=”nofollow noopener”」というコードがあり

この属性にも問題があったようです。

なので、

この「rel=”nofollow noopener”」→「rel=”nofollow”」に

変更したことでAMPエラーが解消されました。

いずれにしても少し稀なケースかも分かりませんが、

特に「rel=”nofollow noopener”」の属性に関しては、

私も設定した覚えがありませんので

もしかするとあなたの記事内や

広告リンクの中などにもあるかもしれません。

だから、もしも

「HTMLタグに同じ属性が複数含まれています。」と

AMPエラーが表示された場合は

見出しタグのID指定や、relに関する属性部分を

チェックしてみてくださいね。

ということで以上が、

私がAMPページ設定の際に表示された

• AMPページに関するエラー
• モバイルフレンドリーに関するエラー

そして、その解消方法です。

私はそれらを1つずつ分析しながら

表示エラーをつぶしたことで、AMPに対応した

モバイルフレンドリーの設定をきちんとすることができました。

AMPエラーの対処法を超丁寧に解説まとめ

私はこのメインブログのテーマをSTORKからTHE THORに入れ替えたため

初めてAMP対応にも挑戦しました。

なのである意味、AMPに対しては完全なる初心者です。

ですが、それでもきちんと原因を調べ

解決していくことでAMPページのエラーを解消し

AMPページの設定に成功しました。

つまり、何が言いたいかというと

誰でも最初は初心者ですし、こうしてきちんと解決していけば

その知識が自分の血となり肉となり成長し

私と同じように悩んでいる人のために

記事を書くこともできるようになります。

そして、それをさらに分かりやすくまとめようと

自分なりに努力し、調べることで、

さらに知識も理解度まで深まります。

ある意味、そうした努力の繰り返しで

人は成長していくのです。

なので、どれだけ大変でも

あなたが成長することを自分から放棄しないでください。

簡単に他人に依存しないでください。

これからの世の中、会社や他人に依存する人ほど

食えなくなっていきます。

そして、すでにそういう時代へと突入しています。

なので、これからの時代

あなたがどうあるべきかをきちんと認識した上で、

ただ忙しいからとか、分からないからと

誰かに答えを求めるのではなく

自ら解決する方法を学び、成長する努力をしてください。

その方が絶対に成長も早いし、そうして成長することで

その知識が必ずあなたの未来に役立ちますので…。

ということで、

最後までお読みいただきありがとうございました！