Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Best Practices for Mobile Sites

15,529 views

Published on

Learn some of the most important factors to consider while designing mobile websites. From speed to SEO.

The best practices to create and promote mobile websites.
Factors to consider while making mobile friendly sites
How to do SEO for mobile sites

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Best Practices for Mobile Sites

  1. 1. Best Practices for Mobile Sites Navneet  Kaushal   CEO   PageTraffic  
  2. 2. The  Mobile   Landscape  
  3. 3. ½  billion  mCommerce  shoppers  by  2016   71%  of  smartphone  users  shop  on  their  mobile   48%  of  retail  shopping  already  on  mobile  
  4. 4. Mobile search business Case More  than  1  out  of  every  3  searches  is  on  a  mobile  device  
  5. 5. Good Practices to Maximize your Mobile SEO Mobile  Search  has  Exploded  
  6. 6. Good Practices to Maximize your Mobile SEO Mobile  Search  has  Exploded   Take  a  Look   hGp://www.themobileplaybook.com/  
  7. 7. 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.”  
  8. 8. 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 info@pureoxygenlabs.com
  9. 9. “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  
  10. 10. Desktop  results   Mobile  results  
  11. 11. 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  
  12. 12. Choosing  a  mobile   setup  
  13. 13.     Select  the  Best  Mobile  Site  Architecture  
  14. 14. Good Practices to Maximize your Mobile SEO All  of  them  have  Pros,  Cons  &  SEO  Best  PracYces  
  15. 15. Good Practices to Maximize your Mobile SEO Select  the  Most  Suitable  for  You  
  16. 16. Good Practices to Maximize your Mobile SEO Validate  with  the  previously  idenYfied  informaYon,     your  content  needs  &  technical  capacity.   Select  the  Most  Suitable  for  You  
  17. 17. 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  
  18. 18. Just  because  Google  strongly   recommends  using  responsive   design  doesn’t  mean  you  should   automaEcally  choose  responsive   design  for  your  site  
  19. 19. hGps://www.google.com/webmasters/tools/mobile-­‐friendly/  
  20. 20. Crawl  your  site  using  GoogleBot’s  mobile  User  Agent  
  21. 21. 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  
  22. 22. 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  
  23. 23. Tag Mobile Pages
  24. 24. 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
  25. 25. Canonical Link Markup: Just Do It
  26. 26. 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!  
  27. 27. 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
  28. 28. Website: www.pagetraffic.com Email: navneet@pagetraffic.com Twitter: @navneetkaushal Blog: www.pagetrafficbuzz.com Facebook: www.facebook.com/pagetraffic.in THANK YOU!

×