Best practices for Mobile Sites

Best Practices for Mobile Sites

Navneet Kaushal CEO PageTraffic

The Mobile Landscape

½ billion mCommerce shoppers by 2016 71% of smartphone users shop on their mobile

48% of retail shopping already on mobile

Mobile search business Case

More than 1 out of every 3 searches is on a mobile device

Good Practices to Maximize your Mobile SEO

Mobile Search has Exploded


Mobile Search has Exploded

Take a Look hGp://www.themobileplaybook.com/

And SEO Became Mobile-Optimized

“…we plan to roll out several ranking changes in the near future that address sites that are misconfigured for smartphone users.”

6% of the Fortune 100 are Ready

http://www.pureoxygenmobile.com/research-two-thirds-of-the-fortune-100-are-not-mobile-optimized-for-google

Request a copy of the research at [email protected]

“36% of mobile web search results vary from desktop, with 23% showing pages from completely different sites”

Data provided by SearchMetrics from their 2014 US Google Ranking Factors Study

Desktop results Mobile results

Googlebot Mobile

Crawling Errors

Changes in Mobile Rankings

2014 2013 2012

Mobile Results & Test Tool

PageSpeed Insights

Indexing Android Apps Mobile

Usability

2011 2015

Usability Warnings

Mobile Search Queries Stats

Warnings for Flash Sites

Faulty Redirects

Choosing a mobile setup

Select the Best Mobile Site Architecture


All of them have Pros, Cons & SEO Best PracYces


Select the Most Suitable for You


Validate with the previously idenYfied informaYon, your content needs & technical capacity.

Select the Most Suitable for You

Responsive Separate URLs Dynamic Serving •  ALL devices •  1 URL •  Same Content/HTML •  Use CSS to render pages

•  Separate Mobile & Desktop URLs example.com/m/ m.example.com •  Different HTML

•  All devices •  1 URL •  different HTML (and CSS)

depending on user agent (desktop or mobile device)

Pros

•  1 URL •  Easier to maintain •  Link ConsolidaYon •  No Redirects > Reduce Loading

Time •  Recommended By Google (saves

resources, pages crawled once)

•  BeGer Mobile Experience •  Faster •  Dedicated Mobile Content •  Easier ImplementaYon

•  1 URL •  Link ConsolidaYon •  Capacity for different mobile

content

Cons

•  Slower •  All content is downloaded

whether it is used or not. This can be problemaYc for image intensive websites

•  Same Mobile/Desktop Content

•  Link Equity DiluYon •  Higher Cost to maintain •  Crawled MulYple Times with

different user agents

•  Slower •  Higher Cost to maintain •  Old Redirect Lists •  Complex technical

implementaYon •  Crawled MulYple Times

SEO

•  Check Google Webmaster Tools Crawl Errors for Redirect & 404 Errors

•  Check Page Load Time for Mobile and Desktop

•  Allow Search Engines to crawl all assets (CSS, Images, JS)

•  Redirect Mobile Users and Bots to the mobile site

•  Test Desktop Site for Redirects & 404 Errors

•  Add Rel=Alternate to desktop and rel=Canonical to mobile site

•  XML Mobile Sitemaps

•  Use user-‐agent vary header to help search bots to find your mobile content

•  Test for Vary: User-‐Agent HTTP Header

Source: John Shehata, ExecuEve Director of Search at ABC News

Just because Google strongly recommends using responsive design doesn’t mean you should automaEcally choose responsive

design for your site

hGps://www.google.com/webmasters/tools/mobile-‐friendly/

Crawl your site using GoogleBot’s mobile User Agent

If you are using separate URLs for your desktop and mobile sites, make sure you have the correct rel=“alternate” annotaYon on the desktop site. This will ensure that the mobile version of the site appears in mobile search

Non-‐mobile friendly URL in mobile search. Desktop homepage is missing the rel=“alternate” tag

According to research from BrightEdge:

According to BrightEdge, 72% of sites with separate mobile URLs are misconfigured, with a missing rel=“alternate” tag being the most common error

Source: BrightEdge

Tag Mobile Pages

Tag Pages with Canonical Markup

What Google says…•  Canonical markup helps make content visible to bots

and searchers•  If you have an “m.” mobile site:

•  Each desktop page should contain a "rel=alternate" link meta tag that points to the mobile URL

•  Each mobile page should contain a "rel=canonical" meta tag that points to the desktop URL

•  Alternatively add notation to Sitemaps file•  Consider Javascript redirects that match on link value

Canonical Link Markup: Just Do It

Some Best Practices •  Follow the "m" convenYon (m.novarelibrary.com OR lifeonterra.com/m/)

•  Keep categories (directories) short. Remember that you are creaYng a page

that people touch without much typing

•  Limit image and markup sizes

•  Limit HTML pages to 25KB to allow for caching

•  "Minify" your scripts and CSS (JSLint, CleanCSS)

•  Link to Full Site

•  Sniff for User Agent – DetecYon (allow the user to decide where to go)

•  One Column Layout with some whitespace

•  Mobile refers to the user!

MOBILE SEO TIPS •  SEPARATE URLS? •  On the desktop page, add the link rel=”alternate” tag pointing to

the corresponding mobile URL. This helps Googlebot discover the location of your site’s mobile pages.

•  This tag specifies an alternative URL to the desktop page.

•  <link rel="alternate" href="hGp://m.example.com/" />

•  On the mobile page, add a rel=”canonical” tag pointing to the corresponding desktop URL. This rel=”canonical” tag on the mobile URL pointing to the desktop page is required as it signals the relationship between the two URLs

Ø <link rel=“canonical” href=hGp://www.example.com/” />

*maintain a 1-to-1 ratio between the mobile page and the corresponding desktop page

Website: www.pagetraffic.com Email: [email protected] Twitter: @navneetkaushal Blog: www.pagetrafficbuzz.com Facebook: www.facebook.com/pagetraffic.in

THANK YOU!

Best practices for Mobile Sites

Documents