I'm working on improving SEO on an old website that a terrible developer coded. It consists of a lot of images displaying via CSS background: as well as buttons. I'm wondering if there is anyway to include 'alt / title' text or other SEO options to save this site -- without an entire rebuild.
Also you can use this:
a {
background: url('image.png') no-repeat center center transparent;
display: block;
text-indent: -9999em;
overflow: hidden;
}
And write the HTML as:
Welcome
Since you are putting "Welcome" inside the <a> tag, you can be SEO Friendly.
If the images are not displayed you can not use the traditional 'alt/title' that would be on an image tag.
But you could add a 'title' attribute to the div which is being styled. I'm not sure how much SEO weight that it would carry.
Review your metatags, description and title attributes. Make them more rich
Add alt to every important image and title to every <a>, and as much text as you can. If it's 100% made of images it will be hard to save it.
You'd be better off using true img tags instead of relying on the CSS background-image property. Since I'm sure you already know that, here's some other advice!
Image alt tags are good for SEO, but only as part of a larger strategy. You'd gain a bigger SEO boost through creating valuable content: blogging, posting links on relevant forums and blogs, updating the copy of your site.
A regularly updated blog would do far more for your SEO than an entire site rebuild to add alt and title tags to your images.
You might consider renaming your images to more SEO-friendly names, as well. Something like "flapjack.png" is better than "image_01.png" for example. This wouldn't take much time to do.
Related
This is one I have not had to tackle before. I need to use alt tags on all images in a site including those used by CSS background-image attribute.
There is no CSS property like this as far as I know, so what is the best way to do this please?
Background images sure can present data! In fact, this is often recommended where presenting visual icons is more compact and user-friendly than an equivalent list of text blurbs. Any use of image sprites can benefit from this approach.
It is quite common for hotel listings icons to display amenities. Imagine a page which listed 50 hotel and each hotel had 10 amenities. A CSS Sprite would be perfect for this sort of thing -- better user experience because it's faster. But how do you implement ALT tags for these images? Example site.
The answer is that they don't use alt text at all, but instead use the title attribute on the containing div.
HTML
<div class="hotwire-fitness" title="Fitness Centre"></div>
CSS
.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}
According to the W3C (see links above), the title attribute serves much of the same purpose as the alt attribute
Title
Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:
alt
The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.
A text equivalent brings the following benefits to your website and its visitors in the following common situations:
nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page
search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.
In this Yahoo Developer Network (archived link) article it is suggested that if you absolutely must use a background-image instead of img element and alt attribute, use ARIA attributes as follows:
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>
The use case in the article describes how Flickr chose to use background images because performance was greatly improved on mobile devices.
I think you should read this post by Christian Heilmann. He explains that background images are ONLY for aesthetics and should not be used to present data, and are therefore exempt from the rule that every image should have alternate-text.
Excerpt (emphasis mine):
CSS background images which are by definition only of aesthetic value
– not visual content of the document itself. If you need to put an
image in the page that has meaning then use an IMG element and give it
an alternative text in the alt attribute.
I agree with him.
As mentioned in other answers, there is no (supported) alt attribute for a div tag only for the img tag.
The real question is why you need to add the alt attribute to all background images for the site? Based on this answer, it will help you determine which route to take in your approach.
Visual/Textual: If you are simply attempting to add a textual fall back for the user if the image fails to load, simply use the title attribute. Most browsers will provide a visual tool tip(message box) when a user hovers over the image, and if the image is not loaded for whatever reason, it behaves the same as an alt attribute presenting text when image fails. This technique still allows for the site to speed up load times by keeping images set to backgrounds.
Screen Readers: The middle of the road option, this varies because technically keeping your images as backgrounds and using the title attribute approach should work as hinted above, "Audio user agents may speak the title information in a similar context." However this is not guaranteed to work in all cases, including some readers may ignore it all together. If you end up opting for this approach, you can also try adding in aria-labels to help ensure screen readers pick these up.
SEO/Search Engines: Here is the big one, if you were like me, you added your background images, all was good. Then months later the customer(or maybe yourself) realized that you are missing out on some prime SEO gold by not having alt's for your images. Keep in mind, the title attribute does not have any weight on search engines, from my research and as mentioned in an article here: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/. So if you are aiming for SEO, then you will need to have an img tag with the alt attribute. One possible approach is to just load very small actual images on the site with alt attributes, this way you get all the SEO and don't have to readjust the existing CSS in place. However this may lead to additional load time depending on the size and google does indeed look at the images path when indexing. In short if you are going this route, just accept what has to be done and include the actual images instead of using backgrounds.
The general belief is that you shouldn't be using background images for things with meaningful semantic value so there isn't really a proper way to store alt data with those images. The important question is what are you going to be doing with that alt data? Do you want it to display if the images don't load? Do you need it for some programmatic function on the page? You could store the data arbitrarily using made up css properties that have no meaning (might cause errors?) OR by adding in hidden images that have the image and the alt tag, and then when you need a background images alt you can compare the image paths and then handle the data however you want using some custom script to simulate what you need. There's no way I know of to make the browser automatically handle some sort of alt attribute for background images though.
This article from W3C tells you what they think you should do
https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
and has examples here
http://mars.dequecloud.com/demo/ImgRole.htm
among which
<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>
Still, if, like in the above example, the element containing the background image is just an empty container, I personally prefer to put the text in there and hide it using CSS; right where you show the image instead:
<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>
.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}
The classical way to achieve this is to put the text into the div and use an image replacement technique.
<div class"ir background-image">Your alt text</div>
with background-image beeing the class where you assign the background image and ir could be HTML5boilerplates image replacement class, below:
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
Here's my solution for Immediate fix:
Once the background image is removed the alt text will be visible from Img tag.
.alt-image {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-image{
background:url("https://www.w3schools.com/images/picture.jpg") no-repeat;
width:100%;
height:500px;
position:relative;
}
<div role="img" aria-label="place alt text here" title="place alt text here" class="background-image">
<img src="" alt="place alt text here" class="alt-image"/>
</div>
Here's my solution to this type of problem:
Create a new class in CSS and position off screen. Then put your alt text in HTML right before the property that calls your background image. Can be any tag, H1, H2, p, etc.
CSS
<style type="text/css">
.offleft {
margin-left: -9000px;
position: absolute;
}
</style>
HTML
<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image> </div>
It''s not clear to me what you want.
If you want a CSS property to render the alt attribute value, then perhaps you're looking for the CSS attribute function for example:
IMG:before { content: attr(alt) }
If you want to put the alt attribute on a background image, then ... that's odd because the alt attribute is an HTML attribute whereas the background image is a CSS property. If you want to use the HTML alt attribute then I think you'd need a corresponding HTML element to put it in.
Why do you "need to use alt tags on background images": is this for a semantic reason or for some visual-effect reason (and if so, then what effect or what reason)?
You can achieve this by putting the alt tag in the div were your image will appear.
Example:
<div id="yourImage" alt="nameOfImage"></div>
I recently came across this tutorial that used a CSS background image to display a logo for a webpage instead of using an HTML tag. There was a placeholder text inside the div containing the logo and in order to make that text disappear, the author used text-indent:-9999px instead of display:hidden because he said that it's bad practice to use the latter.
So, why is it considered bad practice?
Because sometimes screen readers and search engines would ignore elements with display:none or visibility:hidden but not those positioned offscreen for the purposes of SEO and/or speech. However whether either method is 'bad practice' isn't really an industry-wide agreement, more of a preference thing depending on what the author really knows about these tools and what their objectives are for the site.
Also keep in mind that advice is at least 5 years old and that things change over time so what was 'best practice' then isn't automatically best practice now.
So, work out what YOU are trying to acheive and then consider your options and that is to my mind the 'best practice'.
Primarily because screen readers will not read hidden content, but many will read content that has been positioned off-screen but is still visible.
First of all there's nothing called display: hidden;, either its display: none; or it's visibility: hidden; or overflow: hidden; and coming to your question, I don't prefer using that, instead I use an img tag, with alt attribute which will describe my image, yes, screen readers DO READ ALT TEXT, if you don't have alt on your img tag, it will simply ignore it..
For example if am using img for my logo so I will use something like
<img src="#" alt="Company Name Logo" title="Company Name" />
Using a background image for a logo means you can place logo text in the same element.
One reason for this is so accessibility readers (for the visually impaired) will read the logo text when the logo can't be seen. However, you do not want the text over the logo, so you text-indent to hide it.
Content in display:none elements are not read.
I am not 100% sure on this one, but I also remember reading that some search engines ignore content in hidden elements. They may however index indented content, but this needs verification.
On the home page, is it best to use <h1> for the blog title or description?
By default Thematic (the theme I'm building my child theme on) uses <h1> for the blog description.
Also, I've replaced the blog title text with an image logo. Is this ok or should I still display the text and use text-indent: -9999px to hide it?
It all depends a bit on how related to your site your site description is.
If it's any important I'd wrap my site title between <h1> tags and my site description between <h2> tags.
If less important I'd wrap my site description between <p> tags.
I'd avoid using display:none to hide stuff, as Google or any other search engine is often confused when doing so.
There's a pretty good alternative though (also used within the WordPress TwentyEleven theme). A good tutorial about this is listed here: http://themeshaper.com/2011/02/17/css-tip-hiding-content-with-clip/
You should have an h1 on your page. It gives the page semantic meaning.
You should not, I think, hide the h1 if you are using an img as a title. This has implications for
search engines (who might think you are hiding content)
users with accessibility issues (screen readers)
yourself, for DOM manipulation if you forget it's there.
As far as SEO is considered, it is better to have your site a heading tags. Heading tags are good for SEO purposes.
Per google, It's not the best practice to hide content of the page. The text that describes your image is an alt tag, and this should be used for that purpose, not hidden h1 tag. Here : http://www.youtube.com/watch?v=GIn5qJKU8VM
http://www.youtube.com/watch?v=fBLvn_WkDJ4
h1 is the heading of your page, like the title of the chapter in a book. Every page on your site might have a h1 to help the reader understand the contents or purpose of that page. If you hide the h1 and replace it with a logo, search engines will still find it.
When I use images to replace H1/H2's (usually it's H2's for descriptions, and only on the home page) I always use text-indent to hide the text.
You want that text there so it can be indexed by search engines, but you want the image so it will look nice. Why settle for one or the other? :)
I also usually put the text inside of a span, then give said span the text-indent property.
I recommend against hiding, that's a tricky technique that can burn you. You very much want the text to be on the page. Thus the simple approach has some merit:
<img id="mybloglogo" src="myblog.jpg" alt="[My blog about great stuff]">
However, there is no perfect answer. See Replacing H1 text with a logo image: best method for SEO and accessibility? and google for this topic to understand the passion behind various views of this issue.
If you don't want to spend hours researching, you have a simpler option. View your page. Now disable CSS and look again. Now disable images and look again. If the page reads and works fine at each stage, you've got it covered for readers both human and robotic.
To turn off CSS in Firefix "View->Page Style->No Style".
The header tag, or the tag in HTML, will usually be the title of a post, or other emphasized text on the page. It will usually be the largest text that stands out.
On the home page, it's best to use the H1 heading to include the main keyphrase that you want to rank for in search engines like Google.
You should edit the Thematic theme to use your desired H1.
If I have the choice to insert images directly into the html or in the css, say for example a link wrapped in an image I could do either...
<img src="#" alt="" width="" height="" />
Or I could do...
<a id="img" href="#"></a>
#img {background: url('#') no-repeat; height: #; width: #;}
Which is better and why? Both work as wanted but is there any difference to load times etc, or any considered better practice?
Using images in HTML is better when the image has any contextual meaning... if it is a decorative picture without any contextual meaning, then use CSS. CSS is for presentation, HTML is for content.
The best hint for you to determine whether to use HTML or CSS for a picture is:
If I remove the picture, will the web-page content still make sense?
An image in HTML is meant to provide a visual meaning in context, with a meaningful text fall-back. Using an A element without any content should be avoided since its content will have a relationship with the link, for browsers and web-crawlers (such a Google bot).
Use CSS images only for decorative purposes. Otherwise it can damage your search engine rankings. Always provide an alt attribute for images, determine what will it be imagining that an eventual visitor cannot see any images.
If the image has context, such as a logo, or a photo, I would suggest loading it as an <img> Make sure you are providing alt text for accessibility and SEO reasons as well.
If an image has no context in the scope of the page, then I think the correct place for it, is defined the in the CSS which controls the design.
The whole idea is to separate your presentation from your content as much as you can. An Image can be content, and if so, should be in it.
Generally, I try to put as many images in CSS as possible but Doozer and Mario have good points. If the image is important to the context, it can go in the HTML. I will also use <img> tags when text needs to float around and image.
One thing that CSS can do that <img> can't are CSS image sprites. This is the only real performance benefit that you'll get from one or the other. Performance-hungry websites like youtube.com will combine many images into one large composite image in order to cut down on the HTTP traffic (and therefore the page load times). For example, this is a sprite taken from youtube.com.
Follow principles of semantic HTML. If the image is content, ie a thumbnail, photo, or button, use an <img> element. If it is more a part of the page design, a background image may be more appropriate.
A more specific example: If you are using your image as an icon next to a text link, use a background-image:
<span class="printIcon" onclick="window.print()">Print</a>
.printIcon { background: url(...) no-repeat; padding-left: 20px }
If your image is the button itself, with no text aspect, use an <img> element with an appropriate alt attribute that would work to substitue for the image if it is unavailable.
<img src="printButton.png" alt="Print" onclick="window.print()" />
This is one I have not had to tackle before. I need to use alt tags on all images in a site including those used by CSS background-image attribute.
There is no CSS property like this as far as I know, so what is the best way to do this please?
Background images sure can present data! In fact, this is often recommended where presenting visual icons is more compact and user-friendly than an equivalent list of text blurbs. Any use of image sprites can benefit from this approach.
It is quite common for hotel listings icons to display amenities. Imagine a page which listed 50 hotel and each hotel had 10 amenities. A CSS Sprite would be perfect for this sort of thing -- better user experience because it's faster. But how do you implement ALT tags for these images? Example site.
The answer is that they don't use alt text at all, but instead use the title attribute on the containing div.
HTML
<div class="hotwire-fitness" title="Fitness Centre"></div>
CSS
.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}
According to the W3C (see links above), the title attribute serves much of the same purpose as the alt attribute
Title
Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:
alt
The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.
A text equivalent brings the following benefits to your website and its visitors in the following common situations:
nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what's on your page
search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won't miss important sections of your pages.
In this Yahoo Developer Network (archived link) article it is suggested that if you absolutely must use a background-image instead of img element and alt attribute, use ARIA attributes as follows:
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>
The use case in the article describes how Flickr chose to use background images because performance was greatly improved on mobile devices.
I think you should read this post by Christian Heilmann. He explains that background images are ONLY for aesthetics and should not be used to present data, and are therefore exempt from the rule that every image should have alternate-text.
Excerpt (emphasis mine):
CSS background images which are by definition only of aesthetic value
– not visual content of the document itself. If you need to put an
image in the page that has meaning then use an IMG element and give it
an alternative text in the alt attribute.
I agree with him.
As mentioned in other answers, there is no (supported) alt attribute for a div tag only for the img tag.
The real question is why you need to add the alt attribute to all background images for the site? Based on this answer, it will help you determine which route to take in your approach.
Visual/Textual: If you are simply attempting to add a textual fall back for the user if the image fails to load, simply use the title attribute. Most browsers will provide a visual tool tip(message box) when a user hovers over the image, and if the image is not loaded for whatever reason, it behaves the same as an alt attribute presenting text when image fails. This technique still allows for the site to speed up load times by keeping images set to backgrounds.
Screen Readers: The middle of the road option, this varies because technically keeping your images as backgrounds and using the title attribute approach should work as hinted above, "Audio user agents may speak the title information in a similar context." However this is not guaranteed to work in all cases, including some readers may ignore it all together. If you end up opting for this approach, you can also try adding in aria-labels to help ensure screen readers pick these up.
SEO/Search Engines: Here is the big one, if you were like me, you added your background images, all was good. Then months later the customer(or maybe yourself) realized that you are missing out on some prime SEO gold by not having alt's for your images. Keep in mind, the title attribute does not have any weight on search engines, from my research and as mentioned in an article here: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/. So if you are aiming for SEO, then you will need to have an img tag with the alt attribute. One possible approach is to just load very small actual images on the site with alt attributes, this way you get all the SEO and don't have to readjust the existing CSS in place. However this may lead to additional load time depending on the size and google does indeed look at the images path when indexing. In short if you are going this route, just accept what has to be done and include the actual images instead of using backgrounds.
The general belief is that you shouldn't be using background images for things with meaningful semantic value so there isn't really a proper way to store alt data with those images. The important question is what are you going to be doing with that alt data? Do you want it to display if the images don't load? Do you need it for some programmatic function on the page? You could store the data arbitrarily using made up css properties that have no meaning (might cause errors?) OR by adding in hidden images that have the image and the alt tag, and then when you need a background images alt you can compare the image paths and then handle the data however you want using some custom script to simulate what you need. There's no way I know of to make the browser automatically handle some sort of alt attribute for background images though.
This article from W3C tells you what they think you should do
https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
and has examples here
http://mars.dequecloud.com/demo/ImgRole.htm
among which
<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>
Still, if, like in the above example, the element containing the background image is just an empty container, I personally prefer to put the text in there and hide it using CSS; right where you show the image instead:
<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>
.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}
The classical way to achieve this is to put the text into the div and use an image replacement technique.
<div class"ir background-image">Your alt text</div>
with background-image beeing the class where you assign the background image and ir could be HTML5boilerplates image replacement class, below:
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
Here's my solution for Immediate fix:
Once the background image is removed the alt text will be visible from Img tag.
.alt-image {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background-image{
background:url("https://www.w3schools.com/images/picture.jpg") no-repeat;
width:100%;
height:500px;
position:relative;
}
<div role="img" aria-label="place alt text here" title="place alt text here" class="background-image">
<img src="" alt="place alt text here" class="alt-image"/>
</div>
Here's my solution to this type of problem:
Create a new class in CSS and position off screen. Then put your alt text in HTML right before the property that calls your background image. Can be any tag, H1, H2, p, etc.
CSS
<style type="text/css">
.offleft {
margin-left: -9000px;
position: absolute;
}
</style>
HTML
<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image> </div>
It''s not clear to me what you want.
If you want a CSS property to render the alt attribute value, then perhaps you're looking for the CSS attribute function for example:
IMG:before { content: attr(alt) }
If you want to put the alt attribute on a background image, then ... that's odd because the alt attribute is an HTML attribute whereas the background image is a CSS property. If you want to use the HTML alt attribute then I think you'd need a corresponding HTML element to put it in.
Why do you "need to use alt tags on background images": is this for a semantic reason or for some visual-effect reason (and if so, then what effect or what reason)?
You can achieve this by putting the alt tag in the div were your image will appear.
Example:
<div id="yourImage" alt="nameOfImage"></div>