Q&A
ターゲットにしている検索エンジンはどこですか。Google,Yahoo,Bing等、いろいろあります。
【お聞きしたいこと】
<img>タグのalt文を省略することはSEO対策として不利でしょうか？
HTMLにて、とあるランディングページを
レスポンシブ対応で作成することになりました。
実装はとても単純に考えており、
以下のように画像パーツを切り貼りしたような
コーディングで進めたいと思っています。
html
1<h1><img src="img/img_about_01gif" alt="タイトル" width="810" height="86"></h1> 2<h2><img src="img/img_about_01gif" alt="リード文" width="810" height="86"></h2> 3<p><img src="img/img_about_01gif" alt="本文" width="810" height="86"></p>
ここで質問なのですが、時間の制約上、
どうしても<img>タグにて画像を配置するように実装したいと思っております。
しかしレスポンシブ対応となると、以下のように
別途SP用の画像を配置して表示させる必要があります。
※cssのメディアクエリ機能を使い、
PC／SP固有のclass名に対して<img>要素の表示・非表示を切り替える
html
1<h1><img src="img/img_about_01gif" class="pc" alt="PCで表示するタイトル" width="810" height="86"></h1> 2<h1><img src="img/img_about_01gif" class="sp" alt="SPで表示するタイトル" width="810" height="86"></h1>
↑このように綺麗に収まればいいのですが、
PC用のalt文、SP用のalt文がそれぞれ長文ですと（2～30行ある場合）とても
コーディング・メンテナンスが困難になります。
そこで、「SP用画像のalt文は省略する、PC用画像のalt文のみ記述する」
…という方法と取りたいのですが、SEO対策として
また、一介のWEBコーダーとして正しいやり方でしょうか？
どうぞご教示お願いいたします。
回答4件
0
Google Search Console ヘルプ
わかりやすい代替テキストを使用する
代替テキスト（画像について説明するテキスト）は、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。
Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。また、画像の代替テキストは、画像をリンクとして使用する場合にアンカー テキストとして使用できます。
...(以下省略)...
Google がページを理解できるよう手助けする
- <title> タグの要素と alt 属性の説明をわかりやすく正確なものにします。
- 画像、動画、構造化データに関するおすすめの方法に沿って対応します。
基本的に、検索エンジンは画像ファイル内にあるテキストを読めません。
alt属性なしで画像のみでコンテンツを作成すれば、検索エンジンはテキストをクロールしません。
「避けるべき方法」に
- alt テキストにキーワードを並べたり、文章全体をコピー＆ペーストしたりする。
- スパムと見なされるような長すぎる alt テキストを記述する。
がありますね。
HTML Standard
4.8.4.4.1 一般的なガイドライン
特に指定されている場合を除き、alt属性を指定しなければならず、その値は空であってはならない。値は画像に対して適切な代用品でなければならない。alt属性に対する具体的な要件は、以下の節で説明するように、画像が表現しようとするものによって異なる。
WCAG 2.0
解説
img 要素を使用するときは、簡潔なテキストによる代替を alt 属性に指定する。注記: この属性の値は「ALT テキスト」ともいう。
画像がコンテンツを理解するために重要な文字を含むとき、代替テキストにはそれらの文字を含めなくてはならない。これにより、代替テキストはページ上で画像と同じ役割を果たすことができる。 代替テキストは、画像自体の視覚的な特徴を説明する必要はないが、画像と同じ意味を伝えなければらないことに注意する。
WCAG 2.1
1.1 ガイドライン 1.1 テキストによる代替
すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
達成基準 1.1.1 非テキストコンテンツ§
利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。
...(以下省略)...
達成基準 1.4.9 文字画像 (例外なし)
(レベル AAA)
文字画像は、純粋な装飾に用いられているか、テキストの特定の提示が伝えようとする情報にとって必要不可欠である場合に用いられている。
Re: SHO1128 さん
投稿2020/05/08 10:31
編集2020/05/08 11:16総合スコア18189
いろいろ書きましたが、SEOの対象がGoogleだとすれば、スターターガイドから始めるのが妥当と思います。
https://support.google.com/webmasters/answer/7451184
一般論としては、HTML仕様に準拠し、WCAG等のアクセシビリティに配慮した設計になっており、検索エンジンが定めたポリシーを守っていれば問題はありません。
0
ベストアンサー
altに関しては、他の回答者の方が詳しく回答されているので、代替案を提示させていただければと思います。
目的は、
PC／SP固有のclass名に対して<img>要素の表示・非表示を切り替える
ですよね？
であれば、下記のようにすれば表示する画像を分けることは可能ですので、そちらにする方が、altも、要素も一つの記述で済みますのでいいのではないでしょうか。
imgのsrcsetを使う方法
html
1<h1><img src="img/img_about_01gif" srcset="img/img_about_01.gif 1x, img/img_about_01@2x.gif 2x" alt="PCで表示するタイトル" width="810" height="86"></h1>
後方互換として（IEなどに対応）srcを残しています。
ただし、PCでもレティナ以上のディスプレイがあるため、実質下記の方がいいでしょう。
picture要素を使う方法
html
1<h1><picture> 2 <source media="(min-width: 320px)" srcset="img/img_about_01.gif"> 3 <source media="(min-width: 640px)" srcset="img/img_about_01@2x.gif"> 4 <img src="img/img_about_01gif" alt="PCで表示するタイトル"> 5</picture></h1>
対象とするデバイスの指定は、各source要素のmedia属性にて、メディアクエリと同じ指定の仕方で決められます。
画像の大きさなどの調整は、もともとCSSのメディアクエリを使われているようですし、スタイルで調整しちゃえばいいかと。
投稿2020/05/08 12:49
総合スコア9555
0
画像のaltより、h1にimgだけのほうが不利じゃないですか？
投稿2020/05/08 10:04
総合スコア116724
> 画像のaltより、h1にimgだけのほうが不利じゃないですか？
一見、ダメそうですが、HTML Standard仕様上は許されているので、ターゲットにしている検索エンジンのさじ加減次第ですね。
https://momdo.github.io/html/images.html#text-that-has-been-rendered-to-a-graphic-for-typographical-effect
どちらかといえば、コンテンツ容量UP->読み込み速度低下がSEOに影響しそうな気はします。
https://support.google.com/webmasters/answer/9205520?hl=ja
あなたの回答
tips
プレビュー
