Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session

@timcannon
#SESATL
Overview: De-Mystifying Mobile Technical Architecture
• 2014 mobile trends
• Defining the popular methods for mobile enabled websites
• What the does Google say about mobile sites?
• Advantages of the most popular methods
• Frameworks to consider
• SEO considerations
• Performance considerations

@timcannon
#SESATL
Mobile Usage as % of Web Usage, by Region, 5/14

@timcannon
#SESATL
Global PC (Desktop / Notebook) and Tablet Shipments
by Quarter | Q1:95 – Q4:13

@timcannon
#SESATL
Global Users of TVs vs. Mobile Phones vs.
Smartphones vs. PCs vs. Tablets, 2013

@timcannon
#SESATL
Smartphones and tablets together command
1/3rd of organic search traffic
+ =
Source: Brightedge Mobile Share Report – 6/14

@timcannon
#SESATL
On average, 62 percent of organic searches
show different results depending on
whether the search was performed on a
desktop or smartphone

@timcannon
#SESATL
Carefully decide which mobile approach is right for you &
make sure you implement it correctly.
72%
% of mobile site configuration errors
dedicated mobile dynamic responsive
30%

@timcannon
#SESATL
What are the most popular methods to enable your website
for mobile?
Dedicated Mobile - Created specifically to provide an optimized design to
mobile devices. Usually this a completely different set of source code
than the main website and has its own domain/URL.
Responsive - Creates a fluid layout that changes and responds to
different screen and device sizes. The key elements are
incorporating CSS3,media queries and fluid grids to accomplish this
goal.
Adaptive/Dynamic - This one gets thrown around a lot and
seems to mean something different, depending on who you
ask. For my purposes today I am defining it as utilizing
dynamic loading using something like server side detection to
serve up different HTML based on device type or platform
type.

@timcannon
#SESATL
What do search engines say about mobile & SEO?
1) Sites that use responsive web design, i.e. sites that serve all devices
on the same set of URLs, with each URL serving the same HTML to all
devices and using just CSS to change how the page is rendered on the
device.
2) Sites that dynamically serve all devices on the same set
of URLs, but each URL serves different HTML (and CSS)
depending on whether the user agent is a desktop or a
mobile device.
3) Sites that have separate mobile and desktop URLs.
Google Officially Supports

@timcannon
#SESATL
What do search engines say about mobile & SEO?

@timcannon
#SESATL
What is the best option for you to mobile enable your website?
Every company is different therefore everyone’s situation is not the same

@timcannon
#SESATL
What is the best option for you to mobile enable your website?
Advantages of Dedicated Mobile
1) Speed – One common argument for building a dedicated mobile
website is that it will be faster than a responsive one.
2) User Experience – If you have a dedicated mobile website you can
completely tailor and customize the user experience to mobile visitors.
3) Cost – A mobile website will not require you to essentially perform a
complete redesign like a responsive site often does therefore costing
you less money.

@timcannon
#SESATL
What are some of the advantages of each mobile approach?
Advantages of Responsive Design
1) Future friendly/Scalable – As different screen sizes and devices
come out, responsive is well suited to accommodate these.
2) SEO benefits – Like we mentioned earlier this is Google’s preferred
method for SEO, but I think it really boils down to having a single URL
which makes everything around SEO much easier.
3) Maintenance – Responsive design allows you to build one website
with a single set of source code which means it is much easier to
manage and maintain.

@timcannon
#SESATL
Looking at responsive frameworks?
Common arguments against…
1) Designer can do a better job
2) Code bloat which leads to slower loading sites
3) Everything looks the same

@timcannon
#SESATL
Common arguments for…
1) Browser compatibility & testing is easier

@timcannon
#SESATL
2) Customizable

@timcannon
#SESATL
1) Browser compatibility & testing is easier
2) Customizable
3) Save time, therefore save money

@timcannon
#SESATL
Bootstrap versus Foundation
Bootstrap
• Open source framework created and managed by Twitter that has
become the most popular framework in terms of responsive websites
using it
• Fluid, grid based system that pretty much has everything you will
ever need for front end development
• Browser support, documentation and development community is
very robust to support any project

@timcannon
#SESATL
Bootstrap versus Foundation
Foundation
• Front-end framework created by Zurb which also uses a fluid, grid
based system and is completely free as well
• Minimalistic approach to frameworks by providing you the basics or
“laying the foundation”
• Browser support, documentation and development community is not
as robust as Bootstrap

@timcannon
#SESATL
SEO Considerations with Responsive Design
• Indexing/Crawlability
• Architecture
• UX/UI

@timcannon
#SESATL
Indexing/Crawlability
• Depending on what approach you take with responsive
design this could be very simple or more complicated.
• Use the Vary header response to tell Google that this
page’s content can “vary” or is different depending on the
type of device/platform that accesses it.
• If your site uses AJAX and more advanced javascript
implement thins like the _escaped_fragement and
pushState to avoid issues.

@timcannon
#SESATL
Architecture
• When performing keyword research identify “mobile
specific” keywords so you include those in your content
and optimization strategy.
• A true native responsive design approach could make
this more difficult, so look at other hybrid approaches like
dynamic serving to accomplish this.
-

@timcannon
#SESATL
UX/UI
In a recent study that included responsive sites like Starbucks and
Engadget. 69% of the sites did not have an acceptable load time.
Source: Trilibis (April 2014)

@timcannon
#SESATL
UX/UI
• Make performance enhancements a priority with your
project since that impacts both user experience &
rankings.
• Remove “app” landing pages after your launch and
replace with “smart” banners if you still want to drive
users to your apps.

@timcannon
#SESATL
Performance Considerations with Responsive Design
Google has specifically mentioned that page load times and user
experience are two variables they are already using or will be using to
rank the mobile web.

@timcannon
#SESATL
• Images - Optimizing your images can be something as
simple as using a better compression method and
defining your image sizes to more complex methods like
SVG vector images or something like Picturefill 2.0.
• TTFB (Time to First Load) - The two most important
things to look at for that are your TTFB (Time to First
Byte) and Critical Render Path. Shoot for under 3
seconds to display everything in the initial viewport.

@timcannon
#SESATL
• Compression/Zipping - An easy performance
improvement you can make is enabling file compression
on your server and zipping up all your css and javascript
files. (GZIP)
• Asynchronous Loading - Separate your javascript from
the rest of the page so you don’t “block” other elements
on the page from loading.

@timcannon
#SESATL
• Conditional Loading - valuable when you have a lot of
content do display to your mobile users, but don’t want to
display or load it until they “need” it.
• Server Side Detection – Use this to determine exactly
what the user needs based on their platform/device and
only serve them what they need based on that info.

@timcannon
#SESATL
For a list of tools & other resources used in the
presentation go to www.healthitjobs.com/sesatl.aspx

Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session

More Related Content

What's hot (16)

Similar to Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session (20)

Recently uploaded (20)

Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session