Using DIVs to control placement of relevant keywords

cartoon of pink dog skipping

Puppy food, dog food, quality, no by-products. If your Web site sells animal supplies, these keywords might appear on your page that sells dog food. When potential buyers type "dog food" into their search engine, the search engine goes looking for the best pages that contain those keywords.

Did you know that if those keywords appear near the top of your page, they weigh more heavily in the search engine's decision about how to rank your page as a search hit? It's true. If you save all those good keywords for the end of your page, you could hurt your search rankings. Careful keyword placement is an easy, free way to help drive traffic to your Web site.

Search engines treat a Web page much like a newspaper story. The most relevant information is assumed to be near the top. How often have you read just the first few paragraph of a newspaper story, gotten the gist, and did not finish the story? Just like you, search engines value the top of the story most highly. That translates into a higher priority placed on keywords found at the top of your page. I will show you how coding your page with CSS and DIVS, instead of a table layout, will help you position your keywords where you really want them—near the top of the page.

In most cases, keyword placement is easy. Just like the writer of the newspaper, write your content with the most relevant information first. However, keep in mind that search engines are savvy about keyword-loading, so don't overdo the keywords, either. If you sprinkle too many around, in other words, the search engine will penalize your page for it. Be as natural as you can about writing like a reporter.

cartoon of shaky table

Table layout of your pages restricts keyword placement

So, you've rewritten your content, but what if your entire content is not near the top of the page? This happens when your page is coded in a table layout format. Many Web developers create their page as one big table. If your page is constructed that way, you may not be able to move up your keywords very much.

Let's say, for example, you have a header at the top of your page, and you have a navbar on the left side. In table layout format, your header will always come first, then your left column. Lastly will come the content part of your page!

DIV layout will liberate your keyword placement

You can solve the problem with DIVs. Use a DIV with absolute positioning for your header. Use another DIV with absolute positioning for your left navigation bar. Now, simply code those two DIVS at the bottom of your page, after your keyword-rich content. Remember, the search engine is looking at your html markup, not what your visitors see. So the search engine will find the keyword-rich content at the top, and the DIVS at the bottom of the page.

The result? Your keywords are at the top of your page, thus attracting more attention from the search engine. And you don't have to change your entire Web site at once. Just define your new DIVS in your CSS style sheet, upload your style sheet, then change the layout of one page. Over time, you can slowly convert your pages to your new DIV layout.

This page is an example of good DIV placement

To see an example, look at the source code for this page. At the bottom of the HTML markup, after all the content, you will see my two DIVS: one for my masthead (also called a header) and the other for my navigation bar. Notice that these DIVS don't contain important keywords for the page, so I've placed them at the very bottom of the page.

<div id="masthead">
<p style="text-align:left"> <font size="6">Linda Moran</font>
    
<a href="http://www.lindamoran.net/index.htm">Home</a> |
<a href="http://www.lindamoran.net/cognitivetherapy/index.htm ">Cognitive
therapy</a> | 
<a href="http://www.lindamoran.net/dietinfo/index.htm">Diet</a> |
<a href="http://www.lindamoran.net/disabilities/index.htm ">Disabilities</a> | 
<a href="http://www.lindamoran.net/parenting/index.htm ">Parenting</a> | 
<a href="http://www.lindamoran.net/searchwifey/index.htm" class="current">
Technical</a> | 
<a href="http://www.lindamoran.net/writerinfo/index.htm">Writing</a>  
</p>
</div> 

 
<div id="navbar">
<h3><a href="http://www.lindamoran.net/publishedtitles.html">Published <br/>
articles</a></h3>   
<h3><a href="http://www.lindamoran.net/resume.html">Read my resume</a></h3>  
<h2 class="whiteline"></h2>  
<h3><a href="http://www.lindamoran.net/services.html">Professional services</a></h3>  
<h3><a href="http://www.lindamoran.net/fanmail/index.htm">Readers' mail</a></h3>  
<h3><a href="http://www.lindamoran.net/reprints.html">Reprints</a></h3>  
<h3><a href="http://www.lindamoran.net/contactme.html">Contact Me</a></h3>  
<script language="javascript">
<!--
document.write('<h3><a href="http://www.betterwaypress.com/cgi-bin/LMshowlink.cgi?
referrer='+URL+'" target="_blank" >Link to this page</a></h3>  ') 
//-->
</script>
<h3><a href="http://www.lindamoran.net/sitemap/index.htm">Site Map</a></h3>

But think critically about your page. Perhaps you have a DIV that contains important keywords. You might want your DIV to be positioned in a different place than mine. But now you have total freedom to place the parts of your page anywhere you want inside your HTML markup.

Another example of DIVS

Here is a very nice site, stevezeik.com, created with SiteBuilder, that is already coded in DIVS. Actually, it has tables within DIVS, but that's fine. There's nothing wrong with tables, but when it comes to laying out the geography of your page, that's where DIVS come in. The Steve Zeik site uses absolute positioning of DIVS just fine.

But as you can see from the source code, some important keywords, such as "Steve Zeik," are contained in DIV coding at the bottom of the source code page. Since that DIV is coded with absolute positioning, it could easily be moved closer to the top of the source code without changing the look of the page.

Find out more

Search Engine Marketing, Inc. book cover

Want to find out how else to make the most of your Web site? The book, Search Engine Marketing, Inc., by Mike Moran and Bill Hunt, is available on Amazon.com. There's something for everyone in this thorough, delightfully written text that covers every aspect of Search Marketing. I know from the inside—I personally ripped it to shreds a few times while it was in the making.

Click on the book cover for more information.

And just who is Linda Moran, and why does she call herself "Search Wifey?" Find out  who is Linda Moran?



Did this page help you?

If the free information on this page was helpful to you, might it help your visitors as well? Consider linking to this page. And do you have friends with Web sites who could benefit from a link to this page? We'll help you e-mail all the link information to yourself or anyone else of your choosing. Just click on the e-mail icon.


Direct all technical questions and comments about this site to webmaster

Last Modified: Saturday, 12-Jan-2008 21:49:15 PST Linda Moran

All rights reserved.

Copyright © 2005 Linda Moran

 Linda Moran    Home | Cognitive therapy | Disabilities | Intuitive Eating | Technical