みなさんこんにちは。
ブログを書き始めてはや１週間。簡単なKPIとして1日1記事を目安にしており、現在11記事目。ペースとしては計画通りで順調。本当はもう少しペースを早めたいが、仕事をしつつ・記事の質を保ちつつ書いていくとなるとこれくらいがちょうどいい塩梅といったところだろう。
ブロガーをやること自体は初めてではないので記事を書くこと自体はスムーズにできるのだが、テンプレートの利用は今回がお初につき。有料テンプレート「The thor」の設定でよくわからないままampの設定をONにしてみた関係で、Googleのサーチコンソールにてampエラーが続出するという困った事態が発生してしまった。
AMP(Accelerated Mobile Pages)とは
よくわからないまま有効化してしまったがそもそもAMP(Accelerated Mobile Pagesの略)とはなんなのか、有効化する必要性があるものか、改めて調べてみた。Acceleratedは加速、といった意味がある。ものすごくかいつまんで言うと、モバイルページをサクッと表示させるための新しい手法のことだ。
もう少し詳しく説明すると、モバイルでウェブサイトを見る際により高速での閲覧ができるようにする目的でGoogleとTwitterが共同で立ち上げたオープンソースプロジェクトとのことで、近年増えているスマホユーザの快適なネット閲覧のための仕組みだ。
ユーザの快適な閲覧を重視するGoogleの検索エンジンでは、このAMPに対応した「AMPページ」が評価され上位で表示される傾向にあるようで、ネットの肝である「検索ワードに対する上位表示」を意識する方にとって無視できないものになっている。
ざっくりと特徴を説明すると
- 余計なものを読み込まない・余計なことをしないため動作を軽くしている
- キャッシュさせることで読み込みの負荷を減らしている
上記の２点が挙げられる。だいぶざっくり。
とにかく最近はサイトのデザインが豪華になっているものも多いため、モバイルで閲覧する際に「なかなか画面がスクロールできない」など経験がある方も多いだろうが、AMPページの場合は上記２つの特徴(かいつまみすぎだが)から素早く閲覧することができるというわけだ。
閲覧側としては非常にありがたい。これが開発側からすると色々と新しいことを覚える必要があり楽しい反面、面倒が多いのだ。
サーチコンソールからAMP関連のエラーメールが届く
AMPページには、必ず内包していなければならない要素や、逆に使ってはいけない要素がある。
詳しくはAMPのプロジェクトページに、設定方法から学習内容まで日本語で詳しく載っている。この「使ってはいけない要素」が厄介で、これがあるのでサクサク閲覧できるわけだが、逆にこれがあるせいで「使ってはいけない要素を使っているエラー」が発生するというわけだ。The thorなどwordpressの有料テンプレートで「ampページ有効化」の機能があったからといって、安易にシロートが手を出すと「サーチコンソールのエラー」が続出して火傷する自体が発生してしまう。これが自分に発生した事態。
さっそく、無知な自分にもGoogleから赤紙サーチコンソールのエラーメールが届いた。
非常に気になる一文が。
エラーにより、貴サイトのページまたは機能が検索結果に表示されなくなる可能性があります。
検索結果に表示されなくなるのはやばすぎるので、対処しなければ。
Googleサーチコンソールでエラーを確認する
さっそくサーチコンソールにアクセスしてみると、やはりエラーが出ていた。
サイト運営をしていると「Googleサーチコンソール」の閲覧は必須かと思う。自分もサイト開設以降インデックスの確認も含めて毎日のようにチェックしているが、AMPのエラーはよくわからず放置してしまっていた。
- 許可されていない属性または属性値が HMTL タグにあります。
- AMP HTML タグの属性で指定されたレイアウトが無効です。
赤字で出ると焦る。それぞれエラーの内容が書いてある文字をクリックするとそれぞれ該当する箇所のurlとエラーになっているソースが確認できる。https://●●●/?type=AMPとなっているのがエラーの出ているAMPページのurlだ。
「AMPテスト」のページでURLを検査して詳細を確認
AMPテストというページが公式で提供されているので、こちらで先ほど確認したurl を確認してみる。
有効なAMPページではありません。無効なAMPページは、Google検索結果にAMP固有の機能が表示されません
エラーが出た箇所を更に確認してみると、エラーが出ているのは記事中の「Amazonアソシエイト」の画像リンクだということがわかった。というか、ここ数日で数件エラーが出たため１件ずつ調べながら修正したので、この記事で対応も含めていっぺんに紹介していく。
詳しい人の詳しい人のためのブログは結構たくさんあったが、このブログは比較的「ブログ初心者」向けに書いていこうと思う。参考になればよいが。
内容の詳細は以下の通り。
属性「border」はタグ「amp-img」で使用できません。
なるほど。AMPページのルールでは画像にboaderタグをつけてはいけない、というものがあるようで、それに引っかかったようだ。画像に線なぞつけた記憶はないのだが、投稿ページでテキストエディタに変更して該当箇所のソースを改めて確認してみると、border=”0″という記述が複数見つかった。こいつが元凶か！
boader=”0″は、周りに囲み線をつけません、という宣言なのだが、削除しても見た目上も影響がないので、こちらを削除して修正報告。無事有効化が確認された。
サイト上の「boader=”0″」をまとめて消す設定を勧めているブログが多かったが、初心者が親テーマをいじくるのは非常に危険なのと、テーマのアップデートの度に対応するのが面倒なのとアップデートする度に忘れそうなので、当ブログでは個別に削除するチクチク方式でいくことにする。
必須属性「height」がタグ「amp-img」にありません。
で、出〜！今度はheight属性(画像の高さを指定する属性)がないとのこと。どちらもAmazonアソシエイトのリンクから発生したエラーだ。このエラーは２パターンありそれぞれ対策方法が異なったのでそれぞれ紹介する。
1.「画像のみ」タグで「height指定がない」パターン
画像のみの場合対処は非常に楽だった。以下の通り、
ビジュアルエディターの画像「編集」ボタンをクリック＞右下の「更新」ボタンをクリック
でOK。そうすると一度更新がかかり、タグに「width=”●●” height=”●●”」が追加される。ちゃんと追加されたか不安な方はテキストエディターにてタグを確認してみるとよい。
2.「画像とテキスト」タグで「height指定がない」パターン
こちらが厄介だった。該当箇所(やっぱりAmazonアソシエイトのタグ)を確認してみたところ「iframe style=”width:120px;height:240px;」の記述を発見。あるじゃないか・・・height・・・なぜ・・・・ダメなんだ！ガンダァァーーーーームッッ！！！！！
調べてみるとどうもstyle属性にheight属性を指定しているのがダメらしい。そのため、iframeタグに記述してやればよい、とのこと。ということで
と記述してみたところエラーが解消された。よかった。amazonアソシエイトさんはCSSで縦横を指定するやり方のようだが、GoogleのAMPページのルールではそれはダメだということだ。簡単なhtmlとcss程度しか記述できない自分にとって、iframeなんかは未知の領域なので、ややこしいことこの上ない。同じような人たくさんいそうだな。
属性「loading」はタグ「amp-img」で使用できません。
これは、Wordpressを最新版の5.51にアップデートしたタイミングで新しく発生したエラーだ。
wordpressのダッシュボードにてアップデート内容の詳細を確認してみると、
WordPress 5.5では、画像がスクロールして表示されるまで画像の読み込みを待機させます。技術用語では「遅延読み込み (lazy loading)」といいます。
の文章が。lazy loading・・・これだ、こやつが原因に違いない。閲覧が早くなるのはありがたいんだがGoogleのAMPページのルールに接触するのは困りもんだなあ。ということで「lazy loading amp エラー」と検索してみると、このエラーについて書いてあるブログ記事がいくつか。便利な世の中になったもんだ。
wordpressを5.5にアップデートすると自動的に「lazy load(画像の遅延読み込み)」の設定になるため、function.phpに直接lazyloadをoffにする記述をすればよいようだ。function.phpはテーマ内で汎用的に使うコードをいじくる部分なので、失敗するとサイト自体がエラーになる可能性があるのでコードの記述ミスには要注意。詳しくない人はテーマがアップデートして対応するまでamp設定をoffにして諦めるか、開発環境で行うか、しっかりとバックアップをとってから行うこと。一番リスクが少ないのは、開発環境で行うことかな。
ということで自分はいくつかのサイトを参考に、
外観＞テーマエディター＞「編集するテーマを選択：使っている子テーマを選択」＞テーマのための関数(function.php)にて以下の記述を行った。
//下記ユーザーカスタマイズエリア
//ampエラーが出たのでwordpress5.5の更新のlazyloadをoffにする
add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );
//////////////////////////////////////////////////
記述の内容としては、wordpressのlazy loadingの有効化設定をオフにするというもの。
//でコメントアウトされている部分は不要だが、こちらの記述は、wordpressの更新が更に入り対策された時に不要になるため、自分で追記した内容を覚えておくためにも書いておくのをおすすめする。特にfunctions.phpのような重要な部分をいじくる時は必須級の対処だと思う。また自分は忘れっぽいのでこうしてブログを書いておくことであとで確認できたり詳しい人から訂正をいただけたり、というブロガーなりのメリットがあったりする。
設定した画面↓
記述後にエラーチェックを行ったところ、無事エラー解消。よし。
サーチコンソールにてエラー解消を報告する
エラーを一通り修正したところで再度AMPテストを行い、有効化を確認。
緑色で「有効なAMPページです」と出ればOK。なんだか達成感がある(大したことやってないけど)
これで終わりではなく、サーチコンソールにて修正内容の検証依頼を行う必要がある。流れとしては、
といった形になる。ちなみに修正が確認され合格するとサーチコンソールから下記のようなメールが届く。
これにて一件落着。
まとめ：①AMPの有効化はよく考えてから行うこと ②有効化後はサーチコンソール様の指示に従うこと
有効化するとエラーが出て確認がかなり面倒なので、記事ごとに個別にリンクを貼り付ける形で記事を書いているブロガーの方はよく考えてから行うこと。エラーの修正対応は結構時間がとられるので、その時間に記事を書いた方がもしかしたら効率的かもしれない、というのが自分の意見。The thorのテーマも定期的にアップデートを行っているので、そのうちエラーに対応していくだろうと自分は推測している。
あまり詳しくないが「閲覧側にとっては快適な機能だし有効化したい！」という方は、Googleサーチコンソールを頻繁にチェックして、エラーを確認し修正を行っていくとよい。何度か修正していればそのうち慣れてきて、記事更新時から直すようになると思う。
また、自分に出たほとんどのエラーが「アフィリエイト関連のタグ」なので、タグを貼り付ける時に注意すれば大抵はOKだと思う。また、ウィジェット等やカスタムタグで固定のタグを利用する方が運営上は楽だと思うのでおすすめだ。自分の場合はまだ記事数も少なくGoogleアフィリエイトの審査も通していないため、個別記事に貼り付けている状態だが、上記の理由から、ウィジェット等の導入を検討している。導入時には実装や審査について記事にするので楽しみにしていてほしい。
関連書籍
まさにSEOのバイブルと呼ぶべき１冊。AMP対応についてもまとめられている。自分ももう少し勉強せねばと改めて思った。