Web Design for SEO

WEB DESIGN FOR SEO
The winning process for building
websites that perform in Organic Search

MICHAEL KING
DIRECTOR OF INBOUND MARKETING
@ipullrank

DOWNLOAD THIS DECK:
http://slidesha.re/seo-design

@ipullrank

MEET GARY & COGSWELL

What’s up
Sydney?!
Hi, I’m I’m
Gary! Cogswell!

Before we get started I wanted to introduce you to Gary & Cogswell, the stars of a new SEO comic strip that I
write on the iAcquire blog. Check them out! http://blog.iacquire.com/

@ipullrank

WHAT’S THE BIG DEAL?
WHY DO I HAVE TO BUILD A SITE FOR SEO?

@ipullrank

MY GENERAL STANCE

“Building a user
experience without SEO
in mind is like building a
car with no engine.”

After arguing with Creative Directors for years about the importance of SEO, I’ve settled on this analogy to get my
point across. Large brands especially rely on paid media and neglect SEO leaving their sites stranded once
campaigns end.

@ipullrank

BUT ADAM AUDETTE MAKES A GREAT POINT

“SEO should be an
invisible layer beneath a
strong user experience, a
beautiful site, and a clear,
coherent message and
purpose.”

Read more about @audette’s stance http://www.rimmkaufman.com/blog/make-seo-invisible/04042012/

@ipullrank

SEO IS NOT AN EXCUSE FOR BAD UX

User Experience is only compromised by SEO when it is retrofitted into the design process. SEO absolutely must
be baked in as early as possible.

@ipullrank

SEARCH IS ABOUT PEOPLE

People search to fulfill specific needs; build websites that fulfill those needs atop of strong technical SEO and you
will always be ahead of the algorithm

@ipullrank

EVERY PAGE IS A LANDING PAGE

Every page on any site is an opportunity to rank for a keyword and drive traffic. Therefore SEO is largely about
preparing every page to earn its keep and support the rest of the site by attracting visitors.

@ipullrank

GOOGLEBOT IS SMARTER THAN YOU THINK

Hey Gary, you
gonna ask for
his autograph …

I wrote an article for SEOmoz building on research by Joshua Giardino (@techarity) called “Just How Smart Are
Search Robots?” that examined the large possibility that Googlebot and Bingbot are headless web browsers.
Read all about it: http://www.seomoz.org/blog/just-how-smart-are-search-robots

@ipullrank

EXAMPLE OF GOOGLEBOT BEING SMART

That
Googlebot is
so awesome!

This site renders meta data using JSON objects which means page titles and descriptions are populated at load,
but Google still has them indexed.

@ipullrank

PANDA & ABOVE THE FOLD ALGO UPDATES

Panda and the Above the Fold updates are clear indications that Google is visually examining pages and including
user metrics as a proxy for the quality of user experience.

@ipullrank

HEAL THE WEB, MAKE IT A BETTER PLACE…

LESS OF THIS MORE OF THIS

Build compelling user experiences designed with utility for people, but account for search engine robots as well.

@ipullrank

DESIGN FAILS
#FACEPALM

@ipullrank

THE NAVIGATION FROM HELL

2012 - LG US finally gets faceted navigation

LG’s website featured 1997-esque recreation of framed navigation that’s hard to properly mouseover and leaves
every page with nearly 400 links. More recently LG US finally rolled out faceted navigation with less links on the
page, unfortunately other countries haven’t.

@ipullrank

FLASH FOR NO REASON

The full functionality of Alison Carmichael’s site could been created using HTML, CSS and JavaScript. As it stands
Googlebot is will not index the content this site.

@ipullrank

VIDEO, BUT NO TRANSCRIPT

Google cannot see video. It is very important to provide text-related content around videos. Transcripts are the
easiest way to do this. Check out https://www.speechpad.com/ for this.

@ipullrank

THE GIANT IMAGE

I guess they can
just blame it on
the brownies…
Too soon?

This site was launched as a part of an awesome Fiber One viral video campaign featuring Cheech & Chong on a
Magic Brownie Adventure, but all of the text is on one really large image and the page didn’t even have a title tag.

@ipullrank

YOU CAN’T WIN ‘EM ALL

2011 version was a giant flash movie

2012 version is a little better

Sometimes you have to bite your tongue and wait for a redesign, but sometimes that redesign finally comes and
it’s still a mess. Sigh…

@ipullrank

PROCESS FOR SUCCESS
I’LL SHOW YOU HOW TO DO THIS, SON!

@ipullrank

THE NEW SEO PROCESS

Opportunity
Discovery
Optimization

Content
Measurement Strategy /
Development

Social
Strategy /
Implementati Technical
on Development

I recently wrote about what I call the New SEO Process and designing for SEO falls into the Opportunity
Discovery, Content Strategy/Development and Technical Development phases. Read the post:
http://www.seomoz.org/blog/the-new-seo-process-quit-being-kanye

@ipullrank

OPPORTUNITY DISCOVERY

BUSINESS GOALS
MARKET RESEARCH
AUDIENCE RESEARCH
KEYWORD RESEARCH

@ipullrank

USE SOCIAL LISTENING TOOLS

Scout Labs

Alterian SM2

Social Mention

Use social listening tools to perform audience research to understand what your audience is truly looking for.
Social Mention and Topsy are free http://www.socialmention.com & http://www.topsy.com

@ipullrank

PERSONAS

Personas are representations of the user segments in a website’s target audience based on market research and
business goals. Typically 4 personas with defining attributes and alliterated names like “Professional Pam” are the
output.

@ipullrank

THE CUSTOMER DECISION JOURNEY

Where a user is in the customer decisions journey is called their “need state.” Need states can be explicitly
spelled out per keyword and should be as part of the keyword portfolio. Need states can also be custom.

@ipullrank

OUTPUT – KEYWORD PORTFOLIO

The Keyword Portfolio is a spreadsheet that outlines keyword opportunities by search volume, current ranking,
landing page, need state, and target segment.

@ipullrank

CONTENT STRATEGY & DEVELOPMENT

KEYWORD MAPPING
INFORMATION ARCHITECTURE
CONTENT IDEATION
CONTENT BUILD

@ipullrank

OUTPUT – SEO COPY BRIEF

This Document outlines a keyword-relevant information architecture, objective, audience, key performance
indicators and best practices for content development.

@ipullrank

OUTPUT – ANNOTATED WIREFRAMES

The wireframes are your opportunity to make sure the site is visually adhering to SEO recommendations and the
place for dev and creative teams to make sure they are doing things right

@ipullrank

TECHNICAL IMPLEMENTATION

SITE MIGRATION CONSIDERATIONS
QUALITY ASSURANCE
Perform an
implementation
audit once the
site is built

At this point, you will have laid down all SEO considerations.. Site migrations are to handle all 301 redirects. All
that remains is ensuring that everything is implemented correctly.

@ipullrank

DOES IT WORK?
WHY, YES IT DOES!

@ipullrank

CASE STUDY – AUDIENCE RESEARCH

1. 2. 3. 4 5. 6. 7.
Motivation Decision-
Research Booking Pre-flight Travel Post-travel
to travel making

How do I crystallize

Need States
I want to collect new What is out there that Who’s going to help What do I need to do my travels so that
Of the options Who can I rely on to
experience, add to would be fun and me fine tune and to activate my trip so they are easy to
available, what is help me make the
my personal story, interesting to do make the plan that it’s as easy as share, and provide
feasible given time & most of my trip?
and create special alone and/or with the possible? possible? inspiration to me and
budget constraints?
memories people I care about? others evermore?

Occasion: Get Ideas: Search for: Search for: Locate: Connect: Organize:

Examples of What’s happening
-Season/Holiday Key trip info: -With local info -Memories/events
From friends, Activity and experience -Cheapest flight options
-NY’ eve -Luggage rules -With resources (guides, -Evidence you’ve been there/
family,colleagues, extended options at different based on timings
-Valentine’s D -Check in time gurus) Memorabilia
social media network, destinations - Cheapest flight options
-Honeymoon -Terminal to go to -Activity ideas -New ideas
bloggers, TV personalities, based on destination (look for
-Birthday gift movies, activity groups & promos and time suggestions) -Currency exchange
-Anniversary forums -Ways to and from airport
-Stag do Compare: -Travel tips
Package:
-Reunion Destination options based on Record:
-Accomplishment timings, costs, and ease of Compare: -Experiences Trip takeouts so as to extend
-Time off Search for: getting there Time options vs. budget Book: -Memories the benefits gained from the
trip
Occasion or experience across key providers -New ideas, contacts,
-Car hire knowledge
sought on google,
-Accommodation
Experience: publications, forums, social
-Airport bus
-Broaden horizon
media groups,etc
Commit: Share:
-Hobby/skill To a scenario To build on and showcase
-Well-being/R&R
-Adventure
Manage: who you are

-Landscape (sea, mountain, Info updates, efficient and
plant) easy task completion
-Weather (sun, snow, wind)

Inspiration Research Commitment Experience

We used social listening to identify need states and build personas which then dictated SEO, content strategy and
User Experience.

@ipullrank

CASE STUDY – INFORMATION ARCHITECTURE

1. 2. 3. 4 5. 6. 7.
Motivation Decision-
Research Booking Pre-flight Travel Post-travel
to travel making

Occasion Activity Destination Offering Simplify Connect Remember

Core Semantic Groups

Flights

Country/Region Logistics

Timing
City/Airport

Cheap Flights

We identified the need state matched the client’s business goals and mapped them to semantic groups to dictate
the information architecture.

@ipullrank

CASE STUDY – KEYWORD RESEARCH

Identify what people want and present it in a way that matches their expectations using the language they expect
in order to provide the best user experience to your target audience and improve conversion.

@ipullrank

CASE STUDY – SITE DEVELOPMENT

Navigation and sub-
navigation reflect
need states

UX and content
developed with the
concerns of our
personas

We built a user experience indicative of these considerations

@ipullrank

CASE STUDY – RESULTS

Bookings

Organic Traffic

We improved rankings and conversions dramatically by marrying these concepts.

@ipullrank

PRO TIPS
ACTIONABLE STUFF

@ipullrank

SPEAK YOUR TEAM’S LANGUAGE

“We need to implement “We need ALT tags on
ALT attributes so Google images to comply with
can understand images” Users with Disabilities
mandates.”

Your team won’t
But they will
care about ALT
care if there
tags this way.
are potential
legal issues!

Explain SEO recommendations in context of things that matter to your team to get them to actually move on
initiatives that impact SEO.

@ipullrank

THE EXPANDABLE DIV IS YOUR FRIEND

Matt Cutts
says this just
fine!

Use the expandable DIV to allow large blocks of text in your design without having them to obtrusive. See this in
action at http://www.lg.com/us/laundry/laundry-tips.jsp

@ipullrank

USE WEB SAFE FONTS

http://www.google.com/
webfonts
http://www.typekit.com

Typekit was recently acquired by Adobe. There’s no reason to use them at this point. They have a large amount of
fonts. If not them then check out the Google Font API

@ipullrank

USE HTML5 PUSHSTATE() FOR AJAX

Malie Ohye
says this is
okay!

Use this HTML5 function to dynamically update the page’s URL whenever certain AJAX events happen to ensure
that the page is crawlable and link-friendly. Read @robousbey’s post about it: http://www.seomoz.org/blog/create-
crawlable-link-friendly-ajax-websites-using-pushstate

@ipullrank

USE STANDARD META DATA

Page titles and Meta Descriptions are still the first impression you get to make on a user to encourage them to
click through to your site.

@ipullrank

USE FACEBOOK META DATA

Facebook Metadata is the first impression your page will make on users that discover your page via Facebook.
Put your best foot forward. Use the Open Graph Helper Bookmarklet to check your FB Meta Data
http://ipullrank.com/open-graph-helper/

@ipullrank

OPTIMIZE FOR SITE SPEED

Shout out to
@usethedorr
for making us
fast!

The site speed plugin for Chrome & Firefox provide explicit insights into how to improve the speed of a site. Use
these to ensure that your design is optimized for speed.

@ipullrank

USE MICROFORMATS (SCHEMA.ORG)

Search Engines are making a large attempt to move to object-orient the web and are rewarding sites by placing
annotations and images in the SERPs. Embrace these in your site builds. http://www.schema.org

@ipullrank

USE PAGINATION MARKUP

For paginated content tell Google what are the component pages and the view all page. Watch Maile Ohye’s
video - http://www.youtube.com/watch?v=njn8uXTWiGg

@ipullrank

THE FINAL WORD

BUILD FOR PEOPLE,
ACCOUNT FOR ROBOTS

@ipullrank

MICHAEL KING
Director of Inbound Marketing

www.iacquire.com

mike@iacquire.com

@iPullRank

THANK YOU / Q&A

Web Design for SEO

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Web Design for SEO (20)

More from Michael King (18)

Recently uploaded (20)

Web Design for SEO