alt属性とは、画像の内容や役割を文字で伝える代替テキストを、HTMLに指定するための属性です。画像を見られない人への説明になり、検索エンジンが画像を理解する材料にもなります。
製品ページを直すなら、画像を一枚ずつ見て「これが見えないと、何が分からなくなるか」を書き出してください。製品の外観を伝える写真、寸法を示す図面、見栄えだけの飾りでは、必要な説明が違います。
すべての画像へ製品名を貼り付ける作業にはしません。同じ写真でも、製品の紹介に使うのか、資料へのリンクとして使うのかで、伝える役割を確かめます。
altは、検索と読み上げで何に使われる？
Google検索セントラルの画像のSEOベストプラクティスは、画像の代替テキストについて次のように説明しています。
画像を見ることができないユーザー向けの補助機能としても役立ちます。
スクリーンリーダーという画面読み上げソフトを使う人や、通信状況などで画像を見られない人を助ける記述です。検索だけを意識して、聞いても意味の分からない単語列にしないでください。
Googleは、altに加えて画像認識とページの内容も使い、画像のテーマを理解すると説明しています。altだけで製品の品質や検索順位が決まるわけではありません。
たとえば、樹脂ガイド部品を側面から写した写真なら、何の製品で、どの部分を見せているかを書きます。写真から確認できない耐久性や、社内で検証していない性能まで補ってはいけません。「高品質な製品」では、見えている内容も伝わりません。
HTMLでは、どこに書く？
画像を表示するimg要素に、alt="説明文"を付けます。次は書式を示す例で、実在の製品仕様や私たちの製作実績ではありません。
<img src="resin-guide-side.jpg"
alt="樹脂ガイド部品の側面。取付穴の位置を示す">
srcは画像ファイルの場所、altはその画像を置き換える説明です。ページに表示するキャプションとは別に設定します。CMSを使うなら、「代替テキスト」などの入力欄が公開HTMLのaltへ出るかを制作担当と確かめます。
メディア管理画面で保存できても、ページ側のテンプレートが値を使っていないことも確認対象です。修正後は対象ページのHTMLを見て、該当するimgに新しい文章が入っているかを調べます。
画像のすぐ下に説明があるときは、読み上げで同じ長文を二度聞かせないようにします。キャプションとaltをそれぞれ別の原稿として増やす前に、画像と周囲の文章で何を伝えているかを一緒に読みます。
製品写真には、どんな説明を書く？
対象を特定し、その写真で確認できる特徴を短く添えます。外観、取付部、断面など、読者が見分けたい点から選びます。以下はすべて書き方の例です。
| 画像の用途 |
内容が伝わらない例 |
書き換え例 |
| 製品の全体像 |
製品画像 |
搬送用樹脂ガイド部品の全体像 |
| 取付部の確認 |
部品の写真 |
樹脂ガイド部品の取付穴を拡大した写真 |
| 加工面の比較 |
加工技術 |
表面加工前と加工後の部品を並べた写真 |
全体像と拡大写真に同じ「樹脂ガイド部品」を入れるだけでは、違いが伝わりません。「取付穴を拡大」のように、その一枚を載せた理由を添えます。
材質や型番を入れるなら、製品台帳や写真の管理情報と照合します。見た目だけで材質を判断して書かないでください。別型番へ画像を差し替えたのに、altだけ前の型番が残ることも点検します。
「業界最高」「短納期」「格安」といった宣伝は、写真の代替説明から外します。納期の条件を伝える必要があるなら、本文に確認済みの受付条件として書きます。
図面やグラフは、altだけで説明できる？
寸法や数値が多い画像では、短いaltだけでは情報を伝えきれません。W3Cの複雑な画像の解説は、画像を特定する短い説明と、重要な情報を伝える詳しい説明を組み合わせる方法を示しています。
図面なら、altで何の図面かを示し、寸法・公差・注記などを本文や表で読めるようにします。次の文章は掲載方法の例です。
altの例：樹脂ガイド部品の取付寸法図。主要寸法は下の表に掲載
「下の表に掲載」と書くなら、実際にその表が必要です。図面にしかない注意書きを落とさず、本文側が別の版の寸法を示していないかも確認します。社外へ出せない図面は、altを空にして隠すのではなく、公開対象から外します。
グラフでは、何を比べた図かを短く示します。軸の意味、単位、測定条件、元の値、読み取れる傾向は本文や表に分けます。
altの例：材料別の曲げ試験結果を比較したグラフ。測定条件と値は次の表に掲載
これは書式の例で、試験結果を作ったものではありません。実際のデータを載せる際は、担当者が確認した条件と結果を使います。altに「強度が高い」とだけ書くと、どの条件での比較かが消えてしまいます。
図の説明を長く書く前に、図自体を整理できるかも見直します。本文で伝わる内容を、わざわざ画像の中へ閉じ込める必要はありません。
装飾画像は、なぜaltを空にする？
区切りの模様など、情報を増やさない画像に毎回説明を付けると、読み上げの邪魔になります。W3Cの装飾画像の解説は、空のaltを指定する方法を示しています。
<img src="section-decoration.png" alt="">
alt属性を削ることとは違います。W3Cは、属性が無いと一部の読み上げソフトがファイル名を読み上げると説明しています。「空だから記入漏れ」と機械的に埋めないようにしてください。
ただし、製品写真や説明図まで装飾に分類しません。判断するのは画像の見栄えではなく、そのページで情報を伝える役割があるかです。
画像だけのリンクを、装飾として空にしない
資料へ進む画像ボタンなら、何を開くかが分かる名前が必要です。隣に同じリンク内の説明文があるかも含めて判断します。
W3Cの機能を持つ画像の解説は、操作や行き先を伝える代替テキストを扱っています。たとえば画像だけで寸法図へリンクするなら、「寸法図を見る」という目的を示します。「青いボタン」では押した後が分かりません。
文字リンクと画像リンクの整理は内部リンクとアンカーテキストの付け方へ進めます。リンク先の案内と、写真の内容説明を同じ扱いにしないでください。
キーワードをたくさん入れると画像SEOに効く？
Googleはaltへのキーワードの羅列を避けるよう求めています。利用者の体験を損ね、スパムとみなされる要因にもなりうるためです。順位を操作するための詰め込みを、画像SEOの通常作業にしません。
避ける例は「樹脂部品 樹脂加工 メーカー 製造 工場 試作 量産 安い」です。写真が示す内容ではなく、検索で拾いたい語を並べています。
書き換え例は「搬送装置に取り付けた樹脂ガイド部品」です。その写真が取付状態を示しているときに使えます。載っていない装置や用途を、検索語のために付け足してはいけません。
公開前の原稿確認では、画像を隠した状態で文章を読んでみます。対象と役割が分かるか、同じ宣伝文が繰り返されていないかを確認します。単語を減らすだけでなく、画像と食い違う説明も削ります。
ファイル名・周囲の本文・構造化データはどう扱う？
Googleの画像ガイドは、簡潔で分かりやすいファイル名と、関連テキストの近くへの画像配置も案内しています。新しく保存する写真なら、連番だけより製品や撮影箇所を識別できる名前にします。
画像の前後には、その製品や図を理解する説明を置きます。図面は仕様の節、工程写真はその工程を説明する節へ置く、という整理です。会社案内の画像を、無関係な技術記事へ大量に追加する作業にはしません。
構造化データは、対応する種類のリッチリザルトなどに使う情報です。altを入れる代わりに追加するものではありません。種類の選択や本文との一致は構造化データの役割と確認方法で扱っています。画像の周囲に置く見出しや記事の分類は階層構造とハブページの作り方で整理できます。
公開後は、画像、alt、キャプション、仕様表を一緒に照合します。記録にはページURL、画像、修正した説明、確認日を残してください。サイト設計の点検では画像に説明があるかだけでなく、その説明が今の製品を正しく指すかまで確認します。
仕様・出典の確認日：2026年10月22日。