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
-
How to check code to text ratio of Mobile Site?
Hello All, How to check code to text ratio of Mobile Site? Thanks!
On-Page Optimization | | adamjack0 -
Alt Tags on multiple product images
Hi I work on SEO for an ecommerce site and wanted to find out how important it is to optimise all images with alt tags. We have alt tags in place, however have not optimised descriptions for the following example images: Front of cupboard Back of cupboard Side of cupboard etc Is this dangerous for SEO if these images all have the same alt tag? We have thousands of products so it would be a huge job to update these, but if it's crucial for SEO we can work through our priorities. Thank you!
On-Page Optimization | | BeckyKey0 -
WordPress image urls - need a WP maven
We were having a conversation re urls that are indexed for images that are stored in various media plugins in WP. My question for anyone who is an uberWP person is: What is your opinion re best media storage plugins and how these URLs affect pages on a site for ranking, etc. I realize this is broad, but it is driven out of my concern that I cannot touch everything. When I see a url like this: http://www.drumbeatmarketing.net/wp-content/themes/drumbeat2/img/DB-LOGO-White.png I know there is no way with all the sites and clients we handle that I can get it perfect but this just bugs me for some reason. Should I just chill since it (seemingly) affects so little....?
On-Page Optimization | | RobertFisher1 -
Category Anchor Text - all the same - should I worry?
I have analyzed several websites and have come across sites that have many backlinks from their category pages and those all have the anchor text of the blog title. Should I worry that categories in WordPress can have different Titles and Descriptions and there are plugins to help with the variation. I haven't found any good recommendations regarding if the anchor text should be changed for categories or how to accomplish that. (I have scoured SEOMOZ for answers but may have missed the answer.) Thanks, Linda
On-Page Optimization | | LindaJo0 -
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 -
Alt Tags On "VIEW INVENTORY" Button
I have an E-commerce site that sells events, and tickets. By default it shows 10 events per page, each event with its own "View Inventory Button" which leads a customer to a list of tickets for that particular event. My question is that by default ea event page has 10 listings all with View Inventory buttons, should I just remove ALL alt tags? For example if it was football game with Detroit lions, and the Detroit lions page shows 10 events by default, should each of my View tickets buttons say EX. "Buy Lions tickets"? I am so confused, i have an understanding of how and what alt tags do, but I am afraid to "over optimize the pages? I am just not sure how many times to have this alt tag visible with keywords in them, as the rest of the page is optimized in my descriptions and I would want to avoid keyword stuffing. Currently all that I can see how is "view tickets" view tickets" 10times as alt tags. Any help would be MUCH appreciated!!!! This was a response in the past from someone in the forums 'Depending what language/CMS your website is built on, you will be able to insert a bit of code that dynamically creates a suitable alt tag depending on the product. So whatever page/product template currently instructs the alt tag to be 'buy now', would instead instruct a dynamic name to be generated along the format of 'buy button for"
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 -
The SEO and CRO Value of an Image Next to Page Content
If given the choice to add an attractive stock photo to a conversion focused page, do the pros out number the cons in terms of SEO and CRO. Some pros are that you can include the keyword in the image filename and image alt tag. It can also increase user experience by making the page more attractive. Some cons might be that it increases page load time which can have a negative impact on SEO and user expereience. Also the visitor might get distracted away from the lead form button.
On-Page Optimization | | SparkplugDigital0