TechSEO Boost 2017: AMPing Airbnb
Transcript of TechSEO Boost 2017: AMPing Airbnb
![Page 1: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/1.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoostBrian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
+ AMP
BRIAN TA / GIL BIRMAN / 11 -2017
![Page 2: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/2.jpg)
PART 1
AIRBNB
![Page 3: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/3.jpg)
WHAT IS AIRBNB?
![Page 4: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/4.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P1HOME PAGE
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 5: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/5.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P2SEARCH RESULTS PAGE
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 6: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/6.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P3LISTING PAGES
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 7: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/7.jpg)
PART 2
AMP
![Page 8: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/8.jpg)
WHAT IS AMP?
![Page 9: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/9.jpg)
AMP Demo————————>
![Page 10: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/10.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoostBrian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
AMP is not
available on desktop
Mobile devices
get AMP
results
www.google.de/search?q=airbnb+berlin
![Page 11: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/11.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
AMPDIAGRAM
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
s/sf amp/s/sf
![Page 12: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/12.jpg)
AMP Demo————————>
![Page 13: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/13.jpg)
WHAT SHOULD WE AMP?
![Page 14: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/14.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
ChallengesFIGURING OUT WHAT PAGE TO AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Impactfulness (Traffic)
• Page Volatility
• Technical Challenges (legacy system compatibility)
• Page Ownership
![Page 15: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/15.jpg)
GuidebooksTHINGS TO DO
IN {CITY NAME}
PROS CONS• Design is stable
• No one is working on it
• Low Traffic
• Low Impact
![Page 16: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/16.jpg)
P1HOMEPAGE
PROS CONS• LOTS of Traffic
• High Impact
• Only 1 Page
• Making changes on P1 requires approval from higher-ups
• Frequent Redesigns
![Page 17: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/17.jpg)
P3LISTING PAGE
PROS CONS• Only 1 Team working on it
• Has poor SEO conversion rate
• In a state of flux/refactoring
• Owned by a different team
• Stuck on legacy framework
![Page 18: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/18.jpg)
P2SEARCH RESULTS
PROS CONS• High Traffic
• High Impact
• A lot of people working on it
• Frequent design changes
![Page 19: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/19.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Organic Search
Traffic Breakdown
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 20: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/20.jpg)
AMP MVPMINIMUM VIABLE PRODUCT
![Page 21: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/21.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Basic Questions to AnswerQUESTIONS THAT NEED TO BE ANSWERED TO GET AMP OFF THE GROUND
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• How does AMP work within our existing framework?
• How does AMPing P2 interfere with our website infrastructure?
• What does AMPing P2 do to the workflow of other developers in the company?
• How does this impact design, experience, and the overall product?
![Page 22: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/22.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• How do we integrate this into a fully functioning product with the rest of the company?
• How do we handle the added complexity?
• Getting buy in from other teams
• How do we integrate AMP into our experimentation framework
• Dedicated team/owner - Who will maintain it?
ProcrastinationISSUES WE WON’T ADDRESS UNTIL LATER
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 23: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/23.jpg)
PART 3
AMP P2 OBSTACLES
![Page 24: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/24.jpg)
[OBSTACLES]
SERVER-SIDE
PAGE RENDERING
TIMING OUT
![Page 25: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/25.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoostBrian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
3.86% 16.08%AMP P2 Timeout Rate
(30min CDN Caching Enabled)
P2 Timeout Rate
Render Time Exceeds 500msWhen a Hypernova render exceeds 500ms in Monorail, it times out and renders blank.
https://app.datadoghq.com/screen/217059/gils-amp-p2-dashboard
![Page 26: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/26.jpg)
Successful
vs
Timed out pageTIMEOUT===BLANK PAGE
![Page 27: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/27.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
When page renders blank,
Google is supposed to link to the canonical
page instead of the AMP page, but….
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 28: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/28.jpg)
Error Page
(Google Bug)AMPED SEARCH RESULT
![Page 29: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/29.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
We implemented CDN caching (30 minutes) as a way of solving the ~16% timeout rate for AMP-rendered pages.
Our Solution?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 30: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/30.jpg)
[OBSTACLES]
NEW FEATURES
BROKE AMP
![Page 31: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/31.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• An <img /> tag broke our AMP experience.
• As other engineers added new features to P2, they did not always work well with AMP.
• Images inside of a horizontal scrolling div fail to load.
• >50k CSS Breaks AMP Validation
New Features Broke AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 32: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/32.jpg)
A particularly broken experienceCONTENT DISAPPEARED!
![Page 33: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/33.jpg)
PART 4
AMP
ARCHITECTURE
SOLUTIONS
![Page 34: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/34.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
SQUADGOALS
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Make our pages AMP-compatible without having to recreate them from scratch.
![Page 35: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/35.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
WHY?WHY DOES AMP REQUIRE SO MANY CODE CHANGES?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• AMP page is displayed inside of an iframe on google.com.
• NO custom JavaScript.
• NO inline styles.
Security
• NO layout reflows
• LIMIT of 50kb CSS
Performance
![Page 36: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/36.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• AMP doesn’t support !important
😭 Aphrodite (open-source CSS framework) adds !important to every style
• AMP doesn’t support inline styles.
😭 We use them lots (React!)
• AMP only supports style tags which appear in the <head>
😭 Aphrodite styles are appended to the <body>
• AMP limits CSS size to 50kb
😭 Our page had too many styles!
ARCHITECTURAL CHALLENGESOUR EXISTING FRAMEWORK WAS INCOMPATIBLE WITH AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 37: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/37.jpg)
IMPORTANT!
![Page 38: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/38.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
<div {…css(styles.mainTitle)}> Hello World </div>
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
aphrodite css() function
style definition
• Added a node environment variable, process.env.AMP
• Created a custom css() function that conditionally disables !important when process.env.AMP is enabled
<div class=“mainTitle_j2dz”> Hello World </div>
![Page 39: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/39.jpg)
INLINE STYLES
![Page 40: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/40.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Inline Styles
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
To class-based styles:
We can convertinline styles:
… but it is too slow 😞
![Page 41: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/41.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Inline Styles
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Usage:
Update cache:
Cache keyfrom style object:
![Page 42: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/42.jpg)
<HEAD><STYLE…></HEAD
![Page 43: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/43.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
hypernovaOUR OPEN-SOURCE SERVER-SIDE RENDERING PLATFORM
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
hypernova
• User makes page request
• Rails renders an ERB template
• An ERB template may call render_react_component()
• hypernova handles rendering react components
(RUBY)
(NODEJS)
![Page 44: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/44.jpg)
Rails ERB Template
aphrodite inserts styles here
no way to insert styles here
![Page 45: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/45.jpg)
ERB template for AMP pages
entire page is rendered in hypernova (node service)
![Page 46: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/46.jpg)
50KB CSS LIMIT
![Page 47: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/47.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Can CSS be eliminated?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Aphrodite does not generate extra CSS
• However, AMP pages never use responsive styles above our medium breakpoint (744px)
• We modified the css() function to eliminate responsive styles
• responsive styles below the responsive breakpoint are inserted without their @media queries
• responsive styles above the responsive breakpoint are culled
![Page 48: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/48.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Class name
minification
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• We added this feature via a PR to aphrodite
.helloStyle_x3hn
BEFORE
._x3hn
AFTER
![Page 49: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/49.jpg)
PART 5
PRODUCT ISSUES WITH
AMP
![Page 50: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/50.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• AMP works perfectly for logged out/first time visitors
• Logged in users are dropped in a very confusing experience
• Initial page load is a “logged out” experience
• How do they get to the “logged in” experience of the P2 page?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
UserflowsLOGGED IN/LOGGED OUT
![Page 51: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/51.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Google does not open deeplink when clicking on an AMP search result
• Users have to perform a second click in order to get directed to the app experience
• Polarizing opinions on this behavior
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
DeeplinkingAPP INSTALLED VS. NOT INSTALLED
![Page 52: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/52.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• AMP makes it difficult to iterate different product ideas on it in an efficient manner
• Airbnb has an in-house experimental framework that can’t be integrated with AMP
• Experimentation on another domain is extremely difficult
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
IterationYOUR PRODUCT IS NEVER PERFECTED
![Page 53: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/53.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Multiple experiments and features were launched that affected AMP experimentation
• It’s hard to keep a close eye on AMP and make sure that new features don’t change the core experience
• We can check for broken features, but it’s not as easy to detect newly added features
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
StabilityCHANGES FROM OTHER TEAMS CAN DRASTICALLY ALTER THE PAGE
![Page 54: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/54.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Communication with external teams is challenging
• Technical hurdles have been overcome or mitigated
• The experience as a whole feels fractured
• As a product, AMP P2 doesn’t work.
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
What did we learn?
![Page 55: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/55.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• The big problem is the overall experience is fractured, the design of the page isn’t there and the product we were AMPing was suboptimal *unpack P2 problems*
• How do we address these problems so that we can solve them in one swoop?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
CoalescenceEXPERIENCE, DESIGN, PRODUCT
![Page 56: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/56.jpg)
MAGIC CARPET
![Page 57: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/57.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
MAGIC CARPET
We created a page
specifically tailored
to first-time search engine users.
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 58: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/58.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Magic CarpetTHE P2 LANDING PAGE FOR SEO
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
P2 Magic Carpet
Filter Controls
Results
![Page 59: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/59.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Userflow
Limited Exposure
Focused Product Design
Polished Experience
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Magic CarpetWHAT WE OPTIMIZED
![Page 60: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/60.jpg)
WHAT’S NEXT?
![Page 61: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/61.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
serviceworkerWHAT IS IT?
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 62: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/62.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
serviceworker USER JOURNEY
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Google Search
ResultsAMPed P2 App Shell
pre-render install serviceworker load content
![Page 63: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/63.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
AMP provides the only user journey that pre-installs the serviceworker. In all other cases, a serviceworker only provides value as a result of a repeat visit.
Value Prop
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
![Page 64: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/64.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Where to next?FIGURING OUT WHAT PAGE TO AMP
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Experimentation
• Worldwide Launch
• Getting metrics into our core data
![Page 65: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/65.jpg)
WHAT DIDN’T WE TALK ABOUT?
![Page 66: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/66.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
What didn’t we cover?ALL THE THINGS WE CHOSE NOT TO TELL YOU
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
• Experiment Results
• Logging Issues
• Experimentation Issues
![Page 67: TechSEO Boost 2017: AMPing Airbnb](https://reader034.fdocuments.in/reader034/viewer/2022052116/5a650c997f8b9af5298b48f3/html5/thumbnails/67.jpg)
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost
Thanks!
Brian Ta (@fanfavorite_bta), Gil Birman (@gilboxme) #TechSEOBoost