コンテンツにスキップ

画像にalt属性(代替テキスト)を入力する

新規追加(標準スコープ補完)

ブログ記事や本文に画像を挿入する際、必ず入れてほしいのが alt 属性(代替テキスト) です。これは画像を「文字で説明する」ための情報で、SEO とアクセシビリティの両面で重要です。 実画面例: 画像altを考える時は、ページ上でその画像が何を伝えているかを確認します。


1. alt 属性とは?

alt は “alternative text(代替テキスト)” の略で、画像が表示できない時に代わりに表示される文字 のことです。次のような場面で使われます:

  • 検索エンジン(Google など) が画像の内容を理解する際の手がかり
  • 音声読み上げソフト(視覚障がい者向け)が画像を音声で説明する際
  • 通信状況が悪く画像が表示されない時 のテキスト表示
  • 画像検索結果 にヒットする可能性が上がる

2. なぜ重要なのか?

  • SEO: Google は alt テキストで画像の内容を理解します。記事のテーマに合った alt は 記事全体の SEO 評価 にもプラスです
  • アクセシビリティ: 視覚障がいのある方も含め、全ユーザーが情報にアクセスできるようになります(WCAG 準拠)
  • 法的要件: 一部の業種・公共機関ではアクセシビリティ対応が義務化されています

3. CMS で alt を入力する方法

ブログ記事の本文に挿入する画像の場合

  1. 本文エディタで画像をクリック
  2. 表示される設定パネルの 「Alt text」 または 「代替テキスト」 欄に説明を入力
  3. Save をクリック

アイキャッチ画像(サムネイル)の場合

  1. CMS のアイテム編集画面で、アイキャッチ画像をクリック
  2. 「Alt text」 欄に説明を入力
  3. 記事を保存(Save Draft または Publish)

4. 良い alt の書き方

  • 画像の内容を簡潔に説明する(10〜80文字程度)
  • 記事のキーワードを自然に含める(無理にキーワード詰め込みはNG)
  • 「画像」「写真」という言葉は不要(「〜の写真」のように書かない)
  • 装飾目的だけの画像は空欄でもOK(読み上げ時にスキップさせる)

画像NG な altOK な alt
大阪城の写真画像大阪城の天守閣を桜と共に撮影した写真
製品のロゴlogo.pngIGNITE 株式会社のロゴ
装飾の波線(空欄でOK)

5. よくある質問 (Q&A)

alt を入れ忘れるとどうなりますか?

サイトは正常に動きますが、検索エンジン評価とアクセシビリティが下がります。全画像に入れる習慣 をつけましょう。

同じ記事に複数の画像がある場合、それぞれに違う alt を入れるべきですか?

はい。各画像の内容に応じて個別に 入力してください。同じ alt を使い回すのは避けましょう。


次のステップ: 記事の公開順を変えたい場合は次へ進みましょう → 「CMSアイテムの表示順を並び替える」