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
-
Responsive images srcset
Is delivering scaled images using srcset a good idea? Thinking of delivering one image size to Mobile and another to Desktop. How can I do this for all browsers? Thanks Mike
On-Page Optimization | | henandstag2 -
Can I put the company name in the image alt text instead of just the service type im trying to rank for?
Hello, if I am trying to rank for a service type and the exact phrase is in the companies name, can I put the company name in the image alt text instead of just the service type? Seizing the opportunity to get another mention of the businesses name...two birds with the one stone if you will... For example, "lawn cutting" being the service type but the company's name is Paul's lawn cutting. Could i put Pauls Lawn Cutting in the image alt text, or just stick to lawn cutting? Thanks in advance
On-Page Optimization | | Gavinn0 -
IMG ALT tags - should they be the same or the product title?
I have about 300 products. Should I make all my IMG ALT tags with my keywords, such as sea glass jewelry, sea glass necklace, sea glass bracelets? Or, should I make them what their title is, some of which do not pertain to the keyword, such as By the Sea. Some of my products do have keywords in them, but not all. I am hesitant on changing all the titles, as almost all URLs are indexed.
On-Page Optimization | | tiffany11030 -
Question about overoptimization and images "alt"
Hello, I own a shop with lots of categories, in each category there is a lot of pictures, some have already alt, must I put the attribute alt in all images, it would be 100% beneficial for my site or could would I be over-optimizing the site? Thank you
On-Page Optimization | | yuyuyu0 -
Replacing text with images
Hello, My client is a "cheap calls" site which is offering calls to around 300 countries in the world. The pages for each country are almost the same, as they are mostly terms and conditions of making a call and explanation of the process how to do it. The copy is quite long (more than 850 words) and the country name is repeated about 26 times in the text. The country name and the phone number is the main difference between the pages, which makes them almost the same. I have recommended to add testimonials to each country and towns within the country, but I am afraid it will not dilute the similarity between the pages enough for Google to stop seeing them as duplicated. Also the client do not exactly rush to publish the testimonials for every country. The rankings are not too bad and all seems fine, but in the long term I know we need to do something. I am not sure if the client would agree to shorten up the copy, as they believe in old style seo with keyword stuffing and bolded keywords but I would like to overcome that problem with exchanging the most of the copy with an image. I would write a new copy for each page making it unique (around 2-3 paragraphs) and the rest would be an image stating exactly the same thing as the copy now to provide the same amount of info to the user. Theoretically it should help to resolve this problem, but would like to check if anyone has done something like that and if it worked/may work. Are they any other implications?
On-Page Optimization | | ThinkingJuice0 -
Removing text from Homepage - Bad idea?
Hi Mozzers, I've just read this great article: http://moz.com/ugc/how-to-build-a-great-online-fashion-brand-34-things-that-really-amazing-fashion-retailers-do I'm working with my wife on a small (hopefully, growing) fashion website www.vintageeheirloom.com One of the points was not to directly sell on the homepage, rather draw customers into different areas of the site. Seems good advice and it's followed by many big brands online. As a small company, doing fairly well for some targeted keywords, do you think it would be a good or bad idea for me to remove most, or all of the text on my homepage. The main emphasis of our site is vintage Chanel and using the tool nTopic I score 99% relevancy for 'Vintage Chanel'. Removing would certainly affect this. Obviously I could amend my Vintage Chanel shopping category to include all this. I'd be grateful if you have any thoughts / similar experience. Thanks ! Kevin
On-Page Optimization | | well-its-1-louder0 -
Implementation of Rich Text Snippets on a e-commerce site
Hey Guys I'm working on the implementation of Rich Text Snippets , I have basically 3 types of page Product Page Category Page Homepage On the product page I'm going to implement the product scheme which seem relatively straight forward , I'm struggling a bit understand what can be implement on the homepage & category page if anything For the Homepage I was planning to use the organisation scheme http://schema.org/Organization using the object thing my question is can you use the image tag to try and get google to display our brand logo ? just like the author & recipe etc.. we sell branded goods so on each ideally for branded page we provide brand description and brand logo http://brokenscene.com/uk/brands/famous-stars-and-straps.html can you use any snippets or is it best to focus on just the products ? Ben
On-Page Optimization | | elbeno0 -
Do alt tags count towards on page keyword density?
Hello...I have written a bunch of content for my site using a useful tool called Scribe SEO which recommends keyword density at 5% if I remember correctly. So all my my newly written content is below this level but I am left wondering if by adding alt tags with my chosen keywords I will be considered to be over the limit and cause a red flag? Can anyone clarify this for me please?
On-Page Optimization | | Wallander0