許可されていない属性値がHTMLタグにあると表示された時の対処法

「許可されていない属性値がHTMLタグにあります」とGoogleサーチコンソールのサマリーページの一番下「拡張」のAMPに表示されたことはありませんか？

どうやって修正していますか？初心者やHTMLがわからない人は意味もわからずに放置・・・とかしていませんか。

この表示が出た場合の対処法を図解入りで説明したいと思います。

「属性」という言葉にとらわれず、「HTMLとして文法ができていない箇所を直してください」という意味だと思って修正しましょう。

「許可されていない属性値がHTMLタグにあります」と表示される場所

サーチコンソールを開けると、サマリーのページが初めに表示されます。上から「検索パフォーマンス」⇒「カバレッジ」⇒「拡張」この3つが順にならんでいますね。

「拡張」の「AMP」をクリック、または左端の目次のAMPをクリックすると同じように表示されます。（ちょっと小さくて見えにくいですが）

①どこに、どんな修正箇所があるかチェックする。

赤いワクの中に「評価されていない属性または属性値がHTMLタグにあります」と書かれています。

言い回しが難しく聞こえますが、「HTMLの記述間違いを直せ」ということです。赤いワクをクリックすると、下のように間違いのあるページと修正箇所が表示されます。

赤ワクが指摘されている内容。

緑ワクは次の間違いへ移動する矢印。

青ワクが間違っている箇所ですが、これはピンク色で表示された中から自分で見つけなければいけません。

その時、赤ワクの指摘を参考にします。

青ワクの中の記述はこうでした。

「,<div align=center 」centerの後を「>」でくくるのを忘れています。おまけに、なぜか
<divの前に「,」を記述していました。

「<a」以下のリンク先を中央揃えにして表示したかったので、あとから「align=center」の記述を書き加えた時に間違えたようです。

ブロックエディタ（グーテンベルク）を使用している場合テキスト表示しよう

②修正はwordpressにログインしておこなう

wordpressにログインして修正していきますが、私はブロックエディタのグーテンベルクを使っています。

ブロックエディタは見かけビジュアルエディターで、旧エディタと違いタブでビジュアルとテキストの切り替えができません。

↓下のような状態です。切り替えタブはありません。

今回は広告リンクをグーテンベルクで「カスタムHTML」というブロック内にテキストで記述できているのでそのまま修正ができます。

ちなみにグーテンベルクのカスタムHTML画面はこういう画面です。

このカスタムHTML画面ですと、テキストエディタに切り替えなくても修正できます。

③グーテンベルクでカスタムHTMLではない場合、テキスト表示する

ビジュアルエディタでP（段落内）ですと、テキストを表示してそこで修正することになります。

どうすればテキスト表示できるか図解します。

右上のはしっこに「・」が縦に3つ並んでいます。

そこをクリックして、次に「コードエディタ」をクリックするとテキストエディタがあらわれます。

↑上のようなテキストエディタに切り替えができます。カスタムHTML以外の修正は、ここで修正しましょう。

ここからブロックエディタに戻す場合はコードエディタの上の「ビジュアルエディタ」をクリックすれば、戻ります。

修正箇所を探すのが大変ですが、前後の文から判断して見つけましょう。

HTMLで書けなくてもいいけれど簡単な修正ができる知識は持ちましょう

今回修正したところです。

「,<div align=center 」の部分を赤ワクのように「<div style=”text-align:center”>」に修正しました。これでリンクの中央揃えが指定できます。<div>はこれひとつで特別な意味はありません。

<div>～</div>でひとくくり、ブロック（段落的）要素になります。その中で<a>とは、<a以下はリンクするという意味の要素をになっているので、「リンクする文章は中央揃え」という指定に修正できました。

<div>～</div>でひとくくり、ブロック（段落的）要素として書くところを、初めの<divで「>」を書かずに「ここはひとくくりの段落です」と指定できなかったのですね。

その指定がきちんとできていない状態で、「<a　ここから先はリンクさせる文字が入ります」と入力していたので、文法的にぐちゃぐちゃになっていたのです。

もうひとつ訂正してみます。

タグ「table」の属性「border」に無効な値

と書いてありますね。

border=”あり“が修正部分になります。

なんで「あり」になってるのか、わからないんですが(^^;)　（レベルはその程度です）

border（枠線）の表示は基本、なしが「0」ありが「1」なので、 border=”1″に修正しました。

試しにAMPバージョンのURL検査を実施したところ、有効になりました・・・が。

Googleさんから、「修正した個所を検証しているのでしばらくお待ちください」とのメール!
Google通信制学校に通ってる感じですねー。赤点はお断りしたい・・・。

AMPバージョンは通常のURLのあとに「？amp＝１」とついているものです。
カバレッジに表示される問題は自分で解決していけるようになりたいですね。

Googleの目指すモバイルユーザビリティを意識してサイトを作ろう

他にサイズの小さい画像を訂正するよう指摘もありました。無料ブログのころ、サイズが400ピクセルX300ピクセルで貼っていたんですよね。そのままwordpressに引っ越しましたから。

特にアイキャッチになっている画像はサイズを変えるようにとのことでした。

お堅い話で、みなさんもよくご存じだと思います。サイト運営者さんは一度は見ていることなのですが・・・。

Googleは今後モバイルユーザビリティ（スマートフォンに、より対応したサイト）に優れたサイトを評価していく方向に向かっているのはご存じですよね。

AMP（ Accelerated Mobile Pages「アンプ」）⇒モバイルで高速化してWebサイトを表示していくプロジェクトですね。

AMP HTML に準拠したウェブページを公開すると、Google のクローラーが AMP ページをキャッシュします。キャッシュされたコンテンツが検索クエリに関連が深いと判断された場合、検索結果にはキャッシュされたページの URL がリンクされます。検索結果に表示されたキャッシュ済みの AMP ページにユーザーがアクセスする場合には、キャッシュ済みのためコンテンツの取得までの時間が短く、また広告やアナリティクスといったタグは遅延読込されるため、記事の表示が瞬時に行われます。
引用元「　 Google Developers Japan: Google モバイル検索が Accelerated Mobile Pages に対応しました　」

また「ピングダム」ではGoogleのジョン・ミューラー氏は「ほとんどの訪問者がページの読み込みを待つことのできる限界は2秒」としています。

AMPに沿うよう高速化に対応したサイト作りをしていかなければいけないのですね。指摘されたサイトの問題は自分で修正して解決できるようになりましょう。