AMP — Accelerated Mobile Pages — is no longer an up-and-coming experimental project. It’s now integrated into Google’s regular results and its use has expanded far beyond publishers; it is now being deployed by retailers and others. Whether you’re just getting started with AMP or are looking to get more from your existing AMP efforts, this session explores the latest developments and what you should do to take advantage of them.

1. Going All-In On AMP

2. We drive online revenue and group leads
MILESTONE - BEST OF DIGITAL AGENCY AND SOFTWARE
Hospitality | Retail | Finance
Full Service Digital AgencyThe Digital Presence Cloud
CMS Local Social
Reviews Insights Analytics
Design Content SEO &
local
Paid
Marketing
Social
content
marketing
Analytics
&
consulting
Software for digital marketers Platform independent services
Silicon Valley ● Chicago ● D.C. | 2,000+ customers | 400+ Awards

3. WHY HOW CONFIGURATION VALIDATION TRACKING
& IMPACT
WHAT’S
NEW?

4. Why

5. IMPACT OF SPEED ON CONVERSIONS

6. AMP USED EVERY WHERE

7. WHY AMP
AMP – A library to
build super-fast, user-
friendly websites
Restore the web
make it fast and user-
friendly again
Speed 10x higher
Engagement 20x higher

8. HIGH CONVERSIONS ON AMP

9. How

10. AMP: 3 CORE COMPONENTS
AMP HTML | HTML with some restrictions for performance
AMP JS | AMP JS library ensures fast rendering of AMP pages
AMP Cache | Google AMP cache can be used to serve cached AMP pages

11. DECIDE WHICH PAGES WILL BE BUILT IN AMP
Discovery via search/social/sharing

12. HOW, WHAT, CODES – FIND IT ON THE AMP SITE

13. Components to Choose From

14. ACCORDION LIGHTBOX &
VIDEO
EXPAND /
COLLAPSE
SOCIAL SHARE
WHAT WAS NEW (2017) WITH AMP?
FB POST

15. WHAT WAS NEW (2017) WITH AMP?
PIN TWEET CAROUSEL IFRAME MAP
CALL
BUTTON
PHOTO
GALLERY
VIMEO

16. Set up right tags

17. ANNOTATION TAGS FOR CRAWL VISIBILITY
DESKTOP PAGE
<link rel="alternate" media="only screen and (max-width:
640px)“ href="http://m.example.com/page-1>
MOBILE PAGE
<link rel="canonical"
href="http://www.example.com/page-1">
<link rel='amphtml'
href='www.example.com/amp'>
AMP PAGE
<link rel=canonical‘ href=‘m. example.com'>
SEPARATE

18. ANNOTATION TAGS FOR CRAWL VISIBILITY
<link rel='amphtml' href='www.your-
domain.com/amp'>
<link rel=canonical'
href='www.your-domain.com'>
www.your-domain.com/amp
AMP Version
www.your-domain.com

19. Validate

20. VALIDATING AMP
https://ampbyexample.com/playground/
https://validator.ampproject.org/
https://sitebulb.com/
Https://www.deepcrawl.com

21. Common AMP Errors & Issues
https://www.semrush.com/blog/amp-mistakes-semrush-study/
HTML errors – missing or incorrect markup
User written javascript used on page (it is not supported)
Incorrect cross domain referencing with rel=amphtml
Invalid structured data elements used
Using deprecated tags or attributed
Invalid CSS stylesheet

22. ISSUE: USE OF DEPRECATED TAGS OR ATTRIBUTES
Avoid loading JS libraries you don’t use and tags that are
deprecated. Use of <amp-video> is incomplete

23. ISSUE: HAVING AN SSL WHICH IS NOT INSTALLED AND
RESOURCES DELIVERED VIA HTTPS://
●
With loading errors such as
the above Google will
remove AMPs from search
results, resulting in traffic
loss
AMP de-indexing because
of resource delivery
through HTTPS://. After
fixing the errors, it took
Google around 24 – 48
hours to rebuild the cache
for all the pages.
Install certificate correctly and deliver files over https://

24. AMP Best Practices
Implement the reference tags correctly showing the co-relation between desktop, mobile,amp site
Validate your code and components
Identify non supported AMP code on pages
Do not use user generated JavaScripts. AMP has its own library of Javascripts to use.
Follow page speed insights recommendations for page performance
Try to keep consistent UI and functionality across mobile and AMP
Check AMP configuration problems using testing tools (https://sitebulb.com/
Https://www.deepcrawl.com, SEMrush)
Measure impact of AMP on user behaviour – Install Analytics properly
Discover hidden opportunities with top AMP queries within search console

25. AMP Tracking/Impact

26. AMP ANALYTICS AND TRACKING
SET UP
CANONICAL
TAGS
SET UP GTM
CONTAINER FOR
AMP
CREATE TAGS &
EVENTS TO BE
TRACKED BASED
ON AMP
COMPONENTS
DEFINEREPORTS
VARIABLES

27. Additional trackable data
Several Built-in variables are now
available to track additional data
like Scroll Depth, Client Time
Zone, Page Load Time, AMP
Event, and Client ID

28. EXISTING PERFORMANCE REPORTING - SAMPLE
*Data for Post site live contains AMP + Non AMP mobile traffic from Google Organic
**Data for Pre site live contains Mobile traffic from Google Organic
Metrics
*Post
(Dec. 11, 2017 to Jan.
28, 2018)
**Pre
(Oct. 23, 2017 to Dec.
10, 2017)
Change %
Sessions 24,954 24,271 2.81%
Avg. Session Duration 1:48 1:20 23.33%
Bounce Rate 36.61% 43.50%
-15.84%
Better
Pageviews 85,497 81,223 5.26%
Bounces 8,787 10,558 -16.77%
Click Reservation 8,954 8,119 10.28%
Transactions 446 394 13.20%
Revenue $223,669 $196,499 13.83%
AMP INCREASES
YOUR TRAFFIC AND
CONVERSIONS
FROM MOBILE

29. What is new? 2018

30. WHAT IS NEW (2018) WITH AMP?
Takeaways from AMP conference 2018 for Q1 and Q2
https://github.com/ampproject/amp-toolbox
https://www.blog.google/products/g-suite/bringing-power-amp-gmail/
https://www.ampproject.org/stories/AMP Stories
Building AMP as Mobile website
AMP + PWA
AMP Toolbox to Optimize page load time
AMP Email

31. AMP STORIES
Create beautiful story as entry point of your website.
See example here:

32. "VISUAL STORIES" PAGE ON WEBSITES
Create beautiful story as entry point of your website https://rivieramaya.grandvelas.com/visual-stories.aspx
COVER PAGE TAP TO NAVIGATE STORY PAGES SHARE OR LINK
See example here:

33. TRACKING AMP STORIES
● Google Analytics

34. AMP EMAIL
Try Call Out. And text in the notes
AMP components can be used in emails
(currently supported on Gmail)
Pull dynamic live content when user
opens the e-mail it can
Show different offers with one template
Take action or submit information
inside the email
Interactive Emails allowing user to see dynamic content

35. PWA & AMP WORKING TOGETHER
PWA
App shell
Persistent header & menu
Rich functionality
Loads AMP pages
AMP
Lightweight units
AMPs load instantly &
update smoothly
Cached on CDN & service
worker

36. COMPLETE SITE IN AMP
Build entry points in AMP
Build the rest with the
framework of your choice
Progressively
enhance with PWA

37. AMP TOOLBOX
AMPpagesperformlotsofDOMmanipulations
whenthepageisrenderedonthebrowser.
AMPtoolboxallowsyourservertodoalloftheDOM
manipulation beforepageisdeliveredtoserver.
Thisimprovestheloadtimeandthebrowsertakes
lesstimetoprocessthepageandshowittouser.
Make your AMP pages faster

38. AMP Key Take Away

39. AMP
Stay on top of AMP development – It is becoming
mainstream - PWA and AMP together can be amazing
combination
Test and Validate – Leverage tools to test before, while
and after
Analytics and Impact – Sessions, Ranking, Impressions,
Engagement, Transactions

40. www.milestoneinternet.com
blog.milestoneinternet.com
@Benuaggarwal
http://www.facebook.com/Milestoneinc
THANK YOU - QUESTIONS?
Careers.milestoneinternet.com
Head of SEO, SEM – CA
Sr Strategist – Chicago, SC and DC
Customer Success Manager
Content Marketing /Social Media – Director