optimizing code order for seo using css
DESCRIPTION
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. Content here is more important … … … … … … than content here . . - PowerPoint PPT PresentationTRANSCRIPT
Optimizing Code Orderfor SEO Using CSS
Presented by: Benj Arriola
SEO DirectorInternet 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>
• On-Page SEO
• Off-Page SEOThe nearer
content is to the top of the code,
the better.
Significance of Code Order<body>
<p>Content here is more important…</p>……………<p>than content here.</p>
</body>
• Off-Page SEO• First Link Priority
• 2006 SEO Smackdown
• 2008 SEOMoz• 2009
BusinessOL
• On-Page SEO<body>
…<a href="/bright-blue-widgets.html">Products</a>………<p> … <a href="/bright-blue-widgets.html">Order Bright Blue Widgets Online</a> … </p>…
</body>
When 2 or more links on a page go to the same URL, only the first link anchor text
is read by search engines.
Typical Code ImplementationTop 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.
• <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;}
123
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.
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;}
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;}
3-Column Layout• #main-content {
width: 600px;float: right;}
#navigation: {width: 200px;float: right;}
#column-left {width: 800px;float: left;}
#column-right {width: 200px;float: left;}
<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>
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.
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;}
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.
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.
Thank You!Optimizing Code Order for SEO Using
CSS
Presented by: Benj Arriola
SEO DirectorInternet Marketing Inc.
A copy of this presentation will also be downloadable from
www.internetmarketinginc.com/blog/ shortly.
Printer Friendly SlidesNon-Animated Slides
Optimizing Code Orderfor SEO Using CSS
Presented by: Benj Arriola
SEO DirectorInternet 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>
• On-Page SEO
• Off-Page SEOThe nearer
content is to the top of the code,
the better.
Significance of Code Order
• Off-Page SEO• First Link Priority
• 2006 SEO Smackdown
• 2008 SEOMoz• 2009
BusinessOL
<body>…<a href="/bright-blue-widgets.html">Products</a>………<p> … <a href="/bright-blue-widgets.html">Order Bright Blue Widgets Online</a> … </p>…
</body>
Significance of Code Order
• Off-Page SEOWhen 2 or more links on a page go to the same URL, only the first link anchor text
is read by search engines.
<body>…<a href="/bright-blue-widgets.html">Products</a>………<p> … <a href="/bright-blue-widgets.html">Order Bright Blue Widgets Online</a> … </p>…
</body>
Typical Code ImplementationTop 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.
Typical Code Implementation• <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;}
123
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.
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;}
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;}
3-Column Layout• #main-content {
width: 600px;float: right;}
#navigation: {width: 200px;float: right;}
#column-left {width: 800px;float: left;}
#column-right {width: 200px;float: left;}
<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>
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.
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;}
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.
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.
Thank You!Optimizing Code Order for SEO Using
CSS
Presented by: Benj Arriola
SEO DirectorInternet Marketing Inc.
A copy of this presentation will also be downloadable from
www.internetmarketinginc.com/blog/ shortly.