Background Images and ALT text
-
We pretty much exclusively use background images for our sites. How do I add in alt text? I tried a Google search for this issue and the best answer I could find was "Use the 'title' tag in the containing div", but that was from 2010.
Is there a better way to do it? And no, we're not going to switch to using standard images, because background images are way more slick for UX.
-
Does it has any positive effect on ranking? (seo)
-
You can't use ALT text to background images.
If your images are loaded as img tag then you have title, alt. Example:
But background images isn't regular images loaded with img tag. They can be loaded only with CSS styling. And therefore they doesn't comes with title and alt. Example:
As you can see you can't use title or alt for image there. Only way is to define title as this:
or better this one:
I know that isn't 100% background but also helps.Alternative way can be ARIA. If you love background images but really wish alt text you can use WAI-ARIA and define them as:
...
But GoogleBot doesn't support aria-label for now. -
Yes for screen readers and using it as alt and title for your images that are there. So you are not trying to trick Google, you are trying to figure out a way to mark what is actually there. For google image search, I have had success ranking images even if used as backgrounds in divs by naming them with what I was trying to rank them for. Since I could not use alt or title I named images with my target in them. These images were all for a brand query.
Example: image on mybrand.com named mybrand-imageName.png
we were able to get most of those images to show up when doing an image search for mybrand
-
I'm going with "Google is too smart for that" on the transparent image alt text front. I guess it would help out people using a screen reader, but I'd like to get some of the images into Google image search. It seems like alt text is pretty much required to rank for that?
-
I think that adding title to the div is the only way for you to do a background image in CSS.
You can cheat a little by then loading a transparent image in the container that the background image is in, make this transparent image have an alt tag and title tag for whatever your background image is about.
If you are doing this for seo purposes this should work, if you are doing it to have the html well formatted, there is only the div tag.
Cheers!
-Erick
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Alt tags advice
Hello, When describe an alt tag from what I understand you need to put your keyword when you can and not literally describe the image. For example let's say I have a picture with 2 cyclists on a road in the dolomites. I would tend to describe it saying " 2 cyclists riding in the dolomites" But for google it is better to describe it saying "Bike riding in Italy and through the dolomites" based on the fact that I am looking to rank on "italy bike tours" Isn't it ? Thank you,
On-Page Optimization | | seoanalytics0 -
Ranking for a word when your image is showing up as #2?
I'm trying to rank for several specific words in my industry. I've noticed that many of the pages I'm trying to rank for the specific words, the main image of the page is being ranked. So my question is should I still try to rank my page even though the image is ranking as the first image displayed in the google results. Will this count against me by Google if I do? Or should I try to make the image being ranked more enticing for google searchers to try to increase traffic? Right now the images are not generating many clicks.
On-Page Optimization | | mr_w0 -
Alt Tags on multiple product images
Hi I work on SEO for an ecommerce site and wanted to find out how important it is to optimise all images with alt tags. We have alt tags in place, however have not optimised descriptions for the following example images: Front of cupboard Back of cupboard Side of cupboard etc Is this dangerous for SEO if these images all have the same alt tag? We have thousands of products so it would be a huge job to update these, but if it's crucial for SEO we can work through our priorities. Thank you!
On-Page Optimization | | BeckyKey0 -
Table text : Does that influences the website's ranking ?
We are currently working on a new page for one of our clients and there is A LOT of writing, so A LOT of differents pages. If I decide to put the texts on table text instead of creating a link for another page, will that influence the ranking in any way ? I've been a web writer for only a year now and still try to figure out how to optimize the written part. Thank you for your answers.
On-Page Optimization | | marketingmedia.ca0 -
ALT tagging images with keyword. What is too much?
I was wondering about the best practices of ALT tags in images. Say if you have an eCommerce site and you're on a product page. This product page has 5 images of the same product (different images), should you give every image an Alt tag with the keyword for that page? Or, is that keyword stuffing, and it would actually be best practice be to provide alt tags on just one image?
On-Page Optimization | | John_Francis0 -
E-commerce On Page Concern - Links and Anchor Text
Hi, how you doing? I have a set of very specific questions or concerns about anchor text and linking on an e-commerce category page. I was wondering if you could give your opinions and counsel. I own an e-commerce store about steel construction products. I have several category and product pages. One example of my categories is this. URL http://aceromart.com/Losacero-25-Ternium.aspx My concerns or questions: I have several technical specs or sheets. Which i include the link on the right part in "Informacion Adicional". How should i link those? I am bit worried on the anchor text. Should i use something like [download "product" technical sheet] or just [technical sheet of product] . I dont want to cannibalize, but i also want to appear as descriptive as possible. what would you recommend? The same thing happens on my videos. How should i link my videos? Is there a best practice? **what would you recommend. ** Thanks in advance for your opinions!
On-Page Optimization | | JesusD0 -
Do images on a CDN affect my Google Ranking?
I have recently switched my images to a CDN (MaxCDN) and all of the images within my post are now get loaded directly from the CDN. Will this affect my Google ranking? Do Google care if the image is hosted physicaly on the domain?
On-Page Optimization | | Amosnet0 -
How can I stop google reading a certain section of text with my H1 tag?
Hey Mozzers, I'm wondering if anybody knows of a way that I can stop google reading a certain part of text within my H1 texts? My issue is that I have individual office pages on my site, but many offices are based in the same city; such as 'London'. I want to keep London within the H1 tag for user experience but I do not want it to be picked up by the search engines and start a canonical issue. I've seen some people say to use document.write or use an image. Does anybody know of a correct way of doing this? Many Thanks.
On-Page Optimization | | Lakeside0