MENU
全国対応
hashi kazuaki
SEO対策・WEB集客
SEO対策・WEB集客歴13年
独立・起業のWEB支援3社/既存企業のWEB集客5社立ち上げサポート。2021年からHP製作・WEB集客支援スタート。


⇒ご挨拶/経験と失敗談
⇒WEB集客とSEO対策の実績紹介

検索するとどれも同じようなホームページが並ぶ中
☑もっと検索順位を上げて集客したい
☑「ここの会社がいい!」と思って選んでもらいたい
このような思いを持っている企業様のサポートを行っています。

altタグでSEO対策。画像検索のアクセスも見込めるaltタグの書き方・付け方を解説します。

altタグ(alt属性)画像の説明文ちゃんと書いていますか?

この記事ではaltタグ(alt属性)について概要がすべてご理解していただけるよう解説していきます。

  • altタグとはなに?
  • altタグの書き方は?
  • altタグを書く書かないの違いは?
  • altタグにSEO効果はどれくらいある?
  • 画像検索に表示させることはできる?

このような疑問を解消していただければ嬉しいです。

橋 和昭

こんにちは。
橋と申します。

私は、実際に建築・土木業界で働いていた経験があります。
インターネットで副業をはじめその後独立、現在は建築・土木会社を中心にホームページ制作からSEO対策、WEB集客のサポートをおこなっております。

実際にブログ運営、企業ホームページの制作・運営サポートを行っている経験からaltタグについてご説明しますので参考にどうぞ。

無料相談承り中です。

ホームページ運用・WEB集客・SEO対策に関するご相談承ります。
御社のWEB担当として運用もお引き受けしております。

⇒無料相談フォーム
⇒プロフィール

⇒【ホームページ制作】建設業の集客専用
⇒【SEO対策】建設業の検索順位⇒集客まで一括お引き受け

目次

alt属性(altタグ)とは

alt属性とは、ホームページ上に掲載している画像の代替えテキストを書くタグのことで、altタグとも言います。

alt属性 = altタグ
です。

読み方は「オルト」

alt属性、altタグ。
読み方は「オルト」です。

altタグ主な2つの役割とは

歯車とWEB空間を表現するイメージ

altタグは写真や画像などimgタグに記述する説明文です。

altタグの役割としては

  1. 検索エンジンにどんな画像なのかを伝える
  2. 画像が表示されなかったときに「代替テキスト」として表示

この2点が主な役割です。

通信環境など何らかの問題で画像が表示されない場合にaltタグに記述された説明文が表示されます。

altタグはSEO対策にどんな効果があるのか?

アイフォンで表示したGoogle検索画面
  • そもそもaltタグは書く必要があるのか?
  • SEO対策にどのような効果があるのか?

この辺りが最も気になる部分かと思います。
実際にaltタグの役割やSEOを含みどんな効果があるのかご紹介します。

検索エンジンに画像の内容を知らせる

altタグは、Googleの検索エンジンに対して「この画像はこんな写真ですよ」と伝える役割を果たしています。

Googleの検索エンジンは、画像のみでどんな内容なのかを完全に理解するのは難しいとされています。

  • 記事の内容
  • 画像の前後の文章
  • ファイル名(sample.jpg)
  • altタグ

などから画像の内容を知る手掛かりになっており、altタグは検索エンジンが画像の内容を正確に伝えられる重要なタグと言えます。

適切なaltタグで画像検索に表示される

「エクステリア 福岡」で検索した画像検索結果キャプチャ画像
エクステリア 福岡で検索
「アスファルト舗装 名古屋」で検索した画像検索結果キャプチャ画像
アスファルト舗装 名古屋で検索

また、検索エンジンには「画像検索」という項目もあります。

altタグを設定している画像は、この画像検索の検索結果に表示されやすくなりますので、altタグにはSEO効果もあると言えます。

altタグを書いていない画像は、画像検索に表示されにくくなります。

画像検索のアクセス事例

橋 和昭

画像にaltタグを丁寧に書いてページを増やしていくと、画像検索からのアクセスも増えます。

サーチコンソール「検索パフォーマンス」Google検索タイプのキャプチャ画像その1
サーチコンソール「検索パフォーマンス」Google検索タイプのキャプチャ画像その2
サーチコンソール「検索パフォーマンス」Google検索タイプのキャプチャ画像その3

上記の事例は、Google検索から月間何回クリックされたかのデータです。

画像検索のクリック数は少ないですが、これが毎月となると無視できない数字ですよね。

ただし、altタグにSEO効果を期待しすぎるのはNGです!

ここまでaltタグの基本的な考えについてご紹介してきましたが、altタグにSEO効果を期待しすぎると危険ですので、ここからaltタグの書き方や注意点をご紹介します。

altタグの書き方

スマホに表示された写真

ここからaltタグの書き方を解説していきます。

altタグの正しい書き方とポイント

altタグは、jpgやpngなど画像ファイルの代替テキストです。
シンプルにどんな画像・写真かを解説する文章を書く必要があります。

例1
<img width=”700″ height=”525″ src=”https://sample.com/asphalt_after.jpg” alt=”駐車場のアスファルト舗装完成写真”>
例2
<img width=”700″ height=”525″ src=”https://sample.com/asphalt_bifore.jpg” alt=”北区アスファルト舗装工事、着工前の正面写真”>

altタグの書き方ダメ例

悪い例
<img src=”https://sample.com/asphalt_bifore.jpg” alt=”アスファルト・舗装・外構・エクステリア・庭工事”>

このように単にキーワードを羅列して詰め込むようなaltタグはNGです。

悪い例
<img src=”https://sample.com/asphalt_bifore.jpg” alt=”アスファルト舗装”>

代替テキストとして説明不足なケースも好ましくありません。

意味のない画像にaltタグは不要

ちなみにaltタグは、全ての写真や画像に設定する必要はありません。

背景画像やアクセントとして使われているような画像であれば、altタグを書かなくても問題ありません。

ダメなaltタグ。3つの注意点

女性の人差し指「CAUTION」

altタグの良い例・悪い例をご紹介しましたが、ここで注意点をまとめます。

altタグ3つの注意点
  1. キーワード(単語)の詰め込みはNG
  2. 1画像は必ず同じaltタグ。複数の画像に同じaltタグはNG
  3. 難しく考える必要はない。説明するだけ

それでは一つひとつ見ていきましょう。

キーワード(単語)の詰め込みはNG

altタグにSEO効果を期待するあまりキーワードを詰め込むのはNGです。

悪い例
<img src=”https://sample.com/asphalt_bifore.jpg” alt=”アスファルト・舗装・外構・エクステリア・庭工事”>

このようなにSEOで上げたいキーワードを羅列しても無意味です。SEOは狙い過ぎると悪影響しかありませんので注意しましょう。

1画像は必ず同じaltタグ。複数の画像に同じaltタグはNG

1画像につきaltタグは1つです。

ホームページには1枚の画像を複数のページで使う場合もあるでしょう。

3ページに同じ画像を使う場合

例えば、次の3つページに同じ画像を挿入する場合

https://sample.com/page1/
https://sample.com/page2/
https://sample.com/page3/

https://sample.com/page1/
<img width=”700″ height=”525″ src=”https://sample.com/asphalt_after.jpg” alt=”駐車場のアスファルト舗装完成写真”>
https://sample.com/page2/
<img width=”700″ height=”525″ src=”https://sample.com/asphalt_after.jpg” alt=”中区アスファルト舗装完成写真”>
https://sample.com/page3/
<img width=”700″ height=”525″ src=”https://sample.com/asphalt_after.jpg” alt=”アスファルト舗装をしている様子”>

このように同じ画像なのに掲載するページによってaltタグを変えるのはNGです。

難しく考える必要はない。説明するだけ。

altタグに裏技はありません。

「この画像を見せないで、この画像のことを伝えるとしたら?」

通信環境などの影響で画像が表示されないときに表示される「代替テキスト」です。
なので、写真を見れない人に「この写真は●●の写真ですよ」と説明すれば良いのです。

WordPressとhtmlでalt属性を記述する方法

パソコンモニターに表示されているhtml

では、ここでaltタグの記述や設定方法についてご紹介します。

  • WordPressの書き方
  • htmlの書き方

それぞれご紹介します。

WordPressでalt属性を記述する方法

Wordpress管理画面メディアアップロード「代替テキスト」を示したキャプチャ画像

WordPressでオルト(alt)タグを書く場合は、メディアアップロード画面で「代替テキスト」を書きましょう。

代替テキストを書いて「選択」するとaltタグを書き込んだ状態で挿入されます。

htmlでalt属性を書く方法

htmlで記述する場合はimgタグ内にaltタグを記述します。

htmlのimgタグにalt属性を記述する
<img width=”700″ height=”525″ src=”https://sample.com/asphalt_after.jpg” alt=”駐車場のアスファルト舗装完成写真”>

alt属性(タグ)に関する質問に答えます。

altタグ・alt属性に関する質問に答えます。

title属性とalt属性の違いは?

title属性とは、ページ上でカーソルを合わせると吹き出しでコメントが表示されます。

title属性はimgタグ(画像)以外にもアンカーテキストにも利用でき、

alt属性(オルトタグ)は「画像の内容を理解できる説明」に対し、title属性は「補足文」という側面が強く、SEO対策の視点で見た場合もalt属性にtitle属性は比べ重要度は低いです。

施工事例の写真のように似た写真のaltタグはどう書く?

施工事例の写真や手順解説の写真など、似た構図の写真を何枚も掲載する場合は

  • ●●の写真その1、●●の写真その2
  • ●●の写真(正面)、●●の写真(側面)、●●の写真(裏側)
  • ●●の写真(アップ)、●●の写真(全体)

というように書くのも一つの方法です。

写真を見て目についた違いや順序、構図の違いを表現して同じ写真でも違いを表現しましょう。

施工事例写真をGoogle画像検索に表示させたいんだけどどうすれば良い?

altタグに地域名、キーワード、何の工程かを書いた解説文にすると良いです。

alt=”中区の駐車場アスファルト工事の様子”
というような具合です。

altタグを書いたからと言って全ての写真が画像検索の結果に表示されることはありませんが、Googleは写真の前後の文脈などからも判断します。

それらを踏まえ「この写真が見えない人に、どんな写真なのかを説明する文章」を書きましょう。

まとめ

altタグ(alt属性)は写真、画像ごとに書く必要があるので面倒ですよね。汗

しかし、1枚1枚コツコツaltタグを書くことでSEO効果もジワジワ効いてきますし、画像検索からも小さなアクセスが集まります。

チリも積もれば…というように、アクセスに貢献してくれますので写真・画像をUPする際は必ずaltタグを書きましょう。

最初は「なんて書こうかな…」と少し悩むかもしれませんが、慣れてくるとサクサク書けるようになるはずです。

無料相談承り中です。

ホームページ運用・WEB集客・SEO対策に関するご相談承ります。
御社のWEB担当として運用もお引き受けしております。

⇒無料相談フォーム
⇒プロフィール

⇒【ホームページ制作】建設業の集客専用
⇒【SEO対策】建設業の検索順位⇒集客まで一括お引き受け

すでに結果の出ている勝ちパターンでホームページを制作いたします。施工会社限定5社だけ特別価格 ホームページのこと、集客・SEOのこと、お気軽にご相談ください。zoomで無料相談、詳しくはこちら⇒
altタグ(alt属性)画像の説明文ちゃんと書いていますか?

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を読んだ方のコメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる