Select Format
What do you want to build with AMP?
Select Features
Select the features you need on your AMP page.
Media
Fonts
Analytics
Structured Data ?
Provide information about your page and classify the page content using structured data.
Render-delaying Extensions ?
Render-delaying extensions affect the static layout of the page. Hence, the AMP runtime must wait until these are downloaded, before it can start rendering the page to avoid annoying page jumps. To improve page load time, it's best to download these extensions with a higher priority using a preload directive.
Boilerplate
Start your AMP page by copying and pasting this code:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="This is the AMP Boilerplate.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Import other AMP Extensions here -->
<style amp-custom>
/* Add your styles here */
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="canonical" href=".">
<title>My AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="This is the AMP Boilerplate.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
{{#ampExperiment.selected}}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-experiment-0.1.js">
{{/ampExperiment.selected}}
{{#ampDynamicCss.selected}}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
{{/ampDynamicCss.selected}}
{{#heroImage.selected}}
<link rel="preload" href="{{heroImage.heroImageSrc}}" as="image">
{{/heroImage.selected}}
{{#heroVideo.selected}}
<link rel="preload" href="{{heroVideo.heroVideoPoster}}" as="image">
{{/heroVideo.selected}}
{{#googleFonts.selected}}
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>
{{/googleFonts.selected}}
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{#ampExperiment.selected}}
<script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
{{/ampExperiment.selected}}
{{#ampDynamicCss.selected}}
<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
{{/ampDynamicCss.selected}}
<!-- Import other AMP Extensions here -->
{{#serviceworker.selected}}
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
{{/serviceworker.selected}}
{{#ampAnalytics}}
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
{{/ampAnalytics}}
{{#ampVideo}}
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-1.0.js"></script>
{{/ampVideo}}
{{#googleFonts.selected}}
<link href="https://fonts.googleapis.com/css?family={{googleFonts.fonts}}" rel="stylesheet">
{{/googleFonts.selected}}
<style amp-custom>
/* Add your styles here */
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="canonical" href=".">
<title>My AMP Page</title>
{{#manifest.selected}}
<link rel="manifest" href="{{{manifest.manifestPath}}}">
{{/manifest.selected}}
{{#jsonNewsArticle.selected}}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://google.com/article"
},
"headline": "Article headline",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "AMP Project",
"logo": {
"@type": "ImageObject",
"url": "https://google.com/logo.jpg"
}
},
"description": "A most wonderful article"
}
</script>
{{/jsonNewsArticle.selected}}
{{#jsonRecipe.selected}}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2018-03-10",
"description": "This coffee cake is awesome and perfect for parties.",
"prepTime": "PT20M",
"cookTime": "PT30M",
"totalTime": "PT50M",
"keywords": "cake for a party, coffee",
"recipeYield": "10 servings",
"recipeCategory": "Dessert",
"recipeCuisine": "American",
"nutrition": {
"@type": "NutritionInformation",
"calories": "270 calories"
},
"recipeIngredient": [
"2 cups of flour",
"3/4 cup white sugar",
"2 teaspoons baking powder",
"1/2 teaspoon salt",
"1/2 cup butter",
"2 eggs",
"3/4 cup milk"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
},
{
"@type": "HowToStep",
"text": "In a large bowl, combine flour, sugar, baking powder, and salt."
},
{
"@type": "HowToStep",
"text": "Mix in the butter, eggs, and milk."
},
{
"@type": "HowToStep",
"text": "Spread into the prepared pan."
},
{
"@type": "HowToStep",
"text": "Bake for 30 to 35 minutes, or until firm."
},
{
"@type": "HowToStep",
"text": "Allow to cool."
}
],
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Julia Benson"
},
"datePublished": "2018-05-01",
"reviewBody": "This cake is delicious!",
"publisher": "The cake makery"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "18"
},
"video": [
{
"name": "How to make a Party Coffee Cake",
"description": "This is how you make a Party Coffee Cake.",
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"contentUrl": "http://www.example.com/video123.flv",
"embedUrl": "http://www.example.com/videoplayer.swf?video=123",
"uploadDate": "2018-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"interactionCount": "2347",
"expires": "2019-02-05T08:00:00+08:00"
}
]
}
</script>
{{/jsonRecipe.selected}}
{{#jsonVideo.selected}}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "VideoObject",
"name": "Title",
"description": "Video description",
"thumbnailUrl": "https://www.example.com/thumbnail.jpg",
"uploadDate": "2015-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"publisher": {
"@type": "Organization",
"name": "Example Publisher",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.jpg",
"width": 600,
"height": 60
}
},
"contentUrl": "https://www.example.com/video123.flv",
"embedUrl": "https://www.example.com/videoplayer.swf?video=123",
"interactionCount": "2347"
}
</script>
{{/jsonVideo.selected}}
{{#jsonWebpage.selected}}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Webpage",
"url": "https://www.example.com",
"name": "My Webpage",
"headline": "webpage title",
"description": "Here is the description",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.example.com"
},
"publisher": {
"@type": "Organization",
"name": "The Publisher",
"logo": {
"url": "https://www.example.com/logo-blue.svg",
"width": 175,
"height": 60,
"@type": "ImageObject"
}
},
"image": {
"@type": "ImageObject",
"url": "https://www.example.com/leader.png",
"width": 1200,
"height": 630
}
}
</script>
{{/jsonWebpage.selected}}
</head>
<body>
<h1>Hello World</h1>
{{#heroImage.selected}}
<amp-img src="{{heroImage.heroImageSrc}}"
width="1280"
height="720"
layout="responsive"
alt="This is a hero image which should be loaded as fast as possible">
</amp-img>
{{/heroImage.selected}}
{{#heroVideo.selected}}
<amp-video width="640"
height="360"
layout="responsive"
poster="{{heroVideo.heroVideoPoster}}"
artwork="artwork.png"
title="My video"
artist="The artist"
album="The album">
<source src="video.m3u8" type="application/vnd.apple.mpegurl">
<source src="video.mp4" type="video/mp4">
<div fallback>This browser does not support the video element.</div>
</amp-video>
{{/heroVideo.selected}}
{{#serviceworker.selected}}
<amp-install-serviceworker src="{{{serviceworker.swPath}}}{{serviceworker.js}}"
data-iframe-src="{{{serviceworker.path}}}{{serviceworker.iframe}}"
layout="nodisplay">
</amp-install-serviceworker>
{{/serviceworker.selected}}
{{#googleAnalytics.selected}}
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "{{ googleAnalytics.trackingId }}",
"config" : {
"{{ googleAnalytics.trackingId }}": {
"groups": "default"
}
}
}
}
</script>
</amp-analytics>
{{/googleAnalytics.selected}}
{{#adobeAnalytics.selected}}
<amp-analytics>
<script type="application/json">
{
"transport": {
"xhrpost": false,
"beacon": true
},
"requests": {
"base": "https://${trackingServer}/b/ss/${accounts}/1/AMP-0.1/s${random}",
"pageView": "${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&AQE=1",
"buttonClick": "${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&pe=lnk_o&v1=${eVar1}&AQE=1"
},
"vars": {
"trackingServer": "{{adobeAnalytics.trackingServer}}",
"accounts": "{{adobeAnalytics.reportSuiteID}}",
"pageName": "Adobe Analytics Using amp-analytics tag"
},
"triggers": {
"pageLoad": {
"on": "visible",
"request": "pageView"
},
"click": {
"on": "click",
"selector": "button",
"request": "buttonClick",
"vars": {
"eVar1": "button clicked"
}
}
}
}
</script>
</amp-analytics>
{{/adobeAnalytics.selected}}
</body>
</html>
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="This is the AMP Boilerplate.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-story-1.0.js">
{{#ampExperiment.selected}}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-experiment-0.1.js">
{{/ampExperiment.selected}}
{{#ampDynamicCss.selected}}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
{{/ampDynamicCss.selected}}
{{#heroImage.selected}}
<link rel="preload" href="{{heroImage.heroImageSrc}}" as="image">
{{/heroImage.selected}}
{{#heroVideo.selected}}
<link rel="preload" href="{{heroVideo.heroVideoPoster}}" as="image">
{{/heroVideo.selected}}
{{#googleFonts.selected}}
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>
{{/googleFonts.selected}}
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
{{#ampExperiment.selected}}
<script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
{{/ampExperiment.selected}}
{{#ampDynamicCss.selected}}
<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
{{/ampDynamicCss.selected}}
<!-- Import other AMP Extensions here -->
{{#ampAnalytics}}
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
{{/ampAnalytics}}
{{#ampVideo}}
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-1.0.js"></script>
{{/ampVideo}}
{{#googleFonts.selected}}
<link href="https://fonts.googleapis.com/css?family={{googleFonts.fonts}}" rel="stylesheet">
{{/googleFonts.selected}}
<style amp-custom>
/* Add your styles here */
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="canonical" href=".">
<title>My AMP Page</title>
</head>
<body>
<amp-story standalone
publisher="The Publisher"
title="My Story"
publisher-logo-src="logo.png"
poster-portrait-src="poster-portrait.png"
poster-square-src="poster-square.png"
poster-landscape-src="poster-landscape.png">
<amp-story-page id="cover">
<amp-story-grid-layer template="vertical">
<h1>Hello World</h1>
{{#heroImage.selected}}
<amp-img src="{{heroImage.heroImageSrc}}"
width="720"
height="1280"
layout="responsive"
alt="This is a hero image which should be loaded as fast as possible">
</amp-img>
{{/heroImage.selected}}
{{#heroVideo.selected}}
<amp-video width="720"
height="1280"
layout="responsive"
poster="{{heroVideo.heroVideoPoster}}"
artwork="artwork.png"
title="My video"
artist="The artist"
album="The album">
<source src="video.m3u8" type="application/vnd.apple.mpegurl">
<source src="video.mp4" type="video/mp4">
<div fallback>This browser does not support the video element.</div>
</amp-video>
{{/heroVideo.selected}}
</amp-story-grid-layer>
</amp-story-page>
<amp-story-bookend src="bookend.json" layout=nodisplay></amp-story-bookend>
{{#googleAnalytics.selected}}
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "{{ googleAnalytics.trackingId }}",
"config" : {
"{{ googleAnalytics.trackingId }}": {
"groups": "default"
}
}
}
}
</script>
</amp-analytics>
{{/googleAnalytics.selected}}
{{#adobeAnalytics.selected}}
<amp-analytics>
<script type="application/json">
{
"transport": {
"xhrpost": false,
"beacon": true
},
"requests": {
"base": "https://${trackingServer}/b/ss/${accounts}/1/AMP-0.1/s${random}",
"pageView": "${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&AQE=1",
"buttonClick": "${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&pe=lnk_o&v1=${eVar1}&AQE=1"
},
"vars": {
"trackingServer": "{{adobeAnalytics.trackingServer}}",
"accounts": "{{adobeAnalytics.reportSuiteID}}",
"pageName": "Adobe Analytics Using amp-analytics tag"
},
"triggers": {
"pageLoad": {
"on": "visible",
"request": "pageView"
},
"click": {
"on": "click",
"selector": "button",
"request": "buttonClick",
"vars": {
"eVar1": "button clicked"
}
}
}
}
</script>
</amp-analytics>
{{/adobeAnalytics.selected}}
</amp-story>
</body>
</html>
<!doctype html>
<html ⚡4ads>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp4ads-boilerplate>body{visibility:hidden}</style>
<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
{{#ampExperiment.selected}}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-experiment-0.1.js">
{{/ampExperiment.selected}}
{{#ampDynamicCss.selected}}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
{{/ampDynamicCss.selected}}
{{#googleFonts.selected}}
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin>
{{/googleFonts.selected}}
{{#ampAnalytics}}
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
{{/ampAnalytics}}
{{#googleFonts.selected}}
<link href="https://fonts.googleapis.com/css?family={{googleFonts.fonts}}" rel="stylesheet">
{{/googleFonts.selected}}
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>Hello, AMP for Ads world.</h1>
{{#googleAnalytics.selected}}
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "{{ googleAnalytics.trackingId }}",
"config" : {
"{{ googleAnalytics.trackingId }}": {
"groups": "default"
}
}
}
}
</script>
</amp-analytics>
{{/googleAnalytics.selected}}
{{#adobeAnalytics.selected}}
<amp-analytics>
<script type="application/json">
{
"transport": {
"xhrpost": false,
"beacon": true
},
"requests": {
"base": "https://${trackingServer}/b/ss/${accounts}/1/AMP-0.1/s${random}",
"pageView": "${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&AQE=1",
"buttonClick": "${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&pe=lnk_o&v1=${eVar1}&AQE=1"
},
"vars": {
"trackingServer": "{{adobeAnalytics.trackingServer}}",
"accounts": "{{adobeAnalytics.reportSuiteID}}",
"pageName": "Adobe Analytics Using amp-analytics tag"
},
"triggers": {
"pageLoad": {
"on": "visible",
"request": "pageView"
},
"click": {
"on": "click",
"selector": "button",
"request": "buttonClick",
"vars": {
"eVar1": "button clicked"
}
}
}
}
</script>
</amp-analytics>
{{/adobeAnalytics.selected}}
</body>
</html>
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>Hello, I am an AMP EMAIL!</h1>
</body>
</html>
Serviceworker Iframe
The webdocument that installs your service worker. Copy this code and serve it together with your serviceworker implementation.
<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('{{{serviceworker.swPath}}}{{serviceworker.js}}');
};
</script>
Serviceworker Boilerplate
A sample serviceworker implementation using the AMP Service Worker. Copy this code and serve it from the specified path.
importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
{{#serviceworker.assetCaching}}
assetCachingOptions: [{
regexp: /\.(png|jpg|woff2|woff|css|js)/,
cachingStrategy: 'CACHE_FIRST',
}],
{{/serviceworker.assetCaching}}
{{#serviceworker.offlinePage}}
offlinePageOptions: {
url: '/offline.html',
assets: [],
},
{{/serviceworker.offlinePage}}
});
Bookend Sample
A sample AMP Story bookend JSON configuration.
{
"bookendVersion": "v1.0",
"shareProviders": [
"email",
"tumblr",
{
"provider": "twitter",
"text": "This is custom share text that I would like for the Twitter platform"
},
{
"provider": "facebook",
"app_id": "MY_FACEBOOK_APP_ID"
}
],
"components": [
{
"type": "heading",
"text": "More to read"
},
{
"type": "small",
"title": "This is India an the best places you should go",
"url": "http://example.com/article.html",
"image": "http://placehold.it/256x128"
}
]
}
Show More