画像SEOの基本 – alt属性とWebPで、見つかる・軽いページに

画像SEOで押さえたい4つの要素

画像SEOは、検索エンジンに画像の中身を正しく伝えることと、画像のせいでページが遅くならないようにすることの二本柱です。ECサイトや写真の多いブランドサイトでは、ページ容量の大半を画像が占めることも珍しくありません。まずは次の4点を確認してみてください。

• alt属性：画像の内容を文章で説明する代替テキスト。画像検索と音声読み上げの両方で使われます
• ファイル名：「IMG_0123.jpg」より「cast-iron-skillet-26cm.jpg」のように内容が分かる英数字の名前
• ファイル形式と容量：写真はWebPやJPEG、ロゴや図はSVGやPNG。1枚あたりの容量を抑える
• 表示サイズ：表示する大きさに合った画像を使い、widthとheightを指定してレイアウトのずれを防ぐ

このうちaltとファイル名は「伝える」側、形式・容量・サイズは「速くする」側の対策です。両方がそろってはじめて、画像が検索と使いやすさの両方に役立ちます。

画像が原因で起きやすい問題のサイン

次のような状態に心当たりがあれば、画像の最適化で改善できる余地があります。どれも管理画面やブラウザで確認できるものです。

• スマホで商品ページを開くと、写真が上から少しずつ表示される
• スマホで撮った写真を、そのまま数MBのサイズでアップロードしている
• 画像が遅れて読み込まれ、読んでいる途中で文章の位置がずれる
• PageSpeed Insightsで「次世代フォーマットでの画像の配信」「適切なサイズの画像」が指摘される
• Googleの画像検索で自社の商品名を検索しても、自社サイトの写真が出てこない
• キャンペーンや価格などの大事な情報を、画像の中の文字だけで伝えている

画像の重さは、Googleが評価指標にしているCore Web Vitalsのうち、特にLCP（最大の要素が表示されるまでの時間）とCLS（レイアウトのずれ）に影響します。指標の見方はCore Web Vitalsの改善で、サイト全体の速度については表示速度の改善で詳しく解説しています。

alt属性の書き方：SEOとアクセシビリティの両方に効く

alt属性は、画像が表示されないときや、画面読み上げソフトを使う方に向けて画像の内容を伝えるテキストです。Googleも画像の内容を理解する手がかりにしているため、alt属性はSEOでも基本の対策になります。書くときは、画像を見られない人に電話で説明するつもりで、見たままを短く具体的に書くのがコツです。

• 具体的に書く：「商品画像」より「黒い鋳鉄スキレット26cm、木製ハンドル付き」
• 1文程度に収める：長い説明文やキーワードの羅列は避け、内容を自然な言葉で
• 装飾の画像は空にする：区切り線や背景の模様は alt="" として読み上げを省く
• リンク画像は行き先を書く：バナーやボタン画像は「〇〇の商品一覧へ」など、押した先が分かる内容に
• 同じ文の使い回しをしない：商品の色違いや角度違いは、その違いを書き分ける

ShopifyやWordPress、BASEなどの管理画面には、画像ごとに代替テキストを入力する欄があります。まずはトップページと売れ筋商品の画像から入力していくと、短い時間で効果の大きい部分を整えられます。

画像の軽量化とWebP：形式・サイズ・読み込みの整え方

画像の軽量化は、形式を選ぶ、大きさを合わせる、読み込むタイミングを整える、の3段階で進めると無理がありません。WebPは主要なブラウザすべてで表示でき、同じ見た目のJPEGやPNGより容量を小さくしやすい形式です。ページが軽くなる分、表示が速くなり、スマホでも快適に見てもらえます。

• 形式を選ぶ：写真はWebP（または品質を調整したJPEG）、ロゴやアイコンはSVG、透過が必要な画像はWebPやPNG
• 大きさを合わせる：表示幅の2倍程度を上限に書き出し、数千ピクセルの元画像はそのまま載せない
• 画面に合わせて出し分ける：srcsetでスマホには小さい画像、パソコンには大きい画像を配信する
• 遅延読み込みを使う：画面の下のほうにある画像は loading="lazy" で後から読み込む
• 最初の1枚は急がせる：ファーストビューのメイン画像は遅延読み込みの対象から外し、すぐに表示させる
• サイズを指定する：widthとheightを入れておくと、読み込み中のレイアウトのずれを防げる

ShopifyはアップロードしたJPEGやPNGを、対応するブラウザにはWebPなどの軽い形式に変換して配信します。WordPressはアップロード時に複数のサイズを自動で作り、srcsetで出し分けます。ただし、元の画像が極端に大きいとどのCMSでも負担が残るため、アップロード前に長辺2,000px前後に縮めておくのが安心です。

ECサイトと写真が主役のブランドで見落としやすい点

商品数が多いネットショップや、施工例・料理・作品の写真で魅力を伝えるサイトでは、画像の扱い方が売り上げの土台になります。次の点は、後からまとめて直すと手間がかかるため、早めにルールを決めておくのがおすすめです。

• 撮影と書き出しのルール：縦横比、背景、書き出しサイズをそろえると、一覧ページが整って見え、容量も管理しやすい
• altの命名ルール：「商品名＋色・素材＋写っている場面」など型を決めておくと、担当が変わっても品質が保てる
• 文字は画像に入れすぎない：送料、価格、キャンペーン内容はHTMLのテキストで書き、検索と翻訳に対応させる
• 共有用の画像を設定する：SNSでURLが共有されたときに出るOGP画像を、ページごとに用意する
• 構造化データに画像を含める：商品の構造化データに画像を指定し、検索結果で商品情報が正しく伝わるようにする

商品写真の並べ方や説明文との組み合わせは、商品ページの改善でも詳しく紹介しています。画像の最適化とあわせて見直すと、見つけてもらってから購入までの流れがつながります。

UNANOBOの画像SEO：最適化した画像で組んだ無料デモから

UNANOBOでは、ご依頼の前に、今のサイトや商品写真を元にした無料デモをお作りします。デモの画像はWebPへの変換、表示サイズの調整、alt属性の設定まで済ませた状態で組むため、パソコンとスマホで実際の表示の軽さを確かめていただけます。あわせて、今のサイトで重くなっている画像や、altが抜けているページの改善案もお伝えします。

流れは「無料デモ → フィードバック → 公開 → 成長」です。代表が最初のデモから公開後の改善まで一人で担当するため、撮影ルールやaltの型づくりも同じ窓口でご相談いただけます。やり取りはメッセージで、日本語・英語のどちらでも対応します。