Googleが提唱する正しいaltタグ(属性)の書き方・付け方
ブログを書いていて画像を埋め込む時、それが一体なんの画像なのかを検索エンジンに伝えるために「altタグ（alt属性）」というものを使う必要があります。
このaltタグ、正しく使い始めたからといってものすごいSEOの効果が期待できるわけではありませんが、正しい使い方を知っていれば検索エンジンやユーザーにとって優しいコンテンツ作りの参考になります。
ということで今回はこのaltタグの付け方について、Googleが公式に発表している内容を元に正しい方法を考えてみました。
少し盲点な部分だと思いますので、画像をブログでよく使うという方はぜひ参考にしてみて下さい。
Contents
altタグ（属性）とは？
「altタグ」（オルト属性）とは簡単に言うと、その画像が何の画像なのかを検索エンジンに伝えるための役割を持ったテキストのことです。
「altタグ」の”alt”とは”alternative”（代わりの）から来ています。
例えば、次の画像をWordPressで記事内に挿入するとしましょう。
WordPressで画像を挿入しようとするとこんな画面になりますね
これで、この画像を貼った部分をHTML（テキストモード）で見てみると次のように表示されます。
僕たち人間が先程の画像を見ると「水浴びが終わった後の鹿が一匹いて、体をブルッと振って水を飛ばしている」と一瞬で分かります。
しかし、検索エンジンからしてみればそれが画像だということは.jpg.や.pngといったファイルの形式から分かるものの、その画像に鹿や水辺が写っていることは全く分かりません。
この場合、検索エンジンがこの写真から受けることができる情報は”168535.jpg”という画像のファイル名のみ。
これではこの写真に関する情報がほぼ何もないのと同義です。
そこで登場するのがaltタグ。
この「代替テキスト」となっているところに、上の画像のように「鹿が水浴びが終わって体を震わせている」と記述して、その画像をHTML（テキストモード）で見てみると今度は次のように表示されます。
これがあれば検索エンジンも「ああ、これは鹿が水浴びが終わって体を震わせている写真なのか」と認識することができますね。
altタグとはこのように、非テキストコンテンツの意味情報を検索エンジンに正しく伝える手助けをするHTMLの属性のことです。
altタグ（属性）とSEOの関係性
では、なぜこのaltタグを使って検索エンジンに「この画像はこんな画像ですよ〜」と伝えることは大事なのでしょうか？
結論から言うと、それは検索エンジンにとって分かりやすいサイトにすることに繋がり、ひいてはSEOを強化することになるからです。
SEOの原則の1つに「ユーザーとクローラーに同じ情報を参照できる様にする」という考え方があります。
検索エンジンの使命は人間（ユーザー）が見た時に分かりやすい、ためになるコンテンツを上位表示させることなので、当たり前と言えば当たり前ですね。
だからこそ、ユーザーには問題なく情報が伝わるが、検索エンジンには何が書かれているのか分からないという状況はマイナスにはなってもプラスになる事はありません。
検索エンジンが画像の内容を理解することが難しい以上、その手助けとなるaltタグは大切なSEOの1つになります。
また、altタグがSEOに効果があると思われるもう1つの理由は、画像からリンクを張る場合に画像のaltタグがリンクに対するアンカーテキストのように扱われるからです。
アンカーテキストとはリンクされている部分のテキストのことで、こういうもの⇒altタグのことを指します。
このアンカーテキストはSEO上かなり重要なもので、検索エンジンはこのアンカーテキストとリンク先ページとの関連性をよく見ています。
例えば、リンクのテキストが「犬の画像」となっているのに、リンク先に飛んでみたら猫の画像が出てきたら混乱しますよね。
こういったことをすると人間以上に検索エンジンは「どうなってるの？」と混乱してしまうのです。
また、自分のサイトの他の記事に「こちら」という形でリンクを貼るのではなく、しっかりとリンク先ページの内容を表したテキストにしたほうが、サイトの内部SEOが強化されます。
これは画像でも一緒で、画像をクリックしたらリンクが飛ぶように設定している場合、アンカーテキストはaltタグに入っている内容になります。
よくサイドバーにキャッチーな画像を使ってそこからサイト内の他のページへ飛ぶように設定しているサイトがありますが、ああした場合はしっかりとaltタグの内容も適切に記述していったほうがSEOに効果があるのです。
altタグは視覚障害者向けやページがうまく表示されない時のために設定する意味もある
視覚障害がある、スクリーン リーダーを使用する、接続速度が遅いなどの理由から、ウェブページの画像を見ることができないユーザーも多くいます。代替テキストはこのようなユーザーに重要な情報を提供できます。
加えて、altタグを正しく設定することで、視覚的な障害がありWebページのテキストを読むのにスクリーンリーダーを使っている方がページの内容を把握するための手助けにもなります。
Googleは地球上の人間全員がGoogleのシステムの恩恵を受けられることを目標にしているので、Googleにとってはこういう部分はとても大事なのです。
また、ページの読み込みが遅いと画像がうまく表示されずに空欄になってしまうことがありますが、そんな時は代わりにaltタグが表示されるので、少なくともテキストではそこに何があるのか分かりますね。
Googleが提唱する正しいaltタグ(属性)の書き方・付け方
簡潔にする
上の画像の例のように、altタグ内に何かを記述する時はスパムのようにひたすらキーワードを詰め込むのはNGです。
どんなSEOもそうですが、やはり不自然なことをするのはダメですね。
ただあまり簡潔にしすぎても、それはそれで検索エンジンに画像に関する十分な情報を届けられないのでここらへんはバランスを見て判断しましょう。
画像のそばに適切なテキストを配置する
ページ上の画像の周りにその内容（キャプション、画像のタイトルなど）を記述すると、画像の題材についての重要な情報が検索エンジンに伝わります。たとえば、自家栽培のトマトを紹介するページにシロクマの写真を載せると、polarbear.jpg の題材について、検索エンジンにわかりにくいメッセージを送ることになります。
可能な限り、画像のそばに適切なテキストを配置するようにしてください。また、わかりやすいタイトルやキャプションを画像に付けることもおすすめします。
例えば、以下の画像にいれるべきaltタグの内容についてちょっと考えてみましょう。
この画像を見たまんまで入れると「男女二人が車の席で手を握っている」みたいな感じになりそうですね。
しかし、次のテキストが前後にあったらどうでしょうか？
これだと「ハネムーンへ出発する新婚夫婦がブラダルカーの中で手を握っている」とかになって、さっきよりもっと詳しい情報を書く必要がありそうですよね。
このようにその画像が何を表わしているのかは、前後の文脈によって大きく変わってきます。
よって、「単に写真の説明」を記入するのではなく、「その脈絡で適切な説明」を入れていきましょう。
アンカーテキストとして伝える
外部ページのアンカー テキスト（サイトにリンクするためにページで使用するテキスト）を確認すると、そのサイトがどのように見られているかがわかります。通常、ウェブマスターは他のサイトからのリンク方法をコントロールできませんが、自分のサイトで使用するアンカー テキストを便利でわかりやすい、適切なものにすることはできます。こうすることで利便性が向上し、ユーザーはリンク先の内容を把握しやすくなります。
こちらは上でも解説をした通りですが、画像からリンクを送る際にはそのリンク先の内容を適切に表すテキストをaltタグ内にいれましょう。
他人のサイトから画像つきでリンクを貼られる時はどうしようもないですが、自分で自分のサイトに画像からリンクを貼る時は意識しておくと良いですね。
飾り画像には特につけなくてもOK
こちらは特にGoogleによって何か言及があったわけではありませんが、いわゆる見栄えをよくするための飾りの画像（この記事の一番上にあるような画像）には特にaltタグを付けなくても良いというのが大多数の意見なようです。
確かにコンピューターは使われている画像に何が写っているのかを把握するのは苦手ですが、その画像とインターネット上にある他の画像か同じなのかどうかを見極めることは簡単にできます。
もしもあなたが自分のサイトに貼った画像のaltタグの内容と、他のサイトで使われている同じ画像のaltタグに記述されている内容が全く違うと検索エンジンは混乱することになるでしょう。
そうなるとSEO効果は期待できない可能性が高いです。
このあたりは正確にはGoogleの社員でなければ分かりませんが、画像に写っているものとは全く違うaltタグを入れても到底SEO効果があるとは思えないので、特に入れる必要はないでしょう。
画像のファイル名を最適なものにする
ファイル名は、Google で画像の題材を知る手掛かりとなります。画像の題材がわかるようなファイル名を付けるようにしてください。たとえば、my-new-black-kitten.jpg（「我が家の新しい黒い子猫」という意味のファイル名）は IMG00023.JPG よりずっとわかりやすい名前です。わかりやすいファイル名はユーザーにとっても便利です。画像が見つかったページに画像に適したテキストが見つからない場合、ファイル名が画像のスニペットとして検索結果で使用されます。
こちらはaltタグの書き方ではありませんが、その画像のファイルをどうするのかも重要であるとGoogleは言っています。
まあ、単純に考えてファイル名が「black-cat.jpg」なのに、altタグのところが「柴犬」とかだったら検索エンジンは「どっちなの？」と混乱しますよね。
ここまで極端ではなくとも上のように「IMG00023.JPG」というファイル名にするよりは「my-new-black-kitten.jpg」にするほうがその画像に関する情報をより多く検索エンジンに伝えられます。
加えて次の要素も大事みたいです。
可能であれば“image1.jpg”、“pic.gif”、“1.jpg”のような一般的なファイル名は使わない
極端に長いファイル名を付けない
僕の場合はファイル名までいちいち全部最適なものにするのは面倒なので、極端に長いファイル名にならないことだけ気をつけています。
altタグはキーワードではなく文章にするべき？
最適化できるその他の多くの要素と同様、(ASCII 文字コードにおける)ファイル名と alt 属性は、簡潔かつ説明的なものが理想的です。
こちらの説明によればaltタグは「簡潔かつ説明的なものが理想」と書いてあるので、「鹿 水浴び 体 震わせる」よりも「鹿が水浴びが終わって体を震わせている」のほうが記述としては理想的なのではと思われます。
まとめ：altタグには正しい記述を
ということで今回は画像のaltタグの使い方について解説をしてみました。
- altタグは簡潔にする
- 画像のそばに適切なテキストを配置する
- アンカーテキストとして伝える
- 飾り画像には特につけなくてもOK
- 画像のファイル名を最適なものにする
現在の時点ではまだコンピューターは画像の内容を理解するのに難しいと言われていますが、それも「ディープラーニング」という学習方法の登場でかなり進化してきました。（興味がある方はぜひ調べてみて下さい）
これからますます精度が上がってくることは明白ですし、その時はGoogleもaltタグの内容と画像の内容が一致しているのかどうかを厳しくチェックし始めると思われます。
よって、ぜひいまのうちから正しいaltタグの記述方法について頭に入れておくのがオススメです。
