Blog

alt属性とは?書き方のポイントから設定方法までを徹底的に紹介!

 

悩む人
alt属性って何?設定しておくことでのメリットや書き方のポインチ、設定方法までを徹底的に教えてほしい!

 

こんな悩みに答えます。

 

結論、alt属性を設定しておくと以下のメリットが得られます!

 

・GoogleなどのサーチエンジンのSEO対策になる

・画像が表示されなかった場合に、代替テキストがあることによってユーザーが画像内容を把握できる

 

alt属性は画像の代替テキストで、設定しておくことでSEO対策になりますよ!
KEI

 

本記事では、そんなalt属性の設定方法から設定するメリット、記事後半ではWordPressでalt属性を設定する方法を紹介します。

 

なお、WordPresss(ワードプレス)を使うことで、難しいソースコードにalt属性を記述しなくても簡単に設定できます。

 

サイトやブログを立ち上げて簡単に運用されたい方にはオススメです!

 

ワードプレスでサイトを立ち上げてみたい方は以下記事をご覧ください。

 

関連記事
【初心者でも簡単!】WordPressでブログを開設する方法・始め方

続きを見る

 

画像付きで開設方法を順番に紹介しています!
KEI

 

前置きが長くなりましたが、それでは早速はじめます。

 

alt属性とは?

 

alt属性は、Webブラウザで画像が表示されないときに、画像の代わりになるテキスト情報のことです。

 

alt属性は、代替テキストと呼ばれることもあります。

 

alt属性の役割としては、以下があります。

 

・通信が不安定などが原因で画像が正しく表示されない場合に、画像の代替テキストを表示できる

・視覚に障害がある方がスクリーンリーダーを使用することで画像の意味を理解できる

 

サイトを開いたときに、通信環境が不安定で画像がうまく表示されない...といった経験が1度や2度あるのではないでしょうか?
KEI

 

万が一サイトを開いて画像が表示されなかった場合に、alt属性で設定した代替テキストを表示させコンテンツの意味が伝わるようにできます。

 

また、音声読み上げ機能を使用した場合の読み上げテキストとしての役割にもなるので、視覚障害者の方などが利用しやすくなる効果もあります。

 

alt属性の記述方法

 

HTMLタグのimg要素を書く際には、以下のように記述します。

 

 command
<img src= “/img.png”  alt=”◯◯◯”  />

 

〇〇〇」の部分にalt属性のテキスト情報を入れてあげる感じです。
KEI

 

画像を見なくても掲載している画像がどんなものか検索エンジンとユーザーが把握できるテキストを書いてあげることがポイントです(この後詳しく紹介します!)。

 

alt属性を設定するメリット

 

冒頭でも紹介しましたように、alt属性の設定はユーザーとGoogleの両方にメリットを与えられます。

 

Googleは以下のように提言しています。

 

Google は、画像のキャプションやタイトルなどのページのコンテンツから画像のテーマに関する情報を抽出します。可能な限り、画像のテーマに関連するページの、関連テキストの近くに画像を配置するようにしてください。

参照元:Google 画像検索でのおすすめの方法

 

Googleは代替テキストを設定しておくことを推奨しており、alt属性を設定することで、ある程度SEO対策が期待できそうです。

 

また、alt属性の設定以外に画像近くに画像の説明書きを書いてあげるのもユーザーやGoogle両方に効果的なのでオススメです。

 

ただ、alt属性を設定したからといって劇的に検索順位が伸びるわけではないようなので注意は必要そうです。

 

alt属性の設定も大切なのですが、サイトやブログを立ち上げて優先的にやっておくSEO対策がたくさんあります。
KEI

 

alt属性の設定以外にやっておくべきSEO対策について以下で紹介しているので、参考にしてみたい方はご覧ください!

 

関連記事
WordPressでブログを立ち上げたらやるべきSEO対策6選【初心者】

続きを見る

 

alt属性の書き方ポイント

 

alt属性の書き方のポイントは、以下の通りです。

 

・多数のキーワードを含めない

・画像の内容に合わせたキーワードにする

・「~画像」と入れない

 

alt属性はテキストをただ設定するのではなく、ポイントを抑えることでよりSEO効果が発揮できますよ!
KEI

 

1つずつ順番に紹介します。

 

・多数のキーワードを含めない

 

alt属性に色んなキーワードを含めるのはNGです。

 

『キーワード』をたくさん含めることで、確かにSEO効果になりそうですが、ユーザーや検索エンジンに適切に情報を伝えられなくなります。

 

特に、スクリーンリーダーで意味のないキーワードが読み上げられてしまうことで、なんの画像であるかユーザーは混乱してしまう可能性があります。

 

例えば、

 

Good

「犬 散歩」

NG

「犬 猫 散歩 飼い方 おやつ ペット」

 

上記のように画像とは関係のないキーワードが沢山あることで、画像の内容を適切に伝えられなくなります。

 

入れるキーワードは『2-3個ほど』がおすすめでして、画像の内容からずれないように設定しておくのが良いのかなと。
KEI

 

色んなユーザーを狙ってキーワードを詰め込むよりは、少ないキーワードで代替テキストを設定してあげましょう!

 

・画像の内容に合わせたキーワードを具体的に書く

 

キーワードの詰めすぎと同じように、画像の内容にあった具体的なキーワードを入れるのがポイントです。

 

例えば、画像にリンクを貼っていて『○○へのリンクのボタン』のように説明するのではなく、『◯◯商品ページ』などその先のページ名を設定してあげます。

 

具体的ではないキーワードですと、Googleは評価するにしても難しくなってしまいますし、品質ガイドラインにも抵触する可能性にもなります。

 

抽象的なテキスト情報を設定するよりかは、画像内容を具体的に書くことがポイントです!

 

・「~画像」と入れない

 

画像内容をテキストで代わりに説明するので、改めて「〜画像」という文言を入れる必要はありません。

 

画像の内容が分かり簡潔なキーワードが入っていればOKです!
KEI

 

WordPressalt属性の設定方法

 

続いてWordPress(ワードプレス)でalt属性を設定する方法を紹介します。

 

5分ほどで完了できちゃうので、参考にしてみてください!
KEI

 

まずは、お使いのワードプレスを開きまして、画面サイドバーから記事を開きます。

 

開きましたら、「メディアを追加」をクリックして追加したい画像を選択します。

 

 

選択すると「代替テキスト」があります。

 

 

「代替テキスト」がalt属性になるので、ここにキーワードを入れて「投稿に挿入」ボタンをクリックして完了です!

 

既存のalt属性を変える方法

 

続いて、すでに登録済みの画像のalt属性を変える方法です。

 

まずは、設定したいalt(代替テキスト)画像をクリックします。

 

画像をクリックしますと、えんぴつのアイコンマークが出てくるのでクリックします。
KEI

 

 

クリックすると、先ほどと同じように「代替テキスト」の項目があるのでそちらを入力します。

 

 

最後に「更新」ボタンをクリックして完了です!

 

alt属性の確認方法

 

最後に、設定したalt属性が問題なく反映されているか確認する方法について紹介します。

 

結論、Google Chromeの検証機能(デベロッパーツール)を使うと簡単に見つかります!
KEI

 

ツールを使わないで簡単にalt属性を確認したい方にはオススメです。

 

まずは、デベロッパーツールを表示させるのですが、以下のショートカットキーを押すことで表示できます。

 

  • Windowsユーザー:Ctrl+Shift+I
  • Macユーザー: command + Option + I

 

表示できましたら、続いて以下のショートカットキーを押して検索ボックスに移動します。

 

メモ

・WindowsユーザーCtrl + F

・Macユーザー command + F

 

検索ボックスに移動できましたら、検索ボックス内に「alt」と入力してEnterキーをクリックします。

 

 

すると該当箇所が黄色のマーカーで敷かれるので、画像にalt属性が設定されているかを確認できます。

 

alt属性に設定したテキストが入って入ればOKです!
KEI

 

なお、デベロッパーツールの使い方について以下で詳しく紹介していますので興味のある方はご覧ください!

 

関連記事
【ブログ初心者】Googleデベロッパーツールの使い方を解説します

続きを見る

 

alt属性を設定してSEO対策をしよう!:まとめ

 

今回は、alt属性について紹介しました。

 

alt属性は誰でもできる簡単なSEO対策の1つになります。
KEI

 

ただ、最後にお伝えしますと全てのalt属性に必ず設定する必要はありません。

 

あくまでGoogleに読み込んでほしい画像や、ユーザーに理解してもらう必要のある画像に設定しておくのがポイントかなと思います。

 

alt属性の設定ができていない方は、これを機会にぜひ設定してみてください!

 

今回は以上です。

 

ここまで読んでいただきありがとうございました。

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-Blog