That All SEO Should Know

< 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=http://www.theegg.com/" />
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="test.html" 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="filename.jpg" 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="http://www.theegg.com"><img src="logo.gif"
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 <
© ©
™ ™


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: http://www.ajaxdaddy.com/
• Run on users’ end – browser matters

JavaScript Example: GMail
Backend Languages
Language Cue
PHP .php
ASP / ASP.NET .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?

That All SEO Should Know

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

That All SEO Should Know

Caricato da

Copyright:

Formati disponibili

< HTML >

that all SEO should know

• HTML is the language of the web

• So what does “Markup Language” mean?

The quick brown fox jumps Line break

over the lazy dog

The quick brown fox jumps <br Line

<title>keyword keyword – brand</title>

Page topic <h1>

<h1>HTML for SEO</h1>

<a href="test.html" rel="nofollow"

<img src="filename.jpg" alt="keyword"

<br /> Line break (new line)

• E.g.: Google Instant, Google Suggestion, Gmail,

• Run on users’ end – browser matters

• IE: install Notepad++

• Inspect code side by side

• Disable JavaScript, CSS, images…

Potrebbero piacerti anche