Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

CSS

alt属性とSEO対策

投稿日:

                                                                                                                                 

alt属性の使い方

画像をWebサイトやブログに配置するときには、imgタグを使用します。そして今回のテーマであるalt属性は、画像の代替テキスト、つまり画像の説明をしてあげる属性で、このようにimgタグの中に記述します。

<img src=”画像のURL” alt=”画像の名前” >

なぜalt属性が必要なのかというと、そのサイトを見ている人の環境によって、画像が表示されない可能性があるからです。画像が表示されないときに代替テキストがあるとないでは閲覧者の理解度が大きな差が生じます。

また、alt属性をきちんと設定してあげることでSEO対策にも繋がります。

 

alt属性とSEO対策

なぜalt属性を設定することがSEO対策に繋がるのでしょうか。理由は2つあります。

Googleに画像の内容を伝えることができる

そもそも検索エンジンは画像を見てもその画像の内容を読み取る事が出来ません。

そのため、alt属性を設定して、自らGoogleにこの画像がどういった画像なのかということを伝える必要があるのです。これによって、Google画像検索のような画像に特化した検索エンジンに、サイトの画像について伝えることが可能になります。

 

アンカーテキスト効果がある

また、alt属性はアンカーテキスト効果があります。

アンカーテキストとはリンクされている(aタグで囲まれた)テキストのことで、アンカーテキストにキーワードを適度にいれることで、Googleはそのキーワードをページ内の重要なテーマであると認識してくれます。

画像にリンクを貼る場合、そのままだとアンカーテキストを設定することはできません。しかし、alt属性を設定することで、Googleはalt属性の内容を重要なキーワードと同様に認識してくれます。

 

最後に

alt属性に正確なキーワードを設定することでSEO対策に繋がります。

閲覧者とGoogleに正しく画像の内容を伝える事を目的にしっかりと記述しましょう。

 

-CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

iframeのレスポンシブデザイン

youtube動画をサイトに埋め込む youtube動画をサイトに埋め込みたいというときの埋め込み方法を書いていきます。 動画の下にある共有をクリック 埋め込みコードをクリックするとhtmlが出てくる …

no image

メディアクエリ

レスポンシブデザイン スマートフォンやタブレットの普及に伴い、サイトを構築するときはデスクトップサイズだけでなく、 それぞれのデバイスにあったレスポンシブデザインの構築が必要になってきています。 今日 …

no image

CSSレイアウト vol.03

メニューを作る よくヘッダー領域にグローバルナビゲーションが配置されていますが、そのナビゲーションの作り方を今日は見ていきます。 幅500pxのコンテンツ領域に4つのナビゲーションメニューを設置すると …

no image

bootstrap vol.01

bootstrap 今日から何回かにわけてCSSフレームワークであるbootstrapの使い方について書いていきます。 bootstrapの特徴 レスポンシブデザインのサイトを簡単に作れる 通常レスポ …

Retinaディスプレイと対策

こんにちは! 今日はRetinaディスプレイについて書いていきたいと思います。 Retinaディスプレイって何者なの?? Retinaディスプレイについて考えるとき、解像度の話が必ず出てきます。 ・解 …