WordPress

人気ブログランキングのバナーでカスタムHTMLに表示されるビックリマーク「!」を消したい

投稿日:2018年4月13日 更新日:

An alt attribute must be present on <img>elements.とは

そらよりブログは2018年4月現在WordPressテーマWING(AFFINGER5版)を使用しています。そして各投稿記事の下に「人気ブログランキング」のバナーが表示されるように設定しています。

alt04

その設定の際、気になるアラートが表示されたので解決法をシェアします。

 

アラートが出るところ

アラートが表示される操作手順はこうです。

ダッシュボード「外観」>「ウィジェット」画面で表示される「投稿記事の下に一括表示」に「カスタムHTML」ウィジェットを設置します。

alt03

 

「カスタムHTML」ウィジェットに「人気ブログランキング」の「マイページ」>「リンクバナー・URL」で取得したタグを貼ります。

alt01

[1]するとこのようなビックリ(エクスクラメーション)マーク「!」が表示されるのです。

マークをクリックすると[2]「An alt attribute must be present on <img>elements.」という文言が現れます。意訳すると

エレメントにはalt属性が必要です

となります。どんな意味なのでしょう。

 

画像にはtittle属性とalt属性が

<img>エレメントとは画像のことです。画像をブログに貼り付ける際には一般にtittle属性とalt属性を付与するとよいとされています。Googleが古くから推奨している基本的な設定です。それぞれには以下のような役割があります。

tittle属性:画像の名称
alt属性:画像参照ができないときに画像の代わりに表示される名称(文言)

たとえば前項のキャプチャ画像をもういちどご覧ください。

[3]tittle="人気ブログランキング"とあります。これはつまり画像のタイトルが「人気ブログランキング」であることを定めています。

しかしこのタグには、もしも画像参照ができなくなったとき表示すべき名称のalt属性がどこにもありません。そのため画面には何も表示されなくなります。Googleはこうした状態をよしとしていません。

そのためビックリマーク「!」が表示されるのですね。

じつはこのまま「保存」してもバナーの表示には問題が発生しません。しかしアラートがついたままというのも気持ちがわるい。そこでalt属性をタグに挿入してあげるというのが、僕のおススメする解決法です。

 

コピペでalt属性を付与

alt02

1.タグに設定されているtittle="人気ブログランキング"をコピーします。
2.その記述のすぐ後に半角スペースをとりペーストします。
3.tittleの文字をaltに変えます。

これだけでビックリマーク「!」が消せます。Googleが推奨するタグとなり、ページの評価を下げる心配もなくなりました。

もしも気になっている方がいらっしゃったら、ぜひ見直してみてください。

 

なおこれはすべての画像に該当することです。

φ(.. )メモメモ

WordPressのダッシュボードでメディアを追加するときは
「タイトル」をコピーし「代替テキスト」にペースト!
「タイトル」はtittle属性、「代替テキスト」はalt属性です。

 

お役立ち記事

pdfedit 1
ipodアイキャッチ 2
Twitterスパムアイキャッチ 3
spotify_sf_size01 4
171106twittertsuchi2 5
gdpr 6
photo_gallery10 7
kensaku05 8
mymail08 9
tankrover01 10
プリンター250 11
renet01 12
spotify_1807 13
pokego161214_2 14
プロフィール表示01 15

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.