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
-
Multiple H1s and Header Tags in Hero/Banner Images
I work on education websites, and our sites are being flagged by SEO and accessibility checkers for having multiple H1s. The home pages have the site name as an h3 in the hero image, and an aspirational headline (think: Be Like Mike) as an H1. The sub-pages have two H1s: one on the site name in the banner image, and the other on the page title. Note that the site name is very keyword-rich. If we were to remove the H1 and H3 tags from the hero/banner images, would it do any SEO harm? At the same time, we’d rewrite the H1 on the home page to be more keyword-focused. Any other options? I also read that it’s OK to have multiple H1s as long as it’s clear which H1 belongs to the heading area and which one belongs to the body area of the page. Thanks in advance!
On-Page Optimization | | UWPCE0 -
International website - Image names
Hello All! In an international website, it is recommended to have a copy of every image for every language in the website (with translate filenames)? or it is better to use only one copy of each image and change only the alt attributes? Thanks for the help.
On-Page Optimization | | dMaLasp0 -
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 -
Internal anchor text. Should we still use keywords?
I have a review site that has approximately 70 category pages. I'd like to include a few of them (not all 70) in the footer of the page for easy navigation and to direct the crawlers to the best ones. Is it advisable to use anchor text of "Category + reviews" or just leave it as "Category". I certainly dont want it to be overoptimized, but I do think its a good usability cue, so I'd be surprised if it was against guidelines. Any thoughts?
On-Page Optimization | | jim_shook0 -
SEO targeted text on Mobile Site Version
Hey Mozzers, I run SEO for a retail site www.uncommongoods.com. We are building a mobile version of our site on m.uncommongoods.com On each of the category pages of www.uncommongoods.com, we have included a few lines of text at the bottom of the page to get some of our target keywords into the body. As an example, if you look at this page: http://www.uncommongoods.com/office/journals-stationery/journals You'll see this copy at the bottom: "Find unique journals and diaries at UncommonGoods. Our creative journal gifts are great for marking special occasions with sentimental keepsakes." We are debating whether or not to remove this copy on the category pages of our mobile site, just to keep the pages as clean as possible. Would there be any risk in leaving this out ? Thanks for your help on this! -Zack
On-Page Optimization | | znotes0 -
Is Googlebot seeing text in my 'Read More' bar and could they even be penalising me for it?
Hi guys. Our web developers have put a read more bar that contains the on page SEO text for our webpage. By default, the read more bar is not expanded and you cannot see the text within. If you click 'Read More', the box expands and the text is shown on the page. I was wondering if googlebot is seeing this text at all - it's really important that it does because it contains all the on-page SEO text. I also wondered if this type of approach is still considered 'white hat'? If it's not, could google be penalising us for it? Thanks,
On-Page Optimization | | CarlDarby0 -
Link anchor text in list menus
Obviously Google likes descriptive anchor text. At least the first version on the page. But suppose you had a list of scrap yard depots on a hover site menu, would you go for the person friendly nested list, so Scrap Yard Depots Newcastle Chester Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch Or the presumably more Google friendly; Scrap Yard Depots Newcastle Scrap Yard Chester Scrap Yard Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch Scrap Yard
On-Page Optimization | | JamesFx0 -
Anchor text in Ecommerce site without relevant pages
I'm posting articles to my e-commerce site and just wondering about the anchor text links within the posts. I don't have relevant static pages but the items do come up in a search query. For example i don't have a specific page for red wine but if a user searched for red wine it would give a search query URL. Should I use that search URL query as my anchor text?
On-Page Optimization | | acs1110