--- title: "WordPressで画像にalt属性（代替テキスト）を設定する方法とその必要性" canonical_url: "https://olein-design.com/blog/wordpress-alt-setting" language: "ja" date_published: "2017-07-05T11:42:52+09:00" date_modified: "2026-01-28T14:26:11+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "a11y" --- # WordPressで画像にalt属性（代替テキスト）を設定する方法とその必要性 モバイルファーストインデックスが騒がれ始めて、随分長い時間が経ちましたが、あまり目立った動きは聞きませんね。 しかし、いつ本格導入されるかわからないので、ある程度必要なことは準備しておくことも大切です。 こちらの記事で僕個人もあたらめてalt属性の必要性を再確認させられました。 参照：[モバイル向けページの画像にはalt属性を必ず設定すること。MFIへの切り替えで検索順位に悪影響が出る可能性あり](https://www.suzukikenichi.com/blog/add-alt-text-for-images-on-mobile-sites-in-preparation-for-mobile-first-index/) ## WordPressにおける画像のalt属性の設定方法 意外にも画像を投稿や固定ページなどに挿入する際、タイトルやキャプション、alt属性などの項目を何も修正せずに挿入してしまうことは多いのではないでしょうか？ 簡単にalt属性を設定して画像を挿入する方法を確認しておきましょう。 投稿画面より画像をメディアから選択しようとすると、下のような画面になります。 ![WordPressで画像を挿入する際にalt属性をどこで設定するのか](https://olein-design.com/wp-content/uploads/2017/07/1421c7f033b7868d6480d708f146908f.png) この**「代替テキスト」**という部分にテキストを挿入すると、それが**自動的にalt属性**になります。簡単ですね。 ## すでに投稿されている画像のalt属性を修正する場合 すでに投稿してある画像のalt属性を修正する方法を紹介します。WordPressでは２つのエディタモードがあり、**「ビジュアルエディタ」と「テキストエディタ」**というモードがあります。 **ビジュアルエディタ**は、HTMLコードなどを書くことなく、Wordで文章を作成するような感覚で記事内容を入力していくことができます。 **テキストエディタ**は、HTMLなどのコードを利用しながら記事を書くことができるモードになります。 両者特徴があるので、好き嫌いもあるとは思いますが、今回は両方の方法を紹介しておきます。 ### ビジュアルエディタで画像のalt属性を修正・変更する場合 まず、投稿や固定ページの編集画面で変更したい画像を探します。 ![ビジュアルエディタで画像のalt属性を修正・変更する場合〜その１](https://olein-design.com/wp-content/uploads/2017/07/1d5898da542768ca4cbf384d0cf0d0e0.png) 変更したい画像をクリックすると、このようなツールバーが表示されるはずです。その中の**えんぴつのアイコン**ボタンを押します。 ![ビジュアルエディタで画像のalt属性を修正・変更する場合〜その２](https://olein-design.com/wp-content/uploads/2017/07/a4f4c24b74003eedfc17b8405001a134.png) すると、**代替テキスト**という項目があるので、そちらのテキストを入力・修正します。 ![ビジュアルエディタで画像のalt属性を修正・変更する場合〜その３](https://olein-design.com/wp-content/uploads/2017/07/4e407e9a527e390c25d9e6f35b47ffc7.png) 上のサンプルではすでにalt属性が設定されているため、あらかじめテキストが入っていますが、何も設定されてない場合には空白になっていると思います。完了したら右下の**【更新】**ボタンを押して終了です。 ### テキストエディタで画像のalt属性を修正・変更する場合 テキストエディタで修正する場合にも同様に、記事の編集画面にて該当する写真を掲載している部分を確認します。 ![テキストエディタで画像のalt属性を修正・変更する場合](https://olein-design.com/wp-content/uploads/2017/07/8a767d053efb8fadd18fc89cbb57f61d.png) ソースコード内に**alt属性**を確認することができるかと思いますので、そちらの`alt="`から`"`の間のテキストを修正します。何も設定されていない場合には`alt=""`と空白になっていると思いますので、その間にテキストを設置します。 ## alt属性の必要性とは alt属性って何に使われるの？と思われる方も多いかと思いますが、Googleインデックスを考慮するのであればとても大切な要素になります。 そもそもalt属性とは、**その画像が何を表しているのかと示すもの**として利用されています。Google検索エンジンはとても頭が良いのですが、しかし自分で画像を解析してどんな画像なのかを認識することはできません。（そのうちできるようになるかもしれないけど… ですので、 こちら側が**「これは○○の画像ですよ」**と教えてあげる必要があります。 Googleの画像検索などで出てくるのは、このalt属性などを参考にして検索結果に表示されています。 また、目の不自由な方がテキストリーダーなどを利用してウェブサイトを閲覧した際に、alt属性を設定されていない画像は読まれずスルーされてしまいます。アクセシビリティの観点からも必要であれば設置する必要がありますね。 ということで、**Googleに認識してもらいたい場合とテキストリーダーに対応したい画像にはalt属性設定が必要**ということを覚えておきましょう。 ## しかし、全ての画像に設定する必要はない ウェブサイトの中には様々な用途で画像が用いられています。 ロゴであったり、飾り用（デザイン上必要な装飾）であったり、アイコンであったり。様々です。 先ほど書いたように、alt属性を全ての画像に設定しないといけないかというと**全てではない**と考えています。 上に書いたように**Googleに読み込んで欲しい画像**や**テキストリーダーに対応したい画像**には設置するべき、ということですので、逆に言うと**コンテンツに関係のない画像には設定する必要はない**と考えることもできます。 ## まとめ ある程度、alt属性について理解していただけたかと思います。 どの画像に必要かどうかは、みなさんそれぞれで判断していただくとして、**今後、いずれ始まるであろうモバイルファーストインデックスに対応する為にもalt属性設定を見直す必要がある**ことはお分りいただけるかと思います。 当然、PCページでのインデックスでも有用ですので、モバイル・PC関係なく必要あれば設置するルーティンを組むことをオススメします。