【htmlの基本】画像imgタグとalt属性のSEOに強くなる使い方

スポンサーリンク
カメラ:画像の貼り方とalt属性HP作成

結局のところ、alt属性は書かなくちゃいけないの?

今回はこうういったお悩みに添いたいと思います。結論として、画像によって書きわけましょう。

ホームページに画像を配置するときに使うタグは<img>です。このタグの中に画像を説明するalt属性を書き込みます。今回は画像の貼り方について説明します。

画像を貼ることはSEO対策が目的ではありません。なので、基本をしっかり押さえればSEOにも強くなりますし、読者さんの理解の助けにもなります。

ホームページ初心者さんは今のうちに、画像の貼り方をきっちり学んでおくと、あとあとラクでし、SEOに強いホームページになりますよ。

<img>は画像を配置するタグ

<img src="URL" widht="幅" height="高さ" alt="画像の説明">

これがhtmlの画像の基本タグになります。「どこどこにある画像ファイルの高さと幅はいくつで、こういう画像を、ここに配置しますね」という意味です。

ここを読んでくれる方でホームページをタグから作る人はいないと思います。ホームページビルダーやWordPressなどで作る場合は、ほぼ<img>タグは関係ありません。選ぶだけでタグを作成してくれます。

唯一、alt属性は自分で設定しなくてはなりません。altは画像を説明する文章をいれます。これが、ちょっと面倒なのです。

alt属性とは

Webサイトでのalt属性の表示

alt属性の役目は、3つあります。

  • 画像が表示されない場合に、画像の代わりに表示される
  • ホームページを見ることが困難な人や読み上げ機能を利用する場合にalt属性が読まれる
  • 画像にリンクが貼ってある場合、リンク先の名前になります。

alt属性はとても重要なんです。説明が入っていないと困る人がいらっしゃるのです。だから、alt属性は省略することができません。もし、HTMLで制作する場合はalt属性に説明がなくても、<alt=””>として省略しないできちんと書いておきます。

alt属性の書き方

alt属性は重要ですが、全ての画像に必ずしも説明が必要ではありません。ちょっとした画像、意味のない装飾や小さなアイコンやロゴには必ずしも必要ではありません。この線引きは自分で判断してください。

また、alt属性の文字数は決まっていません。だからといって、どんながぞうなのか詳しく書くと、画面が見づらくなることがあります。分かりやすいく簡潔に書きます。

  • 画像の説明を書かない場合でも、<alt=””>は必ず書く
  • 意味のない画像には、画像の説明はいらない
  • 説明は分かりやすく簡潔に書く

SEO対策のためのalt属性の使い方

実はもう一つ、alt属性に重要な役目があります。

検索エンジンのクローラーに画像の情報を渡すことができる

つまり、SEO対策にも効果があります。画像の説明に狙っているキーワードが含まれていれば、画像をもとに検索されます。alt属性がほぼ書く必要があるのは、ユーザビリティの向上と共にSEO対策になるからです。

画像の説明は、SEOを意識しすぎると失敗します。全く記事の内容と違う説明だったり、キーワードの羅列、長い文章であれば、何が言いたいのか的確にクローラーに伝わりません。

 わかりやすく簡潔に書くことに気をつけましょう。記事の書き方については以前の記事を参考にしてみてくださいね。

まとめ

今回の記事は画像の貼り方を特にalt属性について説明しました。以下にまとめます。

  • 画像の説明はほぼ必要
  • 画像の説明をしなくても、alt属性<alt=””>は省略しない
  • alt属性はSEOにも影響する
  • alt属性にキーワードを詰め込まない
  • 画像の説明は分かりやすく簡潔に書く

  

また、画像のサイズ<width=”幅” height=”高さ”>は書きましょう。書いておくと、ページの表示速度に影響します。画像を読み込みながらテキストなどの他の部分を読み込むことができます。

今まで書いてきたことが、ホームページビルダーなら万全ですよ。

HP作成
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました