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

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


テーマ:

前回、画像のtitle属性とalt属性を使いこなそうという話をした。
復習だが、画像のtitle属性は「画像の説明」、画像のalt属性は「画像の代替」である。

今回の話は、リンクのtitle属性の話。
ホームページ制作段階で、貴方が「リンク<a></a>」にもtitle属性が使える事を知っていれば、より訪問者に親切なサイトを作れるはず。
画像のtitle属性が「画像の説明」であった。
では、リンクのtitle属性は?
「リンク<a></a>」のtitle属性は「リンク先の説明」に使う。

例えば、こんな感じだ。
<a href="http://ameblo.jp/seo-yahoo-bing-google/" title="Yahoo・Google・Bing対応のSEO対策業者トンちゃんのブログ">SEO対策 </a>

下記、矢印のついたリンクにマウスのカーソルを乗せると、上記リンクのtitle属性部分のテキスト表示されるはずである。
「Yahoo・Google・Bing対応のSEO対策業者トンちゃんのブログ」というテキストが表示される。

SEO対策

さて、前置きはこれくらいにして、本題に入る。
画像にも、リンクにもtitle属性なるものがあるのはご理解頂けただろう。
title属性の入った、画像やリンクにマウスオーバーすると、title属性に記述したテキストが表示されるのもご理解頂けたはず。
では、画像リンクの「画像」と「リンク」の両方にtitle属性を設定した場合、マウスオーバー時にどちらのtitle属性のテキストが表示されるのだろうか?

答えは、画像のtitle属性のテキストである。
画像<img>に設定したtitle属性のテキストが、リンク<a></a>に設定したtitle属性のテキストに優先して表示される。

例を示す。
<a href="http://ameblo.jp/seo-yahoo-bing-google/" title="Yahoo・Google・Bing対応のSEO対策 業者トンちゃんのブログ"><img src="seo-buta.png" title="SEO職人トンちゃんの後ろ姿?" alt="SEO職人トンちゃんの画像"></a>

実際の画像リンクはこうなる。
SEO職人トンちゃんの画像

この画像リンクにマウスのカーソルを乗せると、画像のtitle属性部分のテキストが表示されるはず。
SEO職人トンちゃんの後ろ姿?」というテキストである。
画像リンクの場合は、「リンク先の説明」である「Yahoo・Google・Bing対応のSEO対策業者トンちゃんのブログ」では無く、「画像の説明」である「SEO職人トンちゃんの後ろ姿?」が優先して表示される。
ホームページ制作者は、このことは覚えておいて損はないだろう。
ホームページ訪問者が画像にマウスオーバーした時に、何を表示させたいかをコントロール出来るようになるからだ。

画像リンクの「画像」と「リンク」のどちらか一方だけにtitle属性を付加した場合は、付加したtitle属性のテキストが表示される。
「画像」のみtitle属性を付加すれば、画像リンクにマウスオーバー時、画像のtitle属性テキストが表示される。
「リンク」のみtitle属性を付加すれば、画像リンクにマウスオーバー時、リンクのtitle属性テキストが表示される。
画像リンクの「画像」と「リンク」のどちらにもtitle属性を付加しなければ、画像リンクにマウスオーバーしてもテキストは表示されない。


いずれにせよ、画像のalt属性部分のテキストがマウスオーバー時に表示される事は無い。
alt属性は、画像の代替である。
画像が目の前で表示されているのなら、あえてマウスオーバーで表示させる必要は無いということなのだろう。
あくまで、画像非表示のブラウザで「画像の代替」としてテキストを表示するのがalt属性の主たる役目ということだ。
画像にアンカータグが付くと、alt属性はさらに大きな役目を担うことになる。

画像のalt属性がマウスオーバーで表示されない事に目を付けて、このalt属性に大量の「SEOキーワード」を詰め込む行為を思いつく方いらっしゃるだろうが今の検索エンジンには・・・^^;。
こういうSEO 手法の悪いところは、一般の訪問者にはSEOキーワードを見せず、検索エンジンにだけ見せる所である。

<まとめ>
・リンクでもtitle属性は「リンク先の説明」として使える。
・画像リンクの「画像」と「リンク」の両方にtitle属性をつけた場合は、マウスオーバー時、画像のtitle属性が優先表示。
・画像リンクの「画像」と「リンク」の両方にtitle属性をつけ無い場合、マウスオーバー時、何も表示されない。
・alt属性は「画像の代替」。title属性は「画像やリンク先の説明」
・alt属性は「画像の代替」たる「テキスト」であるため、「アンカーリンク<a href=""></a>」されるとアンカーテキストに変貌する。

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

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

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

AD

ブログをはじめる

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

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

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

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

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