< HTML >
that all SEO should know
Why bother?
• On-Page Optimizations
• HTML is the language of the web
• It’s EASY!
HTML Basics
What is HTML?
• HyperText Markup Language
HTML SGML
XHTML XML
• So what does “Markup Language” mean?
A Markup Language
• A text file containing content
• A set of markup tags is used to annotate that
content
• The annotations are display suggestions
The quick brown fox jumps Line break
over the lazy dog
In HTML…
• A text file containing content
• A set of markup tags is used to annotate that
content
• The annotations are display suggestions
The quick brown fox jumps <br Line
/>break
over the lazy dog
Some Basic Rules
• A document consists of TAGS
<table>
• A tag may have ATTRIBUTES with VALUES
<table border="1">
• Tags must be OPENED and CLOSED
<p> element content </p>
• A tag may contain OTHER TAGS
<p><strong></strong></p>
Anatomy of an HTML file
<html>
<head>
</head>
<body>
Content goes here
</body>
</html>
Spotlight: <title>
• Inside the <head> section
• Repeat keywords 1-2 times
• Research suggest max 69 characters displayed
in Google/Yahoo/Bing
• Note: CJK = 2 characters each
<title>keyword keyword – brand</title>
Spotlight: <meta>
META Description
<meta name="description" content="description of less than
156 characters" />
META Keyword
<meta name="keywords" content="keyword_1, keyword_2" />
META Language
<meta http-equiv="content-language" content="en" />
META Robots
<meta name="robots" content="noindex, nofollow" />
META Refresh
<meta http-equiv="refresh"
content="10;url=[Link] />
Spotlight: <h1>, <h2>, …
• A single <h1> per page
• As many <h2> - <h6> as required:
Page topic <h1>
Sections <h2>
Sub-sections<h3>
<h1>HTML for SEO</h1>
Spotlight: <a>
• Anchor = links. Possible attributes:
▪ href : target URL
▪ rel : used for “nofollow”
▪ title : mouseover tooltip
▪ target : open in which window
<a href="[Link]" rel="nofollow"
title="keyword" target="_blank">
keyword anchor text</a>
Spotlight: <img>
• Image. Possible attributes:
▪ src : URL of image file
▪ alt : text to appear when image cannot
▪ title : mouseover tooltip
▪ height/width : display dimensions
<img src="[Link]" alt="keyword"
title="keyword" height="200"
width="300" />
Putting it all together
<html>
<head>
<meta name="description" content="Basic HTML for SEO" />
<title>HTML for SEO – The Egg</title>
</head>
<body>
<h1>Intro to HTML for SEO</h1>
<p>You too can write HTML!</p>
<a href="[Link] src="[Link]"
alt="The Egg logo" /></a>
</body>
</html>
Others: Formatting Elements
<strong> Bold
<em> Emphasis (italics)
<sup> This is a superscript
<sub> This is a subscript
Others: Tables
<table>
<tr>
<td>a</td>
<td>b</td>
a b
</tr> 1 2
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
Others: Lists
Ordered List Un-ordered List
<ol> <ul>
<li>Item 1</li> <li>Item 1</li>
<li>Item 2</li> <li>Item 2</li>
</ol> </ul>
1. Item 1 • Item 1
2. Item 2 • Item 2
Others: Spacing and Divisions
<br /> Line break (new line)
No-breaking space
<p> Paragraph
<div> Division
Others: Special Characers
" "
& %
> and < > and <
© ©
™ ™
<!-- HTML Comments -->
Some more Terms
3 Layers of a Web Page
JavaScript
Turn Good Looking
into Cool
CSS
Turn Boring into
Good Looking
HTML
CSS (Cascading Style Sheet)
JavaScript (JS)
• Add interactivity to web pages
• “Web 2.0” thanks to AJAX (J for JS)
• E.g.: Google Instant, Google Suggestion, Gmail,
Facebook, RememberTheMilk, …
• More: [Link]
• Run on users’ end – browser matters
JavaScript Example: GMail
Backend Languages
Language Cue
PHP .php
ASP / [Link] .asp / .aspx
Java .jsp
Perl .pl
Python .py
Ruby .rb
Others…
Tools
Syntax Highlighting Code Viewer
• Firefox: default
• Chrome: default
• IE: install Notepad++
• IE8 or up: Developer Tools
Firebug
• Inspect code side by side
• Highlight mouseover element
• Pair tags for you
Web Developer
• Disable JavaScript, CSS, images…
SEOmoz Toolbar
Questions?