AMP Page Markup for Websites
AMP (Accelerated Mobile Pages) is an open Google standard for creating mobile pages with guaranteed fast loading. AMP pages are cached by Google AMP Cache and load instantly from search results. Most relevant for news sites and article portals.
When to Use AMP
AMP makes sense for:
- News articles and blog posts
- Landings (AMP Email, AMP for Ads)
- Pages with high mobile search traffic share
AMP is impractical for interactive applications, shopping carts, and pages with heavy logic.
AMP Document Structure
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Article Title</title>
<link rel="canonical" href="https://example.com/article">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"NewsArticle",...}
</script>
<style amp-boilerplate>body{...}</style>
<noscript><style amp-boilerplate>body{...}</style></noscript>
<style amp-custom>
/* Max 75KB CSS. Regular CSS, no @import */
body { font-family: 'Roboto', sans-serif; }
.article-header { font-size: 2rem; }
</style>
</head>
<body>
<amp-img src="/hero.jpg" width="1200" height="630" layout="responsive" alt="..."></amp-img>
<article>
<h1>Heading</h1>
<p>Article text...</p>
</article>
</body>
</html>
Key Limitations
-
No custom
<script>tags — only AMP components (<amp-script>with restrictions) - CSS max 75KB — all inline, no external sheets
-
<img>forbidden — only<amp-img>with explicit width/height -
Inline styles (
style=") — forbidden, only via<style amp-custom> -
Forms — via
<amp-form>, not standard<form>
AMP Components
Replacements for standard HTML elements:
| HTML | AMP |
|---|---|
<img> |
<amp-img> |
<video> |
<amp-video> |
<iframe> |
<amp-iframe> |
| Carousel | <amp-carousel> |
| Accordion | <amp-accordion> |
| Analytics | <amp-analytics> |
Canonical and AMP Versions
Each article has two versions: regular and AMP. Connected via:
<!-- In regular page -->
<link rel="amphtml" href="https://example.com/article?amp=1">
<!-- In AMP page -->
<link rel="canonical" href="https://example.com/article">
Google shows AMP version in search (with lightning ⚡), loading from cache.
Validation
AMP page must pass validation. Tools:
- AMP Validator (validator.ampproject.org)
- Chrome AMP DevTools extension
- CLI:
npx @ampproject/toolbox-cli validate https://example.com/article
Timeline
Markup of one AMP page type (blog article): 1–2 days. Setup auto-generation of AMP versions from CMS (e.g., WordPress AMP plugin or custom generation) + validation: 3–5 days.