ツールレンズ

WordPress画像のalt・ファイル名・圧縮はこれ1本｜表示速度とSEOを整える

執筆者:

レイ

カテゴリ:

WordPressサイトの表示速度を改善する施策の中で、見落とされがちなのが画像の最適化だ。キャッシュやCDNの設定は表示速度の改善記事で扱っているが、画像そのもののファイル名・alt属性・圧縮は別軸の話になる。本記事ではこの3点に絞って、実運用レベルで整理する。

なぜ画像の最適化がSEOと速度の両方に関わるのか

画像ファイルはページの総データ量の大きな割合を占めることが多い。圧縮や次世代フォーマット(WebP)への変換でファイルサイズを減らすと、ページの読み込みにかかる時間を抑えやすくなる。これはCore Web Vitals(特にLCP)の評価にも影響しやすい指標とされている。

一方、alt属性とファイル名はクローラーへの情報提供という役割を持つ。検索エンジンは画像の視覚的内容をテキストほど直接には解釈しないため、補足情報を手がかりにすると説明されている。正確なalt属性とファイル名は、Googleの画像検索での露出に関わる要素のひとつとして案内されている(詳細はGoogleのドキュメントで確認したい)。

alt属性の正しい書き方

altはアクセシビリティのための属性であり、画像が表示されない環境やスクリーンリーダーを使うユーザーに内容を伝えるものだ。SEO上の効果はその副産物と考えるとブレにくい。

基本的な原則

  • 画像の内容を具体的に説明する：「画像」「写真」といった汎用語は避け、何が写っているかを書く。
  • キーワードを無理に詰め込まない：同じキーワードを複数画像のaltに繰り返すのは、スパム的と判断されるリスクがある。
  • 装飾目的の画像はaltを空にする：意味のない区切り線やアイコン背景は、alt属性を空にしてクローラーに無視させる考え方が一般的だ。
  • 文字数は端的に：長文にする必要はなく、内容が伝わる範囲で簡潔にまとめる。

例：悪い書き方と良い書き方

パターン alt属性の例 評価
空欄 （未入力） クローラーに情報がなく、アクセシビリティ上も望ましくない
汎用的すぎる 画像 内容が伝わらない
キーワード詰め込み WordPress プラグイン おすすめ 無料 SEO 高速化 スパム的と判断されるリスクがある
適切 WordPressのプラグイン管理画面で画像圧縮プラグインを有効化している様子 内容を端的に伝えている

SEOを意識したファイル名の付け方

アップロード前のファイル名は、そのままメディアのURLの一部になる。IMG_3820.jpgのようなカメラのデフォルト名ではなく、内容を示す英数字のファイル名にしておきたい。

命名の考え方

  • 半角英数字とハイフン中心にする：スペースやアンダースコアは避け、単語の区切りはハイフン(-)を使う。Googleはハイフンを単語の区切りとして扱うと案内している。
  • 内容を表すキーワードを含める：記事テーマに関連した名称にする。例：wordpress-image-setting.png
  • 日本語ファイル名は避ける：URLエンコードされて可読性が下がりやすい。
  • アップロード済みの画像は無理に変更しない：URLが変わると404やリダイレクト管理が必要になるため、これから追加する画像から対応するのが現実的だ。

WebP変換：なぜWebPが選ばれやすいのか

WebPはGoogleが開発した画像フォーマットで、JPEGやPNGと比べて同等の見た目をより小さいファイルサイズで実現しやすいとされている。主要ブラウザの対応状況は時期によって変わるため、最新の対応範囲は公式の情報で確認したい。

WordPressでWebPを扱う方法は、大きく2つある。

  1. アップロード前に変換する：後述のSquooshなど無料ツールでローカル変換してからアップロードする。
  2. プラグインで自動変換する：画像圧縮系プラグインの中には、アップロードしたJPEG/PNGをWebPに変換し、対応ブラウザに配信する機能を持つものがある。

無料ツール「Squoosh」で圧縮する手順

SquooshはGoogle(Chrome Labs)が提供するブラウザベースの画像圧縮・変換ツールだ。インストール不要で、アカウント登録なしに使える。

Squooshの基本操作

  1. ブラウザで squoosh.app にアクセスする。
  2. 画像ファイルをドラッグ＆ドロップする。
  3. 右側パネルでフォーマットを選ぶ。WebPへの変換なら「WebP」を選択する。
  4. スライダーでクオリティを調整する。画面の左右でビフォーアフターを比較しながら確認できる。
  5. ファイルサイズの変化を見ながら、許容できる品質の中で小さいサイズを探す。
  6. ダウンロードボタンで保存する。

Squooshはブログのアイキャッチや記事内の静止画を、事前に1枚ずつ最適化する用途に向いている。大量の画像をまとめて処理したい場合はプラグインのほうが効率的だ。なお画面構成や操作は更新されることがあるため、迷ったら公式の表示に従ってほしい。

圧縮プラグインの設定：基本の流れ

WordPressには画像圧縮プラグインが複数あり、代表的なものに「EWWW Image Optimizer」がある。無料の範囲でも圧縮やWebP関連の機能を備えるとされているが、対応範囲や無料枠の条件はバージョンで変わるため、導入前にプラグインの公式ドキュメントで確認するのが確実だ。プラグインの選び方の考え方はおすすめプラグインの記事でも触れている。

インストールと初期設定の流れ

  1. WordPress管理画面の「プラグイン」→「新規追加」で目的の画像圧縮プラグインを検索し、インストール・有効化する。
  2. 各プラグインの設定画面を開く。
  3. 圧縮レベルを選択する。まずは原本の劣化が少ない設定から試すのが無難だ。
  4. WebP変換の機能があれば、必要に応じて有効化する。
  5. WebP配信にはサーバー側の設定変更が必要になるケースがある。プラグインが案内する手順か、CDN経由の配信を用いる。具体的な手順は、利用しているサーバーの公式サポートやプラグインの公式ドキュメントで確認すること。

既存画像の一括最適化

過去にアップロード済みの画像は、プラグインの一括最適化機能からまとめて処理できることが多い。画像点数が多い場合は時間がかかるため、サーバーへの負荷が低い時間帯(深夜など)に実行するのが無難だ。

注意点

  • 圧縮前の原本は手元にバックアップを持っておく。当サイトではUpdraftPlusでGoogle Driveへ毎日自動バックアップを設定しているが、画像をまとめて処理する前には、手元の原本も別途確認しておくと安心だ。
  • 有料プラン(APIキー利用)でさらに圧縮を強化できるプラグインもあるが、まず無料の範囲で効果を確認してから判断すればよい。料金や提供内容は変わることがあるため、公式サイトで確認すること。

ConoHa WINGとの組み合わせについて

当サイトはConoHa WINGでWordPressを運用している。ConoHa WINGはWordPress向けの高速化機能を備えており、画像最適化とあわせて運用する形になる。両者を組み合わせた場合の効果は環境によって異なるため、自分のサイトで体感や計測を確認しながら調整したい。最新のプランや料金、機能の詳細は公式サイトで確認してほしい。

alt・ファイル名・圧縮の優先順位：どこから手を付けるか

既存サイトに後から適用する場合、どこから着手するかが現実的な問題になる。以下の順番で考えると進めやすい。

  1. 新規アップロードのルールを整える(即日対応可)：今日から、画像をアップロードするたびにファイル名とaltを正しく設定する習慣をつける。追加コストなしで将来の資産になる。
  2. 既存画像を一括圧縮する：プラグインの一括最適化で既存画像をまとめて処理できる。体感速度の変化が比較的早く現れやすい。
  3. 既存画像のalt修正(優先度の高いページから)：メディアライブラリのalt欄を編集するか、記事編集画面から1枚ずつ修正する。全件を一度にやろうとすると挫折しやすいため、流入の多いページや重要記事から着手する。

WordPressの初期設定と組み合わせて考える

画像最適化は単独の施策としてではなく、サイト全体の設定と組み合わせて活きてくる。パーマリンクや基本的な設定など、開設時の土台についてはWordPressの初期設定ガイドもあわせて参照してほしい。

まとめ：画像最適化は「習慣化」が本質

  • alt属性は画像の内容を端的に説明するテキスト。装飾画像はaltを空にして明示する。
  • ファイル名はアップロード前に、半角英数字＋ハイフンで内容を示す名前に整える。
  • WebP変換はSquooshで事前変換するか、対応プラグインで自動化する。
  • 既存画像は一括最適化でまとめて処理し、以降は新規アップロードのたびに適切に設定する。
  • 削減率やツールの仕様・無料枠の条件は変わることがあるため、各ツール・プラグインの公式ドキュメントで最新情報を確認すること。

【PR】 本記事はアフィリエイトプログラムを通じた広告リンクを含みます。

投稿をさらに読み込む