大阪のホームページ制作会社 株式会社TREVO
スタッフブログ

画像に付けるalt属性とは?SEOおける適切な記述方法

2020.04.07.

ホームページ制作

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

Webサイトには、様々な画像が表示されています。その画像一つ一つには「alt属性」と呼ばれるテキスト情報が設定されています。
今回はそんな画像に付ける「alt属性」の役割について説明をしていきます。

alt属性の役割と効果

alt属性とは

alt属性とは「代替テキスト」、「altタグ」と呼ばれ画像の代わりとなるテキスト情報のことで、img要素プロパティ(属性)の一つです。
例えば、何らかの理由で画像が表示されない時など、alt属性に設定した文字が代わりに表示されます。
その他に画像検索の時やページの読み上げ機能を使う場合にもalt属性が利用されるため、適切なテキスト情報を入力しておく必要があります。
そのためalt属性とは、その画像が何を表しているのかをユーザーや検索エンジンに伝えるためのテキストになります。

alt属性の効果と目的

alt属性に適切なテキスト情報を入力することでユーザーや検索エンジンに親切なサイトになります。
Google公式サイトにalt属性について以下のように定義されています。

「alt」属性を使用する
画像にわかりやすいファイル名を付けて、alt 属性の説明を入力します。「alt」属性を使用すると、何らかの理由で画像を表示できない場合の代替テキストを指定できます。
画像の適切な alt テキストの有用性を示すイラスト。
この属性を使用するのは、ユーザーがスクリーン リーダーのようなサポート技術を使ってサイトを閲覧する場合に、alt 属性の内容が画像についての情報を提供するためです。
もう 1 つの理由は、画像をリンクとして使用する場合、その画像の alt テキストが、テキストリンクのアンカー テキストと同様に扱われることです。ただし、テキストリンクで同じ目的を果たせる場合は、サイトのナビゲーションに画像を使いすぎることはおすすめしません。最後に、画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。
※引用元:検索エンジン最適化(SEO)スターター ガイド ? Search Console ヘルプ

SEOの観点からalt属性の代替えテキストを設定することは、きちんと設定する必要があります。

alt属性とtitle属性の違い

alt属性とよく似た要素でtitle属性があります。
alt属性は、img画像の代替テキストで簡素な画像の情報を記述するに対して、title属性はimg要素以外にも使いことができるのが特徴です。
title属性を設定するとカーソルを合わせると吹き出しが表示されます。
title属性はユーザービリティを配慮した補足説明を示してくるのが特徴です。
alt属性とtitle属性は同じテキストをいれるのではなく、それぞれの役割をもったテキスト記述するようにしましょう。

alt属性の文字数

alt属性には決まった文字数制限はありませんが、Googleが公開している検索エンジン最適化(SEO)スターターガイドでは「簡潔な文言で記述する」alt属性が適しているとされています。

おすすめの方法
簡潔でわかりやすいファイル名と alt テキストを使用する
最適化の対象となるページの他の部分と同様に、ファイル名と alt テキストは短くてわかりやすいものが適しています。
※引用元:検索エンジン最適化(SEO)スターター ガイド ? Search Console ヘルプ

このように、alt属性に長い文書をコピーて張り付けたり、キーワードを羅列することはGoogleのガイドラインの「簡潔な文言で記述する」とかけ離れることになるので避けるべきです。

alt属性の確認

画像にalt属性がきちんと記述しているかを調べる方法として一つは「ソースを確認する」方法があります。
簡単なHTMLであれば、「img src」をソース内の検索にかければalt属性が記述されているかを確認することができます。
もう一つの方法としてChrome拡張機能「Alt & Meta viewer」を使うことによってalt属性を調べることができます。
Chromeウェブストアで「Alt & Meta viewer」をダウンロードすると、Google Chrome右上に「Alt」アイコンが表示されるので、アイコンをクリックするとalt属性が設定されているか調べることができます。

HTML5におけるimg要素のalt属性

HTML5のではalt属性の仕様が厳密に定義されています。
alt属性には「、前後の文脈を繋げることのできる画像の説明を記載して、補足のような短い説明はtitle属性で指定し、装飾などの装飾画像には空白を指定するようになりました。
スマートフォン、タブレットの普及によって様々な環境で見られるようになっためHTMLの仕様も少しづつ変化しています。

まとめ

いままでの記事でもSEOについて説明してきましたが、今回はalt属性について説明してみました。
alt属性を正しく適切に記述することでユーザーだけでなく検索エンジンにも正しい情報が伝わり優しいコンテンツになります。
SEOにおいても効果的な適切なalt属性を設定することで検索順位が向上することもありますので、一度自社サイトのalt属性を見直してみてはいかかでしょうか。

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

経歴: 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当

twitter Facebook Pocket LINE はてブ

関連の記事

お見積もり