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
-
Image scale Error On page seo
I Have an Image Scale Error in Gtmetrix how to solve it which is the best way to solve it I tried many ways but it's not working.
On-Page Optimization | | AlexSmithh0 -
How should a ALT TAG Be?
Hi All, Can a ALT Tag have special characters? Can i have my ALT Tag as Image-explained-with-what-it-is? Can i have - hyphens as this? Thanks I have a 2nd question I have 100's of videos which has a ALT tag as Tumbnail link to video How can i deal with them? Can i add the Video title as ALT Tag? thanks
On-Page Optimization | | Nettv0 -
Is the HTML content inside an image slideshow of a website crawled by Google?
I am building a website for a client and i am in a dilemma whether to go for an image slideshow with HTML content on the slides or go for a static full size image on the homepage. My concern is that HTML content on the slideshow may not get crawled by Google and hence may not be SEO friendly.
On-Page Optimization | | aravinn0 -
Web Design - Text links better than drop down menus?
Hello So with reading a blog post by Bruce Clay - http://www.bruceclay.com/blog/seo-friendly-web-design/ It reads that it Is best for seo to use text links instead of drop down menus. So I just wanted to ask you opinion.
On-Page Optimization | | Berner0 -
Image carousel
I have a site with a large image carousel on the top of the homepage. it rotates about 5 images. Most of the images have copy on the left and the image on the right. Right now the designer has kept it one large image. If convert the copy to HTML and keep only the image on the right the actual image. This copy on the left will now get crawled? Is there any downside to this? I am thinking this is a better option than keeping it one large image.
On-Page Optimization | | aspenchicago0 -
Is thumbnail text crawlable/lists of product names considered as normal copy in terms of keywords?
On a page that lists products (thumbnail text repeating the same word when you sell variations of the same thing) and also has copy at the bottom, are the product names crawlable? Is it better to avoid repeating the keyword in the copy? Can you get penalised for it?
On-Page Optimization | | LawrenceNeal0 -
Internal Link Title and Anchor Text Question
So, I am kind of a newbie with all of this stuff, so please bear with me! If you have a chance to look into the domain it's www.noip.com I have checked the internal followed and 301 links. It seems like it is pulling in all of our navigation a funky way. all of those link have no data for the title and the anchor text is Home, Contact Us, Forgot Password?, ETC. Is this correct? I have tried to look into the way other websites are doing it and it seems wrong. I tried to talk to my developer, but he is not so sure. Do we simply need to make more copy on our site that has internal links within the copy with anchor text that is for keywords that I would like to be ranking for? Like Managed DNS? and then that page goes to the managed DNS page? Or what? Sorry if i am not being totally clear. Any help and advice is 110% welcomed!!! Natalie
On-Page Optimization | | vwnatalie0 -
Can bad text URLs hurt pages?
If you have some pages that contain plain text URLs (not anchored links) that used to be good URLs, but are now bad, either because the website shut down or because it has been acquired by someone else and is now parked (or worse) - are those URLs enough to cause quality problems? For example: This information was brought to you by Waymaker http://www.waymaker.net These aren't the only ones. And yes, I know I should fix them, but there are probably 10,000 pages like it. I will fix them, but its not something I can do in a few minutes. (this one is easy to fix programmatically, but others are a lot more complex) So my question is: do you have actual experience that these are bad enough to cause ranking problems (making them low quality)
On-Page Optimization | | loopyal0