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
-
Does Bolding Text Have Any Impact on SEO?
Someone told me it does but I thought that was old school way of thinking. Any thoughts?
On-Page Optimization | | tryfantasy1 -
Does having landing page text beneath the products at the base of the page hinder SEO?
I have a site that is capable of hosting the landing page description either above the products under the H1 or below them at the bottom of the page before the footer. I have always chosen to keep the text "above the fold" as presumably this would be crawled sooner in relation to the rest of the page content than had it been at the bottom. However, this means that I can only really write just a few sentences for each landing page - otherwise the products would shift further down the page - and I don't think this is good from a UX POV. Question: If I move the bulk of my landing page descriptions to the text snippet located underneath the products, could this negatively affect my SEO? Text at the bottom of the page is obviously not significant for users, so is there a chance this could be seen as spam?
On-Page Optimization | | Silkstream0 -
Homepage SEO: Does Text Content Help Traffic?
Hi Mozzers! My employers homepage (www.swarovski.com) is - amongst other problems we're about to fix - very thin (not to say empty!) in text content. If we were to put relevant text on the next version of the page, would that be beneficial in terms of traffic to that page? Thanks and cheers, Chris
On-Page Optimization | | Diderino0 -
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 -
On page/site - Images & bold text
As I understand it on a page where you are going for the keywords 'Metal gates', you have an image titled 'Metal gates' (Lets say MG for Metal gates to save on my typing!) with the alt tag being 'MG' Now as I also understand it, if an image is also used as a link the Alt tag is also the anchor text? So, I have a page on Metal gates using the above methods, from this page I have image links to a metal driveway gates page (as well as text links), would I be best using an image titled 'Metal driveway gates' with the alt text as ' Metal driveway gates' to link to my metal driveway gates page (if you follow me)? Also on the image question, what if you have say six images (that are all links) on the metal gates page, how would you title the images and alt tags? Variations on Metal gates? Or using the keyword on the page that the link points to? (I'm not looking to keyword stuff but want to get it right! ) Also is it important to have your on page keywords in bold still? i ask because I've bolded text on my pages but not the main keywords - I've bolded text that I want people to see, but do not want to take away any power from my keywords if you follow me?
On-Page Optimization | | Jon-C0 -
My text does not show up in Google
Hi there. I've got an urgent question I hope someone can help me with. I've made a website (www.tonyharrismakingcents.com.au) with a few content pages. I don't get a lot of traffic. All my pages are scrawled and I don't see any errors. However, when I copy an entire paragraph and Google it, it does not show up in the search results. This makes me believe that the pages are not scrawled correctly. Only when I search for the exact paragraph by putting it between "", the website shows up on the results page. What can be the reason for this? Thanks for your help..It's much appreciated.
On-Page Optimization | | csrinpractice0 -
Home page mostly graphic image
I have a new customer that is redesigning her website. The graphic designer has designed a lovely homepage that is mostly an image with some navigation and footer area for text information. My concern is that there isn't any real call to action or anything on the homepage design other than an interesting and fun graphic. It seems like years ago this was a common practice and then later it was looked down on as not good for the user experience or SEO. What is the latest thinking on this type of design? Should the homepage (www.mysite.com) be allowed to be mostly images? Or should we focus on the optimizing the internal pages and let the homepage be more creative?
On-Page Optimization | | ChristiMc0 -
How impactful will text at the bottom of the page be?
If the most important content for humans on my page is images (e.g., a picture gallery), but there is very little text high up on the page, how impactful will a text description at the bottom of the page be? I've seen a few other sites put content paragraphs at the bottom of their pages. LIke so: http://www.purpletrail.com/invitations-online http://www.tinyprints.com/ Is this something I would do well to emulate?
On-Page Optimization | | Ehren0