web design for seo
TRANSCRIPT
WEB DESIGN FOR SEO
The winning process for building
websites that perform in Organic Search
MICHAEL KING
DIRECTOR OF INBOUND MARKETING
@ipullrank
@ipullrank
DOWNLOAD THIS DECK:
http://slidesha.re/seo-design
@ipullrank
MEET 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/
Hi, I’m
Gary!
What’s up
Sydney?!
I’m
Cogswell!
@ipullrank
WHAT’S THE BIG DEAL? WHY DO I HAVE TO BUILD A SITE FOR SEO?
@ipullrank
MY GENERAL STANCE
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.
“Building a user
experience without SEO
in mind is like building a
car with no engine.”
@ipullrank
BUT ADAM AUDETTE MAKES A GREAT POINT
Read more about @audette’s stance http://www.rimmkaufman.com/blog/make-seo-invisible/04042012/
“SEO should be an
invisible layer beneath a
strong user experience, a
beautiful site, and a clear,
coherent message and
purpose.”
@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
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
Hey Gary, you
gonna ask for
his autograph …
@ipullrank
EXAMPLE OF GOOGLEBOT BEING SMART
This site renders meta data using JSON objects which means page titles and descriptions are populated at load,
but Google still has them indexed.
That
Googlebot is
so awesome!
@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…
Build compelling user experiences designed with utility for people, but account for search engine robots as well.
MORE OF THIS LESS OF THIS
@ipullrank
DESIGN FAILS #FACEPALM
@ipullrank
THE NAVIGATION FROM HELL
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.
2012 - LG US finally gets faceted navigation
@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
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.
I guess they can
just blame it on
the brownies…
Too soon?
@ipullrank
YOU CAN’T WIN ‘EM ALL
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…
2012 version is a little better
2011 version was a giant flash movie
@ipullrank
PROCESS FOR SUCCESS I’LL SHOW YOU HOW TO DO THIS, SON!
@ipullrank
THE NEW SEO PROCESS
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
Opportunity Discovery
Content Strategy /
Development
Technical Development
Social Strategy /
Implementation
Measurement
Optimization
@ipullrank
OPPORTUNITY DISCOVERY
BUSINESS GOALS
MARKET RESEARCH
AUDIENCE RESEARCH
KEYWORD RESEARCH
@ipullrank
USE SOCIAL LISTENING TOOLS
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
Scout Labs
Social Mention
Alterian SM2
@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
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.
SITE MIGRATION CONSIDERATIONS
QUALITY ASSURANCE
Perform an
implementation
audit once the
site is built
@ipullrank
DOES IT WORK? WHY, YES IT DOES!
@ipullrank
CASE STUDY – AUDIENCE RESEARCH
We used social listening to identify need states and build personas which then dictated SEO, content strategy and
User Experience.
Research Decision-
making Booking Pre-flight Travel Post-travel
Motivation
to travel
Need
Sta
tes
E
xam
ple
s o
f Wh
at’s
hap
pen
ing
Occasion: -Season/Holiday
-NY’ eve
-Valentine’s D
-Honeymoon
-Birthday gift
-Anniversary
-Stag do
-Reunion
-Accomplishment
-Time off
Experience: -Broaden horizon
-Hobby/skill
-Well-being/R&R
-Adventure
-Landscape (sea, mountain,
plant)
-Weather (sun, snow, wind)
Get Ideas: From friends,
family,colleagues, extended
social media network,
bloggers, TV personalities,
movies, activity groups &
forums
Search for: Occasion or experience
sought on google,
publications, forums, social
media groups,etc
Search for: Activity and experience
options at different
destinations
Compare: Destination options based on
timings, costs, and ease of
getting there
Search for: -Cheapest flight options
based on timings
- Cheapest flight options
based on destination (look for
promos and time suggestions)
Compare: Time options vs. budget
across key providers
Commit: To a scenario
Locate: Key trip info:
-Luggage rules
-Check in time
-Terminal to go to
-Currency exchange
-Ways to and from airport
-Travel tips
Book: -Car hire
-Accommodation
-Airport bus
Manage: Info updates, efficient and
easy task completion
Connect: -With local info
-With resources (guides,
gurus)
-Activity ideas
Record: -Experiences
-Memories
-New ideas, contacts,
knowledge
Organize: -Memories/events
-Evidence you’ve been there/
Memorabilia
-New ideas
Package: Trip takeouts so as to extend
the benefits gained from the
trip
Share: To build on and showcase
who you are
I want to collect new experience, add to my personal story, and create special
memories
What is out there that would be fun and interesting to do
alone and/or with the people I care about?
Of the options available, what is
feasible given time & budget constraints?
Who’s going to help me fine tune and
make the plan possible?
What do I need to do to activate my trip so
that it’s as easy as possible?
Who can I rely on to help me make the most of my trip?
How do I crystallize my travels so that they are easy to
share, and provide inspiration to me and
others evermore?
Inspiration Research Commitment Experience
1. 2. 3. 4 5. 6. 7.
@ipullrank
CASE STUDY – INFORMATION ARCHITECTURE
We identified the need state matched the client’s business goals and mapped them to semantic groups to dictate
the information architecture.
Occasion Activity Destination Offering Simplify Connect Remember
Flights
Logistics
City/Airport
Cheap Flights
Timing
Country/Region
Core Semantic Groups
Research Decision-
making Booking Pre-flight Travel Post-travel
Motivation
to travel
1. 2. 3. 4 5. 6. 7.
@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
We built a user experience indicative of these considerations
Navigation and sub-
navigation reflect
need states
UX and content
developed with the
concerns of our
personas
@ipullrank
CASE STUDY – RESULTS
We improved rankings and conversions dramatically by marrying these concepts.
Bookings
Organic Traffic
@ipullrank
PRO TIPS ACTIONABLE STUFF
@ipullrank
SPEAK YOUR TEAM’S LANGUAGE
Explain SEO recommendations in context of things that matter to your team to get them to actually move on
initiatives that impact SEO.
“We need to implement
ALT attributes so Google
can understand images”
“We need ALT tags on
images to comply with
Users with Disabilities
mandates.”
Your team won’t
care about ALT
tags this way.
But they will
care if there
are potential
legal issues!
@ipullrank
THE EXPANDABLE DIV IS YOUR FRIEND
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
Matt Cutts
says this just
fine!
@ipullrank
USE WEB SAFE FONTS
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
http://www.typekit.com
http://www.google.com/
webfonts
@ipullrank
USE HTML5 PUSHSTATE() FOR AJAX
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
Malie Ohye
says this is
okay!
@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
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.
Shout out to
@usethedorr
for making us
fast!
@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
MICHAEL KING Director of Inbound Marketing
THANK YOU / Q&A
@iPullRank
www.iacquire.com