【alt属性とは】意味や設定方法を解説！画像を最適化しよう【SEO】

こんな疑問にお答えします。

 

今回の記事では、alt属性の定義や意味・設定方法を、画像付きで分かりやすくご紹介していきます。

alt属性は軽視されがちですが、とても重要な項目です。しっかり設定をすることでSEO効果も期待できます。

ぜひこの記事を読んで理解を深め、質の高いブログ・サイト作りに役立ててくださいね。

 

alt属性とは

alt属性とは、HTMLの要素の1つで、
簡単に言えば「画像の代わりとなるテキスト情報」のことです。

「代替テキスト」とも呼ばれます。

このalt属性は、HTMLの中で記述することにより機能し、このように表記されます。

〇〇の部分に、任意のテキストが入ります。
和訳すると「代わりのテキストは◯◯だよ」です。

 

また、alt属性は<img>と表記される画像タグの中に存在します。

WordPressをご利用の方は、HTMLのしくみを完璧に覚える必要はありませんが、

ということだけでも頭に入れておくと、
後々きちんと設定できているかをチェックする時に役に立ちます。

 

alt属性の意味・役割

「定義はなんとなくわかったけど、何の意味があるの？」「画像の代わりってどういうこと？」と思った方も多いはず。

alt属性は、以下のような役割を果たします。

順にご説明していきますね。

 

画像がうまく表示されない時の代わり

alt属性はネット環境の問題など、
何かしらの不具合で画像が表示できない時に代わりとして役立ちます。

「画像に何が写っているか」がわかることで、読者の混乱を防げますよね。

読み上げ機能の補助テキスト

また、読み上げ機能を使って音声で情報を得たい場合にも役立ちます。

何もしていない場合、画像は「画像」と読み上げられますが、alt属性を記述することで、指定の文字通りに読まれるようになるため、音声でも理解のしやすいサイト作りが可能になります。

 

クローラーの理解の促進

クローラーというのは、
サイトを巡回する検索エンジンのロボットのことです。

このロボットは、文字・文脈を理解する力は持っていますが、「画像に写ったものが何か」を正確に把握する力は持っていません。

しかし、alt属性を使えば、ロボットに何が写っているのかを教えることができます。

ロボットが「このサイトは内容に即した画像を使用している」と判断できれば、ユーザーに配慮したサイトとして扱われ、評価も上がりやすい状態になります。

 

また、画像をリンクとして使う場合においても、alt属性を書くことで、リンク先のページについてロボットが理解できるようになります。

 

このように、alt属性をきちんと設定しておくことで、
様々なユーザーを想定した配慮のあるサイト作りを行える上に、SEO効果も期待できるのです。

 

今ご紹介した役割は、Googleも公式に提示しています。時間がある際には、目を通してみましょう。

alt 属性は、画像ファイルのコンテンツを説明するために使用されます。この属性は、次のような理由から重要です。

Google にとって代替テキストは、画像の題材についての有用な情報です。Google はこの情報を使用して、ユーザーのクエリに最適な画像を判断します。

視覚障害がある、スクリーン リーダーを使用する、接続速度が遅いなどの理由から、ウェブページの画像を見ることができないユーザーも多くいます。代替テキストはこのようなユーザーに重要な情報を提供できます。
画像 – Search Consoleヘルプ

 

※ちなみにSEOの観点でいうと、「パーマリンクの設定」も非常に大切です。こちらの記事も参考にしてみてくださいね。

 

alt属性の設定方法

続いて、属性の設定方法についてお話しします。

WordPressでは「メディアライブラリ」から設定が可能です。手順は超カンタン。

 

まずはサイドの欄から「メディア」を選択し、「メディアライブラリ」を開きます。

新規で画像を追加する場合は、
「新規追加」を選択し画像をアップロードします。

すでにアップロード済みの画像であれば、一覧よりその画像を選択します。

すると、「添付ファイルの詳細」という画面が表示されます。

alt属性として表示させたいテキストを、右側の「代替テキスト」欄に入力します。これだけで完了です。

WordPressにおいては、「代替テキスト」に入力した文字がそのままalt属性として記述されます。

 

複数の記事で共用している画像に対して、記事ごとに異なるテキストを入れたい場合は以下のステップで設定します。

 

サイドの欄から「投稿」を選択し、alt属性を入れたい画像が貼ってある記事を選択します。そして画像をクリック。

鉛筆マークの「編集」を選択すると、
以下のような「画像詳細」という画面が表示されます。

画面左上の「代替テキスト」の項目にテキストを入力します。更新を押して完了です。

この手順を踏むと、この記事限定の属性を設定することができます。

 

テキストエディタに直接入力する際には「alt=””」の部分に入力しましょう。

冒頭でご説明した、HTMLの文法を覚えておくと画像の部分をパッと見つけられますね。設定できたかチェックする際にも役立ちます。

WordPress以外のテキストエディタを使う場合も同様です。

 

alt属性を書く時のポイント

設定方法をご理解いただけたところで、
alt属性の理想的な書き方をおさえていただきたいと思います。

属性を書く際に意識すべき点はズバリこれ。

 

例をあげます。
以下の画像にalt属性を書くとします。どんなものが良いと思いますか？

 

 

結論からいうと、このように書くのがベストです。

alt属性は、長すぎない簡潔な文言で、
誰がみても「何がどんな状態であるのか」がわかるように書くのが最適です。

 

少し逸れますが、こういった高画質のフリー素材は、Unsplashというサイトで見つけることができます。興味がある方は、こちらの記事も覗いてみてくださいね。

 

さらに明確に理解していただくために、
先ほどの画像を例としてalt属性のNGな書き方もみていきましょう。

具体的には、3つに当てはまる記述はよくないものとされています。

 

関係のないキーワードを入れている

画像に写っているものと、関係のない文言を入れるのはやめましょう。読者の方やクローラーを混乱させてしまいます。

 

検索キーワードを詰め込みすぎている

このように、検索に引っかかりそうなキーワードを大量に詰め込むのもNGです。

 

実際にGoogleは、キーワードに関して次のように言及しています。

「キーワードの乱用」とは、Google の検索結果でのサイトのランキングを操作する目的で、ウェブページにキーワードや数字を詰め込むことです。このようなキーワードは多くの場合、リストやグループの中に、または他の部分から切り離されて独立して（自然な文章としてではなく）出現します。ページにキーワードや数字を詰め込むと、ユーザーの利便性が低下し、サイトのランキングに悪影響が及ぶ可能性もあります。文脈に合ったキーワードを適切に使用した、情報に富んだ有用なコンテンツを作成することに焦点を合わせてサイトを運営してください。

キーワードの乱用 – Search Console – Google Support

キーワードを詰め込みたい気持ちはとてもよく分かりますが、このようにスパムと判断されてしまう可能性もあるので、注意しましょう。

 

説明不足すぎる

完全にNGというわけではないですが、これだけだともう少し説明が欲しいところです。

わたしの場合は、抽象的な画像で表現が難しい場合などには、H2の見出しを引用しています。

 

また、デザイン・装飾の目的で入れる画像に関しては、記載の必要なしです。このように空白にしておきましょう。

 

NG例もご覧いただくことで、適切なalt属性のイメージをご理解いただけたと思います。

再度確認しますが、alt属性は簡潔で端的に内容を表すものがベストです。

記事に画像を挿入する際には、是非参考にしてみてください。

 

alt属性を書いて画像を最適化しよう

ご説明してきた通り、alt属性（代替テキスト）は、
あなたのサイトを訪れる読者・ブログやサイトを運営するあなた自身、どちらにとっても重要な意味を持つ要素です。

 

「知らなかった！」という方や「面倒だからやっていなかった…」という方は、これを機会に設定をしてみて下さいね。

alt属性をきちんと記述して、
どんなユーザーにとっても利用しやすいブログ・サイトを目指していきましょう。