AMP Pages Implementation
AMP (Accelerated Mobile Pages) is Google's open standard for creating fast mobile pages. AMP pages are cached on Google's servers and load instantly from search. Relevant for news sites, blogs, and article pages. Google officially removed AMP as a requirement for Top Stories (2021), but AMP content still loads faster on slow connections.
AMP Document Structure
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- AMP boilerplate -->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none}</style></noscript>
<!-- AMP runtime -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Canonical link to regular page -->
<link rel="canonical" href="https://example.com/articles/{{ $article->slug }}">
<!-- Custom styles (inline only, max 75KB) -->
<style amp-custom>
body { font-family: sans-serif; margin: 0; }
.article { max-width: 680px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.75rem; line-height: 1.3; }
p { line-height: 1.7; color: #374151; }
</style>
<title>{{ $article->title }}</title>
</head>
<body>
<article class="article">
<h1>{{ $article->title }}</h1>
<!-- AMP image instead of regular img -->
<amp-img src="{{ $article->cover_url }}"
width="1200" height="630"
layout="responsive"
alt="{{ $article->cover_alt }}">
</amp-img>
<div>{{ $article->content_amp }}</div>
</article>
<!-- AMP Analytics -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": { "gtag_id": "G-XXXXXXXX" },
"triggers": { "trackPageview": { "on": "visible", "request": "pageview" } }
}
</script>
</amp-analytics>
</body>
</html>
Laravel: Generating AMP Pages
// AmpController
class AmpController extends Controller
{
public function article(Article $article): View
{
// Convert HTML to AMP-compatible HTML
$ampContent = $this->convertToAmp($article->content);
return view('amp.article', [
'article' => $article,
'amp_content'=> $ampContent,
]);
}
private function convertToAmp(string $html): string
{
// img → amp-img
$html = preg_replace_callback(
'/<img([^>]*)>/i',
function ($matches) {
$attrs = $matches[1];
// Extract width/height or set defaults
preg_match('/width=["\']?(\d+)["\']?/i', $attrs, $w);
preg_match('/height=["\']?(\d+)["\']?/i', $attrs, $h);
$width = $w[1] ?? 1200;
$height = $h[1] ?? 630;
return "<amp-img{$attrs} width=\"{$width}\" height=\"{$height}\" layout=\"responsive\"></amp-img>";
},
$html
);
// Remove prohibited tags and attributes
$html = preg_replace('/<script\b[^>]*>(.*?)<\/script>/is', '', $html);
$html = preg_replace('/\s*style\s*=\s*["\'][^"\']*["\']/i', '', $html);
$html = preg_replace('/\s*onclick\s*=\s*["\'][^"\']*["\']/i', '', $html);
return $html;
}
}
Routing and Canonical Links
// routes/web.php
Route::get('/amp/articles/{article:slug}', [AmpController::class, 'article'])->name('amp.article');
// On regular page — link[rel=amphtml]
// In <head>:
<link rel="amphtml" href="{{ route('amp.article', $article) }}">
AMP Validation
# Install AMP Validator CLI
npm install -g amphtml-validator
# Check page
amphtml-validator https://example.com/amp/articles/my-article
# Check HTML file
amphtml-validator ./public/amp/test.html
Or use AMP Validator browser extension for Chrome.
What's Not Allowed in AMP
-
<script>(except AMP runtime and application/ld+json) - Inline styles via style attribute
-
<form>withoutamp-formcomponent - External CSS (only inline via
<style amp-custom>) -
document.write(),eval()
Timeframe
AMP template implementation for articles and HTML→AMP converter setup: 3–5 business days.