When I build a website and write content, I try to find the right balance between SEO and the visitors experience. A sure way to optimize your website for search engine without altering your visitors’ experience is to use CSS.
One important thing to consider when it comes to SEO is your webpage’s first sentences. Your most important keywords should be at the beginning of your webpage. Unfortunately for most websites, the first thing that’s appearing on their website is… the header and the top menu! And usually this menu consists of keywords like: home, contact, about us, privacy, etc.
How Search Engines Are Seeing Your Website
Even though you’ve got this great ergonomic layout that makes your site intuitive, keep in mind that your website isn’t seen the same way by search engines. To get an idea of how my website is seen by search engine, I use this tool from dlperry.com.
This shows your website content as it’s seen by search engines.
Transforming Unimportant Keywords Into Images
Suppose you’ve got your website name written in plain text at the top of your website and that it doesn’t contain important keywords, you could simply replace it with an image file.
This trick has to be used with precaution. Don’t abuse of this technique. I use this to remove unimportant keywords from the top of my webpages, not everywhere, just at the top. Using too many images could slow down your website.
Using CSS To Move Unimportant Keywords At The End Of The HTML Code
Now this is where it gets interesting. For example, we’ll use the following webpage layout (click to enlarge):
If I had used a table to build this webpage, the source code would look something like this (I’ve shorten the “lorem ipsum” content):
<table border=”0″ width=”760″>
<tr><td><img src=”images/logo.jpg”></td></tr>
<tr><td>home | about | contact | privacy</td></tr>
<tr><td><h1>My Document Title</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed in dolor ut sapien suscipit faucibus. Maecenas a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer auctor interdum lorem…</p>
</td></tr>
<tr><td>Copyright MyWebsite</td></tr>
</table>
And this is how this webpage would be seen by search engines (again, the lorem ipsum part have been shorten):
home | about | contact | privacy My Document Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed in dolor ut sapien suscipit faucibus. Maecenas a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer auctor interdum lorem. Copyright MyWebsite
Now what you want to do is to move the top menu’s content at the end of the HTML code. Visually, you still want it to be at the top of the webpage though. We’re going to use layers (DIV) and CSS to do that.
The first step is to transform the table into layers. We’ll be able to position layers wherever we want them later using CSS. This is the source code used to generate the same layout but with layers instead of a table:
<div id=”divHeader”>
<img src=”images/logo.jpg” width=”400″ height=”90″ />
</div>
<div id=”divBody”>
<div id=”divContent”>
<h1>My Document Title </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed in dolor ut sapien suscipit faucibus. Maecenas a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>
<div id=”divFooter”>Copyright MyWebsite</div>
</div>
<div id=”divTopMenu”>home | about | contact | privacy</div>
And this is the CSS styles applied to the webpage:
#divHeader { position: absolute; width: 100%; height: 90px; width: 760px;}
#divBody { position: absolute; margin-top: 112px; width: 760px; }
#divContent { position: relative; padding: 15px; }
#divTopMenu { position: absolute; margin-top: 90px; padding-left: 15px; width: 745px; }
#divFooter { position: relative; text-align: center; }
So now here’s how my website is seen by search engines:
My Document Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed in dolor ut sapien suscipit faucibus. Maecenas a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer auctor interdum lorem. home | about | contact | privacy Copyright MyWebsite
Now all that’s left to do is to optimize the first keywords found at the beginning of your webpages!
If you’d like to see the full source-code for this tutorial, you can download it here: css_and_images_seo.zip
Let me know what you think.
Related Posts
- No related posts
Top Commentators