AMP by Example

Introduction
Introduction

Components
Components

Advanced
Advanced

Samples & Templates
Samples & Templates

View on Github

Learn AMP by Example

AMP by Example gives a hands-on introduction to Accelerated Mobile Pages based on code and live samples. Learn how to create web pages with AMP and and how to effectively use AMP components.

Contents

Introduction

Get started with AMP and learn how to build your first AMP page.

Hello World

An AMP HTML tutorial - learn the different building blocks of an AMP HTML file.

View Sample

How to publish AMPs

There are a few things you need to watch out for when publishing Accelerated Mobile Pages (AMP).

View Sample

Components

AMP components in action. Learn how to build AMPs using the build-in components.

amp-access

The amp-access component adds support for paywalls and subscriptions to AMP, allowing the publisher to control which content is accessible by the reader and with what restrictions.

View Sample

amp-accordion

An accordion provides a way for viewers to have a glance at the outline of the content and jump to a section or their choice at their will.

View Sample

amp-ad

How to display Ads in your AMP HTML files.

View Sample

amp-analytics

The amp-analytics element can be used to measure activity on an AMP document.

View Sample

amp-anim

Embed animations (gif, webp) into your AMP HTML files.

View Sample

amp-audio

AMP replaces the HTML5 audio tag with its own version: amp-audio.

View Sample

amp-brid-player

Embed Brid Player videos in your AMP HTML files.

View Sample

amp-brightcove

The amp-brightcove component allows embedding a Brightcove Video Cloud or Perform player.

View Sample

amp-carousel

The amp-carousel component allows displaying multiple similar pieces of content along a horizontal axis.

View Sample

amp-dailymotion

Embed daily motion videos into your AMP HTML files.

View Sample

amp-experiment

The amp-experiment component allows to perform user experience experiments on an AMP document and collect resulting data.

View Sample

amp-facebook

The amp-facebook component allows embedding both posts and videos into AMP files.

View Sample

amp-font

Learn how to use the amp-font component to trigger and monitor the loading of custom fonts on AMP pages.

View Sample

amp-form

The amp-form extension allows the usage of forms and input fields in an AMP document.

View Sample

amp-fx-flying-carpet

amp-fx-flying-carpet displays its children inside a container of fixed height.

View Sample

amp-iframe

Embed iframes into AMP files.

View Sample

amp-image-lightbox

The amp-image-lightbox component allows the user to expand an image to fill the viewport.

View Sample

amp-img

AMP HTML files don't support the normal HTML img tag.

View Sample

amp-instagram

Embed instagram videos and photos into your AMP HTML files.

View Sample

amp-install-serviceworker

The amp-install-serviceworker component enables service worker installation via same origin or via the Google AMP Cache.

View Sample

amp-lightbox

The amp-lightbox component allows for a “lightbox” or similar experience - where upon user interaction a component expands to fill the viewport, until it is closed again by the user.

View Sample

amp-list

The amp-list component fetches dynamic content from a CORS JSON endpoint and renders it using a supplied template.

View Sample

amp-live-list

The amp-live-list component adds support for publishing live updates to AMP pages as new content becomes available in the source document.

View Sample

amp-o2-player

Embed o2 player in your AMP HTML files.

View Sample

amp-pinterest

Import the amp-pinterest component in the header.

View Sample

amp-sidebar

A sidebar provides a way to display meta content intended for temporary access (navigation links, buttons, menus, etc.).

View Sample

amp-social-share

The Social Share extension provides a common interface for share buttons, styled to complement each other.

View Sample

amp-soundcloud

Play soundcloud tracks from within AMP HTML files.

View Sample

amp-sticky-ad

amp-sticky-ad adds support for ad units that always take a fixed place in the viewport in your AMP HTML files.

View Sample

amp-twitter

Embed tweets into your AMP HTML files.

View Sample

amp-user-notification

Use amp-user-notification to display a dismissable notification to the user.

View Sample

amp-video

Embed videos into your AMP HTML files.

View Sample

amp-vimeo

Embed Vimeo videos in your AMP HTML files.

View Sample

amp-vine

Embed Vine videos in your AMP HTML files.

View Sample

amp-youtube

Embed YouTube videos into your AMP HTML files.

View Sample

Advanced

Advanced AMP integrations. Learn how to get the most out of AMP.

amp-user-notification with Server Endpoint

Use amp-user-notification to display a dismissable notification to the user.

View Sample

How to create interactive AMP pages?

This samples demonstrates how to embed interactive charts into AMP files.

View Sample

Image Galleries with amp-carousel

The amp-carousel component works great for image galleries.

View Sample

Integrating Videos in AMP: an Overview

There many different ways to integrate videos in AMP HTML files.

View Sample

Long List of amp-instagram Embeds

A page with a long list of amp-instagram embeds to show how fast and responsive AMP pages are, this example contains 15 amp-instagram embeds.

View Sample

Using the Google AMP Cache

The Google AMP Cache stores valid AMPs and provides a consistently fast access to AMPs.

View Sample

Video Carousels with amp-carousel

The amp-carousel component works not only great for image galleries, but also for video galleries.

View Sample

Samples & Templates

Templates and metadata samples for different kinds of AMPs.

Housing

This sample showcases how to build a housing page in AMP HTML.

View Sample

Live Blog

This is a sample template for implementing live blogs in AMP.

View Sample

News Article

This is a sample template for a news article in AMP.

View Sample

Product Listing

This sample showcases how to build a product listing page in AMP HTML.

View Sample

Product

This sample showcases how to build a product page in AMP HTML.

View Sample

Recipe

This is a sample recipe AMP article demonstrating how to express machine-readable recipe data using JSON+LD.

View Sample