画像の代替テキスト(alt属性)でSEO対策【正しい書き方で検索数UP】

[adcode]

画像の代替テキスト(alt属性)とは？

代替テキスト(alt属性)は、ブログに画像を用いるさいに使用するHTMLタグ『img属性』の一つです。

読み方は『オルト』で、語源は英語のalternative(オルタナティブ：代替)です。

画像のソースコード(alt属性の記述)

上記の『alt=” “』の部分が代替テキスト(alt属性)です。

なぜこのように画像に代替テキスト(alt属性)が必要かというと、代替テキスト(alt属性)には以下のような役割があります。

代替テキストの役割

代替テキスト(alt属性)はSEO評価に関わる

画像の代替テキスト(alt属性)は、次の3要素からSEO評価に関わります。

それぞれ詳しく解説していきます。

①検索エンジンに認識される

画像の代替テキスト(alt属性)を記述すると、検索エンジンのクローラーに認識してもらえます。

検索エンジンのクローラーは画像の内容を把握できない、正確にはある程度の把握はできるけどさらに詳しく伝えることができます。

画像は『Wordpressブログの始め方　ConoHa WING』と画像検索したときの検索画面で、右下の赤い枠で囲っているのが当ブログの画像です。

上記のワードで検索をする6日前に公開した記事ですが、すでに画像検索の1画面目に表示されています。

ブログ初心者が検索流入でアクセスを増やすのは簡単なことではありませんが、画像検索であれば上位検索の可能性があるということ。

ちなみに、画像の代替テキスト(alt属性)に関して、Googleは以下のように述べています。

画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。(引用：検索エンジン最適化（SEO）スターターガイド)

結論として、検索エンジンにも認識され、ブログ初心者でも画像検索という流入経路が増える画像の代替テキスト(alt属性)の記述は必須です。

②画像表示されないときの代替テキスト

代替テキスト(alt属性)はネットワーク接続の影響で画像がうまく読み込まれない場合、代わりのテキストとして表示されます。

Googleは下記のように説明しています。

画像にわかりやすいファイル名を付けて、alt 属性の説明を入力します。「alt」属性を使用すると、何らかの理由で画像を表示できない場合の代替テキストを指定できます。

引用：検索エンジン最適化（SEO）スターターガイド)

上記の引用画像でいえば、『2008 Signed World Series Baseball』が代替テキスト(alt属性)です。

もし、このような表示がされていなければただの空白になってしまうため、ユーザビリティが下がり、ユーザーの離脱率も上がってしまいます。

③音声プラウザ使用時の補助テキスト

視覚障碍者の方は、ブログを読むときに文字や画像を見ることができない代わりに音声プラウザを利用して内容を耳で聴いて理解します。

音声プラウザは、代替テキスト(alt属性)を記述しておかないと画像を音声変換できません。

そのためユーザビリティの低下に繋がり、検索順位に影響が出る可能性もあります。

このことについてGoogleも以下のように述べています。

この属性を使用するのは、ユーザーがスクリーン リーダーのようなサポート技術を使ってサイトを閲覧する場合に、alt 属性の内容が画像についての情報を提供するためです。(引用：検索エンジン最適化（SEO）スターターガイド)

googleが明言しているように、画像の代替テキスト(alt属性)は補助テキストとして使用されるため、必ず入力するようにしましょう。

代替テキスト(alt属性)を書く場所

画像の代替テキスト(alt属性)お記述場所について説明します。

代替テキスト(alt属性)の記述場所は主に２つ

メディアから代替テキスト欄に記述する

まずは、メディアファイルを開きます。

クラシックエディターの場合

ブロックエディターの場合

それぞれメディアを開いて画像をアップロードしたら、下記のような画面を開きます。

このように『代替テキスト』という欄に記述をし、『選択』をクリックして記事に画像を挿入します。

ソースコードに直接入力する

まずは画像を記事に挿入します。

『HTML編集』に変更すると下記のような『alt=” “』という項目が、代替テキスト(alt属性)になります。

画像に代替テキスト(alt属性)を入力すると、以下のようになります。

以上のような方法で、画像の代替テキスト(alt属性)の記述ができます。

画像は関連テキストの近くに配置する

画像の配置は、できるだけ関連するテキストの近くに配置して代替テキスト(alt属性)を入力するようにしましょう。

代替テキスト(alt属性)と合わせて関連テキストの近くに画像を配置することで、ユーザーや検索エンジンに画像の意味を正しく伝えることができます。

ここまでの情報が把握できたら、次に具体的な記述方法を解説していきます。

[adcode]

代替テキスト(alt属性)の書き方

代替テキスト(alt属性)の具体的な書き方を解説していきます。

代替テキスト(alt属性)そのものは簡単ですが、書き方を間違えるとペナルティを受けて検索順位を落とされる可能性があるため注意が必要です。

以下でGoogleが提言している注意事項を確認しておきましょう。

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

ペナルティについてこのように記述されています。

文章だけでは分かりづらいと思うので、これから具体的に解説していきます。

代替テキスト(alt属性)の正しい書き方

代替テキスト(alt属性)の正しい書き方のポイントは2つだけです。

代替テキスト(alt属性)の間違った書き方

初心者の多くがやってしまっている代替テキスト(alt属性)の間違った書き方は、次のとおりです。

書いていない場合は書く必要がありますが、間違った書き方をしてしまうとSEOからペナルティの対象になって検索順位を下げられる可能性があります。

代替テキスト(alt属性)の具体例

文章ではよくわかりづらいと思うので、実際に下の画像を用いて具体例を挙げていきます。

赤ちゃんがパソコンを触っている画像というのは見ればわかりますが、検索エンジンからすると768×432の画像でしかありません。

正しい書き方例

画像に関連した内容を簡潔に書いていて、誰にでも内容が伝わります。

間違った書き方例

①書いてない

何も書かないことでSEO評価が下がることはありませんが、画像検索に表示されることはありません。

②やたらと長文

画像の内容に合ってはいますが、やたらと長すぎるとユーザーや検索エンジンには好まれません。

③キーワードの羅列

それぞれのキーワードは正しく内容も押さえていますが、キーワードの羅列はスパムと判断されてペナルティを受ける場合があります。

④意味不明な文字列

画像と照らし合わせればなんとなくわかりますが、画像が読み込めない時に表示されたら見不明です。

Googleの検索エンジンも意味を理解できません。

⑤画像と関連しないワード

関係ないテキストは高確率でペナルティを受けます。

SEO評価が下がり、検索順位も落ちるのでいい加減な内容を書くのはやめましょう。

代替テキスト(alt属性)を入力しない場合

重要性の低い画像は代替テキスト(alt属性)を入力しません。

例えば次のような場合

このことについては、GoogleのJohn Mueller氏も明言しています。

[adcode]

まとめ：代替テキスト(alt属性)の正しい書き方でSEO対策

画像の代替テキスト(alt属性)は、Googleの検索エンジンに画像の正しい情報を伝えるための大切な記述です。

本記事の内容をもう一度まとめます。

代替テキスト(alt属性)の効果３つ

代替テキスト(alt属性)の記述ポイント

記述のポイントを押さえて正しい書き方をすれば、初心者でも画像検索で検索上位に表示されてアクセスアップに繋がります。

ブログで使用する画像はサイズや容量もSEOに大きく関わります。

▼画像サイズに関する詳細はこちら
>>ブログ画像のリサイズ・圧縮で『ページ表示速度』を改善【具体的な方法を3つ紹介】