Content First
Something a lot of webmasters miss when they make their websites is the content placement in relation to everything else in the page. Because search rate the content on it’s location in the code (higher content is more important), it’s a good practice to place the content as close to the top as possible. This may sound easy, but sometimes it’s not. Some websites have a lot of menus and sub menus in top of their website for all the sections. In this case, some JavaScript work may come in handy.
The following will show you a handy trick to move your content to the top of the page regardless of where it’s placed and how many menus and sub menus the website has.
Quick List:
- Move all your CSS style to an external file and place the <link> tag in the head section
- Move all your JavaScript (if possible) to an external file and place the <script> tag in the bottom of the page (right before the </body> tag).
- If there is some inline script, try to put it in the bottom of the page as well.
JavaScript Work:
After we’ve moved all the external elements, it’s time to place the main content in the top of the page. First, right after the <body> tag, add a <div> tag and give it an id (like body-content). Place all your content inside this div (I used Latin text in this example).
<div id="body_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mi. Mauris faucibus convallis urna. Nullam dictum augue non dolor. Phasellus vel ante ac neque vehicula vehicula. Proin vitae libero sit amet odio venenatis egestas. Cras nec augue. Consectetuer adipiscing elit. </p> </div>
Now in your page, place another div tag where ever the content was suppose to go and give it an id (content for example)
<div style="width:750px;"> <div style="float:right; width:250px;"> <ul> <li><a href="#">Navigation</a></li> <li><a href="#">Navigation</a></li> <li><a href="#">Navigation</a></li> <li><a href="#">Navigation</a></li> <li><a href="#">Navigation</a></li> </ul> </div> <div id="content" style="width:500px;"></div> </div>
Finally, add the following script to place the page content into the correct position (make sure to add the script in the bottom of the page).
<script language="javascript"> document.getElementById(‘content’).appendChild( document.getElementById(‘body_content’) ); </script>
Using this method will help make your content more important than the rest of the code in the search engine eyes which will help rank your page a bit better. If you need help with something like this, feel free to contact us.
All together:
<div id="body_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mi. Mauris faucibus convallis urna. Nullam dictum augue non dolor. Phasellus vel ante ac neque vehicula vehicula. Proin vitae libero sit amet odio venenatis egestas. Cras nec augue. Consectetuer adipiscing elit. </p> </div> <div style="width:750px;"> <div style="float:right; width:250px;"> <ul> <li><a href="#">Navigation</a></li> <li><a href="#">Navigation</a></li> <li><a href="#">Navigation</a></li> <li><a href="#">Navigation</a></li> <li><a href="#">Navigation</a></li> </ul> </div> <div id="content" style="width:500px;"></div> </div> <script language="javascript"> document.getElementById(‘content’).appendChild( document.getElementById(‘body_content’) ); </script>
Posted in JavaScript
Posts
