1 / 31

Optimizing Code Order for SEO Using CSS

Optimizing Code Order for SEO Using CSS. Presented by: Benj Arriola SEO Director Internet Marketing Inc. Significance of Code Order. On-Page SEO Off-Page SEO. Significance of Code Order. <body> <p> Content here is more important …</p> … … … … … <p> than content here .</p> </body>.

liliha
Download Presentation

Optimizing Code Order for SEO Using CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Optimizing Code Orderfor SEO Using CSS Presented by: Benj Arriola SEO Director Internet Marketing Inc.

  2. Significance of Code Order • On-Page SEO • Off-Page SEO

  3. Significance of Code Order <body><p>Content here is more important…</p>……………<p>than content here.</p> </body> • On-Page SEO • Off-Page SEO The nearer content is to the top of the code, the better.

  4. Significance of Code Order <body><p>Content here is more important…</p>……………<p>than content here.</p> </body> <body>… <a href="/bright-blue-widgets.html">Products</a>………<p> … <a href="/bright-blue-widgets.html">Order Bright Blue Widgets Online</a> … </p> … </body> • Off-Page SEO • First Link Priority • 2006 SEO Smackdown • 2008 SEOMoz • 2009 BusinessOL • On-Page SEO When 2 or more links on a page go to the same URL, only the first link anchor text is read by search engines.

  5. Typical Code Implementation 1 • <div id=“top-bar”>…</div><div id=“column-left”>…</div><div id=“column-right”>…</div> • #top-bar { width: 800px; height 90px; }#column-left { width: 200px; float: left; }#column-right { width: 600px; float: left; } Top Bar: Homepage logo link, main navigation. 2 Side Bar: Secondary links, ads/promos. 3 Main Content: Keywords you would want to rank for. Footer: Text links, often a copy of the top bar navigation.

  6. Main Content Before Sidebar • Main content that has the important keywords to rank for. • Main content has the best anchor text links, often longer and more descriptive.

  7. Right Sidebar – Float: Left • <div id=“column-left”> <!-- main content --></div><div id=“column-right”> <!-- navigation --></div> • #column-left { width: 600px; float: left; }#column-right { width: 200px; float: left; }

  8. Left Sidebar – Float: Right • <div id=“column-right”> <!-- main content --></div><div id=“column-left”> <!-- navigation --></div> • #column-right { width: 600px; float: right; }#column-left { width: 200px; float: right; }

  9. 3-Column Layout • <div id=“column-left”><div id=“main-content”> <!-- main content --></div><div id=“navigation”> <!– navigation left --></div> • </div> • <div id=“column-right”><!-- navigation right --> • </div> • #main-content { width: 600px; float: right; }#navigation: { width: 200px; float: right; }#column-left { width: 800px; float: left; }#column-right { width: 200px; float: left; }

  10. 3-Column Layout – Holy Grail Style • http://www.alistapart.com/articles/holygrail • Center content comes first, sidebars float to the left and right. • This style makes use of negative margins.

  11. Top Bar Navigation • <div id=“column-left”>…</div><div id=“column-right”>…</div><div id=“top-bar”>…</div> • #column-left { width: 200px; float: right; margin-top: 90px; }#column-right { width: 600px; float: right; margin-top: 90px; }#top-bar { width: 800px; height 90px; position: absolute; margin: 0; }

  12. Do you have to do this? • Code order: Just 1 of the ranking factors. • Websites ranking well does not necessarily need to follow all ranking factors. • In very competitive markets, you want to take advantage on all ranking factors possible. • Challenge to redo the whole website: • Non-agreeing designer/developer • Not allocated in budget to redesign/redevelop. • Best done when a new site is design, or when an old site is in the process of redesigning.

  13. Summary • Main content on top. • First link priority. • Control direction of floating <div> columns. • Using absolute positioning for top bar. • Another ranking factor to optimize for to gain more ranking advantage.

  14. Thank You! Optimizing Code Order for SEO Using CSSPresented by: Benj Arriola SEO Director Internet Marketing Inc. A copy of this presentation will also be downloadable from www.internetmarketinginc.com/blog/ shortly.

  15. Non-Animated Slides Printer Friendly Slides

  16. Optimizing Code Orderfor SEO Using CSS Presented by: Benj Arriola SEO Director Internet Marketing Inc.

  17. Significance of Code Order • On-Page SEO • Off-Page SEO

  18. Significance of Code Order <body><p>Content here is more important…</p>……………<p>than content here.</p> </body> • On-Page SEO • Off-Page SEO The nearer content is to the top of the code, the better.

  19. Significance of Code Order <body>… <a href="/bright-blue-widgets.html">Products</a>………<p> … <a href="/bright-blue-widgets.html">Order Bright Blue Widgets Online</a> … </p> … </body> • Off-Page SEO • First Link Priority • 2006 SEO Smackdown • 2008 SEOMoz • 2009 BusinessOL

  20. Significance of Code Order <body>… <a href="/bright-blue-widgets.html">Products</a>………<p> … <a href="/bright-blue-widgets.html">Order Bright Blue Widgets Online</a> … </p> … </body> • Off-Page SEO When 2 or more links on a page go to the same URL, only the first link anchor text is read by search engines.

  21. Typical Code Implementation Top Bar: Homepage logo link, main navigation. Side Bar: Secondary links, ads/promos. Main Content: Keywords you would want to rank for. Footer: Text links, often a copy of the top bar navigation.

  22. Typical Code Implementation 1 • <div id=“top-bar”>…</div><div id=“column-left”>…</div><div id=“column-right”>…</div> • #top-bar { width: 800px; height 90px; }#column-left { width: 200px; float: left; }#column-right { width: 600px; float: left; } 2 3

  23. Main Content Before Sidebar • Main content that has the important keywords to rank for. • Main content has the best anchor text links, often longer and more descriptive.

  24. Right Sidebar – Float: Left • <div id=“column-left”> <!-- main content --></div><div id=“column-right”> <!-- navigation --></div> • #column-left { width: 600px; float: left; }#column-right { width: 200px; float: left; }

  25. Left Sidebar – Float: Right • <div id=“column-right”> <!-- main content --></div><div id=“column-left”> <!-- navigation --></div> • #column-right { width: 600px; float: right; }#column-left { width: 200px; float: right; }

  26. 3-Column Layout • <div id=“column-left”><div id=“main-content”> <!-- main content --></div><div id=“navigation”> <!– navigation left --></div> • </div> • <div id=“column-right”><!-- navigation right --> • </div> • #main-content { width: 600px; float: right; }#navigation: { width: 200px; float: right; }#column-left { width: 800px; float: left; }#column-right { width: 200px; float: left; }

  27. 3-Column Layout – Holy Grail Style • http://www.alistapart.com/articles/holygrail • Center content comes first, sidebars float to the left and right. • This style makes use of negative margins.

  28. Top Bar Navigation • <div id=“column-left”>…</div><div id=“column-right”>…</div><div id=“top-bar”>…</div> • #column-left { width: 200px; float: right; margin-top: 90px; }#column-right { width: 600px; float: right; margin-top: 90px; }#top-bar { width: 800px; height 90px; position: absolute; margin: 0; }

  29. Do you have to do this? • Code order: Just 1 of the ranking factors. • Websites ranking well does not necessarily need to follow all ranking factors. • In very competitive markets, you want to work on all ranking factors. • Challenge to redo the whole website: • Non-agreeing designer/developer • Not allocated in budget to redesign/redevelop. • Best done when a new site is design, or when an old site is in the process of redesigning.

  30. Summary • Main content on top. • First link priority. • Control direction of floating <div> columns. • Using absolute positioning for top bar. • Another ranking factor to optimize for to gain more ranking advantage.

  31. Thank You! Optimizing Code Order for SEO Using CSSPresented by: Benj Arriola SEO Director Internet Marketing Inc. A copy of this presentation will also be downloadable from www.internetmarketinginc.com/blog/ shortly.

More Related