Scribd
Upload
117 views

That All SEO Should Know

HTML is the language of the web it s EASY! HTML Basics what is HTML? HTML XHTML SGML XML 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 over the lazy dog.

Uploaded by

mangoshaker
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
117 views

That All SEO Should Know

HTML is the language of the web it s EASY! HTML Basics what is HTML? HTML XHTML SGML XML 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 over the lazy dog.

Uploaded by

mangoshaker
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 31

< 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)


&nbsp; No-breaking space

<p> Paragraph
<div> Division
Others: Special Characers

&quot; "
&amp; %
&gt; and &lt; > and <
&copy; ©
&trade; ™

<!-- 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: 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?

You might also like