ブログ診断で怒られた!画像にはAlt属性とtitle属性の追記が大事!

ブログ診断1

勉強サイト先で見つけた「サイト診断」。
HTMLやCSSの文法チェックやSEO診断をしてくれるのですが 結果を見て とても凹んでしまいました。(>_<)
誰もがブログサービスの機能まかせで記事を書いてると思いますが、知らないと損する大きな見落とし点があるかもしれません!?

スポンサーリンク

サイト診断をすると凹むけど勉強にもなる

「サイト診断」「SEO診断」「HTML診断」など
似通った無料サービスのサイトはたくさんありますが
どこも診断結果の内容が難しすぎて直し方が分からない。(^^;)

その中で読みやすく分かりやすかったのがここ。
サイト解析+SEO診断ツールサイト解析+SEO診断ツール無料!点数形式hatena

ブログ診断2

手順はどこも同じですが、SEO診断が含まれてる場合はキーワードで検索して自分のサイトがどの位置にヒットするかを調べてくれるので、
自分の記事内容に沿ったキーワードを入力してみて下さい。

しかし!!

診断結果は散々で、別のSEO診断より劣ってるのじゃないか?
と思うほど「ページランク」「被リンク数」「インデックス数」全て
0点でした。(T_T)
総合診断結果は23点!_| ̄|○ ガクッ・・・

ブログ診断3

とにかく分かるとこから改善しなくては!

アドバイスを読んでて気になったのがAlt属性についてでした。

「Alt」ロボット型検索エンジンは画像の内容を読むことができません。従って画像の内容を伝える為に alt 属性を用いて重要なキーワードを入れておく必要があります。画像中心で作成されたWebサイトが検索エンジン対策としてあまり好ましくないと言われているのはロボット型検索エンジンが画像に記述されたテキスト情報はもちろん画像の中身を解釈する事ができない事が理由です。 もちろん、画像と関係のない文章を入れることはよくありません。画像にふさわしい文章、かつ適切なキーワードを盛り込むことが大事です。Altが欠けていることは、様々なHTML VALIDATOR(文法チェック)でもマイナスポイントであり、アクセシビリティ的にも(JISの高齢者・障害者等配慮設計指針等)問題ポイントとなります。音声ブラウザでも読み上げられませんし、ユーザビリティ上もよくありません。検索エンジンは正しく適切なWebサイトを高評価するので、Altは必ず全ての画像に記述しましょう。

Another HTML-lint gatewayで、HTML診断を受けた時も
alt=""に何か説明を書きましょう。
<img />
には alt 属性が必要です。

↑のような、altに関する2つの指摘が大量にありました。

Bloggerでは画像の挿入後にプロパティを追記

FC2ブログでは画像をアップロードして名前を付ければ自動で
その名前がAlt属性になっていたと思います。(たぶん)

でも、このGoogle Bloggerでは
画像を記事に貼付けた後で、画像をクリックして
プロパティを開き、記述しなければいけません。

画像のプロパティ

無知な私はこれまで、タイトルを付けることはあっても
代替テキスト(alt)の方は意味が分からなくて空欄のままでした。(^^;)

忍者AdMax



title属性とalt属性について

画像のプロパティ2

title属性(タイトルテキスト)は、この猫の画像のようにマウスオーバーで「吹出し」として文字が現れます。

alt属性(代替テキスト)は、上記の引用文に書かれてるように 画像が表示されない時の代替文や音声読み上げ用、検索エンジン対策にもなるため、重要なキーワードで画像の説明になる文章を書きます。

Bloggerの場合、この親切なのか不親切なのか紙一重の一手間をかけず無記入にした場合

<img src="画像.jpg" />
このように属性が何も書かれてないため大きな損をします。

titleとaltを記入すれば、
<img alt="代替テキスト" src="画像.jpg" title="ふきだし" />
Htmlにalt属性とtitle属性がちゃんと記述されました。

「私のブログではaltは自動で付いてるけどtitleが無いので欲しい」という方は、

画像を記事に貼付けたあとに、Html作成画面にして
画像のimgタグ内へ 
title="ここへ画像のタイトル"を書き足せば画像に吹き出すタイトルを付けることができます。

alt=”” が大量に空欄なのは何故だ!?

診断結果のもう1つ。
alt=""に何か説明を書きましょう。

プロパティが記入無しならimgタグ内にaltの文字が無いのは分かりました。

では、alt=""←このように""の中が空欄になってる箇所が大量に見つかったのはどこだろう?と探してみると

他サイトを画像付きリンクで紹介する
ShareHtmlメーカーが作成したソースが原因でした。

対策としてはソースをHtml画面でペーストしたときに追記するしかないのでしょうか?
簡単な対策をご存じの方がいれば教えて下さい。


アフィリエイトをしてる方で気を付けないといけないのは
A8.net などバナー広告の場合は、「alt=””」の部分への追記は規約違反となるのでコードはいじらないようにして下さい。

これで数多い指摘箇所の、alt属性の部分だけは理解できました。

でも、バナーなど空欄のままのケースもあり戸惑いますね。

それにしても、
今まで書いた記事の画像全てのプロパティを書き足すのは、しばらくかかりそう。というか挫折しそうです。(^^;)

最後までご覧いただき ありがとうございました。

Google BloggerにアイコンWebフォントで可愛いワンポイント♪
Google Bloggerにwebフォント「Font Awesome」を使って記事内にワンポイント入れる方法を解説します。
スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る