1

I need to use background-image property so i can use background-size while I also need to use the img tag for SEO-related purposes. Will having the img tag with display:none; penalize the site for SEO-related purposes?

If it's so, what's the correct way of doing it?

Improve this question
3
  • From my standpoint, there are no SEO purposes where you need an image. I rather suspect you are operating under a misconception. Can you explain the need for an image for SEO for me so that I understand what your intent is??
    – closetnoc
    Commented Mar 12, 2015 at 15:31
  • As far as I know, I need img tag so search engines index the images right? Also the alt, and title attributes must go on img tag, you can't add them on a background-image. To be more specific, I want to know if having and img tag with display:none; does penalize SEO-related.
    – Jose Manuel
    Commented Mar 12, 2015 at 15:36
  • Title attributes do nothing in SEO. As well, it is not necessary to have an image to boost SEO. For background images, you are far better off serving them in CSS and not in HTML. Where it makes sense to have images for a user- have them. But do not generate code for search engines. Img alt tags do not add the weight you think it does. The terms are indexed, but can be outweighed by any header tag used only once. So do not take the old advice that adding images is good for SEO. It is good for SEO when you need to use an image, but not strong enough to start adding images for weight.
    – closetnoc
    Commented Mar 12, 2015 at 15:45

1 Answer 1

Reset to default
2

Google doesn't penalise the page if you use an img tag with "display: none".

Google should still index the image if you use it as part of your CSS, but you can ensure that Google relates it to a specific page with an image sitemap.

Additionally, you can use Google image extensions for sitemaps to give Google more information about the images available on your URLs. Image sitemap information helps Google discover images we might not otherwise find (such as images your site reaches with JavaScript code), and allows you to indicate to Google images on your site that you want Google to crawl and index.

Images are added to a sitemap using <image:image>:

<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
 <url>
   <loc>http://example.com/sample.html</loc>
   <image:image>
     <image:loc>http://example.com/image.jpg</image:loc>
   </image:image>
   <image:image>
     <image:loc>http://example.com/photo.jpg</image:loc>
   </image:image>
 </url> 
</urlset>

For more information about image sitemaps, see:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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