【ブログ初心者必見】alt属性の書き方と役割がわかる!

画像のalt属性は重要ですブログ・デザイン
こだわり君
こだわり君

こんにちは、「こだわりスタイル」です!

@KodawariStyle

記事を執筆する時、見出し(<h1>、<h2>・・・)や、本文(段落タグの <p> )に適切にキーワードを入れて書くことは多くの方が実践しています。

でも記事には文字だけでなく、ユーザーが読みやすいようにテンポよく画像を入れることも非常に大切です。

この記事を読んでいただいている方へ質問ですが、画像をそのまま何もせずアップしている覚えはありませんか?

圧縮するのはもちろんですが、もう一つ非常に大事なことがあるのをご存知ですか?

画像圧縮に関して詳しくはこちらの記事をご参照ください

そうです「alt属性」をしっかりと書いているかということです!

ブログ初心者で「えっ!」と思った方は必ず読んでくださいね!

こだわり君
こだわり君

今回はこんな方に向けて記事を書いています!

・ブログ初心者

・PVをもっと上げたい!

・Googleからの評価をアップしたい

スポンサーリンク

alt属性って何?

まず読み方ですが、「alt属性」は「オルト属性」と読みます。

ブログやサイトなどで使用されている画像が、何らかの事情で読み込むのが遅れてしまったり、または表示できない時などに画像の代わりに使用される「代替テキスト」とも言われている、画像の説明文のことです。

たまにブログやサイトを閲覧していて画像が表示されないページをご覧になったことはありませんか?

alt属性のない時の表示
これはサンプル画像です

上のようなマークで枠だけ表示されているケースがそれに当たります。

ブラウザによって「×」マークだったり形は違う場合もありますが、これが画像が表示できない状況の時に表示されるマークになります。

なぜ「alt属性」を書いた方がいいのか

ブログを書いている以上、見ていただけないほど悲しいことはありませんよね。

だから少しでもブログのPV(ページビュー)をアップさせたいと皆さん思います。

その中でも自然検索(検索エンジンでユーザーがキーワードを打ち込んで、検索結果で自分のブログをクリックしてもらうこと)での流入を増やすことは結構ハードルが高く感じると思います。

ですが、alt属性」をしっかりと書くことで、自然検索ほどではありませんが「画像検索」で上位表示を狙うことができます!

alt属性」を書いた方がいい3つの理由

1. 画像をうまく表示できない時も、画像の内容をユーザーやGoogleクローラーへ伝えることができる

alt属性」を書かないままだと、画像に「表示できませんマーク」のみですが、alt属性」が書かれていれば、下のように代替テキストが表示されるようになりますので、内容を補足する有益な画像であることを伝えることができます。

alt属性が入力してある時の表示

2. 視覚障害の方にも音声として伝えることができる

画像は本来、記事の内容を補足する形で挿入しますよね、ページを読まれる方の中には視覚障害の方もおりスクリーンリーダー(音声読み上げ機能)を使用するケースも多々あるのです。

「alt属性」が書かれていないと画像の内容は読み上げられませんので、アクセシビリティー(サービスを円滑かつ便利に使えることができること)においても非常に不親切なこととなり、SEOでもマイナス評価となります。

3. 画像検索からの流入アップ(PVアップ)につながる

基本的にGoogleのクローラーは、画像を正確に認識できません。

しかし「alt属性」をしっかりと書くことで、Googleのクローラーが画像の内容を正確に認識できます。

「alt属性」を書いていなかったり、曖昧な説明だと画像の内容がGoogleのクローラーに伝わりませんから、必然的に画像検索では上位表示されなくなります。

逆に言えば、しっかりと「alt属性」を書いていれば、画像検索で上位を狙うことができるようになりますので役割としてはかなり重要なのです。

皆さんは、目当てのページを検索エンジンで探すことももちろんですが、画像検索をしたことはありませんか?

ヒットした画像検索結果の画像をクリックすれば、その掲載ページへ行くことができます。

こだわり君
こだわり君

SNSや自然検索でのページ流入と比べれば、少ない流入ですが画像検索からの流入も馬鹿にできくらいあるし、SEOの評価もアップできるので「alt属性」を書くことは必須なのです。

というか基本ですので忘れずに!

スポンサーリンク

ワードプレスでのalt属性の書き方

今回はワードプレスでブログをしている方がalt属性」を書く方法を説明していきます。

入力方法は違えど、これはワードプレスに限ったことではなく独自でサイトを立ち上げようとしている方など、全ての方に共通していることですので、書くことを忘れないようにしましょう。

ワードプレスで実際に書き込み、公開したページのHTML(ソース)を見ると、alt属性」alt=”○”」ように書かれています。

<img src="https://kodawaristyle.com/img/○○.jpg" alt="○">

ワードプレスでメディアに画像をアップロード

今回はハンディクリーナーの画像のアップロードで説明します。

まずはワードプレスの管理画面の左メニューのメディアから画像をアップロードします。

メディアへの画像新規追加

メニューメディアライブラリを開き、目的の画像をドラッグ&ドロップします。(メニュー→新規追加でも同じですが、こちらの方が合理的なので私は「ライブラリ」にドラッグ&ドロップしています)

すると、ライブラリ画面の中にドラッグ&ドロップした画像が追加されました。

でもこれでアップロード完了ではないのです!

「alt属性」(代替テキスト)を書く

altテキストの入力画面

ライブラリにアップロードした画像をクリックしてみてください。

上の写真の「添付ファイルの詳細」画面が開きます。

画面右上(赤枠)に「代替テキスト」という入力欄があります。

これがalt属性」になりますので、ここに画像の説明を書いてください。

このalt属性代替テキスト)を書くのは、記事執筆中の画像挿入時にも行えますので、先にやるのが面倒な方は画像挿入時に忘れずに書き込むようにします。

こだわり君
こだわり君

私は後でやるのが面倒なので、アップロード時に全部書いています。

実際に下のハンディークリーナーの写真alt属性」を書くと、HTMLには下のように書かれて公開されています。

mi ハンディクリーナーミニの付属品
これはサンプル写真です

miというブランドで、商品名がハンディクリーナーミニ付属品を示した画像なので、「mi ハンディクリーナーミニの付属品」と書きましたので、alt属性」にはこのように反映されました。

<img src="https://kodawaristyle.com/img/○○.jpg width="800" height="450" alt="mi ハンディクリーナーミニの付属品">
スポンサーリンク

「alt属性の書き方と役割」のまとめ

よく他のブログを見ていると、画像が表示されずに上記マークだけのブログを見かけます。

マークだけですから、alt属性」は書かれていません。

こういったブログやサイトをよく見かけるので、今回はブログ初心者の方に向けての記事とさせていただきました。

alt属性」を書いて、少しでもPV(ページビュー)を稼ぎ、SEO評価も上げましょう!

注意点として、alt属性」を書く画像はコンテンツの内容に関係のあるものだけに書くようにしましょう。

例えば、デザイン要素の画像であればalt属性」を書いても、内容の補足になりませんよね!ですので、こういう場合は必要ありません。

<例>
電気製品を紹介するレビュー記事のページで、見出しなどを目立たせる目的で「赤いリボン」の装飾(デザイン)の画像を使用したとしましょう。

その際、alt属性」に「alt=”赤いリボンの画像”」と書いてしまうと、この電気製品との関係性が薄れてしまいます。

以上が、alt属性」についての説明でした!

こだわり君
こだわり君

alt属性の書き方と役割が分かりましたか?

ブログって細かいことの積み重ねですが、頑張りましょう!