ブログ

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

【alt属性とは】意味や設定方法を解説!画像を最適化しよう【SEO】
・alt属性って何?
・代替テキストって何?
・画像のSEO対策が知りたい!

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

 

ぽむ
ぽむ
こんにちは!ぽむ(@kurashigoo_pom)です。

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

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

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

 

記事の信頼性

・初心者から独学でブログを開設
・ブログ運営2ヶ月目で収益4桁

alt属性とは

alt属性とは

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

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

英語のalternative(代わりの手段)に由来しているよ。

 

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

 alt=”◯◯”

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

 

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

<img src=”△△” alt=”◯◯”>
 画像の 保存先は△△で  代わりのテキストは〇〇だよ

HTMLのimgタグの説明

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

  • <img>が画像のことを示す
  • alt=”◯◯”の部分がalt属性を示す

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

うさちゃん
うさちゃん
<img>は画像のことだったんだ!
ぽむ
ぽむ
うん!WordPressのテキストモードをのぞいたり、GoogleChromeでF12キーを押して検証してみたりすると勉強になるよ。

 

alt属性の意味・役割

alt属性の意味・役割

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

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

  • 画像がうまく表示されない時の代わり
  • 読み上げ機能の補助テキスト
  • クローラーの理解の促進

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

 

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

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

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

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

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

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

うさちゃん
うさちゃん
バリアフリーの面でも、配慮のあるサイトになるね!

 

クローラーの理解の促進

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

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

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

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

 

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

ぽむ
ぽむ
文字の内容は、テキストリンクを貼る時と同じイメージでOKだよ!

 

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

うさちゃん
うさちゃん
やらなきゃソンだね!

 

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

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

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

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

 

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

 


alt属性の設定方法

alt属性の設定方法

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

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

  1. メディアライブラリを開く
  2. 新規追加or画像を選択
  3. 添付ファイルの詳細→「代替テキスト」欄に入力

 

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

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

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

WordPressのメディアの画面

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

wordpressの設定画面

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

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

くまくん
くまくん
めっちゃカンタンやん!

 

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

  1. 投稿→記事を選択
  2. 画像を選択
  3. 編集マークを選択
  4. 画像詳細の「代替テキスト」に入力
  5. 更新

 

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

WordPressの投稿画面

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

WordPressの投稿画面(メディア)

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

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

 

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

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

WordPressのテキストエディタ画面

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

 

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

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

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

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

  • どんな画像かを想像できる
  • 簡潔でわかりやすく説明している

 

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

手のひらに乗ったハムスター

 

くまくん
くまくん
このハムスターの名前は多分「コロッケ」だから、「コロッケ」が良いかな!
ぽむ
ぽむ
…?!

 

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

「手のひらに乗っているハムスター」

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

くまくん
くまくん
たしかに「コロッケ」だと他の人が分からないね…。

 

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

 

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

alt属性のNG例

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

  • 関係のないワードを入れている
  • 検索キーワードを詰め込みすぎている
  • 説明不足すぎる

 

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

alt=”草原を駆けるウサギ”

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

 

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

alt=”ペット,飼育,ハムスター,ゴールデンハムスター,ジャンガリアンハムスター,人間,黒い服,手,左手”

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

 

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

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

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

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

 

説明不足すぎる

alt=”ハムスター”

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

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

 

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

alt=””

 

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

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

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

 

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

記事のまとめ

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

 

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

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

 

ぽむ
ぽむ
最後まで読んでくれてありがとう!

POSTED COMMENT

  1. […] 7.【alt属性とは】意味や設定方法を解説!画像を最適化しよう【SEO】 […]

  2. […] 頭がいい人?だけが入れるメンサの会員であり、TV出演もした事があるというぽむさん!※メンサって都市伝説好きな人からすると結構有名ですよね。ブログのライティング力がずば抜けて高く、人に説明する、紹介する力が飛び抜けています。☞ぽむさんのTwitter☞くらしぐはこちら特にブログ初心者向けの記事は、誰でも理解できるレベルで丁寧に書かれています。☞200回見たalt属性の記事はこちら他の人の記事では理解できなかったけど、ぽむさんの記事を読めば理解できるという人が多いのも確かです。※頭が悪い私がそうだったから間違いない誰が見てもわかりやすい、そして理解しやすい記事を書きたいなら、ぽむさんの記事を参考にした方がいいですよ! […]

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です