SEO対策壱,トンケン経営研究所【高品質・中長期】価格に見合う価値を提供

東京都のSEO会社、トンケン経営研究所 SEO事業部の「1代目SEO情報ブログ」。Tonken SEO情報ブログ壱


テーマ:
画像のtitle属性とalt属性の使い分け方についてここに記録残しておく。
先ず結論を先の述べる。
画像<img>について「説明」する時はtitle属性を使う。
画像<img>が表示出来ないブラウザ等で画像の代替となるテキストを表示させる為に使うのがalt属性である。

ブログやホームページの画像は<img>タグを使って表示させている事をご存知の方も多いだろう。

例えばこんな感じで。
<img src="" alt="" title="">
画像のファイルには.jpgや.pngなどがあるが、その画像ファイルをsrc=""の「""」の間に入れる事で画像がブラウザで表示されるようになる。
seo-tonchann.htmlというHTMLファイルに、<img src="seo-tonchann.png">と記述すれば、seo-tonchann.pngという画像ファイルの画像がブラウザで表示されるようになる。

通常、ブラウザは画像を表示する設定になっているが、そうで無いブラウザもある。
その場合は、画像の代替となるテキストを、画像が表示される部分に表示させる。
この画像の代替となるテキストはどこに記述するのか?
<img>タグの中である。
こうする。
<img src="seo-tonchann.png" alt="SEO職人トンちゃんの画像">

この場合、画像が表示されないブラウザでは、画像の替わりに「SEO職人トンちゃんの画像」と表示される。
これはホームページ制作をやる方であれば知らない方は殆ど居ないだろう。

では、画像そのものを説明するのには何を使えばよいか?
それが、title属性である。
これを使いこなしている、サイトオーナーやホームページ制作人はどれくらい居るだろうか?

画像にマウスのカーソルを乗せると、テキストが表示される事があるが、あれが画像<img>のtitle属性である。
一つ画像の例を示す。
これは、トンちゃんの凛々しい後ろ姿^^。
このトンの画像にマウスのカーソルを乗せてみてほしい。

SEO職人トンちゃんの画像

SEO職人トンちゃんの後ろ姿?」とテキストが表示されるはずである。
これが画像のtitle属性。
title属性を使って、この画像の「説明」をしているのだ。
この画像のHTMLソースはこうなっている。
<img src="seo-tonchann.png" alt="SEO職人トンちゃんの画像" title="SEO職人トンちゃんの後ろ姿?"/>

トンの画像にマウスのカーソルを乗せると、title属性部分の「SEO職人トンちゃんの後ろ姿?」がテキストで表示され、画像非表示のブラウザでは、alt属性部分の「SEO職人トンちゃんの画像」が画像の「代替」としてブラウザ画面に表示される。

繰り返すが、title属性は画像を「説明」するために使う。
画像そのものの代替であるalt属性とは違う。
あくまで、title属性は画像の「説明」である。

title属性=説明
alt属性=代替

もう一つ例を示す。
<img src="seo-tonchann.png" alt="SEO職人トンちゃんの画像">
<img src="seo-tonchann.png" alt="SEO職人トンちゃんの画像" title="SEO対策業者トンちゃん">

上記、二つの<img>タグの違いはtitle属性があるか無いかだけだ。
前者の画像にマウスのカーソルを乗せても、何もテキストは表示されない。
これは、ブラウザIE8に限らず、ブラウザFirefox 3.5でも同じである。
画像にマウスのカーソルを乗せた時に、テキストを表示させるは、title属性が必要となる。
後者の画像にマウスを乗せると、「SEO対策業者トンちゃん」と表示される。
注意が必要なのは、マウスオーバーで表示されるのはalt属性の「SEO職人トンちゃんの画像」では無く、title属性の「SEO対策業者トンちゃん」である。

ちなみに、画像が表示されないブラウザだと、どちらもalt属性が設定されているので、ブラウザ画面上に「SEO職人トンちゃんの画像」というテキストが表示される。
もし、この画像<img>タグをアンカー<a></a>タグで括っていた場合、alt属性の「SEO職人とんちゃんの画像」がリンク(アンカーテキスト)となる。
<a href=""><img src="seo-tonchann.png" alt="SEO職人トンちゃんの画像"></a>
<a href=""><img src="seo-tonchann.png" alt="SEO職人トンちゃんの画像" title="SEO対策業者トンちゃん"></a>

画像が表示されないブラウザではこんな感じになる。

<a href="">SEO職人トンちゃんの画像</a>

分かって頂けただろうか?
この画像のalt属性はSEOにも影響を及ぼすのだ。

「画像のリンクが、テキストリンクより弱い」という「意見」をたまにWeb上でみかけるが、「意見」を鵜呑みにしない事だ。
<a href=""><img src="seo-tonchann.png" alt="SEO職人トンちゃんの画像"></a>
<a href="">SEO職人トンちゃんの画像</a>

上記、二つのリンクのアンカーテキストはどちらも「SEO職人トンちゃんの画像」である。
どちらもトンちゃんの目には同一のアンカーテキストに見えている。
画像だから弱そうだとか、見た目・見える部分に影響されずに検証する事が大事だと思う。
検証した結果として画像リンクのほうが弱いなら、その時は「画像リンクがテキストリンクより弱い」が「事実」となるわけだが。

話を戻すが、画像その物の代替が、alt属性。
画像の説明がtitle属性である。
alt属性のみの画像の場合、画像にマウスのカーソルを乗せてもalt属性部分のテキストは表示されない。
画像<img>にtitle属性の記述がある場合は、画像にマウスカーソルを乗せるとtitle属性部分のテキストが表示される。

画像<img>のalt属性とtitle属性は完璧に使いこなせるようになると強いと思う。
SEO対策でも、ホームページ作成でも^^v。
どう使いこなすかは、貴方次第。

AD
いいね!した人  |  リブログ(0)

トンちゃんさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。