【告知】ノマドエンジニア養成ブートキャンプ

SEOに効果的なalt属性の記述方法を解説【4つのポイント】

横向きの万年筆

 

alt属性の記述に悩む人

SEOにalt属性を記述する必要ってあるの?
効果的なalt属性の記述方法が知りたい

 

こんな疑問に答えます。

 

✔︎本記事の内容

  • alt属性の意味
  • alt属性がSEOに効果的である理由
  • alt属性の効果的な記述方法

 

alt属性の重要性を知っていますか。

 

本記事では、SEOに効果的なalt属性の記述方法を紹介します。

 

Webサイトやブログ内に画像を掲載する人は多いと思います。

 

alt属性は極めて地味ですが、しっかりと記述することでSEO対策になりますので、細かい部分にも配慮しましょう。

SEOに効果的なalt属性【必ず書きましょう】

alt属性を暗示する万年筆の画像

書かないとユーザービリティに欠け、SEO対策に不利なので必ず書きましょう。

alt属性の意味とは

alt属性とは、画像の代わりとなる代替テキストを意味します。

 

画像の内容を示すテキストのことです。

 

万が一画像が表示されなかった場合など、Googleはその画像が何の画像かを認識できません。

 

なので、Googleがその画像を認識できるよう、画像に代替テキスト(alt属性)を記述する必要があるわけです。

 

alt属性が効果を発揮する状況

 

  • 画像のリンク切れの場合
  • 通信状況が悪い場合
  • 視覚障害者、音声読み上げ機能を利用するユーザーの場合

 

ユーザーファーストに近くことがGoogleにとっての答えの一つなので、alt属性はしっかりと記述しましょう。

 

Googleよりalt属性に関する説明を引用しておきます。

代替テキスト(画像について説明するテキスト)は、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。

Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。また、画像の代替テキストは、画像をリンクとして使用する場合にアンカー テキストとして使用できます。

代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること(キーワードの乱用)は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。

参考 Search Console ヘルプ

alt属性がSEOに効果的である2つの理由

 

  • ユーザービリティの向上
  • Google画像検索でヒットする

 

解説します。

 

ユーザービリティの向上

alt属性を効果的に記述すると、Google検索エンジンと読者双方のユーザービリティの向上に繋がります。

 

Google→画像を認識できる
読者→画像の意味が理解できる、音声利用でも理解できる

 

Win-Winの関係なので、ユーザービリティ向上のためにもalt属性はしっかりと記述しましょう。

 

Google画像検索で読者を獲得できる

alt属性を記述しておくと、Googleの画像検索から読者を獲得できます。

 

実際に、Google Search Consoleで画像検索からの読者のクリック数を確認できます。

 

検索パフォーマンス→検索タイプ→WEBから画像に変更

alt属性の効果的な記述方法を解説【4つのポイント】

alt属性の記述方法

一般的なalt属性の記述方法は下記のとおりです。

 

なお必ず、HTMLに記述して下さい。

 

なぜなら、GoogleはHTMLを解析し、画像をインデックス登録するからです。

 

CSSの画像はインデックス登録しません。

 

<img src="画像のurl" alt="画像の代替タイトル"/>

 

基本型はこんな感じで、次は細かい記述方法を深堀りします。

alt属性の効果的な記述方法は4つあります

 

  • Googleが画像を推測しやすいようファイル名を変更
  • 画像がタイトル、見出し、リンク要素の場合に記述
  • 具体的な画像の内容を記述
  • 多数のキーワードを散りばめない(スパム扱い)

 

ファイル名で画像の概要を示そう

Googleが画像ファイルを推測しやすいようにファイル名を変更しましょう。

 

デフォルトだと、、、

 

  • photo-0001.jpeg
  • スクリーンショット2020-01-01-10.33.01

 

みたいな画像ファイル名になっています。

 

ぶっちゃけそのファイル名を見ただけでは、何を表す画像かが分かりませんよね。

 

なので、Googleが何を表す画像なのかを推測できるよう画像ファイル名を変更しましょう。

 

たとえば子犬の画像なら、、、

 

  • small-dog.jpeg

 

これならGoogleも、その画像ファイルが「子犬」なのかなと予め中身を推測できます。

 

ファイル名も画像テーマを判断する重要な要素になることを覚えておきましょう。

画像がタイトル、見出し、リンク要素の場合

トップ画像やアイキャッチ画像、見出し画像、リンク画像の場合は、必ずalt属性を記述しましょう。

 

なぜなら、記事内容を示唆し重要度が高いからです。

 

検索エンジンに画像内容を認識してもらうことで、記事全体の評価は有利に働きやすくなります。

 

タイトル名や見出し文をコピペして、alt属性に記述するのもアリです。

 

具体的な画像の内容を記述

画像が表示されないことを想定し、簡潔かつ具体的に記述しましょう。

 

Googleから引用します。

<!-- ダメな例 -->
<img src="puppy.jpg"/>

<!-- 正しい例 -->
<img src="puppy.jpg" alt="子犬"/>

<!-- 最適な例 -->
<img src="puppy.jpg" alt="投げたものを取ってくるダルメシアンの子犬"/>

<!-- スパム扱い -->
<img src="puppy.jpg" alt="子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリア ドックフード 安いドックフード"/>

››参考 Search Console ヘルプ

 

多数のキーワードを散りばめない(スパム扱い)

キーワードの羅列は避けましょう。

 

なぜなら、キーワードを詰め込みすぎると、画像内容が分かりづらくなるからです。

 

スパム扱いにもなりやすくなり、Googleからの評価が下がるとSEOに不利に働きます。

 

とはいえ、装飾的な画像は空で良い

基本的に記述した方が良いと言いましたが、全ての画像にalt属性を記述する必要はないです。

 

装飾目的の場合、背景画像の場合などですね。

 

<img src="画像のurl" alt=""/>

 

このように、alt属性を設置しても中身は空にしておきましょう。

alt属性を効果的に記述し、SEO対策マスターを目指そう

というわけで、上記の内容をまとめると、、、

 

  • Googleが予め推測しやすいよう画像ファイル名を変更
  • alt属性を記述し、Googleとユーザービリティを向上
  • 具体的な画像内容を記述
  • スパム扱いを受けないようキーワードを羅列しない

 

以上4点を実行し、SEOに少しでも有利に立てるようになりましょう。