AMP
Was ist AMP
Accelerated Mobile Pages – Ein von Google unterstütztes Projekt zur Erstellung mobiler Versionen von Webseiten, die bei der Suche so schnell wie möglich geladen werden. Diese Seiten werden mit einem speziellen HTML-Satz erstellt, um die Seite leicht und schnell zu laden.
Accelerated Mobile Pages (AMP) gibt es seit einigen Jahren und es ist ein wesentlicher Bestandteil von SEO geworden. Als AMP 2015 zum ersten Mal eingeführt wurde, gab es Spekulationen, dass es zwei Vorteile für SEO hat. Zum einen wird es auf den Ergebnisseiten von Suchmaschinen die Bezeichnung „Fast“ haben, zum anderen wird es ein Ranking-Faktor sein. AMP war damals für SEOs enorm, seine Auswirkungen auf SEO waren jedoch noch nicht abzusehen.
Es ist mittlerweile bekannt, dass AMP an sich kein direkter Ranking-Faktor ist und AMP-Seiten auf Ihrer Website die Rankings nicht unbedingt sofort erhöhen. Mit der Umstellung auf Mobile-First-Indizierung und der Einführung von Core Web Vitals , die AMP zu einem indirekten Ranking-Faktor machen , legt Google jetzt größeren Wert auf Website-Geschwindigkeit und Benutzerfreundlichkeit.
Wie funktioniert AMP
AMP (Accelerated Mobile Pages) funktioniert durch eine Kombination von Techniken und Regeln, die darauf abzielen, Webseiten für mobile Geräte zu optimieren und ihre Ladezeiten zu beschleunigen. Hier ist eine grundlegende Erläuterung, wie AMP funktioniert:
Vereinfachtes HTML: AMP-Seiten verwenden eine stark vereinfachte Version von HTML, die auf die wesentlichen Elemente reduziert ist. Dies hilft, unnötigen Code zu entfernen und die Seitengröße zu minimieren.
Beschränktes CSS: AMP erzwingt strenge Regeln für die Verwendung von CSS (Cascading Style Sheets). Dies bedeutet, dass nur eine begrenzte Menge an CSS erlaubt ist, und es dürfen keine CSS-Regeln geladen werden, die das Rendering der Seite verzögern könnten.
JavaScript-Einschränkungen: AMP-Seiten beschränken die Verwendung von JavaScript auf ein Minimum. In den meisten Fällen wird JavaScript nur in speziellen AMP-Components verwendet, die von der AMP-Bibliothek bereitgestellt werden und optimiert sind, um die Seitenleistung nicht zu beeinträchtigen.
Vorabladen und Caching: AMP-Seiten werden von Google gecached und auf deren Servern gespeichert. Wenn ein Nutzer eine AMP-Seite aufruft, wird sie aus dem Google-Cache geladen, was die Ladezeit erheblich verkürzt. Diese Caching-Technik ist ein Schlüsselelement der AMP-Performance.
Priorisierung der Inhaltsdarstellung: AMP legt besonderen Wert auf die schnelle Darstellung des Hauptinhalts einer Webseite. Bilder und Ressourcen werden so geladen, dass sie die Benutzererfahrung nicht negativ beeinflussen.
Validierung: AMP-Seiten müssen einer strengen Validierung entsprechen, um sicherzustellen, dass sie den AMP-Spezifikationen entsprechen. Wenn eine Seite diese Anforderungen nicht erfüllt, wird sie nicht als AMP-Seite betrachtet.
Insgesamt funktioniert AMP, indem es Webentwicklern Richtlinien auferlegt, die dazu beitragen, unnötige Verzögerungen beim Laden von Webseiten auf mobilen Geräten zu verhindern. Dies führt zu schnelleren Ladezeiten, einer verbesserten Benutzererfahrung und einer effizienteren Nutzung von Ressourcen auf mobilen Geräten. AMP hat sich
Ein Beispiel für AMP Code
<!doctype html>
<html amp lang="de">
<head>
<meta charset="utf-8">
<title>Beispiel-AMP-Seite</title>
<link rel="canonical" href="https://www.beispiel.de/amp.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
</head>
<body>
<h1>Willkommen auf unserer AMP-Seite</h1>
<p>Dies ist eine Beispiel-AMP-Seite.</p>
<amp-img src="bild.jpg" alt="Ein Beispielbild" width="300" height="200"></amp-img>
</body>
</html>
Hier sind einige wichtige Merkmale des AMP-Codes:
Die
<!doctype html>-Zeile zeigt an, dass es sich um eine HTML-Seite handelt.Das
<html amp lang="de">-Tag zeigt an, dass es sich um eine AMP-Seite handelt und die Seite in deutscher Sprache ist.Im
<head>-Bereich gibt es spezielle AMP-Meta-Tags und Styles, die für die AMP-Seite wichtig sind. Dazu gehören die<meta charset>,<link rel="canonical>,<meta name="viewport">und<style amp-boilerplate>.Der
<noscript>-Bereich enthält alternative Styles für den Fall, dass JavaScript deaktiviert ist.Der
<script async src="https://cdn.ampproject.org/v0.js"></script>-Tag lädt die AMP-Bibliothek, die für die AMP-Seiten notwendig ist.Im
<body>-Bereich werden die eigentlichen Inhalte der Seite dargestellt. Hier sehen Sie einfache HTML-Elemente wie<h1>,<p>und<amp-img>, die ein AMP-Bild darstellen.
Dies ist nur ein einfaches Beispiel, aber es veranschaulicht die Grundstruktur einer AMP-Seite und die Verwendung von AMP-spezifischen Tags und Regeln, um die Leistung auf mobilen Geräten zu optimieren.
Ist AMP eine Option
Die Verwendung von AMP (Accelerated Mobile Pages) kann sinnvoll sein, hängt jedoch von den Zielen und Bedürfnissen Ihrer Website ab. Hier sind einige Punkte zu beachten:
Vorteile von AMP:
- Schnelle Ladezeiten: AMP-Seiten sind speziell darauf ausgerichtet, auf mobilen Geräten schnell zu laden. Dies kann die Benutzererfahrung verbessern und dazu führen, dass Nutzer länger auf Ihrer Website verweilen.
- Besseres SEO: Google bevorzugt häufig AMP-Seiten in den Suchergebnissen, insbesondere für mobile Geräte. Dies kann zu einer besseren Sichtbarkeit in den Suchergebnissen und möglicherweise zu mehr Traffic führen.
- Verbesserte mobile Benutzererfahrung: Schnelle Ladezeiten und eine reibungslose Navigation auf mobilen Geräten können die Zufriedenheit der Nutzer steigern und die Absprungrate reduzieren.
- Optimierung für Publisher: AMP wurde ursprünglich für Verlage entwickelt und kann ihnen helfen, ihre Inhalte auf mobilen Geräten effizienter zu präsentieren.
Aspekte zu beachten:
Komplexität der Umsetzung: Das Erstellen und Pflegen von AMP-Seiten erfordert möglicherweise zusätzlichen Aufwand und technisches Know-how. Es kann komplex sein, AMP in bestehende Websites zu integrieren.
Eingeschränkte Gestaltungsmöglichkeiten: AMP beschränkt die Verwendung von CSS und JavaScript, was die Gestaltungsmöglichkeiten einschränken kann. Dies kann dazu führen, dass die Seite weniger ansprechend aussieht, wenn Sie auf komplexe Designelemente angewiesen sind.
Nicht für alle Arten von Websites geeignet: AMP ist möglicherweise nicht für alle Arten von Websites geeignet. Wenn Ihre Website komplexe interaktive Funktionen erfordert, kann AMP möglicherweise nicht alle Anforderungen erfüllen.
Evaluieren Sie Ihre Ziele: Bevor Sie sich für AMP entscheiden, sollten Sie Ihre Ziele und Zielgruppe sorgfältig evaluieren. Wenn schnelle Ladezeiten und mobile Benutzererfahrung entscheidend sind, kann AMP eine gute Wahl sein. Wenn Sie jedoch eine umfassendere Website mit vielen interaktiven Elementen haben, sollten Sie die Vor- und Nachteile abwägen.