Talk for SMX Sydney Australia

1. WEB DESIGN FOR SEO
The winning process for building
websites that perform in Organic Search
MICHAEL KING
DIRECTOR OF INBOUND MARKETING
@ipullrank

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

3. 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

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

5. 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

6. 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

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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. DESIGN FAILS
#FACEPALM
@ipullrank

15. 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

16. 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

17. 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

18. 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

19. 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

20. PROCESS FOR SUCCESS
I’LL SHOW YOU HOW TO DO THIS, SON!
@ipullrank

21. 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

22. OPPORTUNITY DISCOVERY
BUSINESS GOALS
MARKET RESEARCH
AUDIENCE RESEARCH
KEYWORD RESEARCH
@ipullrank

23. 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

24. 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

25. 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

26. 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

27. CONTENT STRATEGY & DEVELOPMENT
KEYWORD MAPPING
INFORMATION ARCHITECTURE
CONTENT IDEATION
CONTENT BUILD
@ipullrank

28. OUTPUT – SEO COPY BRIEF
This Document outlines a keyword-relevant information architecture, objective, audience, key performance
indicators and best practices for content development.
@ipullrank

29. 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

30. 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

31. DOES IT WORK?
WHY, YES IT DOES!
@ipullrank

32. 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

33. 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

34. 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

35. 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

36. CASE STUDY – RESULTS
Bookings
Organic Traffic
We improved rankings and conversions dramatically by marrying these concepts.
@ipullrank

37. PRO TIPS
ACTIONABLE STUFF
@ipullrank

38. 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

39. 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

40. 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

41. 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

42. 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

43. 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

44. 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

45. 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

46. 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

47. THE FINAL WORD
BUILD FOR PEOPLE,
ACCOUNT FOR ROBOTS
@ipullrank

48. MICHAEL KING
Director of Inbound Marketing
www.iacquire.com
mike@iacquire.com
@iPullRank
THANK YOU / Q&A