ビジネスマッチングサイトのimgタグalt属性｜SEOとユーザー登録画像の考え方 | マッチングサイトplus

ビジネスマッチングサイトでは、企業ロゴやプロフィール画像、サービス紹介画像、案件に関連する写真など、多くの画像が掲載されます。 HTMLで画像を表示するときに設定できるのが「alt属性」です。 alt属性は、画像が表示できない場合に代わりとなるテキストを提供したり、スクリーンリーダーなどを利用するユーザーに画像の内容を伝えたりするために使われます。
また、SEOの観点からも、検索エンジンが画像やページの内容を理解するための補助的な情報として考えることができます。特にビジネスマッチングサイトでは、運営者が用意した画像だけでなく、登録ユーザーが自分で画像をアップロードすることがあります。そのため、「ユーザーが登録した画像のalt属性をどうするか」という点は、サイト制作時に考えておきたいポイントです。

alt属性とは？

alt属性は、imgタグに設定する画像の代替テキストです。
例えば、企業のロゴを表示する場合は、次のように記述できます。

alt属性を設定することで、その画像が何を表しているのかをテキストとして伝えられます。ただし、alt属性は「画像について何でも詳しく説明する文章」を入れる場所ではありません。その画像がページ上でどのような役割を持っているのかを考え、必要な情報を簡潔に設定することが重要です。

alt属性はSEOにどのような意味がある？

alt属性はSEO対策の一部として取り上げられることがあります。検索エンジンは画像そのものだけではなく、画像の周辺にあるテキストやHTML上の情報なども参考にして、画像やページの内容を理解します。そのため、画像に適切なalt属性を設定しておくことは、検索エンジンが画像の内容を理解するための補助になります。例えば、ビジネスマッチングサイトに「店舗向けの清掃サービス」を紹介するページがあり、サービスを利用している様子の画像を掲載するとします。

このように、画像の内容を適切に説明しておけば、画像が何を表しているのかを検索エンジンにも伝えやすくなります。ただし、alt属性にキーワードを入れれば検索順位が上がるというものではありません。

SEO目的でキーワードを詰め込まない

alt属性をSEOに活用しようとして、キーワードを大量に入れるのは避けるべきです。
例えば、

のように、画像の内容とは関係なくキーワードを並べるのは適切ではありません。 alt属性の基本的な目的は、画像の内容や役割を伝えることです。「SEOのために何を書くか」ではなく、「この画像が見えなかった場合、どのような情報が必要か」という視点で考えると、自然なalt属性を設定しやすくなります。

ビジネスマッチングサイトではユーザー登録画像がポイント

一般的な企業サイトであれば、掲載する画像はサイト運営者が管理できます。一方、ビジネスマッチングサイトでは、登録企業やユーザーが自分で画像をアップロードすることがあります。
例えば、

企業ロゴ
プロフィール画像
商品画像
サービス画像
店舗写真
事業所の写真
実績写真
案件に関連する画像

などです。
このような画像は、サイト運営者が一枚ずつ内容を確認してalt属性を設定するのが難しい場合があります。そのため、サイト制作時に「ユーザーが登録した画像のalt属性をどのように生成・管理するか」を決めておくことが重要になります。

ユーザー登録画像のalt属性をどうする？

ユーザーが画像を登録する場合、主にいくつかの方法が考えられます。

企業名やサービス名から自動生成する

比較的シンプルなのが、ユーザーが登録した情報を利用してalt属性を自動生成する方法です。例えば、企業名が「株式会社○○」、登録した画像が企業プロフィール用の画像であれば、

alt="株式会社○○のプロフィール画像"

といったalt属性をシステム側で生成します。サービス画像であれば、

alt="株式会社○○のサービス紹介画像"

などとすることもできます。
この方法のメリットは、ユーザーにalt属性を入力してもらわなくても一定のルールで設定できることです。特に登録ユーザー数が多いビジネスマッチングサイトでは、運営側の管理負担を抑えやすい方法です。

画像の説明をユーザー自身に入力してもらう

もう一つの方法は、画像登録時にユーザー自身が画像の説明を入力できるようにする方法です。例えば画像アップロード画面に、「画像の説明」という入力欄を設けます。ユーザーが、

「店舗の外観」
「代表者のプロフィール写真」
「導入した業務用システム」
「施工した店舗の内装」

などと入力すると、その内容をalt属性として利用します。
この方法なら、運営側では分からない画像の具体的な内容をユーザー自身に説明してもらえます。ただし、ユーザーが入力する必要があるため、登録作業の手間は増えます。また、入力された内容が必ずしも適切とは限らないため、入力ルールや文字数などを設定することも考えられます。

ファイル名をそのままalt属性にするのは？

ユーザーがアップロードした画像のファイル名を、そのままalt属性に利用する方法もあります。
例えば、

とする方法です。しかし、これでは画像の内容が分かりません。
ユーザーがスマートフォンから撮影した写真をアップロードした場合、「IMG_1234.jpg」のようなファイル名になることもあります。 SEOの観点でも、画像の内容を伝える情報として有効とは言いにくいため、ファイル名をそのままalt属性に利用する設計は避けたほうがよいでしょう。

ユーザー画像すべてに詳細なaltを入力させる必要はある？

必ずしもそうではありません。
例えば、企業プロフィールページに企業名やサービス内容がテキストで詳しく掲載されていて、横に企業ロゴが表示されている場合、画像について長い説明を入力してもらう必要はありません。
また、デザイン上の補助として表示している画像であれば、alt属性を空にするという考え方もあります。重要なのは、「画像が見えなくなった場合に、この画像から伝えるべき情報があるか」です。ユーザー登録画像だからといって、すべての画像について詳細な説明を入力してもらう必要があるわけではありません。

SEOを考えるなら、画像だけでなくページ全体を見る

SEOを考えるならalt属性だけではなく、ページ全体の情報構造を見ることも重要です。
例えば、企業ページに、

企業名
事業内容
サービス名
サービスの説明
所在地
実績
画像

などが掲載されているとします。
この場合、画像のalt属性だけに大量のキーワードを入れるのではなく、ページ内のテキストと画像がそれぞれ適切な役割を持つようにすることが大切です。画像の内容とページの内容が自然につながるようにしておくことで、ユーザーにも検索エンジンにもページの内容が伝わりやすくなります。

ユーザー登録画像のalt属性はサイト設計時に決めておく

ビジネスマッチングサイトでは、サイト公開後にユーザーが大量の画像を登録する可能性があります。そのため、公開後に「画像のalt属性をどうしよう」と考えるのではなく、開発段階でルールを決めておくことが重要です。
例えば、

画像の種類	alt属性の考え方
企業ロゴ	企業名などを設定
プロフィール画像	画像の役割が分かる説明
サービス画像	サービスや画像内容を簡潔に説明
商品画像	商品名などを利用
実績写真	写真の内容を簡潔に説明
装飾画像	空のalt属性などを検討
内容が不明なユーザー画像	自動生成ルールなどを検討

といったルールを作っておくと、サイト全体でalt属性の扱いを統一できます。

alt属性は「SEOのためだけ」と考えない

alt属性について考えるとき、SEOを意識することはもちろん重要です。
しかし、検索順位を上げるためだけにalt属性を設計すると、キーワードを詰め込んだ不自然な文章になってしまう可能性があります。 alt属性の本来の役割は、画像の情報をテキストで補うことです。
そのうえで、画像の内容が適切に説明されていれば、検索エンジンが画像やページの内容を理解するための情報としても役立ちます。
特にビジネスマッチングサイトでは、ユーザー自身が情報を登録するため、運営側が登録する画像だけでなくユーザーが登録する画像についても考えておく必要があります。

まとめ

imgタグのalt属性は、画像の内容をテキストで伝えるための重要な要素です。
SEOの観点では、画像の内容を適切に説明することで、検索エンジンが画像やページの内容を理解するための補助的な情報になります。ただし、SEOを意識するあまり、alt属性にキーワードを詰め込むのは適切ではありません。
ビジネスマッチングサイトの場合は、「ユーザーが登録する画像をどう扱うか」という問題があります。企業名やサービス名などからalt属性を自動生成する方法、ユーザー自身に画像の説明を入力してもらう方法、両方を組み合わせる方法などが考えられます。サイトの規模やユーザーの登録負担、画像の種類などを考慮しながら、サイト制作の段階でルールを決めておくことが大切です。
alt属性は小さなHTML要素に見えますが、SEO、アクセシビリティ、ユーザー登録機能など、ビジネスマッチングサイトのさまざまな部分に関係します。画像を多く扱うサイトだからこそ、後から対応するのではなく、開発段階からalt属性の扱いを検討しておくとよいでしょう。

ビジネスマッチングサイトのimgタグalt属性