ウェブサイトのすべてのページにメイン画像があります。この画像にはテキストが含まれています。
画像内のテキストをh1
として使用したいのですが、応答性の問題のため、画像上のテキストをライブテキストにすることは問題になります。
画像の下にh1
ライブテキストを配置するとどうなりますか(z-index
などを使用すると表示されません)。
これはSEOの問題でしょうか、Googleはこれを好まないでしょうか?
<img>
タグは、生活基準によってFlow contentとして分類され、<h1> </h1>
はフローコンテンツを受け入れます。見出しタグ内で画像タグを使用しても問題ありません。
SEOに関しては、ボットには見えるがユーザーには見えないコンテンツを提示しようとすると問題になります。グーグルによると、これは ガイドラインの直接違反 です。ランキングをそのように操作しようとしていることをアルゴリズム的に検出した場合、これを行うことにより、ペナルティを簡単にトリガーできます。
ただし、accessibilityなど、正当な目的のためにユーザーからテキストを非表示にすることはできます。
WebAimによれば、スクリーンリーダーからではなく、ユーザーに対してコンテンツを非表示にする手法がいくつかあります。これにより、障害のある人は通常のユーザーではなくコンテンツ。この手法は、テキストを画面外に配置することです。
.hidden {
left:-10000px;
}
もちろん、いくつかの制限があります。たとえば、H1内の画像がリンクとして使用される場合、この手法は使用できません。
実装できる手法の詳細については、 このページをご覧ください を実装できます。