Max Prin - MnSearch Summit 2018 - SEO for the Current Mobile Landscape

1. Max Prin, Head of Technical SEO, Merkle
@maxxeight
Technical SEO Tactics for the Current Mobile Landscape

2. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
“It’s all about mobile now…”

3. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
“Page speed is very important…”

4. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
“AMP is great!”

5. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit5

6. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
Mobile-First Indexing
(user-agent = smartphone)

7. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit7

8. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit8

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)

19. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit19

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)

36. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit36
Source: Soasta

37. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit37
Source: Soasta

38. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit38
Source: Soasta

39. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit39
Images:
41%

40. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit40
Speed matters
Compress images
Leverage browser caching
Use system fonts
Use HTTP/2
 Multiplexing, binary headers,
header compression, server push
https://raventools.com/blog/free-ssl-http2/

41. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit41
Do load times impact Google’s crawl?

42. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
AMP
(accelerated mobile pages)

43. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit43
Why are AMPs so fast? (in a nutshell)
AMP HTML+JS AMP Cache (CDN) Prerendering

44. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit
over 60%
of the clicks to AMP in Google search go to non-news sites

45. The Total Economic Impact™ of AMP
across publishers and e-commerce
20%
Conversion
10%
Traffic
60%
Pages/visit

46. AgendaCategory page
<amp-sidebar>
- Navigation
<amp-carousel>
<amp-list>
- Product organization
<amp-form>
- Searching
<amp-bind>
- Filtering and sorting
<amp-access>
- Logged in/out

47. AgendaProduct page
<amp-video>
<amp-accordion>
- Product images/details
<amp-form>
<amp-carousel>
- Comments/reviews
<amp-selector>
- Tabs/Thumbnails
<amp-bind>
- Color/size selection
<amp-state>
- Add to cart

48. AgendaCheckout
Payment Requests API
- Chrome only
<amp-form>
- Checkout within AMP
<amp-install-serviceworker>
- Fast transition to HTML

49. AgendaDevelopment
& tracking
<amp-analytics>
- Google Analytics, Adobe, etc.
<amp-experiments>
- A/B testing
Custom JavaScript (coming, someday)

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

53. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit53

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

55. Max Prin @maxxeight | MnSearch Summit 2018 #mnsummit

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)

65. Thank you!