frobn
02-19-2005, 01:31 PM
Why use background images?
When structuring a web site I try to keep in mind how the template will play with search engines. Here is a tip to increase search engine friendliness. Most web sites are designed with images for the header which will load first. Search engines do not recognize images and the alt tag has a low priority in ranking.
You want a nice image header and a serach engine friendly site, so here is what I do.
Place the header in a <div> and load the image as a background image, i.e.
<div style="background-image: url('my_nice_header.jpg');
height:150px; width:760px;"> </div>
(Replace height and width with the height and width of you image. If you use tables the div can be put in a table cell.)
Note: It is a fallacy that an image sliced into parts will load faster.
You have now accomplished three things.
1. Your page content will load faster because background images load last.
2. The search engine reads your more important text content first.
3. You can write over the image. I often put the site name in <h1> tags so that this is the first thing that the search engine reads.
<div style="background-image: url('my_nice_header.jpg');
height:150px; width:760px;">
<h1>The Best Real Estate in My Town</h1>
</div>
Use your own text between the heading tags :).
When structuring a web site I try to keep in mind how the template will play with search engines. Here is a tip to increase search engine friendliness. Most web sites are designed with images for the header which will load first. Search engines do not recognize images and the alt tag has a low priority in ranking.
You want a nice image header and a serach engine friendly site, so here is what I do.
Place the header in a <div> and load the image as a background image, i.e.
<div style="background-image: url('my_nice_header.jpg');
height:150px; width:760px;"> </div>
(Replace height and width with the height and width of you image. If you use tables the div can be put in a table cell.)
Note: It is a fallacy that an image sliced into parts will load faster.
You have now accomplished three things.
1. Your page content will load faster because background images load last.
2. The search engine reads your more important text content first.
3. You can write over the image. I often put the site name in <h1> tags so that this is the first thing that the search engine reads.
<div style="background-image: url('my_nice_header.jpg');
height:150px; width:760px;">
<h1>The Best Real Estate in My Town</h1>
</div>
Use your own text between the heading tags :).