WordPress

alt属性とは?WordPressで設定する方法から書くポイントを紹介!

2021年10月17日

 

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

 

こんな悩みに答えます。

 

本記事の執筆者

当ブログでは、WordPressの基本的な設定方法からアフィリエイトに関する役立つ情報を発信しています。ブログで月に5桁ほど稼いでいます。

 

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

 

alt属性のメリット

  • GoogleなどのサーチエンジンのSEO対策になる
  • 画像が表示されなかった場合に、代替テキストがあることによってユーザーが画像内容を把握できる

 

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

 

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

 

なお、WordPresss(ワードプレス)を使うことで、ソースコードを使わずに、簡単にalt属性を設定できます。

 

サイト・ブログを運営して、alt属性をスムーズに設定するのであればWordPressで運用してみるのがオススメです!

 

WordPressでサイト(ブログ)を立ち上げてみたい方は以下記事で紹介していますので、興味のある方はご覧ください。

 

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

  悩む人WordPress(ワードプレス)でブログの開設をしたいです!開設方法を知りたいのですが、どうやったらブログを始められますか?   こんな悩みに答えます。   ...

続きを見る

 

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

 

alt属性とは?

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選【初心者】

  悩む人WordPressを立ち上げたのはいいけどまず始めにやっておくことは何だろう?ブログ運営にSEO対策が重要と聞いたけど、ワードプレスでまず始めにできるSEO対策を知りたいな...。 ...

続きを見る

 

alt属性の書き方ポイント

alt属性の書き方ポイント

 

alt属性の記述ポイントは、以下の通りです。

 

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

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

・「~画像」と入れない

 

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

 

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

 

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

 

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

 

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

 

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

 

例えば、

 

Good

「犬 散歩」

NG

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

・「~画像」と入れない

 

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

 

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

 

WordPress(ワードプレス)alt属性を設定する方法

WordPress(ワードプレス)alt属性を設定する方法

 

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

 

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

 

1. 投稿画面で「メディアを追加」をクリック

 

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

 

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

 

 

2. 代替テキストを入力

 

画像を選択しますと以下のように「代替テキスト(alt属性)」があります。

 

 

上記の代替テキストに、”キーワード”を入れて「投稿に挿入」ボタンをクリックして完了です!
KEI

 

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

 

すでに登録済みの画像で、alt属性を変える方法を紹介します。

投稿記事に挿入している画像(alt属性を変更したい画像)をクリックします。

 

画像をクリックしますと、以下のように、鉛筆アイコンマークが出てくるのでクリックします。
KEI

 

 

クリックしますと、「代替テキスト」の入力ボックスがあるので設定したいテキストを入力します。

 

 

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

 

alt属性を確認する方法

alt属性を確認する方法

 

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

 

Google Chromeの検証機能(デベロッパーツール)を使うことで、設定したalt属性を簡単に見つけられます。
KEI

 

ツールをインストールして確認する必要がなく、簡単にalt属性を確認できますよ。

 

1. 開発者ツール(デベロッパーツール)を表示

 

まずは、デベロッパーツールを表示させます。

 

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

 

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

 

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

 

メモ

・WindowsユーザーCtrl + F

・Macユーザー command + F

 

2. alt属性を検索

 

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

 

 

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

 

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

 

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

 

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

  悩む人Googleデベロッパーツールって何?デベロッパーツールの使い方を知りたいです!   こんな悩みに答えます。   Googleデベロッパーツールは、ソースコード ...

続きを見る

 

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

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

 

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

 

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

 

ただ、最後にalt属性についてお伝えしますと、必ずしも全ての画像にalt属性を設定する必要がないということです。

 

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

 

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

 

また、WordPressでできるSEO対策については、以下記事で一覧にして紹介していますので、こちらもチェックしてみてください!

 

 

今回は以上です。

 

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

  • この記事を書いた人

keiblog

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

-WordPress