1

HTML5 & SEO in WordPress Development

What You Need To Know

Fundamentals of WordPress SEOOn-Page SEO

On Keywords & SEOPage TitleURL (Pretty Permalinks)Headers (H1, H2, H3, etc)Meta DescriptionMeta Keywords

2

Making SEO Easy in WordPress

3

Just Add Keywords

4

Page Title: Use Keywords Up FrontMake sure the page titles display “up front”“YourWebsite| Keyword Rich Page or Post

Title”

5

<title> <?php wp_title(' | ',true,'right'); ?> <?php bloginfo('name'); ?> </title>

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

URL: Use Pretty PermalinksAlways make sure to use Pretty PermalinksMake sure to use Blog Post / Page Title in

the URLSettings >> Permalinks/%postname%/ /%category%/%postname%/

6

http://yourwebsite.com/?p=123http://yourwebsite.com/archives/123

http://yourwebsite.com/keyword-rich-post-name/

Headers: Display as Post TitlesSingle.phpStyle.css

7

<h1 class="title"><?php the_title(); ?></h1>

Meta Description: Make it Relevant

8

<meta name="description" content="<?php bloginfo('description'); ?>" />

<?php if (is_single() || is_page() ) : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><meta name="description" content="<?php the_excerpt(); ?>" /><?php endwhile; endif; elseif(is_home()) : ?><meta name="description" content="<?php bloginfo('description'); ?>" /><?php endif; ?>

Meta Keywords

9

10

HTML5 & SEO in WordPress Development

Moving to HTML5 & Semantic Search

11

HTML5 Isn’t Scary

A few tags to think about:<header> / <footer><hgroup><nav><article><section><time><aside>

12

SEO Isn’t Scary

Building for the Right KeywordsLink BuildingToday’s Topics:Help SEs Understand Your LayoutHaving an Optimized Site

13

Our Goal: A Clear Layout

14

Breaking Them Down

15

What do we need to know?

Semantic Search Is ComingAs developers, we want to be on

the forefront of it (and our customers want to, too!)

You Can’t Fool SEs (for long)

16

What about backwards compatibility?HTML5 rolls back to older browsers pretty

well, with the exception of older versions of IE

17

What about backwards compatibility?IE7 and 8 have no built-in HTML5

semantic tag supportIE9 fixes thisWhy this is a problem: IE doesn’t style

unrecognized elementsUntil then: Elements created via JS will be

recognized & styledSee Remy Sharp’s script in the notes

18

How does HTML5 help? Replace layered divs with article,

section, and related tags Semantic tags give the SEs inside

infoFor the first time, a search engine

can now tell where the main article is, what your header is, etc.

Comments can be read separately and understood

19

How does HTML5 help? Semantic Search: What if every

page result could look like IMDB results?

20

What does this look like in WP?

21

What does this look like in WP?

22

Often-Missed SEO Factors

Page load timePage render timeImproving these two factors

will yield more indexed pages, more crawl time, and better rankings

23

Simplify, simplify

Identify what takes a long timeReduce / Reuse Javascript & CSSOptimize images

24

Identify What Takes Your TimeFirebug: “Net” FunctionCalled “Profiler” in IE or “Timeline” in

SafariWill help you pinpoint the bad pointsSocial Media-related JS is popular…

But it has a high costYou become dependent on their uptime

and their load

25

Optimize Your ImagesMake sure you are using web-safe

images that are compressed properlyAvoid images when possible & use CSSStick with PNG unless it’s a photo or you

need transparencyFor computer-generated images, JPEG

can be 33-50% bigger and will have more artifacts

26

What Else Can I Do To Get Faster?

If you’re coding a theme for just one site, you have a lot of options!

Hardcode Names & Values Optimize Your CSS/JS Make sure you’re using server-side

caching

27

Sources/Further Reading

Anatomy of an HTML5 WordPress theme

Website Optimization: The Why and How (Part II)

CSSOptimiser.com

HTML5 & CSS3

28

Sources/Further ReadingDive Into HTML5 by Mark Pilgrim

Remy Sharp’s Script for enabling HTML5 in IE

A List Apart: Preview of HTML5