まず、本文に必要な画像かを考える
操作画面や比較写真のように内容を伝える画像は、関連する説明の近くに置きます。本文で伝えたいことと画像の役割を合わせると、読む人が関係を理解しやすくなります。
内容のある画像はimg要素で掲載し、srcに画像の保存先を指定します。Googleはimgのsrcから画像を検出できますが、CSSの背景画像は画像検索のインデックス登録対象にしません。
代替テキストは、その場所で伝える意味を書く
alt属性には、画像を見られないときにも必要な内容が伝わる説明を書きます。たとえば操作説明なら「設定画面」だけでなく、説明の目的に合わせて「通知をオフにした設定画面」のように具体化します。これは書き方の例で、実際の画面と合う表現を選んでください。
意味を追加しない装飾画像はaltを空文字にする方法があります。画像をリンクにする場合は、移動先や操作の目的が伝わるかも確認します。検索語を詰め込むための欄として使わないようにしましょう。
元の縦横比と、画面内の表示幅を分ける
HTMLのwidthとheightで画像の寸法を指定すると、読み込み前に表示領域を確保しやすくなります。見た目の幅はCSSで本文幅に収め、高さは自動にして縦横比を保ちます。
大きな画像を小さく表示するだけでは、転送量が小さくなるとは限りません。必要に応じて異なる幅の画像を用意し、srcsetとsizesを使って表示領域に合う候補をブラウザーへ伝えます。画質を落としすぎて文字や細部が読めなくならないかも確認してください。
保存名と掲載後の確認までを一組にする
ファイル名は画像の題材が分かる簡潔な名前にします。連番だけの名前から変更するときは、HTMLの参照先も更新し、公開後に画像が開くか確認しましょう。ファイル名だけで検索順位が上がるわけではありません。
最後に狭い画面と広い画面で、画像のはみ出し、切り取り、文字の読みやすさを確認します。掲載内容を画像だけに閉じ込めず、重要な説明は本文でも読めるようにすると、画像が表示されない場合にも内容を伝えられます。
参考にした公式情報
出典確認日：2026-11-04 ／ 文章更新日：2026-11-04
