Share on facebook
Share on twitter
Share on linkedin

Blog

alt属性とは?画像検索の対策

ホームページ制作
alt属性とは?画像検索の対策

alt属性とは?画像検索の対策

alt属性とは?画像検索の対策

WEBディレクター職の仕事の一つにSEO対策があり、サイトリニューアルの際には欠かさず「alt属性」と呼ばれるものの記述を行なっています。

今回はその「alt属性」がもたらすメリットと記述の注意点についてお伝えしようと思います。

alt属性って何?
まず、「alt属性」について簡潔に説明します。

alt属性とは、画像が上手く読み込めないときにその代わりとして表示されるテキストのことを指します。 「代替案」の英訳「alternative」に由来するため、「代替テキスト」と呼ばれることもあります。

alt属性の記述

alt属性は下記のように記述します。

”画像の説明”

この<>内の「alt=”画像の説明”」がalt属性と言われるものです。

では、alt属性を記述することで、具体的にどのようなメリットがあるのでしょうか。

alt属性を記述する2つのメリット
「alt属性の説明を聞いても、メリットがいまいち分からない…」という方もいるかもしれません。

しかし、alt属性は正しくキーワードを記述することで、画像検索で上記表示を狙えたり、ユーザーに優しいサイトづくりができるといったメリットが生まれます。

画像検索で上位表示を狙う
alt属性を記述するメリットの一つとして、alt属性を適切に記述することで検索エンジンが画像の内容を正確に認識し、画像検索で上位表示が狙えることが挙げられます。

alt属性を適切に記述することでサイトの掲載順位が急激に上がるわけではありませんが、画像検索においては有効と言えます。

みなさんは、流行りのファッションや食べ物・飲み物、オシャレな住宅などを調べるときに画像検索を利用することはありませんか?

「ファッション系」「飲食系」「住宅系」のサイトやECサイトは画像による商品訴求が重要なため、商品を画像検索で上位表示させることでサイトの閲覧数をUPすることができます。

また、上記のサイト以外でも、画像メインのSNS「Instagram」の普及で画像による商品訴求が主流となった今、以前よりも画像検索からの流入の可能性が考えられます。

画像検索画面「猫のいる会社」

ユーザーに優しいサイトづくり
二つ目のメリットは、通信環境の悪いところでWEBサイトを閲覧する時と、音声読み上げ機能(視覚サポート)を使う時に役立つことです。

はじめにも少し触れましたが、通信環境が悪いとWEB上の画像が表示できないため、その代わりとしてalt属性が表示されます。

alt属性が記述されていないと、表示できない画像の内容がユーザーに伝わらず、画像にリンクを設定している場合は、ユーザーをリンク先のページに誘導することが難しくなります。

また、視覚障害を持った方や視力が低下してしまった高齢者の方がWEBサイトを閲覧する際、音声読み上げ機能を用いて少しでも不自由なくサイトを閲覧できるように、alt属性を正しく簡潔に記述する必要があります。

alt属性を記述する際に気をつける4つの注意点
alt属性を記述するメリットを紹介しましたが、誤った記述、過剰な記述をしてしまうと、狙ったキーワードで表示されなかったり、検索エンジンからスパム扱いされてペナルティを受ける可能性があります。

では、上記のようなことを避けるために、alt属性を記述する際に気をつけるべき点を4つ紹介します。

簡潔で正しい画像の説明を心がける
検索エンジン、ユーザーの両方から画像を正しく認識してもらうために、簡潔で正しい画像の説明を記述しましょう。

ノートパソコンに挟まれる猫

例えば、上の画像の場合、alt属性は「ノートパソコンに挟まれる猫」と記述します。

回りくどい記述にすると、検索エンジンが誤って認識したり、ユーザーが勘違いしてしまう可能性があります。

キーワードを無闇に詰め込まない
検索でヒットしてほしいキーワードを記述することはもちろん大事です。

しかし、「いろんなキーワードでヒットさせたいから」と思って無闇にキーワードを詰め込むと、検索エンジンがスパム行為と認識され、ペナルティを受ける恐れがあります。

なるべくキーワードを絞って、シンプルな記述を心がけましょう。

テキスト画像はそのまま記述
テキストを画像化して使っている場合は、そのテキストをalt属性に記述しましょう。

なお、テキストが長すぎるものは、要約してキーワードを絞ったものを記述することをオススメします。

装飾画像はalt属性を空にしておく
背景やラインマーカーなどの装飾画像はコンテンツとして特に意味を持たないため、alt属性は空の状態にしておきます。

※自体を消すのではなく、””にしてください。

alt属性をチェックするChrome拡張機能
alt属性を記述したら、正しく反映されているかチェックする必要があります。

そこで役立つのが、Chromeの拡張機能「Alt&Meta viewer」という無料ツールです。

「Alt&Meta viewer」Chromeウェブストア

このツールを使うと表示ページ内にあるalt属性が一気に閲覧でき、alt属性が記述されていない画像の数も表示してくれます。

また、alt属性の他にも、title属性もチェックすることができる優秀な拡張機能です。

まとめ
近年、alt属性はSEOにはあまり直接影響しないと言われていますが、画像検索の対策やユーザーへの配慮として、記述するメリットは充分にあります。

しかし、alt属性を適切に記述していなかったり、記述自体していないWEBサイトは未だに多く見られます。

地味な作業ではありますが、alt属性の記述によってサイト閲覧数UPも見込めるので、閲覧数が伸び悩んでいる方、画像検索で上位表示を狙いたい方は、ぜひ今回の内容を参考に実践してみてください!

弊社では、alt属性の記述を含めた内部SEO対策のサポートを行っております。

Leave your thought here

メールアドレスが公開されることはありません。

Popular tags

1つのWEBサイトを作るのには、どれだけの時間がかかるもの? alt属性とは?画像検索の対策 business DTPデザイナーが陥りがちな残念なWebデザイン IT Security IT services ITで働き方改革!クラウド、テレワークの新しい仕事の形とは LP(ランディングページ)って何? Pythonでできることって何だろう? Pythonとは?大人気プログラミング言語のメリット Webサイトの制作って、なぜこんなに高いの?! Webサイトを更新したのに反映されない?それ、キャッシュが原因 Webサイトを更新したのに反映されない?それ、キャッシュが原因かも…【PC編】 Webデザイナーの1日・生活スタイル WEB制作の現場で使われる用語をご紹介 WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作 WordPressのメリットとデメリット WordPressを使ったホームページ作成のメリットデメリット 「デザインお願いします」と言われてデザイナーは何を考えてデザインしているの? この修正、お金かかるんですか? なんて名前? WEBサイトの基本パーツ名と導入時の注意点! イメージコピーとセールスコピーの違い クリック率とCV数をUP!サイトの入り口を飾る「titleタグ」「meta description」とは? コロナ対策のためにネットショップを素早く開設しよう!ECサイト構築 ネットワークエンジニアとは?ネットワークエンジニアの仕事内容と将来性 ネットワークエンジニアになるには資格が必要?おすすめの資格 フリーランスのWebデザイナーが仕事を効率良くする方法とは? ブログで使っているその画像は本当に大丈夫? プログラマーとは?プログラマーの種類と将来性 ペルソナってなに? 〜WEBサイトのターゲット ホームページとウェブサイトの違い! ホームページを制作する目的の重要性 ホームページ作成に失敗しないための、制作料⾦の費⽤相場と Web制作ツール・制作業者選定のポイント ホームページ制作で起きるトラブル事例と対策 ホームページ制作と動画や写真撮影などを一社でまとめるメリット ホームページ制作に関する著作権 ホームページ制作の注意点 企業にとってのホームページの役割と運用目的を再確認 働きながらWebプログラミングスクールに通う方法 初心者でも簡単!無料でホームページ作成ができるソフト 危険!Wordpressの更新は制作会社にご依頼ください。 古いサイトは何故ダメなのか 在宅でできるWebデザインを副業にしよう♪初心者におすすめの仕事は? 画像はリサイズして使いましょう! 〜重いサイトにしないために 結果が出ないホームページの初歩的なミス
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping