検索エンジン対策にも!実践的な画像リンク5つのパターンを解説!

2013年08月24日

画像リンク5つのパターン

テキストリンクか、それとも画像リンクか?それが問題だ。
(´ヘ`;)ウーム…



ども、ピアノ教室管理人です。


検索エンジン対策(SEO)のことを考えると、リンクは画像よりもテキスト(文字)の方が有利だ、な〜んて昔からよく言われます。

Googleをはじめとした検索エンジンというのは、画像に何が描かれているか分からないためです。


結果的に、検索エンジンが読めるテキストの方が、リンク先ページの内容を正しく伝えることができるというわけですね。




しかし、読者の視認性や誘導、デザイン的な見た目をなんかを考えると、どーしても画像でリンクしたいこともあります。

そんなときはちょっとした一工夫で、検索エンジンに正しいリンクの情報を伝えることができるようになります。

とても基本的なことですが、ぜひお試しください。




この記事の目次
  1. シンプルな画像リンク

  2. alt属性を設定した画像リンク

  3. title属性を設定した画像リンク

  4. テキストリンクを含んだ画像リンク

  5. 複合的な画像リンク

  6. 重要:で、何を書いておけばいいの!?





1.シンプルな画像リンク





ごく普通の画像リンクです。
特になんの工夫もありませんですね、はい。^^;


ソースコード


<a href="http://piano-class.net/" target="_blank"><img src="http://kanrinin-fukuon.up.seesaa.net/image/blog-banner01_mini.jpg" width="480" height="164"></a>


これだと検索エンジンが認識できるテキスト(文字)情報がまったくありませんよね〜。
なんとかしたいところです。(;´∀`)





2.alt属性を設定した画像リンク



ピアノ教室 ノウハウポストへのリンク

見た目は何も変わりませんが、ソースコードをよく見ると・・・。


ソースコード


<a href="http://piano-class.net/" target="_blank"><img src="http://kanrinin-fukuon.up.seesaa.net/image/blog-banner01_mini.jpg" width="480" height="164" alt="ピアノ教室 ノウハウポストへのリンク"></a>


alt="ピアノ教室 ノウハウポストへのリンク"というコードが記入されていますよね。

これはalt属性(オルト属性)といって、画像の内容を説明する代替テキストを書き加えることができるんです。

もちろんこのalt属性は文字情報なので、検索エンジンも読めるというわけです。





3.title属性を設定した画像リンク





これも一見普通の画像リンクですが、画像の上にマウスカーソルを乗せると・・・。


20130824-01.jpg

こんな感じに「ツールチップ」が現れてテキストが表示されます。


ソースコード


<a href="http://piano-class.net/" title="新ブログ「ピアノ教室 ノウハウポスト」はコチラ" target="_blank"><img src="http://kanrinin-fukuon.up.seesaa.net/image/blog-banner01_mini.jpg" width="480" height="164"></a>


これはtitle属性(タイトル属性)といって、リンクの補足情報を加えるとができるんですね。

もちろん検索エンジンも認識できます。





4.テキストリンクを含んだ画像リンク




新ブログはじめました!「ピアノ教室 ノウハウポスト」


画像リンクとテキストリンクが一緒になったリンクです。

画像とテキストはそれぞれ独立しているわけではなくて、一連一体、ひとつのリンクになっているんですよ。


ソースコード


<a href="http://piano-class.net/" target="_blank"><img src="http://kanrinin-fukuon.up.seesaa.net/image/blog-banner01_mini.jpg" width="480" height="164"><br>新ブログはじめました!「ピアノ教室 ノウハウポスト」</a>






5.複合的な画像リンク



ピアノ教室 ノウハウポストへのリンク
新ブログはじめました!「ピアノ教室 ノウハウポスト」


ここまでご紹介した全部を取り入れた複合的で贅沢な画像リンクです。^^


ソースコード


<a href="http://piano-class.net/" title="新ブログ「ピアノ教室 ノウハウポスト」はコチラ" target="_blank"><img src="http://kanrinin-fukuon.up.seesaa.net/image/blog-banner01_mini.jpg" width="480" height="164" alt="ピアノ教室 ノウハウポストへのリンク"><br>
新ブログはじめました!「ピアノ教室 ノウハウポスト」</a>


ここまでやれば検索エンジン対策もバッチリ!?

・・・

・・



っていうか、やり過ぎ、欲張りすぎです。
(;´Д`)アウ




基本的に画像リンクにalt属性は必須なので、必ず入れておきます。

あとはtitle属性かテキストリンクのどちらかひとつがあれば十分だと思います。




管理人はよく「alt属性+テキストリンク」の組み合わせを使います。
その場合title属性は使いません。

ピアノ教室 ノウハウポストへのリンク
新ブログはじめました!「ピアノ教室 ノウハウポスト」


<a href="http://piano-class.net/" target="_blank"><img src="http://kanrinin-fukuon.up.seesaa.net/image/blog-banner01_mini.jpg" width="480" height="164" alt="ピアノ教室 ノウハウポストへのリンク"><br>
新ブログはじめました!「ピアノ教室 ノウハウポスト」</a>



もしデザインやレイアウトの都合でテキストリンクが入らないような状況であれば、テキストリンクは外してtitle属性を付けるかも、という程度ですね。

でもalt属性は必ず記入しています。





重要:で、何を書いておけばいいの!?



alt属性やtitle属性、テキストリンクであっても、ひとつ重要なことがあります。

それは「リンク先ページの内容が分かるように記入しておく」ということ。




画像リンクでもテキストリンクでも、リンクとはその先のページへの架け橋ですよね。

だからリンク先にあるページがどんな内容のページなのか、ちゃんとわかるように書いておくことが大切なんです。

それは検索エンジンばかりではなく、サイトを訪問してくれた方のためでもあります。


検索エンジン対策(SEO)とユーザービリティは、基本的に両立できるものなんですよね。




というわけで、画像リンクを作る際の参考になれば幸いです。

それではまた。
(´∀`*)ノシ アディオース


【オヌヌメ】
いちばんやさしい新しいSEOの教本 人気講師が教える検索に強いサイトの作り方
はじめてSEOを学ぶ人でも安心!!検索エンジンに評価される正しいSEO。勘違いしやすいポイントは講師がフォロー!!セミナーを受けている感覚で読み進められる。amazon

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
| Comment(0) | SEO | はてなブックマーク - 検索エンジン対策にも!実践的な画像リンク5つのパターンを解説!
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。