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
-
When trying to sculpt an internal link structure, is there any point in placing text links to top level pages that are already in the main menu?
Does Google recognise a link in the content if there is already a link in the menu? My understanding is that Google only counts the first link it finds.
On-Page Optimization | | bittristo0 -
Image Titles and Descriptions Question
Hello, I have a question about optimizing the SEO on my pages through image titles and descriptions. There are a few times on my website that I use the same image on multiple pages. I am under the impression that giving it a title such as "social-media-marketing-agency-graphic.jpg" will help the SEO for the phrase "social media marketing agency" on that page. My question was, if I want to use the same image on multiple pages, am I better off uploading an entirely new image with a new title to make it more relevant to the new page? Or will this not make large enough of a difference? Or is there an easier solution? Please let me know your thoughts on how to best optimize the pages
On-Page Optimization | | brightsocial0 -
How do you check if press release images are different enough?
We're helping a Sydney blog called Happy develop their local following and we're starting by ensuring their posts are optimized. They're doing a great job with reviews and content but the one thing we noticed is that all the images they use (because they review music) are from bands and artists that are used tens if not hundreds of times in other places. We're trying to set up a simple way for them to tweak these images to ensure they're crawled and seen as original. Anyone had to deal with this and found a solution that makes sense?
On-Page Optimization | | wearehappymedia0 -
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 -
Alt Text On Buy Buttons
Hello, On a E-commerce site with multiple buy buttons on the page (11 by Default). Should I be blocking the alt. img on these? when I use the seomoz toolbar and view my page I see this Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • Buy Now • along with other alt imges on page, Thanks
On-Page Optimization | | TP_Marketing0 -
What font should i use for my text to make page better
Hi i have changed a page layout and first of all would like to know what people think, also i would like to know what font i should be using to make the page better. My website is www.in2town.co.uk any help would be great
On-Page Optimization | | ClaireH-1848860 -
Change Homepage internal Link from Image to Targeted Anchor Text -- Spam??
I am in the following situation: 1. Homepage is designed to target one main keyword. 2. All current pages link to the homepage with the image/logo, nowhere on the site do we link to the homepage with the target keyword. 3. It is an established page (Moz rank of 58) If I suddenly added text above and made the homepage link targeted anchor text, would Google consider this spam? We are ranked #13 in Google and our looking for ways to move up, but I do not want to risk any type of Google penalty.
On-Page Optimization | | MattAaron0 -
How to get Google images traffic?
How to get Google images traffic? Take a look at traxnyc.com and sugest what we can improve. Thanks in advance.
On-Page Optimization | | DiamondJewelryEmpire0