The Magic of Mobile презентация

Содержание

Agenda Why Mobile, Why Now? Mobile: Site Architecture Mobile: Technical SEO Guidelines Mobile Ranking Factors User Experience Speed/Performance Broken Content Mobile Errors Mobile: App Indexing & Deep Linking Mobile: Analytics

Слайд 1
The Magic of Mobile
2015 | John Shehata
@JShehata
@JShehata - Mobile SEO

Слайд 2Agenda
Why Mobile, Why Now?
Mobile: Site Architecture
Mobile: Technical SEO Guidelines
Mobile Ranking

Factors
User Experience
Speed/Performance
Broken Content
Mobile Errors
Mobile: App Indexing & Deep Linking
Mobile: Analytics & Tools


Слайд 3



John Shehata | @JShehata

Слайд 4Mobile Usage Over Takes Desktop for the First Time in History

Mobile

Usage

Слайд 5






http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

Read: http://moz.com/blog/why-mobile-matters-now
Google Multi-Screen World

Слайд 6Google/Search Engines May be Scaring your Mobile Users Away
Mobile Scare

Слайд 7“Google Mobile Queries May Surpass PC Search This Year”
Matt Cutts
SMX

West, March 2014

Mobile Searches

Слайд 8Search Is #1 Content Discovery Tool For Mobile Users
Source: IAB, Harris
@JShehata

- Mobile SEO

Слайд 9
Mobile-First Design Initiative - Google

Слайд 10
“To improve the search experience for smartphone users and address their

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

Yoshikiyo Kato, Software Engineer, on behalf of Google Mobile Search

Mobile Rankings

Слайд 11

@JShehata - Mobile SEO

Слайд 12April 21 - Mobilegeddon
Significant Mobile Ranking changes
Mobile Friendly Pages
Mobile Usability Errors
App

Indexing & in-app content (Started Already)

No changes in Desktop Rankings

Impact: How much traffic comes to your site from Mobile?

@JShehata - Mobile SEO

Слайд 13at a conference a Googler named Zineb Ait Bahajji recently stated they

expect this update to impact more sites than Panda and Penguin have.

Google recently started sending out mobile usability warning messages in bulk:
Google systems have tested XX pages from your site and found that YY% of them have critical mobile usability errors. The errors on these XX pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.

@JShehata - Mobile SEO

Слайд 14Google Mobile Index
At SMX West, Google’s Gary llyes surprised the crowd:

Google already has plans for a separate mobile index and there is a team already working on it.

He isn’t sure what stage they are at, so Google has nothing to announce about it at this time. (More here: Google is Working on Completely Separate Mobile Index From Desktop Index)

@JShehata - Mobile SEO

Слайд 15




John Shehata | @JShehata

Слайд 16

@JShehata - Mobile SEO

Слайд 18

@JShehata - Mobile SEO

Слайд 191 URL
Easier to maintain
Link Consolidation
No Redirects > Reduce Loading Time
Recommended By

Google (saves resources, pages crawled once)

Slower
Same Mobile/Desktop Content

1. Responsive Sites

Слайд 20Check Google Webmaster Tools Crawl Errors for Redirect & 404 Errors

Allow

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

Check Page Load Time for Mobile and Desktop

Optimize Speed




Responsive Sites - SEO

Слайд 21
Be sure not to block the crawling of any page assets

(CSS, JavaScript, and images) for any Googlebot using robots.txt or other methods.

Being able to fully access these external files will help our algorithms detect your site's responsive web design configuration and treat it appropriately.

@JShehata - Mobile SEO

Слайд 22JavaScript
JavaScript-adaptive: In this configuration, all devices are served the same HTML,

CSS, and JavaScript content. When the JavaScript is executed on the device, the rendering or behavior of the site is altered. If a website requires JavaScript, this is Google’s recommended configuration.

Combined detection: In this implementation, the website uses both JavaScript and server-side detection of device capabilities to serve different content to different devices.

Dynamically-served JavaScript: In this configuration, all devices are served the same HTML, but the JavaScript is served from a URL that dynamically serves different JavaScript code depending on the device’s user-agent.

Read: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design

@JShehata - Mobile SEO

Слайд 231 URL
Link Consolidation
Capacity for different mobile content

Slower
Higher Cost to maintain
Old

Redirect Lists
Complex technical implementation
Crawled Multiple Times


2. Dynamic Serving

Слайд 24Use Vary HTTP header:

It is a hint to search engines to

send mobile-bots to crawl the pages too and discover the mobile content.

It signals to caching servers used in ISPs and elsewhere that they should consider the user agent when deciding whether to serve the page from cache or not.

Read: https://developers.google.com/webmasters/smartphone-sites/details

Dynamic Serving

Слайд 25
Vary Header

Слайд 26User-agent lists need constant maintenance and updating and will not match

new user-agents.

When matching user-agents, it's common to mismatch. A common mistake for sites is to unintentionally treat tablet devices as smartphones.

Automatic Redirects and User-Agent Detection

Слайд 27Don’t Cloak: When detecting the user-agent, the site should detect the

device class or type by looking for the device name in the user-agent string; it should not be looking specifically for Googlebot (or any other bots).

All Googlebot user-agents identify themselves as specific mobile devices, and you should treat these Googlebot user-agents exactly like you would treat these devices.

Read: https://developers.google.com/webmasters/smartphone-sites/redirects
Googlebot- Mobile User-Agents: https://developers.google.com/webmasters/smartphone-sites/googlebot-mobile

Automatic Redirects and User-Agent Detection

Слайд 28Using HTTP redirection (Recommended)
Faster

The redirection is done based on the user-agent

in the HTTP request headers.

It is important to keep the redirection consistent with the rel="alternate" tags

It does not matter if the server redirects with an HTTP 301 or a 302 status code, but use of 302 is recommended whenever possible. (Matt and Maile recommended it)

Redirection Techniques

Слайд 29Using JavaScript redirects (Not Recommended)
Slower

The latency caused by the client side

redirection (first page is downloaded, then JS is parsed and executed before triggering the redirect.

Redirection Techniques

Слайд 30Better Mobile Experience
Faster
Dedicated Mobile Content
Easier Implementation

Link Equity Dilution
Higher Cost to maintain
Crawled

Multiple Times with different user agents

3. Dedicated Mobile Sites

Слайд 31Dedicated Mobile Sites
Bad for monetization of site
When users share mobile URLs

in social media and other places,
and desktop users reach these URLs
They get the mobile version of your site with less ads

@JShehata - Mobile SEO

Слайд 32On the desktop page, add:

add:


Add alternate tags to desktop xml sitemaps as well
http://www.example.com/page-1/

Dedicated Mobile Sites

Слайд 33Create XML Mobile Sitemaps

Use (Screaming Frog) test spider, provide a list

of desktop URLs, and change user-agent to mobile browser.

Offer Users a way to override redirection (A link to full/Desktop site). Track Clicks!!

Make Sure the mobile Site is Spider-able (robots.txt and meta tags)

Dedicated Mobile Sites

Слайд 35Responsive is not the answer to all problems and may not

be suitable for your site/industry yet!!

Googlebot-mobile is only used to crawl feature phones content
Googlebot is used to crawl smartphones content

Even though Google recommends Responsive implementations, they have been pretty clear that they will treat all mobile subdomains, dynamic serving, and responsive web designs (RWD) implementations the same (from a ranking perspective).

If you have no mobile page, show the desktop page


Read: http://googlewebmastercentral.blogspot.com/2014/01/a-new-googlebot-user-agent-for-crawling.html


Word of caution

Слайд 36Moving from separate URLs to Same URLs
Use 301-redirects

Moving from Same URLs

to Separate URLs
Use 302-redirects

READ: https://developers.google.com/webmasters/smartphone-sites/change-configuration

Changing configuration on smartphone websites

Слайд 37Bing
Ideally, there shouldn’t be a difference between the “mobile-friendly” URL and the

“desktop” URL
the site would automatically adjust to the device — content, layout, and all.
That’s why we continue to recommend you use responsive designs over separate mobile (m.*) sites
ensure a great experience for users on all devices and avoid compatibility, readability, and functionality issues. 

http://blogs.bing.com/webmaster/2014/11/20/bing-and-mobile-friends/
http://blogs.bing.com/webmaster/2014/11/03/meet-our-mobile-bots/

@JShehata - Mobile SEO

Слайд 38Google has no specific recommendations for search engine friendly sites.

You can

use any of the 3 approaches

Serve tablet users the desktop version (or if available, the tablet version).

Read: https://developers.google.com/webmasters/smartphone-sites/tablets

Tablets

Слайд 39




John Shehata | @JShehata

Слайд 40SEO Traditional Ranking factors

Important Ranking Factors
Mobile Friendliness
Mobile Usability
Mobile Speed/Performance

Negative Mobile SEO

Factors
Mobile Errors
Broken Content



Mobile Ranking Factors

Слайд 41




John Shehata | @JShehata

Слайд 42Test your site @ Google Mobile-Friendly Test Tool
https://www.google.com/webmasters/tools/mobile-friendly/
Blocked Internal Resources

may prevent Google from recognizing your site as mobile-friendly site
Page by Page

April 21

Слайд 43

@JShehata - Mobile SEO

Слайд 44




John Shehata | @JShehata

Слайд 45Avoid plugins (flash, Silverlight, Java, etc.)
Configure the viewport

Size

content to viewport
Space out Touch Elements
Use legible font sizes
Size tap targets appropriately: “Design for Fat Fingers”

Optimize User Experience

Слайд 46

@JShehata - Mobile SEO

Слайд 47Multi-Device Design: https://developers.google.com/web/fundamentals/layouts/

25 Principles of Mobile Site Design https://www.google.com/think/multiscreen/whitepaper-sitedesign.html

Forms https://developers.google.com/web/fundamentals/input/form/

Forms auto-complete
http://googlewebmastercentral.blogspot.com/2015/03/helping-users-fill-out-online-forms.html



Mobile e-commerce Design http://www.kaushik.net/avinash/web-design-user-experience-best-practices/



READ:

Слайд 48
SMX Advanced 2014
@JShehata
how many people have auto-fill markup on their mobile

site forms?

YES it is

That’s not
mobile!!

Mobile Internet coming faster than most people in this room realize

Слайд 49




John Shehata | @JShehata

Слайд 50
Page speed is a ranking factor since 2010
Google Released a ton

of tools and reports to help improve page speed

@JShehata - Mobile SEO

Слайд 51
Google started testing “Slow” Red Labels

How will this affect your CTR??
















http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483


@JShehata - Mobile SEO

Слайд 52“80-90% of the end-user response time is spent on the frontend.

Start There.”
Steve Souders, Google’s Head Performance Engineer

I.E. Backend actions (database queries, server delays and hardware limitations, …) only account for 10-20% of your load time!!

Where to Start?

Слайд 53
Google PageSpeed Insights Tool

Слайд 54Read: https://developers.google.com/web/fundamentals/performance/
Optimized rendering

Слайд 551 second load time for 'above-the-fold content' on mobile sites!
Read: https://developers.google.com/speed/docs/insights/mobile


Above-The-Fold (ATF) Content

Слайд 56Avoid Multiple Redirects
Example.com > www.example.com > m.example.com (slow mobile experience)

Consolidate DNS

requests
Enable gzip Compressions (reduces up to 90%)
Remove unnecessary / legacy code

Optimize Images
Proper formatting and compression
Use Web fonts instead of encoding text in images




Optimize Speed




Слайд 57Improve server response time
It should be Less than 200ms

Leverage Browser

Caching
Set expiry date or maximum age
Cache-Control: max-age=120

Prioritize Visible Content
Structure your HTML to load the critical, above-the-fold content first
Reduce the amount of data used by your resources

Optimize Speed




Слайд 58Eliminate ATF render-blocking JavaScript and CSS resources
Faster above the fold content

(inline CSS, JS)

Optimize JavaScript Use
Defer parsing JavaScript
Asynchronously load JavaScript resources
Avoid long running JavaScript

Optimize CSS Use
Put CSS in the document head
Avoid CSS imports (@import)
Inline render-blocking CSS



Optimize Speed




Слайд 59Make your mobile pages render in under one second
http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/

Mobile Analysis

in PageSpeed Insights
https://developers.google.com/speed/docs/insights/mobile

Read Cindy Krum from Mozcon 2014 http://www.slideshare.net/mcordismarketing/five-secrets-to-unlocking-mobile-seo-success

READ

Слайд 60




John Shehata | @JShehata

Слайд 61
“Avoiding these mistakes helps your smartphone users engage with your site

fully and helps searchers find what they're looking for faster. To improve the search experience for smartphone users and address their pain points, we plan to roll out several ranking changes in the near future that address sites that are misconfigured for smartphone users.”

6/11/13 Google Webmaster Central Blog

Mobile Errors

Слайд 62First, Check Google Webmaster Tools Crawl Errors
Mobile Errors

Слайд 63Google Reporting Faulty Mobile Redirects http://googlewebmastercentral.blogspot.ca/2014/06/faulty-redirects.html
Faulty Redirects

Слайд 65Verify no flash is used for navigation, videos, or other elements

on mobile pages.

HTML5 is preferred for video players.

Google warns users of incompatible sites.

consider having the transcript of the video available on all devices as that may better serve your smartphone users.

Unplayable Videos

Слайд 66Avoid App Download Interstitials (use banners instead)

interstitials
x
x
✔

Слайд 67Irrelevant cross-linking between desktop and mobile content

Infinite redirect loops
Googlebot-mobile > redirected

to feature phones site > redirects to smartphone site > redirects to desktop site


READ: https://developers.google.com/webmasters/smartphone-sites/common-mistakes

Mobile Errors

Слайд 68




John Shehata | @JShehata

Слайд 69Unplayable Videos
Flash/Sliverlight
Popups
Sideway Scrolling
Tiny Font/Buttons
Device Specific Content
Slow Pages


Broken Content

Слайд 70





John Shehata | @JShehata

Слайд 71https://developers.google.com/app-indexing/
App Indexing & Deep Links

Слайд 72https://dev.twitter.com/docs/cards/app-installs-and-deep-linking







name="twitter:app:name:ipad" content="Example App"/>







Twitter: App Installs and Deep-Linking

Слайд 73Android Deep Links – Errors
Mismatched content (paginated pages, expired content, blocked

resources)
GWT errors






You can track Google Traffic to Android App




Deep Links errors

Слайд 74
Blocked internal resources may be an issue
@JShehata - Mobile SEO

Слайд 75

@JShehata - Mobile SEO

Слайд 76




John Shehata | @JShehata

Слайд 77FB: 78% Of US Users Are Mobile
Mobile: Social

Слайд 78Check how your Social Media buttons appear in mobile









Mobile: Social

Слайд 79Dark Social Traffic (Apps Traffic is registered as Direct)

Mobile: Social

Слайд 80
Mobile: Emails

Слайд 81




John Shehata | @JShehata

Слайд 82
Page Timing

Слайд 83Check Mobile Pages with high CTR to the Full Site

 id="full-site-link">Full site

var fullSite =   
   document.getElementById('full-site-link');
 addListener(fullSite, 'click', function() {
   ga('send', 'event', 'Mobile site functionality',   
   'click', 'Full site');
 });

Track Full-Site Links w/ Events

Слайд 84
Google Fetch

Слайд 85https://developer.chrome.com/devtools/docs/mobile-emulation
Emulating devices

Слайд 86
Google AdWords – Keyword Planner

Слайд 872013




2014
PIZZA

Слайд 88Gas Station
Local

Слайд 89Chrome Emulation Developer Tools
http://mobiletest.me/
http://www.mobilemoxie.com/tools/mobile_handset_emulator/
http://ipadpeek.com/
http://www.mobilephoneemulator.com/
http://mattkersley.com/responsive/
http://mobitest.akamai.com/
http://validator.w3.org/mobile/
Browser Extension user-agent switcher
http://developers.google.com/speed/pagespeed/insights/
http://www.browserstack.com/screenshots


http://crossbrowsertesting.com/
http://validator.w3.org/mobile/

More Tools

Слайд 90




John Shehata | @JShehata

Слайд 91Choose the site structure Wisely. Responsive is not the answer for

all your problems!!
Fix broken content and faulty redirects
User experience is important
Optimize above the fold rendering
Local Businesses: Take Mobile Seriously
Check your money/important rankings regularly in Mobile SERPs
Check how your results look in mobile SERPs
Mobile Ads & Mobile Landing Pages
Mobile first doesn’t mean just mobile





Слайд 92
Thank You
John Shehata | @JShehata
John Shehata
@Jshehata
John-Shehata.com
LinkedIn

Похожие презентации

Проект ОРГАНИЗАЦИЯ ПОХОДОВ КАК СОВМЕСТНАЯ ДОСУГОВАЯ ДЕЯТЕЛЬНОСТИ ДЕТСКОГО САДА С СЕМЬЯМИ ВОСПИТАННИКОВ 290
Сети, в которые попадают люди Люди, которые попадают в сети 197
Очевидное – невероятное(Sphinx tips-n-tricks) 235
Инновационная технология будущего Создание композиционных материалов Электроника (транзисторы, нанопровода, топливные элементы) Медицина (выращивание. 254
Риски и перспективы развития оптового и розничного рынков электроэнергии – взгляд потребителя 197
Порядок клеймения 332

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика