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
-
My website is not indexing the image.
Our website's images are not indexed. Will anyone help me? How will all images in my website be indexed? This is my website address: https://www.expertclipping.com/
On-Page Optimization | | jacky_risham0 -
Image File Names for eCommerce?
Hi everyone! I'm wondering about naming my product photo file names for an E-Commerce site. Let's say I say have product named Abe Lincoln in the **Print **category for sale with 4 images, relatively similar but from different views for example.Could I name them as follows? 1) abe-lincoln-print.jpg 2) abe-lincoln-print-side-view.jpg 3) abe-lincoln-print-close-up.jpg 4) abe-lincoln-print-font-view.jpg Or is that too many keywords for the page? Should I be worried about keyword stuffing? Plus once I add in title and alt tags and descriptions this could also increase the keyword count for "abe lincoln print"?
On-Page Optimization | | TheFlyingSweetPotato0 -
Help Please! - Anchor Text in the Menu
Hi everyone, I am a SEOMOZ newbie and I have been learning about SEO for a while now whilst working on my site - lockcity.co.uk - I already understood the importance of anchor text but was amazed to learn how google only count the anchor text used in the first link (http://www.seomoz.org/learn-seo/anchor-text). My questions are - does this rule still apply? and if so do the menus really count as the first link? If I went on this approach, this would make my menus too long for e.g. on my 'Auto Locksmith' page, my targetted keywords are 'Auto Locksmith' but also the town keywords need to be included. I really thought I had this covered on the home page by making sure the anchor text and alt text were keyword relevant to the link, but looks like Ive been missing out on an opportunity. Our business is slightly complicated in that the 25 mile radius we cover includes 4 different regions - therefore I feel like I always have to get these keywords in as well to make sure we get traffic from our area. Thanks for any advice you can give!
On-Page Optimization | | LockCity0 -
Image optimization
howdy guys, I am tryign to help my dad out with his SEO for his existing LP. its been created for "conversions" however not really made for SEO. Anyways, he has all these images that have abs no title,alt, or desc tags on ANY images. some of the images are part of the header and some are images of people etc. there are about 30 images. and the site is all in html. Would it be a good idea to change EVERY image or just a few and target some branding keywords? thanks again guys, hope to hear back soon
On-Page Optimization | | david3050 -
What image attribute should carry "anchor text" for internal linking
Newbie question: an internal link generally should carry keyword anchor text, so if the link is actually an image, what image attribute should contain the equivalent of the anchor text
On-Page Optimization | | k3nn3dy30 -
Image alt attribute vs. plain text in link?
I'm building a product category browsing page for a high-falutin' jewelry retailer where we display only product photos linking to individual product pages, without any text in the links. From an SEO and link-juice-passing perspective, is it most effective to embed the product titles as the alt attribute in each image, or to leave alt="" and use text substitutions (i.e. an inner which is css'd to display: none) within the <a>to help search engines accept my product titles as the link text with the most credibility?</a>
On-Page Optimization | | cadenzajon0 -
Alt tag matching product titles - e-commerce
Hey all, Just wondering if it is ok to match the alt tag to product titles. Imagine an e-commerce site that lists a whole lot of products on any one page for any one category. Each product listing has a thumbnail image beside it. The easiest way to implement this dynamically is to use the product title for the alt tag. Anyone had any experience with this? Is it overkill / spam of keywords - given that the product title is repeated. Our current situation is that our alt tags are simply blank or say 'photo' which is no good, and we have hundreds of thousands of pages. Cheers, Croozie
On-Page Optimization | | sichristie0 -
Opinions on Alt tags
Reading around the web, there are many sources that suggest all images should have an Alt tag attributed to them. This is good for accessibility etc, however there appears to be conflicting interests between this and what works for SEO. Hence many other sources suggest that you include a keyphrase or two in 1 image Alt tag, and then leave the rest blank so as not to dilute the alts on the page. In my experience, the latter appears to be true. However this seems wrong when the Alt attribute really should be used for accessibility reasons and not for SEO - why would the search engines encourage us to provide poorer quality information by harming our rankings if we try to make a website accessible? Interested to hear your opinions and experiences on this subject. Thanks.
On-Page Optimization | | RiceMedia0