2019/10/16

alt属性はSEOに必要?役割と書き方を解説します

alt属性はSEOに必要?役割と書き方を解説!

解説猫(仮)
解説猫(仮)SEO解説担当の猫さんです
元SEOディレクターで、現在は自社マーケティングやってるみたいです
・趣味:昼寝
・どんな人でもわかる優しい説明をこころがけているが、そんなにうまくはない
・冷静な判断で仲間からの信頼も厚い(自称)
竹内
竹内現役SEOディレクターのおじさんです
顔は怖いけど美しく清らかな心の持ち主です
・顔は怖いが、丁寧な対応でクライアントからの信頼も厚い
・顔は怖いが、空気を読むスキルが高く冗談も通じる
・顔は怖いが、笑顔も結構怖い

alt属性ってご存知ですか?
表面には出ないものなので、ご存じない方もたくさんいらっしゃるかもしれませんね。

ですがSEOにおいて、alt属性には重要な役割があります。
この記事を読めば、あなたもalt属性の重要性を説明できるようになるかも…!?

解説猫(仮)
こんにちは、こんばんは、解説の猫(仮)と申します。
この記事では、alt属性について解説しています。
よろしくお願いしますね。

竹内
こんにちは!竹内と申します。
SEOでは基本的なことですが、alt属性の影響は侮れませんよね!
読んでいる方に重要性を伝えられるように頑張ります!

alt属性とは?

画像(写真・絵など)に書かれている内容をGoogle(検索エンジン)に伝える、画像の代替テキストです。
このタグがないとGoogleは画像の内容を理解できず、評価することもできません。
活用することでページの内容が伝わりやすくなり、SEOに有利に働きます。

alt属性の記述方法

alt属性はimgタグに記述する属性です。
記述例は以下になります。

寝ている猫

このタグ内の「alt=”寝ている猫”」がalt属性です。
Googleが読むタグなので、基本的に人が目に見える場所には表示されません。

ユーザーがalt属性を認識できるケース

下記ケースでは、ユーザーもalt属性を認識できます。

  • ブラウザが画像を読み込めない場合
  • 音声読み上げ機能を利用した場合

画像を読み込めない場合、補完情報としてalt属性の内容が表示されます。
見たことがある方もいらっしゃるかもしれませんね。

※ブラウザによって多少変わりますが、下記画像のように表示されます
画像を読み込めない際のalt属性表示画像

また、Webページの音声読み上げ機能を使用した際は、alt属性の内容が読み上げられます。
障がいのある方に役立つ、便利な機能です。

竹内
(うわ、寝てる写真かわいいな)
猫さん「ごめん寝」するんすねw
差し込む光と相まって、僕は心が浄化されるようですよ…
解説猫(仮)
課金コンテンツなので竹内には後で請求書を送っておきます。
ところで今、私の寝方を何て言いました?
竹内
(!!??)
え、えっと、「ごめん寝」のことですか?
解説猫(仮)
ソレデス。
「一般に認識されていて検索ボリュームのあるワード」が画像の内容に該当するなら、alt属性に設定することをお勧めします。
竹内
hrefsというツールで月間検索ボリュームを見てみました。
結果は下記でした。(2019/10/15時点)
※SearchVolume比較
ごめん寝:8,000
寝ている猫:70
竹内
ごめん寝」つえぇ!!
解説猫(仮)
alt属性は後述する「画像検索」でもヒントとして使用されます。
この例の場合は「ごめん寝」をalt属性に記述したほうが、ニーズが強いクエリをカバーできそうですね。
次のセクションでalt属性設定のポイントを紹介します。

alt属性設定のポイント

画像の内容を簡潔に・わかりやすく

alt属性は画像を説明するタグですが、画像の内容を全て書くことが正しいわけではありません。
ややこしいですね…

例えば下記の画像なら、どんなalt属性を設定すればいいのでしょうか?

広告主・ユーザー・媒体者の関係

とは書かないですよね…(意味不明ですし)
上記は悪い例です。

画像は「2019年最新版!リスティング広告とは?費用の仕組みと運用のやり方を紹介」という記事で実際に使っているもので、下記のalt属性を設定しています。

このように、画像内の文字を全て書くわけでなく、わかりやすく簡潔にまとめる必要があります。

意味のない画像には設定しない

意味のない画像には、alt属性を記述する必要はありません。
例えば、ページを華やかにするための飾りの画像や、背景画像が当てはまります。

空alt説明用画像

上記はSEM JOURNALのTOPページです。(説明用にロゴを消してあります)
一例ですが、この画像に「alt=”コーヒーとノートとキーボード”」と記述する必要はありません。
下記のように設定しましょう。

空白のalt属性は不要に見えますが、下記のようなことをGoogleに示すことができます。

  • 代替テキストで示すことができる画像ではない
  • 意味のある重要な画像ではない

リンクが設定されている場合「リンク先ページの内容」を

画像にリンクが設定されている場合、リンク先ページの内容をalt属性に記述します。
リンクが設定されている場合、Googleはalt属性をアンカーテキストと同様に扱い、リンク先ページの内容を理解することに使用します。
ページの内容を正確にGoogleに伝えることはSEOの基本ですので、意識して設定するようにしましょう。

Google検索エンジン最適化スターターガイドには下記のように記述されています。

画像をリンクとして使用する場合は、alt テキストを入力しておくと、リンク先のページについて Google が理解しやすくなります。テキストリンクのアンカー テキストを記述する場合を想像してください。

不自然な内容を避ける

  • スパムと見なされるような長すぎるaltテキストを記述する
  • altテキストにキーワードを並べたり、文章全体をコピー&ペーストしたりする

この2つはGoogleが提示している「避けるべき方法」です。
こちらも「検索エンジン最適化スターターガイド」に記載されています。

キーワードの詰め込みは「キーワードの乱用」というガイドライン違反に該当します。
ペナルティを受けてしまう可能性もあるので、十分に注意をしましょう。

スマホ(モバイル)ページにも必ず設定する

モバイル版ページの画像にもalt属性を設定してください
Googleのページ評価の優先順位は、MFI導入により「モバイル>PC」となっています。
検索順位にマイナスの影響が出る可能性もありますので、必ず設定しましょう。

※MFIについては下記の記事で解説しています。
興味がある方は是非ご覧ください。

もはや前提?MFI(モバイルファーストインデックス)の対応方法と注意点

title属性と併用しないようにする

alt属性とは別にtitle属性というものがあります。
alt属性と役割を混同してしまう方が多いタグですが、持っている役割は異なります。
以下に簡単な説明を記載します。

●alt属性:画像の代替テキスト、画像の内容を示すテキストのこと
●title属性:画像に対しての補足説明、助言としてのテキストのこと

※異なる点
・title属性は、要素の上にカーソルを載せると、記述した文言が表示される
・title属性は、画像やテキストなど全ての要素に設定することができる

また、alt属性とtitle属性は同時に使用しないでください。
記述内容を重複させてしまうと、スパムと認識される可能性があります。

SEO(検索順位)への影響

alt属性はSEO(検索順位)に影響します。
SEOの観点でどのような立ち位置なのか、以下に要点をまとめました。

alt属性の設定はSEO(サイト評価)における前提条件

Webページを正しく評価してもらうには「内容をGoogleに理解してもらう」必要があります。
alt属性を使用しない場合、画像コンテンツは内容が伝わらず、評価を得られません。
また、前述した通り、リンクが設定してある場合はアンカーテキストの役割を担います。

意味のある画像には必ずalt属性を設定するようにしてください。

alt属性は画像検索に使用される

画像検索結果

上の画像のように検索結果上部の「画像」をクリック(タップ)すると「画像検索」が可能です。
画像検索に関してはSearchConsoleヘルプでお勧めの方法をGoogleが公開しています。

その中で、alt属性については下記のように書かれています。

代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること(キーワードの乱用)は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。

また、良い例と悪い例が書かれていますので、そちらも紹介します。

悪い例(代替テキストがない):

<img src=”puppy.jpg”/>

悪い例(キーワードの乱用):

<img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>

良い例:

<img src=”puppy.jpg” alt=”puppy”/>

最も良い例:

<img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”/></blockquote>

私は英語が話せませんので、「もっとも良い例」に記述されている「Dalmatian puppy playing fetch」の意味がわかりませんでした。
そこで「Dalmatian puppy playing fetch」をクエリに画像検索したら、すぐにわかりました。

画像検索結果(Dalmatian puppy playing fetch)

ボールを持ってくる遊び(とってこい!)のことみたいですね!
画像のalt属性や動画のタイトル、画像周辺のテキストなどに「playing fetch」のような情報が記述されていたため、このような検索結果ができています

alt属性等を設定しなければ、こういった検索結果にも掲載されません。
機会損失を防ぐためにも、正確な画像内容をalt属性には設定しておきたいですね。

竹内
正直、alt属性なめてました…
なんとなくで設定してた画像も結構あります。
解説猫(仮)
Googleに伝える情報が正確であるほど、評価も正確になります。
竹内も心を入れ替えて、今日からちゃんとaltを設定するのですよ。
竹内
任せてください!!!
いつか「alt 竹内」で1位をとってやりますよ!
解説猫(仮)
(凄いのか凄くないのかよくわからん!)

まとめ

alt属性に関して、理解を深めていただけましたか?
概要・記述方法・注意点・SEOへの影響まで覚えることは結構ありますね。

この記事を読んで、alt属性の重要性や影響を正しく理解していただければ幸いです。
きっと設定忘れもなくなりますし、どんな内容で記述すればいいか迷わなくてすむはずです!

資料を無料でダウンロード
資料を無料でダウンロード

ページの一番上へ