Amp news template
Here is a basic template for an AMP (Accelerated Mobile Pages) news article:
AMP News Template
Title
<h1>[[TITLE]]</h1>
Meta Data
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="[[AUTHOR]]">
<meta name="publisher" content="[[PUBLISHER]]">
<meta name="description" content="[[DESCRIPTION]]">
Header
<header>
<img src="[[IMAGE_URL]]" alt="[[IMAGE_ALT]]" width="[[IMAGE_WIDTH]]" height="[[IMAGE_HEIGHT]]">
<h2>[[SUBTITLE]]</h2>
</header>
Article Body
<section>
<p>[[ARTICLE_BODY]]</p>
<figure>
<img src="[[IMAGE_URL]]" alt="[[IMAGE_ALT]]" width="[[IMAGE_WIDTH]]" height="[[IMAGE_HEIGHT]]">
<figcaption>[[FIGCAPTION]]</figcaption>
</figure>
</section>
Related Articles
<section>
<h2>Related Articles</h2>
<ul>
<li><a rel="nofollow" target="_blank" href="[[RELATED_ARTICLE_1_URL]]">[[RELATED_ARTICLE_1_TITLE]]</a></li>
<li><a rel="nofollow" target="_blank" href="[[RELATED_ARTICLE_2_URL]]">[[RELATED_ARTICLE_2_TITLE]]</a></li>
</ul>
</section>
Footer
<footer>
<p>[[FOOTER_TEXT]]</p>
</footer>
AMP-Specific Elements
amp-analytics
: used to track page views and other metricsamp-ad
: used to display adsamp-iframe
: used to embed iframes (e.g. YouTube videos)
Example:
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="John Doe">
<meta name="publisher" content="News Corp">
<meta name="description" content="Breaking news and updates">
<title>Breaking News: [[TITLE]]</title>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1) 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}}</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
<img src="https://example.com/image.jpg" alt="Breaking News" width="300" height="150">
<h2>Breaking News: [[SUBTITLE]]</h2>
</header>
<section>
<p>[[ARTICLE_BODY]]</p>
<figure>
<img src="https://example.com/image.jpg" alt="Breaking News" width="300" height="150">
<figcaption>[[FIGCAPTION]]</figcaption>
</figure>
</section>
<section>
<h2>Related Articles</h2>
<ul>
<li><a rel="nofollow" target="_blank" href="https://example.com/article1">Article 1</a></li>
<li><a rel="nofollow" target="_blank" href="https://example.com/article2">Article 2</a></li>
</ul>
</section>
<footer>
<p>[[FOOTER_TEXT]]</p>
</footer>
<amp-analytics type="googleanalytics" data-credentials="your-credentials">
<script type="application/json">
{
"requests": {
"your-request": {
"adsense": true
}
}
}
</script>
</amp-analytics>
</body>
</html>
Note: This is just a basic template and you will need to customize it to fit your specific use case. Additionally, you will need to ensure that your AMP page is properly validated and meets the AMP project's guidelines.