1 of 19

Accelerated Mobile Pages (AMP)

2 of 19

What is AMP?

- Created by Google

- Open source

- ⚡ Lightning fast ⚡

- Instant Loading

- Enhanced mobile SEO

- Top stories carousel

2

Place your screenshot here

3 of 19

3

source: https://moz.com/blog/amp-digital-marketing-2018

4 of 19

4

Source: https://www.ampproject.org/support/faqs/supported-browsers

5 of 19

How is AMP implemented?

6 of 19

AMP Cache

6

source: The AMP Channel – Why AMP Caches Exist

7 of 19

AMP Cache

7

8 of 19

AMP Components

AMP HTML

  • <html ⚡>
  • HTML extended with custom AMP properties

AMP JS

  • No custom JavaScript
  • AMP components
  • All external resources must be asynchronous
  • AMP Cache

8

9 of 19

Basic AMP page

9

10 of 19

Add css

10

11 of 19

Add AMP Components

11

12 of 19

Validate AMP Pages

​

12

13 of 19

Make AMP pages discoverable

  • In existing non-AMP page

​

​

​

  • In AMP page

13

14 of 19

In Summary

14

Build AMP compliant pages

​

Ensure AMP pages are valid or they will not be cached.

Get AMP pages cached

​

Through autocrawling, or manual sitemap submissions etc

Link AMP pages to canonical

​

Using the Link tags. Set AMP page to canonical if non-AMP page do not exist

03

01

02

15 of 19

Pros

  • Faster page loads
  • Better SEO
    • Noticed a 30-40% increase in organic search results for AMP pages

​

Cons

  • Reduced session time
  • Higher bounce rates
  • Code maintenance +1
  • New development also need to be designed for AMP pages
  • Will be detrimental if AMP pages are not done correctly
    • e.g. missing functionality

​

​

15

16 of 19

Challenges

  • Static Layouting: image sizes needs to be known
  • Inline, size bound css, max 50kb
  • No custom JavaScript means making creative use of AMP-components and css

16

17 of 19

Useful Links

​

17

18 of 19

Analytics

18

19 of 19

Thanks!

Any questions?

19