Setting AMP for Success

#ampsuccess at #digitalolympus by @aleyda from @orainti

I’m Aleyda Solis

#ampsuccess at #digitalolympus by @aleyda from @orainti

ORAINTI.COM @ALEYDA FB.COM/ALEYDASEOTIPS/

I Do SEO

BITLY.COM/LIBROSEOALEYDA

I’m Aleyda Solis

I PublishI Share

#ampsuccess at #digitalolympus by @aleyda from @orainti

I Blog I Speak I’m Featured

I’m Aleyda Solis

#ampsuccess at #digitalolympus by @aleyda from @orainti

Why & When To Implement AMP?

#ampsuccess at #digitalolympus by @aleyda from @orainti

AMP went live almost a year ago already…

#ampsuccess at #digitalolympus by @aleyda from @orainti

http://searchengineland.com/amp-top-stories-now-live-243314

A “simpler” HTML & CSS, using optimized JS & Google AMP Cache to serve your mobile pages

#ampsuccess at #digitalolympus by @aleyda from @orainti

#ampsuccess at #digitalolympus by @aleyda from @orainti

Mobile Responsive Non-AMP Mobile AMP

To deliver a faster & safer Mobile Web experience

Initially released for publishers is now a requirement to be included in the News Carousel

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.seroundtable.com/google-amp-only-news-carousel-21717.html

Although is not a ranking factor (yet)…

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.seroundtable.com/google-amp-canonical-ranking-23308.html

“AMP optimized news articles appearing within Google's Top Stories on mobile have skyrocketed”

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.rankranger.com/blog/amp-google-news-results-spikes

And not only in the News Carousels

#ampsuccess at #digitalolympus by @aleyda from @orainti

AMP article rich resultsCan 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 resultsA basic, non-graphical search result

pointing to the AMP page.

They are given preference over App deep links

#ampsuccess at #digitalolympus by @aleyda from @orainti

http://searchengineland.com/google-will-show-amp-urls-app-deep-link-urls-mobile-results-259204

And are being expanded, now also for image results

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.seroundtable.com/google-amp-canonical-ranking-23308.html

CDNs have started to support it too

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.cloudflare.com/website-optimization/accelerated-mobile-links/

As well as Ad networks

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://amphtml.wordpress.com/2017/01/30/ads-on-the-web-will-get-better-with-amp-heres-how/

And although more complex functionality support for e-commerce is still in progress

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.ampproject.org/es/roadmap/

e-commerce sites have started to test them too

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/

https://amphtml.wordpress.com/2016/06/30/browse-ebay-with-style-and-speed/

The additional organic search visibility & traffic can be impressive

#ampsuccess at #digitalolympus by @aleyda from @orainti

But there are some already well-known cons

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://80x24.net/post/the-problem-with-amp/

Not showing your own URLs in the browser

#ampsuccess at #digitalolympus by @aleyda from @orainti

This is known by the AMP team and meant to be fixed

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://amphtml.wordpress.com/2017/01/13/why-amp-caches-exist/

http://www.thesempost.com/google-easier-link-share-url-amp/

Providing what can be a over-simplified mobile AMP experience when using plugins

#ampsuccess at #digitalolympus by @aleyda from @orainti

Mobile Responsive Non-AMP Mobile AMP

<>

That can end-up causing this

#ampsuccess at #digitalolympus by @aleyda from @orainti

As well as generating too many pages to handle if you have an independent mobile version

#ampsuccess at #digitalolympus by @aleyda from @orainti

Desktop Non-AMP Mobile AMPIndependent Mobile Non-AMP

https://m.yourname.com/post-a/?amp=1

https://m.yourname.com/post-a/

https://www.yourname.com/post-a/

#ampsuccess at #digitalolympus by @aleyda from @orainti

When does it makes sense to implement AMP at the moment then?

You’re in the media, news

industry or have a blog

Your current mobile page speed

sucks

You can personalize

AMP to have a similar UX &

functionality than your current

site

You ideally don’t have an

independent mobile version

Let’s Implement AMP

#ampsuccess at #digitalolympus by @aleyda from @orainti

First verify that your content type & functionality are AMP supported

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.ampproject.org/docs/reference/components

https://www.ampproject.org/es/roadmap/

Create your AMP HTMLs based on specifications, including the relevant structured data

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.ampproject.org/docs/get_started/create

Replace components & tags to be included with the relevant AMP markup, such as images

#ampsuccess at #digitalolympus by @aleyda from @orainti

Embed your AMP custom CSS inline, only one stylesheet per page

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.ampproject.org/docs/guides/responsive/style_pages

You can see directly AMP implementation examples & demos for the desired functionality

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://ampbyexample.com/

As well as edit & test it in the AMP Playground to check if it would pass the validation

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://ampbyexample.com/playground/

Pair your “canonical” pages with your AMP ones

#ampsuccess at #digitalolympus by @aleyda from @orainti

Non-AMP AMP

If for some reason you’re only using AMP pages, they should be tagged as your canonical ones

#ampsuccess at #digitalolympus by @aleyda from @orainti

Canonical AMP

If you have a Wordpress based site you can use the official free AMP Plugin

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://wordpress.org/plugins-wp/amp/

Yoast Glue for AMP facilitates the implementation of the required markup & customization too

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://wordpress.org/plugins-wp/glue-for-yoast-seo-amp/

As well as the PageFrog plugin

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://wordpress.org/plugins-wp/pagefrog/

The goal is to provide the most consistent user experience through your “extended” AMP pages

#ampsuccess at #digitalolympus by @aleyda from @orainti

Mobile Non-AMP Mobile AMP

=

If at some point you disable them, remember these need to be 301-redirected to avoid errors

#ampsuccess at #digitalolympus by @aleyda from @orainti

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://medium.com/relay-media/whats-going-on-with-amp-analytics-5595af2dcc71#.2it72dhgb

It’s also critical to track them, thinking on their “cross-domain” design

Google Analytics supports AMP through the amp-analytics component

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://developers.google.com/analytics/devguides/collection/amp-analytics/

You can implement it via GTM too

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://www.simoahava.com/analytics/accelerated-mobile-pages-via-google-tag-manager/

Once you finish, verify your implementation using The OnPage AMP Checklist

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://en.onpage.org/knowledge-base/tutorials/amp/

You can additionally validate your AMP pages with the AMP Project Validator

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://validator.ampproject.org/

Using Chrome DevTools

#ampsuccess at #digitalolympus by @aleyda from @orainti

http://searchengineland.com/chromes-devtools-seo-10-ways-use-seo-audits-266433

The crawlers that already support AMP validation, like SEMrush Site Audit

#ampsuccess at #digitalolympus by @aleyda from @orainti

Or by configuring Screaming Frog using custom extraction

#ampsuccess at #digitalolympus by @aleyda from @orainti

Monitor potential remaining errors in the Google Search Console AMP Report

#ampsuccess at #digitalolympus by @aleyda from @orainti

Prioritize to fix “critical” issues affecting most & more important pages

#ampsuccess at #digitalolympus by @aleyda from @orainti

Besides invalid code usage in AMP pages, the most common issue is “content mismatch”

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://support.google.com/webmasters/answer/6328309

As well as errors in structured data, although this is not critical

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://search.google.com/structured-data/testing-tool

You can directly see in the GSC report the pages affected & details regarding each issue

#ampsuccess at #digitalolympus by @aleyda from @orainti

And select to validate them there directly to verify in which line the problem is to fix

#ampsuccess at #digitalolympus by @aleyda from @orainti

https://search.google.com/search-console/amp

It can be a rollercoaster, although one with a positive trend if critical errors are handled

#ampsuccess at #digitalolympus by @aleyda from @orainti

Maximizing your mobile search visibility

#ampsuccess at #digitalolympus by @aleyda from @orainti

While providing the most possibly consistent mobile user experience

#ampsuccess at #digitalolympus by @aleyda from @orainti

Thanks! Questions?

#ampsuccess at #digitalolympus by @aleyda from @orainti