Überzeugend, reibungslos und blitzschnell
Erstelle mit AMP ganz einfach nutzerorientierte Websites.
Erste Schritte<amp-sidebar id="sidebar" layout="nodisplay" side="right"" ""left" </amp-sidebar>
Was ist
AMP?
Ansprechende, reibungslose Webseiten, die fast sofort geladen werden
AMP ist ein einfaches und robustes Format, das deine Website schnell, benutzerfreundlich und rentabel macht. AMP ist für alle gängigen Plattformen geeignet, reduziert die Betriebs- und Entwicklungskosten und stellt so den langfristigen Erfolg deiner Webstrategie sicher.
<amp-img class="resp-img"
alt="Desktop"
width="550"
height="368"
src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
.resp-img {
max-width: 700px;
}
</style>
Biete Nutzern eine großartige Weberfahrung im offenen Internet
Mit AMP erstellst du Websites und Ads, die auf allen Geräten und Vertriebsplattformen gleichermaßen schnell, ansprechend und leistungsstark sind. Publisher und Werbetreibende entscheiden darüber, wie sie ihre Inhalte präsentieren und die Benutzererfahrung kultivieren.
Wir sind bestrebt, die Geschwindigkeit in allen Bereichen zu verbessern. Es spielt keine Rolle, wie großartig unser Journalismus ist – wenn die Website zu langsam geladen wird, verlassen einige Besucher die Seite, bevor sie die Inhalte sehen.
David Merrell, Leitender Produktmanager
Daraus besteht AMP HTML
<!DOCTYPE HTML>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
<amp-geo layout="nodisplay">
<script type="application/json">
{
"AmpBind": true
}
</script>
</amp-geo>
<h1>Hello in <span [text]="country">...</span>!</h1>
<button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>
Hello
World!
Integrierte Komponenten
AMP HTML ist HTML mit bestimmten Einschränkungen, die zuverlässige Leistung garantieren.
Obwohl die meisten Tags in einer AMP HTML Seite gewöhnliche HTML Tags sind, werden bestimmte HTML Tags durch AMP spezifische Tags ersetzt (siehe auch HTML Tags in der AMP Spezifikation). Diese benutzerdefinierten Elemente werden AMP HTML Komponenten genannt. Sie erleichtern es, gängige Muster wirksam zu implementieren.
Beispielsweise bietet das Tag amp-img vollständige Unterstützung für srcset selbst in Browsern, die das Attribut noch nicht unterstützen. Lerne, deine erste AMP HTML Seite zu erstellen.
AMP Seiten werden von Suchmaschinen und anderen Plattformen am HTML Tag erkannt. Du kannst bestimmen, ob deine Seite nur im AMP Format oder in zwei Versionen mit und ohne AMP verfügbar sein soll.
AMP Caches
AMP Seiten können zwischengespeichert werden, damit sie fast verzögerungsfrei im Internet laden. Plattformen wie Google betreiben AMP Caches, mit deren Hilfe deine Inhalte aus diesem Dienst schnell geladen werden können.
Google AMP Cache ist ein proxybasiertes Content Delivery Network, das alle validierten AMP Dokumente bereitstellt. Es ruft AMP HTML Seiten ab, speichert sie in einem Cache und optimiert automatisch die Seitenleistung. Beim Einsatz von Google AMP Cache werden das Dokument, alle JS Dateien und alle Bilder mit HTTP 2.0 aus derselben Quelle geladen, um maximale Effizienz zu erreichen.
Außerdem verfügt der Cache über ein integriertes Validierungssystem. Dieses bestätigt, dass die Seite garantiert funktioniert und nicht von externen Ressourcen abhängig ist. Das Validierungssystem führt eine Reihe von Überprüfungen durch, um sicherzustellen, dass das Markup der Seite der AMP HTML Spezifikation entspricht.
Eine weitere Version des Validators wird mit jeder AMP Seite mitgeliefert. Wenn die Seite gerendert wird, kann diese Version Validierungsfehler direkt in der Browserkonsole protokollieren. So kannst du beurteilen, wie sich komplexe Änderungen in deinem Code auf Leistung und Benutzererfahrung auswirken werden.