setting amp for success at #smxlmilan

88

Click here to load reader

Upload: aleyda-solis

Post on 21-Jan-2018

1.070 views

Category:

Mobile


2 download

TRANSCRIPT

Page 1: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Setting AMP for Success

Page 2: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Ciao #SMXLMILAN

#ampsuccess by @aleyda at #smxlmilan

Page 3: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

I’m Aleyda Solis

Page 4: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

I help companies to connect with them

#ampsuccess by @aleyda at #smxlmilan

Page 5: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Some of them brands you likely know

#ampsuccess by @aleyda at #smxlmilan

Page 6: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Having a fast mobile Website is one of the fundamental aspects to achieve this goal

Page 7: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

As well as to avoid causing stress to our users

Page 8: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Speed will be even more critical with Google’s upcoming mobile first index too

Page 9: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Users have minimum expectations

Page 10: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

But this is our speed reality

Page 11: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Let’s see… how much time the Trova Prezzi home page takes to load?

Page 12: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Ouch

https://testmysite.thinkwithgoogle.com/

Page 13: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

And the Virgilio one?

Page 14: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Yup

https://testmysite.thinkwithgoogle.com/

Page 15: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

And La Stampa one?

Page 16: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

I think I’ve made my point

https://testmysite.thinkwithgoogle.com/

Page 17: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

The solution is to implement WPO principles to make Mobile sites to load fast

https://developers.google.com/speed/docs/insights/rules

Page 18: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

But big sites have restrictive legacy platforms & small ones little resources to improve them

Page 19: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

This is why Google launched AMP

Page 20: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

It uses a “simplified” HTML version with optimised resources & cache to serve faster in Mobile SERPs

https://www.ampproject.org/learn/overview/

Page 21: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

AMP is published “parallely” and canonicalized to your current (slower) Mobile Web pages

http://www.lastampa.it/2017/11/11/societa/nel-giorno-dei-single-alibaba-macina-record-un-miliardo-di-dollari-nei-primi-due-

minuti-e-un-secondo-3LBa6otfg99OuPdX7H6XIJ/pagina.html

http://www.lastampa.it/2017/11/11/societa/nel-giorno-dei-single-alibaba-macina-record-un-miliardo-di-dollari-nei-primi-due-minuti-e-un-secondo-3LBa6otfg99OuPdX7H6XIJ/amphtml/pagina.amp.html

Page 22: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

It’s also cached and pre-rendered by Google when shown in Mobile SERPs

Google AMP Viewer URLthat is pre-rendered

Canonical URL of the Page

Content served from AMP Cache URL

Page 24: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

AMP usage is not a ranking factor

Page 25: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

But Google made it a requirement to be included in the News Carrousel

Page 26: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

and can be also shown in organic results

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.

Page 27: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Which has given it an impressive SERP visibility

https://www.rankranger.com/amp-on-google-serp

Page 28: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

As well as traffic to the sites using itAMP Rich Results

AMP Non-Rich Results

Non-AMP Results

More Mobile organic visibility and traffic from

AMP than non-AMP results

Page 29: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

However, AMP is not a replacement of your Mobile site

Page 30: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Even Google representatives agree that is not a “bullet-proof” solution for all sites

“It wouldn’t be reasonable for us to expect that a group of limited functionalities replace all what you can do at the moment in the mobile environment…AMP its meant to serve in certain use cases”

https://www.youtube.com/watch?v=wtOjUwGnrVY

Page 31: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

AMP is a fast “add-on” to your already existing (but still slow) mobile Website

Just what happens with Batman as a super hero… he

doesn’t have any superpowers

#ampsuccess by @aleyda at #smxlmilan

Page 32: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Sorry Batman

AMP A fast Mobile site

#ampsuccess by @aleyda at #smxlmilan

Page 33: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

But due to the way it is presented and its expansion efforts it might look like it

Page 34: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Just what happens to Batman as a superhero too

#ampsuccess by @aleyda at #smxlmilan

Page 35: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

That’s why there are reservations about it: “AMP has a good intentions… but sacrifice the open Web”

Page 36: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

You shouldn’t then use AMP as a silver bullet Mobile speed solution but a resource in certain scenarios…

Thanks Alfred :)

#ampsuccess by @aleyda at #smxlmilan

Page 37: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

You will be able to minimize situations like this

Page 38: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Use AMP when your Mobile site is too slow and/or you want to be included in the carrousel

and/or

Too slow and can’t be improved

Needs to be included in carrousel

Page 39: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Avoid implementing AMP when you have an independent mobile Web Version

Desktop Web Parallel Mobile Web Version with M subdomain

AMP URL

Google AMP Viewer URL

Canonicalize to

Generates

Page 40: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Verify if you can Implement your current Mobile Web UI & functionality with AMP

#ampsuccess by @aleyda at #smxlmilan

Page 41: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Your AMP URLs should replicate your own Mobile Web UI & functionality, instead of this

ORIGINAL MOBILE PAGE AMP VERSION

Page 42: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Validate that your mobile Web functionality can be replicated by using AMP components

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

Page 43: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Check with your development team if you have the capacity and flexibility to use them

https://ampbyexample.com/

Page 44: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

You can even test while validating your code directly in the AMP Playground editor

https://ampbyexample.com/playground/

Page 45: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Plan ahead using the roadmap with a reference of the functionalities to come

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

Page 46: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

There are also free Wordpress plugins that highly facilitate the implementation

Page 47: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

You can also use freemium and paid WP plugins like AMP for WP and weeblrAMP

Page 48: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

They will allow you to personalise more, but you’ll likely need further development support

Page 49: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

They’re not an “out of the box” solution and will still need design personalisation

ORIGINAL MOBILE PAGE AMP VERSION

Page 50: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

The goal should be to keep the UI and functionality consistent

ORIGINAL MOBILE PAGE

=

AMP VERSION

Page 51: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Check your AMP visibility potential to prioritize your implementation

accordingly

#ampsuccess by @aleyda at #smxlmilan

Page 52: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Verify the share and type of queries for which AMP results are shown in your industry

https://www.sistrix.com/

Page 53: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Identify which of them are shown along SERP features to prioritise and format your content

Page 54: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Like this

Page 55: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Avoid linking to your AMP URLs unless you’re using them as your

canonical mobile Web pages

#ampsuccess by @aleyda at #smxlmilan

Page 56: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

There’s an inconsistent mobile user experience when accessing to AMP pages from SERPs

Page 57: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Which ends-up causing that users link and share the non-canonical Google AMP Viewer URLs

Page 58: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Start avoiding these by making sure to only link internally to your canonical URLs from AMP

Page 59: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

You can also refer your users to your original Website version to continue browsing your site

Page 60: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Remember to also redirect based on the user agent to avoid showing non-mobile visitors your AMP URLs

DON’T DO THIS DO THIS

Page 61: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Validate your AMP implementation before and after launch with SEO

crawlers to minimise issues

#ampsuccess by @aleyda at #smxlmilan

Page 62: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

+70% of top publishers with AMP across 8 countries (including the US) have implementation errors

Page 63: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Most common AMP mistakes are related to usage of disallowed and non-supported attributes & tags

https://www.semrush.com/blog/amp-mistakes-semrush-study/

Page 64: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

For real

THIS IS NOT THE AMP VERSION OF THE ABOVE ARTICLE

Page 65: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Avoid them by using the AMP validator Chrome extension to go through your main pages

https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc

Page 66: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Crawl all of your site pages to validate AMP implementation issues before and after launching

https://sitebulb.com/

Page 67: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

SEO crawlers like Sitebulb, Deepcrawl & SEMrushalready include AMP configuration problems

deepcrawl.com

Page 68: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

You’ll be able to obtain and fix quickly those that would generate critical issues in the Search Console

Page 69: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

https://www.screamingfrog.co.uk/log-file-analyser/

Validate if possible in your logs if Googlebot’s crawling behavior of your AMP URLs is consistent

19 OF THE 20 CRAWLED URLs ARE AMP

Page 70: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Monitor AMP implementation errors with GSC AMP report, where you should focus on fixing critical

issues first

#ampsuccess by @aleyda at #smxlmilan

Page 71: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

It’s usual to be overwhelmed by the increase of AMP issues when launching or updating

SIGH

Page 72: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Prioritise to fix critical issues first, which will be the ones preventing to be shown in SERPs

THIS

Page 73: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Start with those affecting the highest number of pages and check them directly there

Page 74: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Focus on identifying how the non-supported code is included to establish a pattern and remove it

Page 75: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

YES

Rinse and repeat until you minimise critical errors

Page 76: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Monitor your AMP visibility impact to prioritize your efforts along the

on-going content development and optimization process

#ampsuccess by @aleyda at #smxlmilan

Page 77: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Opt-in for Google Analytics AMP Client ID API to correctly track AMP on Cache

https://support.google.com/analytics/answer/7486764

Page 78: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Beyond the AMP vs. Non-AMP traffic trend, what’s the impact of AMP on users behavior?

Page 79: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Follow-up w/ your own AMP results via the Google Search Console too

Page 80: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Verify the top queries per AMP URL to identify further AMP content opportunities

Page 81: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Be mindful of Search Console false positives though

Page 82: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Use SEOmonitor to track AMP for your targeted (ranked or unranked) keywords

https://www.seomonitor.com/

Page 83: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

You can also spot AMP opportunities vs. your competitors with SEMrush rank tracking

https://www.semrush.com

Page 84: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

rankranger.com

Do the same with your News Carrousel AMP rankings by using RankRanger

Page 85: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

If at some point you want to disable AMP, follow SEO best practices to

avoid losing that traffic

#ampsuccess by @aleyda at #smxlmilan

Page 86: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Remove the rel=”amphtml” link tag and 301-redirect AMP URLs to your canonical ones

https://developers.google.com/search/docs/guides/remove-amp

HANDY WORDPRESS

PLUGIN

Page 87: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Here’s a list with all of these, so you don’t forget

Verify if you can Implement your current

Mobile Web UI & functionality with AMP

Check your AMP visibility potential to prioritise your

implementation accordingly

Monitor AMP implementation errors with GSC AMP report, where you

should focus on fixing critical issues first

Avoid linking to your AMP URLs unless you’re using them as your canonical mobile Web

pages

Validate your AMP implementation before

and after launch with SEO crawlers to minimise issues

Monitor your AMP visibility impact to prioritize your

efforts along the on-going content development and

optimization process

If you want to disable AMP, don’t forget SEO best

practices, removing tag to AMP and redirecting to your

mobile pages

Page 88: Setting AMP for Success at #SMXLmilan

#ampsuccess by @aleyda at #smxlmilan

Now is your turn

#ampsuccess by @aleyda at #smxlmilan