4

Forgive me if this has been asked, all I found was SEO: h1 with text vs. h1 with bg image and hidden text which wasn't the same question.

Will search engines pick up and index (in their image searches) pictures that are inserted into websites using:

background: url(/images/filename.ext) no-repeat;

And should I include that image in my XML sitemap or will web-crawlers think its lying because it may not find said image in the markup?

I've been implementing Schema as well. Should I use Schema itemprop='image' inside the div that I'm putting the image in as background?

3

Google does not treat CSS content the same as that on page

Generally Google will only attempt to index content that is actually embedded within the page content associated with an appropriate tag such as <img>. You can however attempt to force Google's hand by adding the path of the background image into a image sitemap.

Some Schema markups require more than just the standard itemprop

Valid Schema involves marking up actual content, not content used by a template. Using the itemprop image will require a mark up of URL which in this case you don't have.

CSS backgrounds are not considered page content

Your attempting something that shouldn't be done for various reasons, if the content is valuable to your users then the correct usage would be to include the content within the designed elements and not that using background url. General UI elements are useless for indexing in Google's image search, if you want the image to be indexed without the need of forcing Google's hand then there are several ways it can be done. A messy example would be to use position:fixed among many other ways this can be done... see my mess around fiddle as an example.

  • Thanks, this is what I was afraid of. Was thinking about creating circular images using the DIV border-radius technique. – Ryan Oct 14 '14 at 17:26
  • Also take note that background:url is unfavorable for singular images anyway. Best to use css image sprites, and sprites are useless in Google's index. – Simon Hayter Oct 14 '14 at 17:35
  • 1
    @Ryan You can create circular images with the IMG element as well (sounds as if you are implying otherwise)? – MrWhite Oct 14 '14 at 20:12
  • "...shouldn't be done..." Well, what about making flexible images that work with older browsers and no JS? It's a matter of style and not semantics, but there are still very good reasons to use background:url. The image sitemap seems to be a good way to go. But I've never cared about my img SEO before, so... – Phil Tune Oct 16 '14 at 16:53
  • @philtune shouldn't be done for various reasons... It's nothing about style or semantics, the question is SEO related not CSS styling or markup semantics. If you want to rank and index a image on Google's image search then background:url is considered a bad method if not ignored by Google. For various reasons...: i.e no alt tag. This question is about SEO and there's thousands of reasons to use background:url for website designing but for SEO background is not one of them due to the way Google and other search engines function. – Simon Hayter Oct 16 '14 at 17:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.