私は多くの画像を持っていますが、きれいなビューと優れたCSSコントロールのために、
<div style="background:url('image-url') no-repeat center center transparent;
overflow:hidden; display:inline-block; width:150px; height:150px;"></div>
ただし、HTMLでは、検索最適化のためにalt
を画像タグに追加できます。バックグラウンドで「代替テキスト」を含めるにはどうすればよいですか?これらのすべての画像のURLとページのURLを含む画像サイトマップをGoogleに送信しました。
イメージサイトマップ を使用します
この方法で画像を使用することは本当に推奨されません。 <span>
の代わりに<a>
を使用するようなものです。通常の<img>
タグを使用して、必要なことをすべて実行できます。
私の推奨事項:<img>
を使用します。何らかの理由で本当にできない場合は、適切な画像サイトマップを作成し、説明的な画像名を使用してください。
その画像には、わかりやすい名前を使用します。descriptive-name.jpg
の代わりにimage-01.jpg
を使用します。 alt
の不在を助け、補います。
グーグルのジョン・ミューラーは今朝、グーグルのウェブマスターマークで、グーグルの画像検索はCSSのバックグラウンドコードから画像をインデックス化しランク付けしないと述べた。 Google画像検索で画像をランク付けする場合は、画像を指すソース属性で通常の画像タグを使用するのが最適です。
詳細については、Googleウェブマスターをご覧ください。
私はローマの答えに加えて、検索エンジンがそれを理解するのを助けるために、divにまたはimagの近くの任意の部分にテキストを追加できるimag名の横に追加したいと思います。
Divタグはタイトルを取得し、ユーザーと検索エンジンがdivコンテンツを理解できるようにします。
私が気づいていない他の考慮事項があるかもしれませんが、この方法で私が考えることをしている場合、代わりに効果を得るために CSS clip
プロパティを使用することを検討するかもしれません。画像に同じ種類の「ウィンドウ」を作成できますが、divを使用して切り取るのではなく、画像自体に直接行われます。その結果、マークアップでプレーンimg
タグを使用し、通常どおりそれらに代替テキストを配置できます。