サイトを作ってみたけどSEO対策ってなにをしたらいいのか分からない

と困っているあなた。

サイトを持っていればすぐにできるSEO対策が『代替テキストの設定』です。

この記事を読んでわかること

・代替テキストってなに?alt属性ってなに?
・代替テキスト設定ってどんなメリットがあるの?
・代替テキスト設定の注意点

などを分かりやすく紹介していきます。

代替テキスト(alt属性)とは?

SEO代替テキスト

alt属性ってなに??代替ってなんの代替??

と、単語を見ただけでは何を意味する言葉なのかわかりませんよね。

”alt属性(英語: alt attribute)はHTMLとXHTMLで使われるHTML属性。
HTML要素が表示できないときに代わりにレンダリングされるテキスト(いわゆる代替テキスト、英語: alt text)を指定する。”
(Wikipediaより引用)

Wikipediaではこのように説明されています。….ちょっと難しいですね。

簡単に言うと『画像の説明文』のことです。

例えば

あなたのサイトで花の画像を挿入したとします。

画像はバラの写真で、あなたが撮影した写真のファイル名「20200101.jpg」そのままとなっています。

そこに代替テキストとして「ピンクのバラの花の写真」と説明を入れることを代替テキストの設定といいます。

タグはこういった感じになります↓

<img src=”20200101.jpg” alt=”ピンクのバラの花の写真” />

でも代替テキストの設定って面倒だし、絶対やらないとダメなの?

と疑問を持ってしまったあなた。

そんなあなたでも、代替テキスト設定しなきゃ!と思ってしまう程のメリットがあるんです。

代替テキストを設定するメリット

代替テキストなんて設定して意味あるの?なにかメリットがあるの?

と思いますよね。

代替テキストを設定する意味やメリットを3つご紹介します。

①画像が表示されない場合に代替テキストが表示される

何らかの障害で通信状況が悪く、画像が読み込めない場合や

意図的にテキストブラウザ(サイトが文字のみ表示されている状態)でサイトを見ている場合には

画像が表示されない代わりに、代替テキストの画像の説明文(alt=”画像の説明文”)が表示されます。

そう!

『代替』とは、『画像の代わり』ということなんですね。

画像が読み込めない場合、なんの画像が貼ってあるのか、説明文が書いてあれば

「ああ、見えないけどこんな画像が貼ってあるんだな」

とイメージはできます。

画像が見られない環境で見る人にも親切なサイト、と評価も高くなります。

②視覚障がい者がサイトを見るときの助けになる

上記にも書いたのですが、ウェブサイトというのは

意図的にテキストブラウザ(サイトが文字のみ表示されている状態)で見ることもできます。

テキストブラウザというのは主に視覚障がいの方が

テキスト読み上げソフトと併用して利用されているんです。

読み上げ中に説明が無ければ画像が貼ってあるのかさえ分かりませんが

代替テキストがきちんと設定されていて

「ピンクのバラの花の写真」

と読み上げられれば画像の意味や内容が理解できます。

これもまた、画像を見ることができない人にも親切なサイト、と評価が高くなります。

③SEO対策にもなる

検索エンジンは、ユーザービリティの高いサイトを高く評価しますので、

上記の①と②でもユーザービリティが高い良いサイトと評価されるのですが、

代替テキストのSEO効果はそれだけではないんです。

検索エンジンはサイトを評価するために見回るのですが、

サイトは星の数ほどあるので人の目ではとても見回りきれません。

そこで、クローラーという巡回プログラムを使ってサイトを見回っています。

ここで問題発生!

画像を貼ることはユーザーにとっては見やすく分かりやすくなり

評価が上がることなのですが、

プログラムは人では無いので、どんなに良い画像を貼っていても、

それがどういう画像なのかは理解できないんですね。

近年ではクローリングの技術も進化して、

画像だけでもその画像な何の画像なのか理解できることも増えてきましたが

それでも人と比較すればまだ完璧とは言えません。

そこで活躍するのが代替テキストなんです。

代替テキストで画像の意味や内容をきちんと設定しておけば、

クローラーが『これは〇〇の画像だ』と理解してくれます。

クローラーが画像の内容を理解してくれれば、

検索エンジンの画像検索で関連ワードを検索されたときに表示され

画像からサイトへユーザーが流入することも期待できます。

例えば、

「花 バラ ピンク」で画像を検索したユーザーがあなたの撮ったバラの写真をみて

画像経由でサイトへ訪問してくれる、ということも期待できるんです。

2020年からの必須SEO対策 ユーザービリティとは?

SEO対策に必須なユーザビリティ向上方法を詳しく解説

代替テキスト設定のポイントと例

ユーザビリティ向上にもSEO対策にもプラスになる代替テキストですが

設定時に気を付けたいポイントが3つあります。

きちんとポイントを押さえて設定していきましょう。

テキストは画像の情報が伝わる文にする

言わずもがなですが、代替テキストは画像の情報が伝わる文にしましょう。

わかりやすい例をあげますね。

画像=あなたが撮影したピンクのバラの写真

NG:「花」「バラ」「わたしが2020年1月に撮った写真」

これではなんの画像なのか情報が伝わりませんね。

OK:「ピンク色のバラの写真」「咲き始めのピンクのバラの写真」

これならちゃんと画像の情報が伝わります。

キーワードを詰め込みすぎない、簡潔に

画像からユーザーを流入させたいからといって、キーワードを詰め込みすぎるのはダメです。

ユーザーに親切でないことはもちろんですが、

たくさんのキーワードを詰め込むことで場合によっては悪質なSEO対策とみなされて

ペナルティを受けてしまうことがあるかもしれないので注意しましょう。

サーチコンソールのヘルプに分かりやすい例がありましたので紹介します。

”・悪い例(代替テキストがありません):

・悪い例(キーワードの乱用):<img src=”puppy.jpg” alt=”子犬 犬赤ちゃん ラブラドールレトリーバー ウルフハウンド ジャックラッセルテリア ドッグフード  安い ドッグフード子犬フード” />

・良い例:<img src=”puppy.jpg” alt=”子犬” />

・最も良い例:<img src=”puppy.jpg” alt=”投げたものを取ってくるダルメシアンの子犬” />”
(SearchConsoleヘルプより引用:https://support.google.com/webmasters/answer/114016?hl=ja)

より簡潔に、わかりやすく、情報が伝わる文を心がけましょう。

装飾の画像にはテキストを入れない

サイトには意味のある画像ばかり貼るとは限りませんよね。

サイトを見やすくするための装飾用画像もたくさんあります。

そういった画像には

alt = “”

このように、空欄のalt属性を入れておきましょう。

なんで空欄のalt属性を入れておくの?いっそ省略じゃダメなの?

と思いますよね。

空欄のalt属性を設定すると、クローラーにどう捉えられるかというと

「この画像はサイトの内容にとって重要な要素では無いんだな(飾りの画像だな)」

と装飾であることを正しく理解してくれます。

なんの画像なのか分からないし説明も無い、という状態よりも

装飾であることが代替テキストの空欄(alt = “”)によって説明されている方が良いということですね。

モバイル用ページにも代替テキストを設定しよう

見落としがちですが、モバイル用ページの画像にも代替テキストを設置しましょう。

近年ではモバイル(スマホ)からサイトを見る人がとても増えているので

モバイル用ページをきちんと設定しているかどうか、検索エンジンも評価しています。

忘れずに代替テキストを設置しておきましょう。