How to implement Accelerated Mobile Pages (AMP) successfully? Check out the criteria, tools and principles to take into consideration to maximize your chances for success.
Aleyda SolísInternational SEO Consultant & Founder at Orainti
10. #ampsuccess at #brightonseo by @aleyda from @orainti
Mobile speed is only getting more important
with Google’s mobile first index too
11. #ampsuccess at #brightonseo by @aleyda from @orainti
“I might not know nothing but
mobile sites need to load really fast”
#ampsuccess at #brightonseo by @aleyda from @orainti
12. #ampsuccess at #brightonseo by @aleyda from @orainti
But how much time does the mobile home page
of an important UK retailer takes to load?
13. #ampsuccess at #brightonseo by @aleyda from @orainti
Wanna guess? Let’s do a bet…
#ampsuccess at #brightonseo by @aleyda from @orainti
14. #ampsuccess at #brightonseo by @aleyda from @orainti
Oooops!
#ampsuccess at #brightonseo by @aleyda from @orainti
15. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Wait a minute… (literally in this case)
16. #ampsuccess at #brightonseo by @aleyda from @orainti
or 20 seconds for that matter?
#ampsuccess at #brightonseo by @aleyda from @orainti
17. #ampsuccess at #brightonseo by @aleyda from @orainti
Surprise surprise!
#ampsuccess at #brightonseo by @aleyda from @orainti
18. #ampsuccess at #brightonseo by @aleyda from @orainti
“I really don’t know nothing”
#ampsuccess at #brightonseo by @aleyda from @orainti
20. #ampsuccess at #brightonseo by @aleyda from @orainti
The solution is to implement WPO principles
to make your Mobile site to load fast
https://developers.google.com/speed/docs/insights/rules
21. #ampsuccess at #brightonseo by @aleyda from @orainti
Jon has made this awesome site to help
with it and will speak about it later
https://makefastsites.com/
22. #ampsuccess at #brightonseo by @aleyda from @orainti
Sadly, big sites have restrictive legacy systems
& small ones little resources to improve it
24. #ampsuccess at #brightonseo by @aleyda from @orainti
It uses a “simplified” HTML version with
optimised resources & cache to serve it faster
25. #ampsuccess at #brightonseo by @aleyda from @orainti
AMP should be published “parallely”
to your current (slower) Web pages
https://amp.businessinsider.com/
game-of-thrones-gendry-olympian-running-meme-2017-8
http://www.businessinsider.com/
game-of-thrones-gendry-olympian-running-meme-2017-8
26. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Let’s push that Tesla AMP ludicrous
speed button, baby!
YESSSSSS
#ampsuccess at #brightonseo by @aleyda from @orainti
27. #ampsuccess at #brightonseo by @aleyda from @orainti
https://amp.businessinsider.com/
game-of-thrones-gendry-olympian-running-meme-2017-8
http://www.businessinsider.com/
game-of-thrones-gendry-olympian-running-meme-2017-8
AMP is certainly much faster!
30. #ampsuccess at #brightonseo by @aleyda from @orainti
I told you so!
#ampsuccess at #brightonseo by @aleyda from @orainti
31. #ampsuccess at #brightonseo by @aleyda from @orainti
AMP is also cached and pre-rendered
by Google when shown in Mobile SERPs
Google AMP Viewer URL
that is pre-rendered
Canonical URL of the Page
Content served from
AMP Cache URL
32. #ampsuccess at #brightonseo by @aleyda from @orainti
So is even faster when shown to
users in Google’s Mobile SERPs
#ampsuccess at #brightonseo by @aleyda from @orainti
34. #ampsuccess at #brightonseo by @aleyda from @orainti
Google made it a requirement to
be included in its News Carrousels
35. #ampsuccess at #brightonseo by @aleyda from @orainti
and can be also
shown in organic results
AMP article rich results
Can be free-standing in the results page,
or embedded in a carousel of similar
result types. All AMP article rich results
are also rich results.
AMP non-rich results
A basic, non-graphical search result
pointing to the AMP page.
39. #ampsuccess at #brightonseo by @aleyda from @orainti
As well as the extra traffic
sites can get from using it
AMP Rich Results
AMP Non-Rich Results
Non-AMP Results
More Mobile organic visibility
and traffic from AMP than non-
AMP results
40. #ampsuccess at #brightonseo by @aleyda from @orainti
Incentivising its adoption, especially
among big media oriented sites
Data by Sistrix
42. #ampsuccess at #brightonseo by @aleyda from @orainti
So AMP is not a solution
for your original site pages
speed, but a “mobile Web
speed add-on”
#ampsuccess at #brightonseo by @aleyda from @orainti
43. #ampsuccess at #brightonseo by @aleyda from @orainti
In case Google sees this, remember that is
Tyrion Lannister saying this, not Aleyda ;)
#ampsuccess at #brightonseo by @aleyda from @orainti
BLAME HIM!
SHAAAAME
44. #ampsuccess at #brightonseo by @aleyda from @orainti
That’s why there are reservations: “AMP has a
good intentions… but sacrifice the open Web”
https://ethanmarcotte.com/wrote/ampersand/
45. #ampsuccess at #brightonseo by @aleyda from @orainti
You shouldn’t then use
AMP as a silver bullet
Mobile speed solution
but an alternative in case
you can profit from it
#ampsuccess at #brightonseo by @aleyda from @orainti
46. #ampsuccess at #brightonseo by @aleyda from @orainti
Avoid this type of experience
https://thirtybees.com/blog/amp-is-bad-for-e-commerce/
47. #ampsuccess at #brightonseo by @aleyda from @orainti
Or this other! If you can really make your own
mobile site speed faster, do that first please
https://kinsta.com/blog/disable-google-amp/
48. #ampsuccess at #brightonseo by @aleyda from @orainti
Some people can’t though and AMP will allow
them to at least make their content accessible
https://www.alexkras.com/google-amp-is-winning/
49. #ampsuccess at #brightonseo by @aleyda from @orainti
So, for those of you who
don’t have a mobile site,
can’t improve its own mobile
speed or are information
sites that could profit from
the extra visibility…
50. #ampsuccess at #brightonseo by @aleyda from @orainti
Here are 7 Do’s & Don’ts
to use AMP for success
#ampsuccess at #brightonseo by @aleyda from @orainti
51. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
1. Verify if you can
Implement your current
Mobile Web UI &
functionality with AMP
52. #ampsuccess at #brightonseo by @aleyda from @orainti
<>
You want to avoid this
Original Mobile Page AMP URL Version
53. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Validate that your mobile Web functionality
can be replicated by using AMP
https://www.ampproject.org/docs/reference
54. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
There’s also a well documented roadmap
specifying the functionalities to come
https://www.ampproject.org/roadmap/
55. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Check with your development team if you
have the capacity and flexibility to use them
https://ampbyexample.com/
56. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
You can even test and code while validating it
directly in the AMP Playground editor
https://ampbyexample.com/playground/
57. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
And although with WP there are free plugins
that highly facilitate the implementation
https://wordpress.org/plugins/amp/ + https://wordpress.org/plugins/glue-for-yoast-seo-amp/
58. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
They’re not an “out of the box” solution…
they still will need design personalisation
Original Mobile Page AMP URL Version
59. #ampsuccess at #brightonseo by @aleyda from @orainti
You can also use freemium and paid
WP plugins like AMP for WP and weeblrAMP
https://www.weeblrpress.com/ + https://wordpress.org/plugins/accelerated-mobile-pages/
60. #ampsuccess at #brightonseo by @aleyda from @orainti
That will allow you to personalise more, but
you’ll likely need further development support
61. #ampsuccess at #brightonseo by @aleyda from @orainti
This is what you really want.
Which one is the AMP version?
=
62. #ampsuccess at #brightonseo by @aleyda from @orainti
Exactly! You need to keep the UI and
functionality consistent, like Gizmodo does
Original Mobile Page AMP URL Version
=
63. #ampsuccess at #brightonseo by @aleyda from @orainti
2. Check your AMP
visibility potential to
prioritise your
implementation accordingly
#ampsuccess at #brightonseo by @aleyda from @orainti
64. #ampsuccess at #brightonseo by @aleyda from @orainti
Verify the share and type of queries for which
AMP results are shown in your industry
https://www.sistrix.com/
65. #ampsuccess at #brightonseo by @aleyda from @orainti
Identify which of them are shown along SERP
features to prioritise and format your content
67. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Once you launch, follow-up w/ your own AMP
results via the Google Search Console
68. #ampsuccess at #brightonseo by @aleyda from @orainti
Verifying the top queries per AMP URL,
to identify opportunities
69. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Just be mindful of GSC false positives!
70. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Use SEOmonitor to track AMP for your targeted
keywords, whether you’re ranking or not
https://www.seomonitor.com/
71. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
And to spot again opportunities
vs. your competitors
72. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
3. Avoid implementing
AMP when you have an
independent mobile Web
Version
73. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Do you really want to manage *another*
independent mobile version? Enough said!
Desktop Web Parallel Mobile Web Version with M subdomain
AMP version under the M subdomain
Google AMP Viewer URL
Canonicalize to
Generates
74. #ampsuccess at #brightonseo by @aleyda from @orainti
4. Validate your AMP
implementation before and
after launch with SEO
crawlers to minimise issues
#ampsuccess at #brightonseo by @aleyda from @orainti
75. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Besides revising your top pages configuration
directly with the “official” AMP Validator
https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=en
76. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Crawl all of them to identify potential issues
before and after launching
https://sitebulb.com/
77. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
SEO crawlers like Sitebulb and Deepcrawl
already include reports featuring AMP issues
https://www.deepcrawl.com/
78. #ampsuccess at #brightonseo by @aleyda from @orainti
5. Monitor your AMP
implementation with the
GSC AMP report, where
you should focus on
fixing critical issues first
#ampsuccess at #brightonseo by @aleyda from @orainti
79. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
It’s usual to be overwhelmed by the increase of
AMP issues when launching and doing changes
SIGH
80. #ampsuccess at #brightonseo by @aleyda from @orainti
Prioritise to fix critical issues first, which will be
the ones preventing to be shown in SERPs
THIS
81. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Start with those affecting the highest number
of pages and check them directly there
82. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Focus on identifying how the non-supported
code is included, so it is replaced or removed
83. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
YES
Rinse and repeat until you
minimise critical errors
84. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
6. Don’t link to your AMP
URLs … unless you don’t
have a Mobile friendly site
or the one you have has
serious speed issues
85. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
There’s an inconsistent mobile user experience
when accessing to AMP pages from SERPs
86. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Which makes you share and link to the
non-canonical Google AMP Viewer URL
87. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
iOS11 will take a first step to avoid this. It’s
advisable to double-verify when linking though.
88. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
7. Don’t want to keep
your users in AMP? Take
them to your canonical
mobile Web version
89. #ampsuccess at #brightonseo by @aleyda from @orainti
You can then refer your users to your original
Website version to see more information, like this
90. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
With this strategic AMP
approach, you’ll have
higher chances of success,
but if you want to disable
it, don’t forget SEO best
practices
91. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Remove the rel=”amphtml” link tag and
301-redirect AMP URLs to your canonical ones
HANDY WP
PLUGIN
https://kinsta.com/blog/disable-google-amp/
92. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
It’s time to make that AMP throne yours!
93. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Let’s go
94. #ampsuccess at #brightonseo by @aleyda from @orainti#ampsuccess at #brightonseo by @aleyda from @orainti
Thanks