Erforderlicher und optionaler Mark-up Code in einer AMP-Seite

Erforderlicher Mark-up Code (HTML)

Ein AMP HTML-Dokument muss:

Mit dem doctype <!doctype html> beginnen.
Auf der obersten Ebene einen <html ⚡> Tag enthalten. (<html amp> wird auch akzeptiert).
Die Tags <head> und <body> enthalten (In HTML sind sie optional).
Einen <link rel="canonical" href="$SOME_URL" /> Tag innerhalb des head enthalten, der auf die reguläre Version des HTML Dokumentes oder auf sich selbst verweist, falls es keine weitere reguläre HTML-Version gibt.
Die Deklaration <meta charset="utf-8"> gleich zu Beginn von head enthalten.
Einen <meta name="viewport" content="width=device-width,minimum-scale=1"> Tag innerhalb des head Abschnittes enthalten. Zusätzlich wirde initial-scale=1 empfohlen.
Den Code <script async src="https://cdn.ampproject.org/v0.js"></script> als letztes Element im head-Abschnitt enthalten (damit wird die AMP JS Bibliothek geladen).
Den folgenden Code im <head> Tag enthalten:
<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>

Optionaler Code

Die Beispielseite enthält noch ein Beispiel zu optionalem Code

Die Seiten:

Validierungslink

Dieser Link fügt der aktuellen URL einen Link zu Validierung der AMP-HTML-Seite hinzu. Die Validierung funktioniert nur im Chrome Browser.

Validierungslink