altタグとtitleタグの違いや使い方について(画像、img)|HTML

どうもヒサトです!

 

今回はaltタグとtitleタグの違いや使い方についての解説をしていきたいと思います。上手く使い分ける事で少しでもサイトの質を向上させましょう!

altタグとは?

altタグは画像(img)にのみ表記する事が出来るタグになります。

効果としては、

 

  • 音声のみが使用されるブラウザで利用される際にaltタグの表記が読まれる。
  • altタグの表記がSEO効果を少なからずもたらす。
  • IE(インターネット エクスプローラー)で画像の上にマウスを置いた際にaltタグの表記が表示される。

 

など様々な効果があると言われています。

 

その中でも最も気になるところが「SEO効果がある」ではないでしょうか?しかし間違った表記の仕方をしてしまうともらえるものも貰えません。

では正しい表記の仕方とはどういうものを言うのでしょうか?

 

例えばこの画像ならどのような表記をしますか?

 

 

 

神戸の街並みが綺麗な夜景の写真

神戸の港沿いの写真

 

 

周りの文章やそれまでの流れによって変わってきますが、この辺りが妥当な表記だと思います。

 

間違っても、

 

神戸 夜景 海 港 神戸タワー

 

といったただキーワードを羅列しただけというのはやめましょう。

(グーグルは不自然なものを嫌う傾向がありますのでスパム判定を受ける恐れがあります)

 

では説明しずらいこのような画像ならどうでしょう?

 

 

このようなマークアップ画像や特に意味のないような画像に関してはaltタグには何も表記しなくてもいいと言われています。もしどうしても表記するとしたら同じような記号を入力しましょう。(!など)

 

では文字が書かれているだけの画像(サイトや会社のロゴなど)はどうでしょう?

 

 

この場合は画像に記されている表記通りに記します。(画像ならchoix)

 

ではリンクに画像を使う場合はどうしましょうか?

 

 

リンク先やこの画像がリンクであることを表記するのが一番いいでしょうね!

 

これが画像を使う際に最も有効なaltタグの使い方です。

 

ワードプレスを使用されている方なら簡単にaltタグを挿入する事が出来るプラグイン「SEO Friendly Images」があります。このプラグインについて解説した記事が過去にありますので興味のある方は一度ご覧になって下さい。

⇒SEO Friendly Images~altタグを自動で画像に挿入してくれるワードプレスプラグイン~

 

 titieタグとは?

titieタグはまさに何の画像なのかの説明になります。Google chromeなどのブラウザを使用されている方がtitleタグの表記された画像の上にマウスを置くとタグの内容が表示されます。ただその表示により画像が見にくくなるなどの弊害も出てきますのでご注意を(笑)

(僕の場合はSEO Friendly Imagesの設定で記事タイトルが表示されるようになっています)

 

titleタグはSEO効果もないと言われていますので、使う場合はよっぽど画像の補足情報が必要な時などに絞られてくると思います。

 

 

関連記事:SEO Friendly Images~altタグを自動で画像に挿入してくれるワードプレスプラグイン~

 

まとめ

altタグは基本的に画像が何なのか説明(代替テキストとして利用)

titleタグは画像の補足説明に使う(ユーザビリティーを上昇させる)

これだけ理解して頂ければいいかなと思います。

最後までお読み頂きありがとうございます!

もし宜しければ、最後にこの記事をソーシャルメディアで共有しておいてください。


定期的にネットビジネスのメルマガを発行しています。

メルマガ 右回り込み画像

アフィリエイト、せどり、輸入・輸出、ネットショップ、SNSについての情報を定期的にメルマガにて発行しています。

ブログでは書けないような内容もメルマガでは発行していますので、少しでも興味があるという方は一度ご購読ください。


※購読する分には完全に無料ですので、ご安心ください。

興味がある

    

コメントを残す

このページの先頭へ