Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta Session
description
Transcript of 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
@timcannon
#SESATL
@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
Looking at responsive frameworks?
Common arguments for…
1) Browser compatibility & testing is easier
@timcannon
#SESATL
Looking at responsive frameworks?
Common arguments for…
2) Customizable
@timcannon
#SESATL
Looking at responsive frameworks?
Common arguments for…
1) Browser compatibility & testing is easier
2) Customizable
3) Save time, therefore save money
@timcannon
#SESATL
@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
SEO Considerations with Responsive Design
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
SEO Considerations with Responsive Design
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
SEO Considerations with Responsive Design
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
SEO Considerations with Responsive Design
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.
Performance Considerations with Responsive Design
@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.
Performance Considerations with Responsive Design
@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.
Performance Considerations with Responsive Design
@timcannon
#SESATL
For a list of tools & other resources used in the presentation go to www.healthitjobs.com/sesatl.aspx