9. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit9
Mobile-first index: how?
10. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit10
Mobile-first index is slow to roll out
76.7%
14.7%
8.6%
Googlebot Googlebot-Smartphone Other Googlebots
11. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit11
Track mobile-first indexing yourself
You can can log the user-agent used in HTML comments
Sample PHP code:
<!--
User-agent: <?php echo $_SERVER[”HTTP_USER_AGENT”]; ?>
-->
The cached page on Google will show which
user-agent Googlebot used to crawl the page.
@JohnMu
John Mueller
Google
12. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit12
0.0
0.5
1.0
1.5
2.0
2.5
3.0
2010 2011 2012 2013 2014 2015 2016 2017 2018
Billions
Western Europe
North America
Middle East & Africa
Latin America
Central & Eastern Europe
Asia-Pacific
Worldwide Mobile Internet Users
Source: Mobile Internet Users, eMarketer, January 2018
Mobile-first index: why?
13. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit13
Mobile-first index: why?
Mobile searches surpassed
desktop searches in 2015.
Source: Google Internal Data, for 10 countries including the US and Japan, April 2015.
14. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit14
0
50
100
150
200
250
2010 2011 2012 2013 2014 2015 2016 2017 2018
Millions
Source: Mobile Internet Users – United States, eMarketer, January 2018
API
App indexing
announced
10/13 Google
acquired
Firebase
9/11
Mobile-
friendly label
11/14
Mobilegeddon
4/15
Mobile-friendly
testing tool
5/16
AMP project
announced
10/15
Mobile-
interstitial
penalty
8/16
Mobile-first
indexing
announcement
11/16
PWAs created
6/15 PWA
announcement
11/16
Mobile-friendliness
API
1/17
Mobile speed
ranking factor
1/18 (7/18)
Mobile-first
index roll-out
announced
3/18
Mobile-friendly
label removed
8/16
Google
officially
recommends
responsive
6/12
Google
suggest
adaptive (1
HTML, 2 CSS)
2/12
US mobile Internet users & Google’s mobile updates
@AlexisKSanders
Alexis Sanders
Merkle
15. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit15
However, mobile phones…
…have smaller screens
(less space for content)
…are slower
(less processing power, memory)
…can have weak connections
(3G, 4G < Cable, Fiber)
16. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
SEO
Search Engine Experience Optimization
17. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit17
Search Engine Experience Optimization
Website features
Relevant
Mobile-friendly
Fast
Secure
Popular
How?
-
Content
RWD*
Site speed
HTTPS
Links
Rankings
-
Up
Not MF = down
Slow = down
Up*
Up
SEO = making sure search engines ”understand” optimized experiences
18. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
Mobile-Friendly vs. Mobile-Optimized
(for both users and search engines)
20. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
Graceful Degradation / Progressive Enhancement
Devices (hardware, screen size), browsers, network, permissions, etc.
21. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit21
3 ways to implement your mobile website
Responsive
Web Design
Dynamic
Serving
Separate
URLs
Same URL (vs. desktop)
Same HTML (vs. desktop)
Potential/main concern Page speed Content parity Content parity
22. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit22
<link> tagging map (for websites with separate URLs + international sites + AMP)
Source: https://ampbyexample.com/introduction/internationalization/
23. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit23
Ensure parity between mobile and desktop versions
24. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit24
Ensure parity between mobile and desktop versions
25. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit25
Ensure parity between mobile and desktop versions
(Accessible) Content
• Page title
• Meta description
• H1, H2, etc.
• Words
• Links (nofollow)
• Images (alt text)
• Videos
<link> tags
• hreflang
• rel=“prev/next”
Structured Data
https://technicalseo.com/seo-tools/mobile-first-index/
Mobile-first Index
Tabs
Accordions
“Click-to-expand”
Loaded automatically
26. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
SERP Features & Voice Search
(structured data markup)
27. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit27
A lot of SERP features are powered by structured data
28. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit28
Leveraging structured data markup
Structured data markup has 2 components:
Vocabulary: schema.org
Format:
• Microdata
• JSON-LD
29. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit29
Leveraging structured data markup
Google supports a ton of markups
that can enhance search results:
- Product, reviews, ratings
- Events, music, movie, recipes, etc.
Rich Result = Higher Click-Through Rate (CTR)
https://developers.google.com/schemas/reference/
30. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit30
Schema.org markup generator (technicalseo.com)
31. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit31
Schema.org markup generator (technicalseo.com)
Generate JSON-LD (and some microdata)
• Website (Site Name, Sitelinks Searchbox)
• Breadcrumbs
• Person (jobTitle, worksFor, sameAs)
• Organization (Logo, Contacts, Social Profiles)
• Local Business (Address, OpeningHoursSpecification)
• Article (NewsArticle, BlogPosting)
• Product (Offer, AggregateRating, Reviews)
• Event
• Recipe
• Job Posting
Easily send code to Google’s testing tool
https://technicalseo.com/seo-tools/schema-markup-generator/
32. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit32
Mobile click-through-rates by ranking position
33. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit33
Voice search results
Knowledge Graph Featured Snippets
34. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit34
94% of featured snippet URLs rank in the top five
35. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
Page Speed
(site latency)
50. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit50
AMP documentation
https://www.ampproject.org/docs/reference/components https://www.ampbyexample.com
51. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit51
AMP tools
https://search.google.com/test/amp https://technicalseo.com/seo-tools/amp/
52. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
What about “SEO”?
AMP is not a ranking factor
A “really fast” site doesn’t rank better than a “fast” site
54. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
What about “SEO”?
AMP is not a ranking factor
A “really fast” site doesn’t rank better than a “fast” site
Faster is better (+ AMP cache/pre-loading)
AMP = mobile-friendly
SERP visibility
56. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
Progressive Web AMPs
(the ultimate configuration)
57. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit57
What’s a progressive web app?
Native apps
Web apps
58. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit58
What’s a progressive web app?
Reliable and Fast
App shell cached locally (on 1st load)
• Fast loading when offline or with slow
connection (on subsequent loads)
Mobile-friendly (responsive)
Secure (HTTPS)
Engaging
App icon on device’s home screen
Push notifications
59. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit59
What’s a progressive web app?
60. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit60
AMP as entry point into your PWA
<amp-install-serviceworker>
61. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit61
AMP as entry point into your PWA
1) User gets the AMP from the SERP
2) Service worker is installed on device
• Once activated, SW caches the
“app shell” and initial data
3) User clicks on a (internal) link
4) Service worker “hijacks” the click
5) Pre-cached PWA loads instantly
62. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit62
The service worker “hijacks” the click
if (request = navigate) {
if (requested page is cached) {
serve cached PWA version
} else {
fetch, serve and cache PWA version
}
} else {
…
}
63. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit63
PWA + AMP = PWAMP
The AMP framework is
not compatible with (all)
JavaScript frameworks
(e.g. pushState)
64. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit64
PWAMP examples and resources
https://pwamp.shop https://www.howpwampworks.com (by @aleyda)
Firebase – 9/2011
https://www.seroundtable.com/google-easy-mobile-seo-14748.html - 2/20/12
https://www.seroundtable.com/google-mobile-seo-official-15264.html - 6/7/12
Google introduces app indexing - 10/13/13
Google acquires Firebase - 10/2014
Mobile-friendliness label - 11/18/14
Mobilegeddon/mobile-friendliness update – 4/21/15
PWAs introduced – 6/15/15
AMP announcement – 10/7/15
Mobile-friendly testing tool - 5/17/16
Mobile interstitial penalty – 8/23/16
Google removes mobile-friendly label - 8/31/16
What is AMP? - 9/12/2016
Mobile-first index (announcement 1) – 11/4/16
PWA – 11/9/16
Mobile-friendliness Test API – 1/31/17
Mobile speed ranking factor – 1/17/18
Mobile-first official announcement – 3/26/18
Popularity: you don’t need to understand something to acknowledge its reality.
!!! = new features in this tool: rendered code and JS console – very useful to troubleshoot rendering issue with JS-powered sites.
https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
Leveraging smartphone features – camera, GPS, notifications, etc.
Mobile optimized: also avoid full screen popups
Regardless mobile config: avoid bad practices like interstitials
Microdata: introduced with HTML5. Attributes and values directly integrated into HTML elements -> can quickly become complicated to implement, especially when the data is not grouped together in the code.
JSON-LD (JavaScript Object Notation for Linked Data): much easier to implement (1 block of script)
It’s easy to forget the golden rule of SDM: do not markup non-visible data
https://www.sistrix.com/downloads/study/sistrix_mobile_seo_study_en.pdf
No click = SERP features in mobile results: quick answers, local packs, etc.
A.J. Ghergich, May 14, 2018 - https://www.semrush.com/blog/how-to-earn-google-featured-snippets-mobile-study/
We analyzed 10 million mobile keywords and dissected 1.3 million featured snippets on Google.
But leveraging structured data for semantics and relevance as well as on the overall quality of the content might help getting into the top 5 then getting the featured snippet.
https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/
https://support.google.com/partners/answer/7336278?hl=en
https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
Too fast? error pages
AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.
https://www.ampproject.org/learn/about-how/
https://medium.com/@cramforce/why-amp-is-fast-7d2ff1f48597
Lazy loading
Extensive use of preconnect
Prefetching of lazy loaded resources
All async JavaScript
Inline style sheets
Zero HTTP requests block font downloads.
Instant loading through prerendering
Prerendering only downloads resources above the fold
Prerendering does not render things that might be expensive in terms of CPU
Intelligent resource prioritization
Uncoupling of document layout from resource downloads
Maximum size for style sheet
FastDOM-style DOM change batching
Optimized for low count of style recalculations and layout
Mitigations for third party JS worst-practices such as document.write
Runtime cost of analytics instrumentation is independent of number of used analytics providers
Extensions don’t block page layout
CDN delivery available to all AMP documents
All resources and the document are loaded from the same origin through the same HTTP 2.0 tunnel
Animations can be GPU accelerated
Dave Besbris, VP of Engineering at Google
over 31 million domains on the internet publishing AMP and they published over 5 billion pages.
recipes, travel, retail, dictionaries, RapGenius…
Still hard to built a full ecom site with AMP: AMP can’t be the full solution for conversions
Why is the reach of web apps higher? Search engines (vs. app stores).
Supported by all major browsers
No need to be indexed
https://www.ampproject.org/docs/integration/pwa-amp
https://www.ampproject.org/docs/integration/pwa-amp/amp-to-pwa
- AMP for initial user acquisition
AMP is an ideal solution for so-called leaf pages, content pages that your users discover organically through a search engine, a shared link by a friend or through a link on another site. Because of AMP's specialized pre-rendering, AMP pages load extremely fast, which in return means much less drop off (the latest DoubleClick study shows that more than 53% of all users will drop off after 3 seconds).
- PWA for rich interactivity and engagement
Progressive Web Apps, on the other hand, allow for much greater interactivity and engagement, but do not have the instant first-load characteristics of an AMP page. At their core is a technology called Service Worker, a client-side proxy that allows you to cache all sorts of assets for your pages, but said Service Worker only activates after the first load.