AMP

Ü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.

Screenshot einer Website, die AMP verwendet.
Screenshot einer Website, die AMP verwendet.
Gewohnte Flexibilität und Kontrolle bei weniger komplexem Code Passe das Design mit CSS an und nutze dynamische Daten für den bedarfsgerechten Abruf aktuellster Daten.
Bausteine für garantierte Leistung Die Erstellung großartiger Websites erfordert viel Zeit und Mühe. AMP Komponenten sind bereits für die bestmögliche Leistung optimiert.
Dein Beitrag zu einer nachhaltigen Zukunft in einem offenen Internet für alle Das AMP Projekt ist eine Open Source Initiative, mit der wir die Zukunft des Internets schützen und allen Menschen eine bessere, schnellere und benutzerfreundlichere Erfahrung bieten wollen.
Optimale Benutzererfahrung und bessere Metriken des Kerngeschäfts dank schnellen Webseiten AMP Seiten werden auf allen Geräten und Plattformen fast unverzögert geladen.
Beeindruckende Einfachheit bei der Erstellung von AMP Seiten Dein gesamtes Archiv kann in der Regel innerhalb weniger Tage konvertiert werden, vor allem wenn du ein gängiges CMS wie WordPress oder Drupal verwendest.
Einsatz von AMP für verschiedene Touchpoints im Internet Beliebte, globale Plattformen wie Google, Bing und Twitter nutzen AMP. Das garantiert den Nutzern beim automatischen Wechsel zu verfügbaren AMP Seiten ein natives Erlebnis.

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

Erfolgsgeschichte lesen

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.

Erkunde einige Use Cases von AMP Websites