画像にalt属性(代替テキスト)を入力する
新規追加(標準スコープ補完)
ブログ記事や本文に画像を挿入する際、必ず入れてほしいのが alt 属性(代替テキスト) です。これは画像を「文字で説明する」ための情報で、SEO とアクセシビリティの両面で重要です。 実画面例: 画像altを考える時は、ページ上でその画像が何を伝えているかを確認します。
1. alt 属性とは?
alt は “alternative text(代替テキスト)” の略で、画像が表示できない時に代わりに表示される文字 のことです。次のような場面で使われます:
- 検索エンジン(Google など) が画像の内容を理解する際の手がかり
- 音声読み上げソフト(視覚障がい者向け)が画像を音声で説明する際
- 通信状況が悪く画像が表示されない時 のテキスト表示
- 画像検索結果 にヒットする可能性が上がる
2. なぜ重要なのか?
- SEO: Google は alt テキストで画像の内容を理解します。記事のテーマに合った alt は 記事全体の SEO 評価 にもプラスです
- アクセシビリティ: 視覚障がいのある方も含め、全ユーザーが情報にアクセスできるようになります(WCAG 準拠)
- 法的要件: 一部の業種・公共機関ではアクセシビリティ対応が義務化されています
3. CMS で alt を入力する方法
ブログ記事の本文に挿入する画像の場合
- 本文エディタで画像をクリック
- 表示される設定パネルの 「Alt text」 または 「代替テキスト」 欄に説明を入力
- Save をクリック
アイキャッチ画像(サムネイル)の場合
- CMS のアイテム編集画面で、アイキャッチ画像をクリック
- 「Alt text」 欄に説明を入力
- 記事を保存(Save Draft または Publish)
4. 良い alt の書き方
- 画像の内容を簡潔に説明する(10〜80文字程度)
- 記事のキーワードを自然に含める(無理にキーワード詰め込みはNG)
- 「画像」「写真」という言葉は不要(「〜の写真」のように書かない)
- 装飾目的だけの画像は空欄でもOK(読み上げ時にスキップさせる)
例
| 画像 | NG な alt | OK な alt |
|---|---|---|
| 大阪城の写真 | 画像 | 大阪城の天守閣を桜と共に撮影した写真 |
| 製品のロゴ | logo.png | IGNITE 株式会社のロゴ |
| 装飾の波線 | 波 | (空欄でOK) |
5. よくある質問 (Q&A)
alt を入れ忘れるとどうなりますか?
サイトは正常に動きますが、検索エンジン評価とアクセシビリティが下がります。全画像に入れる習慣 をつけましょう。
同じ記事に複数の画像がある場合、それぞれに違う alt を入れるべきですか?
はい。各画像の内容に応じて個別に 入力してください。同じ alt を使い回すのは避けましょう。
次のステップ: 記事の公開順を変えたい場合は次へ進みましょう → 「CMSアイテムの表示順を並び替える」