HTMLのaltタグとは?どんなSEO効果があるの?

HTMLのaltタグとは?どんなSEO効果があるの?

「HTMLのaltタグはなに?」「SEOと関係があるんだろうか?」とaltタグがどういうものなのか疑問に感じている人は多いと思います。

HTMLのaltタグは画像の説明を補助するだけと思っている人が多いと思いますが、実はSEO対策にも効果があります。

ブログを始めてある程度慣れてきた人も、これからブログを始めようかと考えている人に対しても、知っておいてもらいたい情報が、HTMLのaltタグです。より良いブログを運営するために理解をしてもらうことをおすすめします。

このページでは、日本最大級のWEBメディアであるWeb Reach編集部がHTMLのaltタグについて以下のことを解説します。

  • altタグとは
  • altタグのメリット
  • altタグの確認方法
  • altタグを記載しなくても良い場合

このページを読めば、HTMLのaltタグについての理解が深まり、より良いブログ運営が可能になるでしょう。

内容を簡単にまとめると・・・

  • HTMLのaltタグとは、画像の内容を説明するのに必要なHTMLのimgタグ情報
  • altタグを入れることで、検索エンジンに画像の内容を正しく伝えられたり、画像が表示されなかった時にユーザーが画像の内容を把握するのに役立つ
  • GoogleはOCR機能を使って画像内の文字を読み取っている可能性があるので、altタグ同様、画像内に文字を入れればキーワードとの関連性を高められる可能性がある
  • SEO対策にはaltタグも大切だが、他にもたくさん重要なことがあり、それを一人でやろうとすると非常に時間がかかる
  • そのため、時間があまり取れないという方やSEO知識に自信がないという方はsmartASPというツールがおすすめ
  • smartASPはサイトを分析し、自動で修正すべき記事を抽出してくれたり、競合分析を効率化してくれるので初心者や時間のない人でも本格的なSEO対策が可能
  • 全ての機能が無料なので、まだ登録していない方は登録しておくべき

smartASPの公式サイトはこちら

\3分で登録/

HTMLのaltタグとは?

HTMLのaltタグ

HTMLのaltタグとは、画像を表示するのに必要なHTMLのimgタグの情報の一つです。

この説明でaltタグについてわかった人は、HTMLのaltタグについて詳しい人のはずです。しかし、ブログを初心者の人やSEOを勉強中の人はどういったことなのか、わかる人は多くはないでしょう。

今回説明する、HTMLのaltタグをしっかりと理解することができれば、現在運営をしているサイトを上位表示する手助けになる可能性があります。

すでに知っている人も、振り返りとして今回ご紹介した内容をもとに、運営されているサイトで確認をすることをおすすめします。

SEO対策にも効果的なaltタグについて、しっかりと学んでください。

altタグを入れる理由は?

altタグを入れる理由は、画像に対してテキストコンテンツと同じ情報を提供するために必要です。

画像についての情報を追加することにより、ユーザーや検索エンジンに対してさらに詳しく情報を伝えることができるようになります。伝えたい画像を正しく理解してもらうためにも適切にaltタグに画像の情報を入力するようにしましょう。

画像や動画などのことを非テキストコンテンツと呼びます。非テキストコンテンツでは、テキストを持たないため、そのままでは情報を持つことができません。そこで、altタグに適切な情報を入力することで、テキストコンテンツと同じくユーザーに対して情報を与えることができます。

altタグは重要ですので、まだ理解できていない人は、これからお伝えする内容をもとに、運営されているブログを見返してみることをおすすめします。

SEO効果が期待できる

SEO対策については、ブログを運営している人であれば、意識されているかと思います。検索エンジンのクローラーは、画像だけの場合では、画像の意味を理解することができません。非テキストコンテンツである画像に対して、正しい情報を載せてテキストコンテンツと同じ役割を持たせることにより、クローラーが画像の情報を理解することができます。

その他にも、モバイルでキーワードを検索すると、以下のように検索結果に画像が表示されることがありますが、表示させたい画像のaltタグにキーワードを入れておけば、その画像が検索結果に出る可能性が高まります。

そうすればCTRの上昇に効果があるでしょう。

ユーザーに対して画像をわかりやすく説明をするのと同じように、クローラーに対してもわかりやすい情報にすることがSEO対策にも繋がります。更に、OCR機能があることによりGoogleは画像にある文字を理解することが可能です。OCR機能により、画像に直接文字を入力している場合にも、キーワードとの関連性を高められる可能性があります。

しかし、OCR機能を使用しても、全ての文字を理解することは今の段階では難しいです。手書きの文字のときや、表の場合には情報を読み取ることができないこともあります。

Googleの公式からも、読み取ることができるファイルは、JPEG、PNG、GIF、PDFの各ファイルと説明されています。

音声読み上げを聞いている人に役立つ

普段音声読み上げでコンテンツの内容を理解している人は、スクリーンリーダーや音声ブラウザを使用しています。スクリーンリーダーや音声ブラウザは、文字情報を読み上げることはできますが、画像や動画などの非テキストコンテンツを音声で伝えることができません。

非テキストコンテンツに対してもスクリーンリーダーや音声ブラウザで、ユーザーに情報を届けるのに必要なのが、altタグです。altタグに画像の情報を入力することで、音声読み上げを利用している人にも、理解してもらうことができます。

画像や動画を使用する場合には、altタグにテキストを登録するのを忘れないようにしましょう。

画像が表示されなかった場合に役立つ

Web環境や画像のトラブルで、万が一画像が表示することができない場合でも、altタグのテキストが表示されます。altタグに画像のテキストを入力していることで、ユーザーに対してどういった内容の画像なのかを理解してもらうことができます。

画像のテキストについては、関係ない文言ではなく、画像の説明を行う文章を入力するようにしてください。間違った文章を入力してしまうと、クローラーに対しても間違った情報を与えてしまいます。

altタグの記載方法

altタグがSEO効果を期待することができることを理解していただけたかと思いますが、適切に入力しなくてはいけません。

反対に適切に入力しない場合には、悪影響を与えてしまう恐れがありますので、注意してください。

ここからは、実際にどのように入力をしたら良いのか解説を行なっていきます。

altタグはどうやって入れるべき?

altタグの入力方法は、以下の入力方法です。

<img src=”画像のURL”alt=”◯◯◯“/>

◯◯◯の部分に対して適切なテキストを入力することが重要です。間違った文章を入れてしまうと検索エンジンが間違って理解してしまうので気をつけてください。テキストを入力する際も、長く説明するのが良いわけではありません。簡潔なわかりやすい文章を入力するのが効果的です。

画像に関係のある文言を入れる

altタグに入力する文言は、画像と関係あるものを入力しましょう。先ほど、音声読み上げで聞いている人や、画像が表示されなかったときにも役に立つことを説明しましたが、そのような場合でも文章の情報だけで画像を理解することができないといけません。

例えば、富士山の写真を使用した例であげてみると、

  • 悪い例)<img src=”画像のURL”alt=”山梨県 静岡県 青い空 緑 雪 富士山 湖 登山”/>
  • 良い例)<img src=”画像のURL”alt=”初冠雪の富士山”/>

情報をつめこみすぎると何を伝えたいのかわからなくなります。文字数については、明確な基準はありませんが、altタグに入力する文言はできるだけ簡潔な文章にし、誰が見てもわかりやすい文章にしましょう。

一見「登山」というキーワードは富士山と関係があるように思いますが、表示する内容によっては関係がない場合もあります。キーワードを並べただけでは、スパムと判断される可能性もありますので、注意してください。

下記の例でもあるように、キーワードを並べていなくても文章が長い場合でも同様です。

  • 悪い例)<img src=”画像のURL”alt=”生まれたての茶色い柴犬の赤ちゃんが母犬のミルクを飲んでいる”/>
  • 良い例)<img src=”画像のURL”alt=”生まれたての柴犬の赤ちゃん”/>

悪い例の文章のキーワードだけを見るとどういった画像かわかるかもしれませんが、文章はまとまりがありません。altダグに入力する場合は、良い例の文章のように、文章でも理解しやすく、画像をみても様子が伝わるようにしましょう。

ユーザーにとってもわかりやすい文章は、クローラーにとってもわかりやすく、結果としてSEOに効果のあるものになります。

イメージリンクにも入れる

イメージリンク(a要素)を設定するときには、altタグはアンカーテキストとしての効果もあります。リンクボタンを作成する場合にも、商品名をそのままリンクしてください。アンカーテキストはSEO対策としても効果もありますので、イメージリンクに入力することをおすすめします。

アンカーテキストを適切に入力することができれば、検索エンジンに対してどのようなサイトなのか、サイトの階層構造について的確に伝えることができます。リンク先のページの情報を正確にクローラーへ伝えることができれば、リンク先のページに対しても正しく評価を渡すことができます。

  1. リンク先の内容がわかる文章にする
  2. キーワードを含める
  3. 一目で見てわかる内容にする

アンカーテキストを入力する際には、以上の3つのポイントを参考にしてください。

altタグの確認方法

ここまで、altタグの入力方法を説明してきましたが、入力をした後は、適切に入力されているか確認をすることをおすすめします。

  • Googleで確認を行う場合
  • Chromeで確認を行う場合

今回は、以上の2点での確認を行う方法をご説明します。

Googleで確認を行う場合

Googleで確認を行う場合は、ツールを使用しなくてもすぐに確認をすることができます。ツールをしようしない場合には、Googleにある、「検証機能」を使用して確認をすることができます。

以下の5つの手順を参考にして確認を行なってください。

  1. altタグを入力した確認をしたいページを開きます。
  2. 右クリックを押して、「検証」をクリックします。
  3. 画面上にページのソースコードが表示されます。
  4. 確認したい画像をクリックすると、altタグを確認できます。
  5. <img src=”画像のURL”alt=”◯◯◯”/>の◯◯◯の部分を確認してください。

以上が、Googleで確認を行う手順となります。

Chromeで確認を行う場合

Chromeで確認を行う場合には、「Alt&Meta viewer」といった無料ツールを使用することで確認をすることができます。まだインストールをしていない人は、はじめにインストールをする作業が必要になります。

  1. Chromeウェブストアから「Alt&Meta viewer」をインストールします。
  2. Chromeブラウザの右上にある[Alt]をクリックします。
  3. altタグが記述されているかどうかを確認できます。

以上が、Chromeで「Alt&Meta viewer」のツールを使用して確認を行う手順となります。

Chromeの場合にもツールを使用しなくてもaltタグを確認をすることができます。

  1. altタグを入力した確認をしたいページを開きます。
  2. 右クリックを押して、「ページのソースを表示」をクリックします。
  3. command(control)+Fを押して検索ボックスを表示させます。
  4. 検索ボックスにaltを入力するとalt入力されている部分がマークされます。
  5. <img src=”画像のURL”alt=”◯◯◯”/>の◯◯◯の部分を確認してください。

以上が、Chromeでツールを使用しないで確認を行う手順となります。

Chromeの場合には、ツールを使用する場合と使用しない場合の2つから選ぶことができます。

altタグを記載しなくても良い場合

ここまで、altタグについての入力のやり方を説明してきましたが、altタグは入力をしなくても良い場合もあります。画像として意味を持たない場合には、altタグを入力せずに空白にしてください。

画像として意味のないものとは、「背景画像」や「ラインマーカー」などがあります。そういった画像の場合には、altタグにテキストは必要ありません。しかし、altタグは必要ですので、間違えないようにしてください。

  • 悪い例)<img src=”画像のURL”/>
  • 良い例)<img src=”画像のURL”alt=””/>

しかし、空白にする場合でも、上記のように「alt=””」は必要ですので、忘れずに入力をするようにしてください。

装飾目的の場合には、コンテンツとしての意味がありません。装飾目的の背景画像やラインマーカーなどの場合には、sltタグを記載しなくても良いので覚えておきましょう。

まとめ:HTMLのaltタグとは?

まとめ:HTMLのaltタグとは?

今回は、HTMLのaltタグについて解説をしてきました。

<HTMLのaltタグについて重要なこと>

  • altタグの文章は簡潔に書く
  • キーワードを並べない
  • 音声読み上げを聞いている人にも理解してもらえる
  • 画像が表示されないときに役に立つ
  • 装飾目的の画像の場合はaltタグは空白にする

HTMLのaltタグをしっかりと理解することでSEO対策にも繋がります。

HTMLのaltタグについて、まだよくわからないところがあるという方は、もう一度解説部分を見返してみてください。

コメントを残す