Search code examples
cssurlseoindexingcss-content

SEO for CSS Content and Background URL Images


Wondering if search engines will have any issues with pages where all the images are set as background images, and if it will correctly find and index the 'captions' under each picture (ie. the CSS content tag). I don't really care if search engines find the background images, but I would like to have them index the captions.

<style>
#cimg {width: 400px; height: 300px; background: #000; padding: 0px;}
#ctxt {font-size: 1.0em; text-align:center;}
#cimg .wc1 {width: 400px; height: 300px; background: url(http://192.168.0.1/pic1.jpg) no-repeat; background-size:contain;}
#ctxt .wc1:before {content: "This is Picture 1";}
#cimg .wc2 {width: 400px; height: 300px; background: url(http://192.168.0.1/pic2.jpg) no-repeat; background-size:contain;}
#ctxt .wc2:before {content: "This is Picture 2";}
</style>
<table>
<tr>
<td>
<div id="cimg"><div class="wc1"></div></div>
<div id="ctxt"><div class="wc1"></div></div>
</td>
<td>
<div id="cimg"><div class="wc2"></div></div>
<div id="ctxt"><div class="wc2"></div></div>
</td>
</tr>
</table>

Solution

  • There is no reason to expect search engines to index any strings in style sheets, whether in content attribute values or elsewhere. So the code snippet in the question will look completely empty to a search engine.

    There is no law against processing and interpreting style sheets in search engines, and rumors say that they are doing that to some extent to detect attempts at fooling them (e.g. with text hidden from users with CSS). But there does not seem to be any conceivable motivation for them to extract strings that are used for CSS-generated content.