SEO Structures by Yavor Milchev

430 views

Published on

Several slides explaining ways to improve keyword prominence without changing your site's layout.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
430
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SEO Structures by Yavor Milchev

  1. 1. HTML and CSS SEO Structures
  2. 2. HTML/CSS Structures? <ul><li>Code snippets which don’t alter the browser view, just the code </li></ul><ul><li>Early SEO structures were made using tables </li></ul><ul><li>Current structures use HTML and CSS for maximum freedom of actions </li></ul>
  3. 3. Alter the code but not the browser view Code Browser Header Left sidebar Content
  4. 4. <ul><li>Normal table code: </li></ul><ul><li><table width=&quot;200&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td colspan=&quot;2&quot; bgcolor=&quot;#00aaff“ >navigation bar (branding and advertising)</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td bgcolor=&quot;#ff00ff&quot;>left navigation bar</td> </li></ul><ul><li><td bgcolor=&quot;#33ff33&quot;>main content area</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Early structures were made with tables Browser view:
  5. 5. <ul><li>Table SEO hack: </li></ul><ul><li><table width=&quot;200&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td colspan=&quot;2&quot; bgcolor=&quot;#00aaff“ >top navigation bar (branding and advertising)</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td><!-- leave me empty --></td> </li></ul><ul><li><td rowspan=&quot;2&quot; bgcolor=&quot;#33ff33&quot;>main content area</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td bgcolor=&quot;#ff00ff“>left navigation bar</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Early structures were made with tables Browser view:
  6. 6. <ul><li>Using <DIV>’s: </li></ul><ul><li><div style=&quot;width:200px;&quot;> </li></ul><ul><li><div style=&quot;width:200px;float:left;background:#00aaff;padding:5px&quot;> top navigation bar (branding and advertising)</div> </li></ul><ul><li><div style=&quot;width:100px;float:right;background:#ff00ff;padding:5px&quot;> left navigation bar</div> </li></ul><ul><li><div style=&quot;width:100px;float:left;background:#33ff33;padding:5px&quot;> main content area</div> </li></ul><ul><li></div> </li></ul>Current structures use HTML and CSS Browser view:
  7. 7. <ul><li>Small CSS change and same<DIV>’s: </li></ul><ul><li><div style=&quot;width:200px;height:200px;&quot;> </li></ul><ul><li><div style=&quot;width:200px;float:left;background:#00aaff;padding:5px&quot;> top navigation bar (branding and advertising)</div> </li></ul><ul><li><div style=&quot;width:100px;float:right;background:#33ff33;padding:5px&quot;> main content area</div> </li></ul><ul><li><div style=&quot;width:100px;float:left;background:#ff00ff;padding:5px&quot;> left navigation bar</div> </li></ul>Current structures use HTML and CSS Browser view:
  8. 8. <ul><li>Full code to execute: </li></ul><ul><li><table width=&quot;200&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;> </li></ul><ul><li><tr><td colspan=&quot;2&quot; bgcolor=&quot;#00aaff&quot;>top navigation bar (branding and advertising)</td></tr> </li></ul><ul><li><tr><td><!-- leave me empty --></td><td rowspan=&quot;2&quot; bgcolor=&quot;#33ff33&quot;>main content area</td></tr> </li></ul><ul><li><tr><td bgcolor=&quot;#ff00ff&quot;>eft navigation bar</td></tr> </li></ul><ul><li></table> </li></ul><ul><li><br><br> </li></ul><ul><li><table width=&quot;200&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot;> </li></ul><ul><li><tr><td colspan=&quot;2&quot; bgcolor=&quot;#00aaff&quot;>top navigation bar (branding and advertising)</td></tr> </li></ul><ul><li><tr> <td bgcolor=&quot;#ff00ff&quot;>left navigation bar</td><td bgcolor=&quot;#33ff33&quot;>main content area</td></tr> </li></ul><ul><li></table> </li></ul><ul><li><br><br> </li></ul><ul><li><div style=&quot;width:200px;&quot;> </li></ul><ul><li><div style=&quot;width:200px;float:left;background:#00aaff;padding:5px&quot;>top navigation bar (branding and advertising)</div> </li></ul><ul><li><div style=&quot;width:100px;float:left;background:#ff00ff;padding:5px&quot;>left navigation bar</div> </li></ul><ul><li><div style=&quot;width:100px;float:left;background:#33ff33;padding:5px&quot;>main content area</div> </li></ul><ul><li></div> </li></ul><ul><li><br><br> </li></ul><ul><li><div style=&quot;width:200px;height:200px;&quot;> </li></ul><ul><li><div style=&quot;width:200px;float:left;background:#00aaff;padding:5px&quot;>top navigation bar (branding and advertising)</div> </li></ul><ul><li><div style=&quot;width:100px;float:right;background:#33ff33;padding:5px&quot;>main content area</div> </li></ul><ul><li><div style=&quot;width:100px;float:left;background:#ff00ff;padding:5px&quot;>left navigation bar</div> </li></ul><ul><li></div> </li></ul>Current structures use HTML and CSS Browser view:
  9. 9. <ul><li>Advanced uses of CSS: </li></ul><ul><li>Hacks which alter the view in a single browser </li></ul><ul><li>Using “position:absolute;top:125px;left:100px;” to move pieces of code to any place on a page </li></ul><ul><li>Using “float:left” or “float:right” to push <DIV>’s around a page </li></ul><ul><li>Using “margin:10px 20px 10px 20px;” or “padding:10px 20px 10px 20px;” to remove code for spacers and placeholders </li></ul>Current structures use HTML and CSS

×