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
-
Yoast SEO doesn't recognize images
Hi, I'm currently adding alt tags to my images but the Yoast SEO plug in in Wordpress states on all my pages “No images appear in this page, consider adding some as appropriate.“ while I do have images on my pages. What could be the problem? Best, Rik
On-Page Optimization | | bbuildingbusiness0 -
SVG image files causing multiple title tags on page - SEO issue?
Does anyone have any experience with SVG image files and on-page SEO? A client is using them and it seems they use the title tag in the same way a regular image (JPG/PNG) would use an image ALT tag. I'm concerned that search engines will see the multiple title tags on the page and that this will cause SEO issues. Regular crawlers like Moz flag it as a second title tag, however it's outside the header and in a SVG wrap so the crawlers really should understand that this is a SVG title rather than a second page title. But is this the case? If anyone has experience with this, I'd love to hear about it.
On-Page Optimization | | mrdavidingram2 -
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 -
Wordpress photo blog with sparse text - noindex posts, index categories?
Hi everyone, I have a wordpress blog that is heavy on photos but short on text - most of my posts consist of a photo linking to a full gallery, and a short description of 1-4 sentences. I've often read recommendations to noindex category pages, but in this case I'm wondering if it might be best to noindex the individual posts instead - I'm concerned that the short posts might seem like thin content to Google compared to the category pages which aggregate the posts. Also, some of my categories reflect keywords that I'd like to rank well for. I have about a dozen categories and close to 1000 posts.
On-Page Optimization | | matt_b0 -
Does class and id names considered as text content by google
Does google and other search engines considers the class and id names as part of text content. Will it be included in the keyword density and treated as a content. For Example: <a <span="">href</a><a <span="">="http://xyz.com" title="xyz" class="topmargin_rightside_middlenavigation_home"></a> Will google considers the words "topmargin rightside middlenavigation home" as part of the text. Also If i am supposed to use this class as many times on a page, will the keyword density affects.
On-Page Optimization | | Sulekha0 -
Pagination for image galleries
We have photo galleries that load new URLs with new content/photo on each page, yet I'm still seeing "duplicate meta description" in GWT for each separate URL in the gallery. Will rel="next" rel="prev" take care of this? Just want to confirm as it requires a CMS upgrade/release.
On-Page Optimization | | Aggie0 -
Anchor text on outbound links on a blog, relevancy detrimental or positive?
We have a blog related to computer support, and we have been using guest posts and promotion of those posts to boost freshness and rankings of the blog. We have been restricting outbound links to prevent words such as 'computer repair, 'computer support' etc, because we were under the impression that if we want to rank for those words, we should only allow INCOMING links with that anchor text, and that outbound links from the page, would rob the other parts of the site of the link juice this page provides. My question is, is this wrong? Should I freely allow outbound links on my blog page that contain anchor text that I my self am trying to rank for? Or was I correct initially? Current the anchor text is in 'related' industries, such as mobile apps, technology news, etc...things that google might think are 'related', but not exactly what the site is about.
On-Page Optimization | | ilyaelbert0 -
Alt attributes same as jpg name and keywords?
Hi everyone, Quick question: Is it better to have your jpg name and alt text slightly different to your keywords for that particular page, or is it better to have them slightly differently? At the minute I'm doing them all with a variation on the keyphrase I want to optimize for (long tail and all that...). Any input much appreciated!
On-Page Optimization | | CMoore850