Web集客

画像SEOはaltの棚卸しから|alt属性の書き方とファイル名・置き方の直し方

画像SEOの直し方 altの棚卸しから直す alt属性の書き方とファイル名・置き方

記事の画像を見直そうとして管理画面を開くと、代替テキストの欄が空のまま並び、ファイル名も写真素材の番号や「名称未設定のデザイン」のまま残っていることがあります。画像が数百枚ある状態では、どの画像に何を書けばよいかが決まらず、手を付けられないまま後回しになりがちです。

画像の見直しで先にやるべきことは、画像の役割と今の状態を数え、直す順番を決めることです。この記事では、画像SEOで見直す5つの項目と画像の役割に合わせた alt 属性の書き方、自社の画像を棚卸しする手順を解説します。株式会社メリルが運営するオウンドメディア相談室で、アイキャッチと図解の alt 属性やアイキャッチのファイル名をどう決めているかも載せました。

記事を読めば、自社の画像のどれから何を直せばよいかがわかります。画像SEOの基本は3つで、画像の役割に合わせた alt 属性・中身がわかるファイル名・関係する文の近くに置いた img 要素です。

画像SEOで見直す5つの項目

画像SEOで見直す5つの項目(altに内容を書く・中身がわかるファイル名・関係する文の近くに置く・大きさと形式・画像サイトマップ)を並べた図解

Google は画像の alt 属性に加えて、画像を載せたページの内容や画像そのものの解析も使い、画像のテーマを理解しています。画像のファイル名も、Google が画像の中身を判断するときの手がかりになる場合があります。企業の記事やページの画像で見直す項目は、以下の5つです。

  • alt属性に画像の内容を書く
  • ファイル名を画像の中身がわかる短い名前にする
  • 画像はimg要素で関係する文の近くに置く
  • 画像の大きさと形式を整える
  • 画像サイトマップで見つけにくい画像を伝える

alt属性に画像の内容を書く

alt 属性は、画像の情報を検索エンジンに渡す属性の中で最も重要です。alt 属性に書いた文(代替テキスト)は、画像を見られない人に画像の内容を伝える役目も持っています。

この記事のページのソース。図解のimg要素のalt属性に、図解に描いた内容を書いている

この記事のページ(https://blog-soudan.com/owned-media/image-seo/)のソースを、Chromium のページのソースの表示で開いた画面(2026年10月31日)。

スクリーンリーダーで画面を読み上げて使う人や、通信が遅いネットワークで画像を表示できない人にとっては、alt 属性の文が画像の内容を知る手がかりです。画像をリンクにした場合、alt 属性の文はリンクの文(アンカーテキスト)としても使われます。

alt 属性の文は、画像の代わりにその文を置いても違和感のない内容にするのが基本です。長さを決めた仕様や規格はありませんが、読み上げで聞き取りやすい長さとして、80字が目安です。

キーワードを並べるだけの alt 属性は避けましょう。alt 属性へのキーワードの詰め込みは、利用者の使い心地を下げるだけでなく、サイトがスパムとみなされる要因になる場合があります。

ファイル名を画像の中身がわかる短い名前にする

画像のファイル名は、写っている物や図の中身がわかる、短い名前にします。IMG00023.JPG のような番号だけの名前や、image1.jpg・pic.gif・1.jpg のような汎用の名前は、画像の内容の手がかりになりません。

画像を別の言語のページ向けに用意するときは、ファイル名もその言語に訳すのが基本です。ラテン文字以外の文字を使う場合は、URL エンコードの決まりに従います。日本語のファイル名が URL の中で表される形は、%E3%81… のような記号の並びです。社内で英小文字・数字・ハイフンで名前を付ける決まりを作っておくと、担当者が変わっても名前の付け方がそろいます。

画像が数千枚あるサイトでは、名前の付け方を自動にする方法も選択肢の1つです。オウンドメディア相談室では、アイキャッチの画像の名前を記事の URL の末尾と同じ英小文字とハイフンにしています。2026年10月30日21時時点でアイキャッチの画像がある記事30本(公開の準備中のものを含む)は、すべてが htaccess-redirect.webp のような名前です。

公開済みの画像の名前を変えると、画像の URL も変わります。名前を付け直す画像は、古い URL から新しい URL への転送もあわせて設定します。

» htaccessのリダイレクトの書き方|301の設定例と確かめ方・注意点

画像はimg要素で関係する文の近くに置く

検索に出したい画像は、HTML の img 要素で置きます。Google は img 要素の src 属性に書いた画像を見つけられますが、CSS の背景に指定した画像はインデックスに登録しません。picture 要素の中に置いた img 要素も、見つけられる画像に含まれます。

画像を置く場所は、画像のテーマに関係するページの、関係する文の近くにしましょう。Google は、画像のキャプションやページのタイトルなど、画像を載せたページの内容からも画像の情報を取り出しています。

画面の幅に合わせて画像を出し分ける srcset 属性や picture 要素を使う場合も、src 属性に画像の URL を必ず書いておきます。ブラウザやクローラーの中には、srcset 属性や picture 要素を理解できないものがあるためです。オウンドメディア相談室のアイキャッチも、img 要素に src 属性と srcset 属性の両方を書いて表示しています。

画像の大きさと形式を整える

画像は、Google 検索が対応している形式で保存し、表示に必要な大きさに整えます。対応している形式は BMP・GIF・JPEG・PNG・WebP・SVG・AVIF の7つで、ファイル名の拡張子は実際の形式に合わせます。

画像は、ページ全体のサイズを大きくし、読み込みを遅くする原因になりやすい要素です。一方で、鮮明な画像は検索結果のサムネイルで目立ちます。画質と軽さの釣り合いは、PageSpeed Insights などで表示速度を測りながら決めます。

オウンドメディア相談室のアイキャッチの元の画像は、幅1,536ピクセルの WebP です。カードや記事ページに出すときは、表示する幅とその2倍の幅の2つの大きさを書き出し、画面に合うほうを読み込ませています。画像を軽くした効果は、直す前と後の表示速度を同じ条件で測って確かめます。

» 表示速度の改善は測ってから|Webサイトが遅い原因の見つけ方と直す順番

画像サイトマップで見つけにくい画像を伝える

本文の img 要素の src 属性に書いた画像は、Google がページから見つけられる画像です。ページの HTML だけでは見つからない可能性のある画像があるときは、画像サイトマップで Google に画像の URL を伝えられます。

画像サイトマップには、通常のサイトマップと違い、別のドメインにある画像の URL も書けます。CDN(コンテンツ配信ネットワーク)で画像を配信している場合は、クロールのエラーを Google から知らせてもらうために、CDN のドメインの所有者を Search Console で証明しておくのがおすすめです。

画像の役割で決めるalt属性の書き方

altの書き方を画像の役割で分け、写真は写っている物、図は短く、文字入りの画像は中の文字、ボタンは行き先、飾りは空のaltにすることを示した図解

画像がページの中で果たす役割によって、alt 属性に書く内容は変わります。役割は「画像に文字が入っているか」「リンクやボタンの中にあるか」「ページの内容に意味があるか」の順に確かめると見分けられます。企業のサイトで使う画像ごとの書き方は、以下のとおりです。

  • 写真やアイキャッチは写っている物を書く
  • グラフや図は結論を本文に書いてaltは短くする
  • ロゴや文字の入った画像は画像の中の文字を書く
  • バナーやボタンの画像は行き先を書く
  • 見出しの下の写真や飾りの画像は空のaltにする

写真やアイキャッチは写っている物を書く

記事の内容に関係する写真は、写っている物や様子を、画像の代わりに読んでも通じる短い文で書きます。たとえば商品を並べて撮った写真なら、alt="白い机に並べた3色のマグカップ" のように、写っている物と置かれた様子を書きます。

写真のアイキャッチの alt 属性に、記事の題名をそのまま書くのは避けましょう。記事ページではアイキャッチのすぐ近くに題名があることが多く、alt 属性にも題名を書くと、読み上げで同じ文を2回聞くことになるからです。見出しの文字を描き込んだアイキャッチは、文字の入った画像として、画像の中の文字を alt 属性に書きます。

アイキャッチを記事ごとに作っているなら、作ったときに alt 属性の文も一緒に決めておくと、後から1枚ずつ見直す手間がかかりません。オウンドメディア相談室では、アイキャッチの alt 属性の文を、記事の題名や要約と同じ記事のファイルに書いています。

グラフや図は結論を本文に書いてaltは短くする

グラフや手順の図のように情報の多い画像は、alt 属性には何の図かと要点を短く書き、細かい内容は画像の近くの本文に書きます。数字の一つひとつを本文や表でも示しておくと、画像を見られない人にも同じ情報が届きます。

画像のすぐ近くの本文に内容の要約があり、何のグラフや図かも本文で示していれば、alt 属性は空でもかまいません。図に文字が多く入っている場合は、図そのものを本文の文章や表に書き起こせないかを検討します。

オウンドメディア相談室では、h2 の見出しのすぐ下に、章の要点を描いた図解を置いています。図解の alt 属性に書くのは、何の図かと図に描いた項目をまとめた1文です。細かい説明は、図の下の本文に書いています。

2026年10月30日21時時点で図解を入れ終えた記事22本では、図解108枚に描いた件数・割合・時間などの数字が、すべて同じ記事の本文にも書いてありました。数字を横棒グラフにした図解でも、同じ数字を本文の文字として読めるため、画像を見られない人にも検索エンジンにも同じ内容が届きます。

ロゴや文字の入った画像は画像の中の文字を書く

ロゴや、見出しの文字を描き込んだ画像は、画像の中の文字と同じ文字を alt 属性に書きます。たとえば会社のロゴの画像なら、alt 属性に書く文はロゴに書かれた社名です。

画像に文字を描き込む場合も、伝えたい見出しや説明の文章は、ページの HTML の文字として書いておきます。WCAG 2.0 の達成基準1.4.5は、使っている技術で意図した見た目を表現できるなら、文字の画像ではなく文字そのものを情報の伝達に使うことを求めています。WCAG 2.0 は、日本の JIS X 8341-3:2016 と同じ内容です。

オウンドメディア相談室では、アイキャッチを、記事の見出しの文字を3行で描き込んだイラストで作っています。記事ページでは、アイキャッチの上に記事の題名を HTML の文字で書いています。アイキャッチの alt 属性に書くのは、画像に描いた見出しの3行の文字を、そのままの順に並べた文です。2026年10月30日21時時点で見出しの文字を描いたアイキャッチを入れ終えた記事22本は、22本とも alt 属性の文が、画像を作るときの指示に書いた見出しの文字と同じでした。alt 属性の文の長さは、平均40字・最長45字です。

画像の中の文字と alt 属性の文を食い違わせないために、画像を作るときの指示に書いた見出しの文字を、スクリプトで記事のファイルの alt 属性の欄に写しています。できあがった画像の文字は、指示と同じかを1枚ずつ目で確かめます。

バナーやボタンの画像は行き先を書く

リンクやボタンになっている画像は、リンクの行き先や押したときの動作を alt 属性に書きます。リンクの中に画像しかなく、alt 属性も無いか空のリンクは、読み上げで名前の無いリンクになります。名前の無いリンクでは、どこへ移るのかが伝わりません。

たとえば「公式サイトはこちら」と描いたボタンの画像なら、alt 属性には画像の中の文字と同じ「公式サイトはこちら」と書きます。行き先のサービス名を入れた「(サービス名)の公式サイト」のような文も、リンクの行き先が具体的に伝わる書き方です。

隣に同じ行き先の文字のリンクがある場合は、画像のリンクを読み上げとキーボードの移動から外す方法もあります。オウンドメディア相談室の記事カードは、画像のリンクと記事名のリンクの行き先が同じ記事です。画像のリンクには aria-hidden と tabindex="-1" を付け、読み上げとキーボードの移動では記事名のリンクだけが対象になるようにしています。

見出しの下の写真や飾りの画像は空のaltにする

見栄えのためだけに置いた画像は、alt="" のように alt 属性を空にします。WCAG 2.0 の達成基準1.1.1が純粋な飾りの画像に求めているのは、スクリーンリーダーなどの支援技術が無視できる形で置くことです。

見出しのすぐ下に置いたイメージ写真も、写真が内容を伝えていないなら、飾りの画像として空の alt 属性にします。見出しの文をそのまま alt 属性に写すと、近くの文と内容が重なり、読み上げでは見出しと同じ文を続けて聞くことになります。見出しの下に置いた画像でも、章の要点を描いた図解のように内容を伝える画像は飾りではないため、図の中身を alt 属性に書くのが基本です。

alt 属性そのものを省くのは避けましょう。空の alt 属性は「飾りの画像」の印です。alt 属性の無い画像は、飾りなのか説明の書き忘れなのかを、後から見直す担当者も見分けられません。

自社の記事の画像を棚卸しする手順

画像の棚卸しの手順を、HTMLから書き出す・altを無い・空・文字ありに分ける・altを読む・ファイル名を数える・直す順番を決めるの5段階で示した図解

画像の数が多いサイトでは、1枚ずつ管理画面で確かめるより、記事の HTML から画像を書き出して数えるほうが直す範囲と順番を決めやすくなります。棚卸しの手順は、以下のとおりです。

  • 記事のHTMLから画像を書き出す
  • altを「無い・空・文字あり」に分けて数える
  • 文字のあるaltを1つずつ読む
  • ファイル名の付け方を数える
  • 直す画像の順番を決める

記事のHTMLから画像を書き出す

最初に、記事ごとの本文の HTML から img 要素を書き出し、1行に画像1つを並べた表を作ります。表に入れる項目は、以下のとおりです。

  • 記事の URL
  • 画像のファイル名
  • alt 属性の有無と中身
  • 画像の直前の見出し
  • リンクの中に置いた画像か

同じ画像を2つの記事に置いていれば、2行として数えます。alt 属性は画像を置いた場所ごとに書くため、記事ごとの行にしておくと直す場所を特定できます。

メリルは、2026年9月に WordPress の REST API から書き出しておいた記事の本文の HTML を、スクリプトで読んで数えました。メリルが書いた企業向けの解説記事105本では、本文の画像は1,709個です。記事1本あたりは8〜30個(平均16.3個)で、105本のうち76本は1本に10〜19個の画像がありました。

管理画面で確かめる場合は、記事105本を1本ずつ開き、1本あたり平均16.3個の画像を見ていくことになります。書き出した表なら、alt 属性の状態やファイル名の形ごとに並べ替えて、まとめて数えられます。

altを「無い・空・文字あり」に分けて数える

書き出した画像は、alt 属性の状態で「無い」「空」「文字あり」の3つに分けて数えます。HTML の書き方と、分けたあとに確かめることは、以下の表のとおりです。

状態 HTML の書き方 分けたあとに確かめること
無い alt 属性そのものが無い 画像の役割を確かめ、内容を書くか空にする
空 alt="" 内容を伝える画像が混ざっていないか
文字あり alt="写っている物の説明" 書いた文が画像の役割に合っているか

空の alt 属性は飾りの画像の印ですが、「無い」の画像は、飾りなのか説明の書き忘れなのかを書いた人にしか判断できません。「無い」の画像は1つずつ役割を確かめ、内容を書くか空にするかを決めます。

「空」の画像で確かめるのは、飾りとして空にした画像の中に、内容を伝える画像が混ざっていないかです。グラフ・図・画面の写しのように内容を伝える画像が空になっていれば、画像を見られない人には中身が伝わらないため、直す候補に入れます。

alt 属性が付いているかどうかは、チェックツールでも確かめられる項目です。ただし、書いた文が適切かどうかはツールでは判断できないため、文字のある alt 属性は人が読んで確かめます。

文字のあるaltを1つずつ読む

文字のある alt 属性は、数えるだけでなく1つずつ読み、画像の中身を説明しているかを確かめます。読むときに確かめることは、以下のとおりです。

  • 写っている物や図の中身を説明しているか
  • すぐ前の見出しや近くの本文と同じ文になっていないか
  • キーワードを並べただけになっていないか
  • ロゴや文字の入った画像なら、画像の中の文字と同じか
  • リンクやボタンの画像なら、行き先や動作がわかるか

見出しや記事の題名と同じ文かどうかは、書き出した表を使えば機械でも見つけられます。機械で見つけられるものを先に数え、残りを人が読むと、読む数を減らせます。

オウンドメディア相談室でも、画像の alt 属性の文を記事の題名や見出しと照らすスクリプトで確かめました。2026年10月30日21時時点で画像を入れ終えた記事22本では、アイキャッチの alt 属性の文が題名と同じ記事も、題名を含む記事も0本でした。図解108枚にも、alt 属性の文が直前の h2 の見出しと同じものはありません。

ファイル名の付け方を数える

ファイル名は、名前の形ごとに数えると、直す範囲がつかめます。名前の形の分け方の例は、以下の表のとおりです。

ファイル名の形 例 名前から中身がわかるか
数字と記号だけ 12345678_m.jpg わからない
番号だけの汎用の名前 IMG00023.JPG・image1.jpg わからない
作ったときのままの名前 名称未設定のデザイン.png わからない
素材サイトの名前と番号 素材サイトの名前_番号.jpg わからない
中身を表す英語の名前 htaccess-redirect.webp わかる

形で分けるときは、画像の URL の最後の部分からファイル名を取り出し、決まった形に当てはまるかを機械で判定します。WordPress が縮小した画像に付ける -300x200 のような末尾は、外してから判定します。

中身を表す名前かどうかは、機械では決めきれません。英語の名前でも、略語や記号の組み合わせで中身がわからないものがあるため、機械で分けられなかった名前は人が読んで確かめます。

直す画像の順番を決める

直す順番は、内容が伝わらないと困る画像から決めます。数えた結果から直す順番を決めるときは、以下の順に進めます。

  1. リンクやボタンの画像のうち、alt 属性が無いか空で、リンクにほかの文字も無いもの
  2. グラフ・図・画面の写しのように、内容を伝える画像
  3. 見出しの文を写した alt 属性
  4. これから作る画像のファイル名の付け方

リンクの画像を最初に直すのは、名前の無いリンクが、画像を見られない人には行き先のわからないリンクになるためです。見出しを写した alt 属性は、写真が飾りなら空にし、写真が内容を伝えているなら写っている物の説明に書き換えます。

今ある画像は alt 属性の直しを先に済ませ、ファイル名の決まりは新しく作る画像から当てはめます。公開済みの画像のファイル名を付け直すと、画像の URL が変わるためです。

画像検索からの流入をSearch Consoleで確かめる

Search Consoleで画像検索からの流入を確かめる手順として、検索タイプを画像に切り替え、表示されたページと検索語を見ることを、2つの段階で示した図解

画像を直した後は、Search Console の検索パフォーマンス レポートで、画像検索の数字を分けて見ると変化を確かめられます。確かめ方は、以下の2つです。

  • 検索タイプを画像に切り替える
  • 画像検索で表示されたページと検索語を見る

検索タイプを画像に切り替える

検索パフォーマンス レポートの上部にあるフィルタで、検索タイプを「画像」に変えると、画像検索の結果のデータを表示できます。検索タイプには、ウェブ・画像・動画・ニュースがあり、同じフィルタで期間も変えられます。

サーチコンソールの検索タイプの画面。ウェブ・画像・動画・ニュースから選び、画像を選ぶと画像検索の数字になる

出典:Google Search Console の検索パフォーマンスの「検索タイプ」(オウンドメディア相談室が使っている blog-soudan.com のプロパティ。2026年10月31日の画面)。選んだだけで、適用していません。Google Search Console は Google LLC の商標です。オウンドメディア相談室は、Google が推奨・提携しているものではありません。

レポートを開いたときの期間は、過去3か月です。画像を直した日を控えておけば、直す前と後で同じ長さの期間を選んで比べられます。

画像検索で表示されたページと検索語を見る

検索タイプを画像にしたまま、表の上のタブを「ページ」や「クエリ」に切り替えると、画像検索の結果に表示されたページと検索語を確かめられます。表示回数はサイトが検索結果に表示された回数、クリック数は検索結果からサイトがクリックされた回数です。

alt 属性やファイル名を直したページを控えておき、直す前と後の表示回数とクリック数を、ページごとに比べましょう。画像検索での表示回数が多いページに、alt 属性が空のままの画像が残っていれば、次に直す候補になります。

» オウンドメディアのSEOは数字で見直す|サーチコンソールで確かめる順番と直す場所

画像SEOは役割に合わせたaltと中身がわかるファイル名から直す

画像SEOは、役割に合わせた alt 属性と中身がわかるファイル名を画像に付け、関係する文の近くに img 要素で置くことから始めます。画像の数が多いサイトでは、直し始める前に記事の HTML から画像を書き出し、状態ごとに数えると直す範囲と順番が決まります。

記事の要点は、以下のとおりです。

  • alt 属性は画像と入れ替えても意味が通る文にし、長さは80字を目安にする
  • 写真は写っている物、ロゴは画像の中の文字、ボタンは行き先を書く
  • 飾りの画像や見出しを繰り返すだけの画像は alt 属性を空にする
  • ファイル名は中身がわかる短い名前にし、決まりは新しい画像から当てはめる
  • 棚卸しは記事の HTML から画像を書き出し、alt の状態とファイル名の形で数える
  • 直した効果は Search Console の検索タイプ「画像」で確かめる

棚卸しの表を作れば、どの画像から何を直すかを、数字で決められます。まずは記事の HTML から画像を書き出し、リンクやボタンの画像に名前があるかを確かめましょう。

この記事の数字の出どころ

  • 株式会社メリルが書いた企業向けの解説記事105本の本文の画像の数2026年9月に WordPress の REST API から書き出した、メリルが書いた企業向けの解説記事105本の本文の HTML にある画像(img 要素)の数を、記事ごとにスクリプトで数えた(集計は2026年10月30日)
  • オウンドメディア相談室のアイキャッチと図解の作りこのメディアの記事31本(2026年10月30日21時42分の時点。公開の準備中のものを含む)のうちアイキャッチの画像がある30本の画像のファイル名と、見出しの文字を描いたアイキャッチと見出しの下の図解を入れ終えた22本の代替テキスト(字数、画像に描いた文字・記事の題名・見出しとの重なり)、図に描いた数字が本文にもあるかをスクリプトで数え、カードと記事ページでの画像の出し方をサイトの元のファイルで確かめた

参考にしたページ

株式会社メリルのサービスSEO記事制作代行検索からの流入を狙う記事を制作します(資料請求)。

運営:株式会社メリル(このメディアについて)。相談の内容を記事にするときは、ご本人の許可を取り、社名と数字を伏せます。