Accelerated Mobile Pages – Grundlagen

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie Accelerated Mobile Pages (AMP) erstellen. Dazu implementieren Sie eine einfache Webseite mit einem Nachrichtenartikel, die den AMP-Spezifikationen entspricht und mehrere typische Webfunktionen enthält, die häufig auf mobilen Nachrichtenseiten verwendet werden.

Lerninhalte

• Die Nutzererfahrung auf mobilen Seiten mithilfe von AMP optimieren
• Grundprinzipien einer AMP-Website
• Einschränkungen von AMP
• Häufige Probleme von Nachrichtensites mithilfe von AMP-Webkomponenten lösen
• AMP-Seiten validieren
• So bereiten Sie Ihre AMP-Seiten für die Google Suche vor.

Voraussetzungen

• Der Beispielcode
• Python (vorzugsweise 2.7) oder die Chrome-Erweiterung „200 OK Web Server“
• Chrome oder ein gleichwertiger Browser, mit dem die JavaScript-Konsole geprüft werden kann
• Code-Editor (z. B. Atom, Sublime, Notepad++)

2. Beispielcode abrufen

Sie können den gesamten Beispielcode auf Ihren Computer herunterladen:

Zip-Datei herunterladen

… oder klonen Sie das GitHub-Repository über die Befehlszeile:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

Sie laden eine ZIP-Datei mit mehreren Beispielressourcendateien und der Startseite „article.html“ herunter.

Entpacken Sie den Ordner und wechseln Sie über die Befehlszeile auf Ihrem Computer in das Verzeichnis.

3. Beispielseite ausführen

Um unsere Beispielseite zu testen, müssen wir über einen Webserver auf die Dateien zugreifen. Es gibt verschiedene Möglichkeiten, einen temporären lokalen Webserver für Testzwecke zu erstellen. In diesem Codelab werden Anleitungen für drei verfügbare Optionen bereitgestellt:

• Google Chrome-App „Web Server for Chrome“: Dies ist der empfohlene Ansatz, da er die einfachste und plattformübergreifendste Lösung ist. Hinweis: Für diese Methode muss Google Chrome installiert sein.
• Firebase Hosting: Eine alternative Option, wenn Sie auch unsere neue Hostingplattform für statische Assets „Firebase Hosting“ ausprobieren möchten. Standardmäßig SSL-fähig.
• Lokaler HTTP-Python-Server: Hierfür ist Zugriff auf die Befehlszeile erforderlich.

Hinweis: Es wird dringend empfohlen, HTTPS in Produktionsumgebungen zu verwenden. HTTPS bietet neben der Sicherheit auch andere Vorteile, z. B. für die Suchmaschinenoptimierung. Weitere Informationen

Option 1: Web Server for Chrome

Die App „Web Server for Chrome“ finden Sie über diesen Link im Chrome Web Store.

Nach der Installation der Chrome-App müssen Sie über die Schaltfläche „Ordner auswählen“ einen bestimmten Ordner für die App festlegen. Wählen Sie für dieses Codelab den Ordner aus, in dem Sie die Beispieldateien für das Codelab entpackt haben.

Außerdem sollten Sie die Option „index.html automatisch anzeigen“ aktivieren und den Port auf „8000“ festlegen. Sie müssen den Webserver neu starten, damit diese Änderungen wirksam werden.

Rufen Sie diese URL auf:

http://localhost:8000/article.html

Wenn die oben genannte URL erfolgreich geladen wird, können Sie mit dem nächsten Schritt fortfahren.

Option 2: Firebase Hosting

Wenn Sie unser neues statisches Webhosting von Firebase ausprobieren möchten, folgen Sie dieser Anleitung, um Ihre AMP-Website auf einer Firebase-Hosting-URL bereitzustellen.

Firebase Hosting ist ein Anbieter für statisches Hosting, mit dem Sie schnell eine statische Website und ihre Assets, einschließlich HTML-, CSS- und JavaScript-Dateien, bereitstellen und hosten können. Nutzer profitieren von einer geringeren Latenz, da statische Inhalte in einem Content Delivery Network (CDN) mit weltweit verteilten Points of Presence (PoPs) im Cache gespeichert werden.

Firebase Hosting wird immer über SSL bereitgestellt. Das ist ideal für AMP und das Web im Allgemeinen. Wenn Sie sich nur auf AMP konzentrieren möchten, ignorieren Sie diese Option einfach.

Option 3: HTTP-Python-Server

Wenn Sie Chrome nicht verwenden oder Probleme bei der Installation der Chrome-Erweiterung haben, können Sie auch Python über die Befehlszeile verwenden, um einen lokalen Webserver zu starten.

Um den integrierten HTTP-Server von Python über die Befehlszeile auszuführen, führen Sie einfach Folgendes aus:

python -m SimpleHTTPServer

Rufen Sie diese URL auf:

http://localhost:8000/article.html

4. Reguläre HTML-Seite erstellen

In der heruntergeladenen ZIP-Datei finden Sie eine Datei namens article.html. Dies ist der Artikel, für den wir eine AMP-Seite erstellen.

Kopieren Sie den Code aus dem article.html-Beispiel und fügen Sie ihn in eine neue Datei ein. Speichern Sie diese Datei als article.amp.html..

Hinweis: Sie müssen Ihre AMP-Dateien nicht .amp.html nennen. AMP-Dateien können eine beliebige Erweiterung haben. Häufig unterscheiden Publisher AMP-Seiten von ihren kanonischen Versionen, indem sie Parameter in der URL verwenden. Beispiel: http://publisher.com/article.html?amp

Ihre article.amp.html-Datei sollte jetzt so aussehen:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

Dies ist eine bewusst einfach gehaltene Seite mit gängigen statischen Elementen von Nachrichtenartikeln: CSS, JavaScript und ein Bild-Tag.

Unsere AMP-Version des Artikels ist derzeit nur eine Kopie des Originalartikels. Wandeln wir es in ein AMP um. Zuerst fügen wir die AMP-JavaScript-Bibliotheksdatei hinzu und sehen uns an, welche Fehler angezeigt werden, wenn die AMP-Validierung aktiviert ist.

Wenn Sie die AMP-Bibliothek einbinden möchten, fügen Sie diese Zeile am Ende des <head>-Tags ein:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Laden wir nun die neue Seite article.amp.html in unserem Browser über den folgenden Link und öffnen wir die Entwicklerkonsole in Chrome über Menu > More Tools > Developer Tools:

Sehen Sie sich nun die JavaScript-Ausgabe in der Entwicklerkonsole an. Achten Sie darauf, dass der Tab „Console“ ausgewählt ist:

Dieser Logeintrag sollte angezeigt werden:

Powered by AMP ⚡ HTML

Um den AMP-Validator zu aktivieren, fügen Sie Ihrer URL den folgenden Fragmentbezeichner hinzu:

#development=1

Beispiel:

http://localhost:8000/article.amp.html#development=1

Unter Umständen müssen Sie die Seite im Browser manuell aktualisieren. Sie können eine Seite in Ihrem Browser manuell aktualisieren, indem Sie auf diese Schaltfläche klicken:

Sie sollten mehrere Validierungsfehler erhalten:

AMP steht zwar für Accelerated Mobile Pages, kann aber auch zum Erstellen responsiver Seiten verwendet werden, die auf allen Bildschirmgrößen gut gerendert werden. Weitere Informationen finden Sie auf der Google Developers-Website im Abschnitt Responsive Webdesign .

Um die Nutzung auf Mobilgeräten in den Chrome-Entwicklertools zu simulieren Klicken Sie hier auf das Symbol für Mobilgeräte:

Wählen Sie nun in diesem Menü ein Mobilgerät aus, z. B. „Pixel 2“:

In Ihrem Browser sollte eine simulierte mobile Auflösung wie diese angezeigt werden:

Jetzt können wir loslegen. Sehen wir uns die Validierungsfehler einzeln an und gehen wir darauf ein, wie sie sich auf AMP beziehen.

5. Validierungsfehler beheben

Zeichensatz erforderlich

Wir beginnen mit der Behebung des folgenden Fehlers:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

Damit Text richtig angezeigt wird, muss in AMP der Zeichensatz für die Seite festgelegt sein. Außerdem muss es das erste untergeordnete Element des head-Tags sein. So soll vermieden werden, dass Inhalte, die vor dem Meta-Charset-Tag hinzugefügt wurden, neu interpretiert werden.

Fügen Sie den folgenden Code als erste Zeile des Head-Tags hinzu:

<meta charset="utf-8" />  

Speichern Sie die Datei, laden Sie die Seite neu und prüfen Sie, ob dieser Fehler nicht mehr angezeigt wird.

AMP-Dateien müssen ein <link rel=canonical>-Tag enthalten.​​​

Jedes AMP-Dokument muss einen Link zur kanonischen Seite enthalten. Fügen wir also den Link zu unserem Originalartikel hinzu.

Fügen Sie den folgenden Code unter dem <meta charset="utf-8" />-Tag ein:

<link rel="canonical" href="/article.html">

Wichtig: Es ist möglich, eine eigenständige AMP-Seite zu erstellen, die keine kanonische Seite hat. In diesem Fall ist der kanonische Link weiterhin erforderlich, er sollte aber auf den AMP-Artikel selbst verweisen:

<link rel="canonical" href="/article.amp.html">

Starten Sie nun bei Bedarf Ihren Webserver neu und laden Sie die Seite neu. Obwohl noch viele Fehler behoben werden müssen, ist der Fehler „AMP-Dateien müssen ein <link rel=canonical>-Tag enthalten“ nicht mehr vorhanden.

AMP-Attribut erforderlich

Für AMP ist ein Attribut für das Stamm-HTML-Element einer Seite erforderlich, um die Seite als AMP-Dokument zu deklarieren:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

Das Problem lässt sich ganz einfach beheben, indem Sie dem <html>-Tag das Attribut ⚡ hinzufügen:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

Aktualisieren Sie nun die Seite und prüfen Sie, ob beide Fehler behoben sind.

Hinweis: Obwohl die Verwendung von ⚡ empfohlen wird, kann das Attribut „amp“ auch anstelle des Attributs „⚡“ verwendet werden. Das Markup sieht dann so aus:

<!doctype html>

<html amp lang="en">

<head>

...

Darstellungsbereich erforderlich

Als Nächstes gehen wir auf den folgenden Fehler ein:

The mandatory tag 'meta name=viewport' is missing or incorrect.

Für AMP ist die Definition von width und minimum-scale für den Viewport erforderlich. Diese Werte müssen als device-width bzw. 1 definiert werden. Der Darstellungsbereich ist ein gängiges Tag, das im <head> einer HTML-Seite enthalten ist.

Am besten fügen Sie dazu das folgende HTML-Snippet in das <head>-Tag ein. Fügen Sie das folgende meta-Tag hinzu:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

Dies sind die einzigen gültigen Werte für width und minimum-scale in AMP. Die Definition von initial-scale ist nicht obligatorisch, wird aber häufig in der Entwicklung für das mobile Web verwendet und empfohlen. Weitere Informationen zum Viewport und zum responsiven Design

Aktualisieren Sie die Seite wie zuvor und prüfen Sie, ob der Fehler behoben wurde.

Externe Stylesheets

Der folgende Fehler hängt mit der Verwendung von Stylesheets zusammen:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

Konkret wird der folgende Stylesheet-Link-Tag in unserem <head>-Tag bemängelt:

<link href="base.css" rel="stylesheet" />

Das Problem ist, dass dies ein externer Stylesheet-Verweis ist. Um die Ladezeiten von Dokumenten in AMP so kurz wie möglich zu halten, dürfen Entwickler keine externen Stylesheets einfügen. Stattdessen müssen alle Stylesheet-Regeln inline in das AMP-Dokument eingefügt werden.

Entfernen Sie daher das Link-Tag in <head> und ersetzen Sie es durch ein Inline-Tag wie das folgende:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

Der Inhalt des Style-Tags sollte direkt aus der Datei base.css in Ihrem Projektverzeichnis kopiert werden. Das Attribut amp-custom im Style-Tag ist erforderlich.

Laden Sie die Seite noch einmal und prüfen Sie, ob der Fehler mit den Stylesheets behoben wurde.

Hinweis: Inline-Styling ist nicht nur erforderlich, sondern es gilt auch eine Dateigrößenbeschränkung von 50 Kilobyte für alle Stylinginformationen. Wir empfehlen, CSS-Präprozessoren wie SASS zu verwenden und Ihr CSS zu komprimieren, bevor Sie es in Ihre Seiten einfügen.

Wichtig: In Ihrem gesamten AMP-Dokument darf nur ein Style-Tag vorhanden sein. Wenn in Ihren Artikeln auf mehrere externe Stylesheets verwiesen wird, müssen Sie diese Stylesheets in einem einzigen Regelsatz zusammenfassen. Weitere Informationen zu gültigen CSS-Regeln in AMP-Dokumenten

Drittanbieter-JavaScript

Während Stylesheets mit AMP durch Inlining relativ einfach überarbeitet werden können, gilt das nicht für JavaScript.

The tag 'script' is disallowed except in specific forms.

In AMP sind nutzergenerierte Scripts nicht zulässig. Skripts in AMP sind nur zulässig, wenn sie zwei wichtige Anforderungen erfüllen::

• Das gesamte JavaScript muss asynchron sein. Das bedeutet, dass das Attribut async im Script-Tag enthalten sein muss.
• Es dürfen nur die AMP-Bibliothek und AMP-Komponenten verwendet werden.

Dadurch wird die Verwendung von JavaScript von Drittanbietern ausgeschlossen. Eine Ausnahme gibt es: JavaScript von Drittanbietern darf in iFrames verwendet werden.

Versuchen Sie, die externe Datei base.js zu öffnen. Was sehen Sie? Die Datei sollte keinen JavaScript-Code enthalten, sondern nur einen Informationskommentar wie diesen:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

Da diese externe JavaScript-Datei keine funktionale Komponente unserer Website ist, können wir den Verweis problemlos entfernen.

Entfernen Sie den folgenden externen JavaScript-Verweis aus Ihrem Dokument:

<script type="text/javascript" src="base.js"></script>

Aktualisieren Sie die Seite und prüfen Sie, ob der Scriptfehler behoben wurde.

Wichtig: Das Einbinden von JavaScript über ein iFrame sollte als letzter Ausweg betrachtet werden. Wo immer möglich, sollte JavaScript-Funktionalität durch die Verwendung der integrierten AMP-Komponenten ersetzt werden. Im nächsten Abschnitt sehen wir uns unsere erste AMP-Komponente an.

Hinweis: Die einzigen Ausnahmen für nutzergenerierte Skripts sind, wenn das Attribut „type“ application/ld+json oder application/json ist. Diese werden verwendet, um Metadaten auf der Seite hinzuzufügen und AMP-Komponenten zu konfigurieren. Andere nicht ausführbare Skripts werden möglicherweise in Zukunft hinzugefügt.

Die AMP-CSS-Boilerplate

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

Die nächsten Fehler beziehen sich auf zwei fehlende Tags im <head>-Tag. Jedes AMP-Dokument muss die folgenden Tags 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>

Fügen Sie das oben genannte Code-Snippet am Ende des <head>-Tags Ihres Dokuments ein.

Durch das erste Tag wird der Inhalt der Seite unsichtbar, bis die AMP-JavaScript-Bibliothek das Body-Tag aktualisiert, sodass es wieder sichtbar ist, sobald der Inhalt der Seite gerendert werden kann. So wird verhindert, dass Inhalte der Seite angezeigt werden, die noch nicht formatiert wurden. So wird die Nutzerfreundlichkeit verbessert, da die Inhalte der Seite sofort angezeigt werden und alles, was ohne Scrollen sichtbar ist, zusammen gerendert wird. Das zweite Tag kehrt diese Logik um, wenn JavaScript im Browser deaktiviert ist.

Das amp-img-Tag

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP hat eine Webkomponente, die speziell für den Ersatz des Image-Tags entwickelt wurde: amp-img.

<amp-img src="mountains.jpg"></amp-img>

Fügen Sie das oben genannte amp-img-Tag ein und führen Sie den Validator noch einmal aus. Sie sollten mehrere neue Fehler erhalten:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

Warum hat amp-img einen weiteren Fehler ausgelöst? Das liegt daran, dass amp-img kein direkter Ersatz für das herkömmliche HTML-Tag img ist. Bei der Verwendung von „amp-img“ gelten zusätzliche Anforderungen.

Layoutsystem

Dieser Fehler besagt, dass „amp-img“ den Layouttyp „container“ nicht unterstützt. Eines der wichtigsten Konzepte im AMP-Design ist die Reduzierung der Anzahl der DOM-Reflows, die zum Rendern der Webseiten erforderlich sind.

Um DOM-Reflows zu reduzieren, enthält AMP ein Layoutsystem, mit dem das Layout der Seite so früh wie möglich im Lebenszyklus des Herunterladens und Renderns der Seite so starr wie möglich ist.

Mit dem Layoutsystem können Elemente auf einer Seite auf verschiedene Arten positioniert und skaliert werden – mit festen Abmessungen, responsivem Design, fester Höhe und mehr.

In unserem Fall hat das Layoutsystem den Layouttyp für amp-img als container abgeleitet. Der Containertyp ist jedoch für Elemente vorgesehen, die untergeordnete Elemente enthalten, und ist nicht mit dem amp-img-Tag kompatibel. Das ist der Grund für diesen Fehler.

Warum wurde der Containertyp abgeleitet? Da wir kein Attribut für die Höhe für das amp-img-Tag angegeben haben. In HTML lässt sich das Reflow-Verhalten reduzieren, indem Sie immer eine feste Breite und Höhe für Elemente auf einer Seite angeben. In AMP wird empfohlen, die Breite und Höhe für amp-img-Elemente zu definieren, da AMP so das Seitenverhältnis des Elements ermitteln kann.

Legen Sie die Breite und Höhe so fest:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

Aktualisieren Sie die Seite und prüfen Sie den Validator. Es sollten keine Fehler mehr angezeigt werden. Das Bild sieht jedoch nicht so gut aus, da es ungeschickt auf der Seite positioniert ist. Es wäre toll, wenn wir das Bild responsiv skalieren könnten, sodass es sich unabhängig von der Bildschirmgröße an die Seite anpasst.

Überraschenderweise wird das Element durch die Definition von Breite und Höhe nicht auf eine vollständig feste Größe beschränkt. Das AMP-Layoutsystem kann das Element auf verschiedene Arten positionieren und skalieren, wenn es das Seitenverhältnis kennt. Das Layoutattribut informiert AMP darüber, wie Sie das Element positionieren und skalieren möchten.

Dazu legen wir das Attribut „layout“ auf responsive fest:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

Fertig! Unser Bild hat das richtige Seitenverhältnis und füllt die Breite des Bildschirms responsiv aus.

Fertig!

Ihr AMP-Dokument sollte nun in etwa so aussehen:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Aktualisieren Sie die Seite und sehen Sie sich die Konsolenausgabe an. Sie sollten die folgende Meldung sehen:

AMP validation successful.

Häufig gestellte Fragen

• Was ist ein DOM-Reflow?
• Was passiert, wenn das Layoutattribut nicht definiert ist?
• Was passiert, wenn Breite und Höhe nicht definiert sind?

6. Kanonische URLs, Metadaten und Suche

Im Rahmen der neuen AMP-Initiative werden gültige AMP-Dokumente in der Google-Suchergebnisseite in einem neuen Karussell hervorgehoben. Diese Oberfläche bietet Nutzern, die im Web nach Artikeln suchen, eine bessere Nutzererfahrung. Damit diese Funktion optimal genutzt werden kann, müssen die enthaltenen Seiten bestimmte Kriterien erfüllen, die über die AMP-Validierung hinausgehen.

In diesem Schritt erhalten Sie einen Überblick über die vollständigen Anforderungen.

Kanonische Seiten und AMP-Dokumente verknüpfen

AMP soll das Web schneller machen. Obwohl sich das Projekt in seinen Anfängen eher auf statische Inhalte konzentrierte, eignet es sich durch die Hinzufügung von Komponenten wie amp-bind für eine Vielzahl von Websites, z. B. für Nachrichtenverlage, E-Commerce-Websites, Reise-Websites und Blogs.

Es ist jedoch wichtig, den gesamten Umfang der Integration von AMP in die Struktur einer Website zu verstehen. AMP kann zwar zum Erstellen ganzer Websites verwendet werden, viele Publisher bevorzugen jedoch den gekoppelten Ansatz, bei dem AMP-Dokumente als Ergänzung zu den regulären HTML-Artikeln generiert werden, die ein Publisher auf seiner Website hostet.

Hinweis:Weitere Informationen zur Verwendung von AMP zum Erstellen einer gesamten Website, auch als kanonische AMP-Sites bezeichnet, finden Sie im Codelab Schöne, interaktive, kanonische AMP-Seiten.

Die kanonische Verknüpfung in regulären HTML-Seiten ist eine gängige Methode, um anzugeben, welche Seite als bevorzugte Seite betrachtet werden soll, wenn mehrere Seiten denselben Inhalt enthalten. Da AMP-Dokumente generiert werden können, um neben den herkömmlichen Artikelseiten einer Website verfügbar zu sein, sollten die herkömmlichen HTML-Seiten als „kanonische“ Seiten behandelt werden.

Wir haben bereits den ersten Schritt unternommen, um dies in unserem AMP-Dokument zu erreichen, indem wir ein Link-Tag im <head> zurück zur kanonischen Seite eingefügt haben:

<link rel="canonical" href="/article.html">

Als Nächstes verknüpfen Sie den kanonischen Artikel mit der AMP-Seite. Dazu wird dem <head>-Abschnitt des kanonischen Artikels ein <link rel="amphtml">-Tag hinzugefügt.

Fügen Sie den folgenden Code in den Abschnitt <head> der Datei article.html ein:

<link rel="amphtml" href="/article.amp.html">

Das folgende Diagramm veranschaulicht die Richtungen von Link-Tags:

Diese bidirektionale Verknüpfung ist erforderlich, damit der Google-Suchcrawler die Beziehung zwischen unserem regulären kanonischen HTML-Dokument und unserem AMP-Dokument nachvollziehen kann. Wenn keine Links angegeben wurden, ist für den Crawler nicht unbedingt klar, welche Artikel die AMP-Versionen der regulären HTML-Dokumente sind. Durch die explizite Angabe dieser Links möchten wir jegliche Unklarheiten vermeiden.

Schema.org-Metadaten für Suchmaschinen

Eine weitere Voraussetzung dafür, dass AMP-Dokumente in der neuen Karusselloberfläche angezeigt werden, ist die Einhaltung der Schema.org-Spezifikation für Suchmaschinenmetadaten. Diese Metadaten sind über ein Script-Tag vom Typ application/ld+json im <head>-Tag Ihrer Dokumente enthalten.

Fügen Sie den folgenden Code am Ende des <head>-Abschnitts Ihres AMP-Dokuments ein:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

Laden Sie die Seite im Browser neu und prüfen Sie noch einmal, ob AMP-Validierungsfehler aufgetreten sind.

Öffnen Sie nun das Tool zur Validierung strukturierter Daten in einem neuen Browserfenster und klicken Sie auf „Markup testen“. Wählen Sie dann den Tab „Code-Snippet“ aus, kopieren Sie den vollständigen Quellcode Ihrer AMP-Seite und fügen Sie ihn in das Texteditorfeld des Validierungstools ein. Klicken Sie dann auf „Test ausführen“:

Auf der Seite sollte Folgendes zu sehen sein:

Wichtig:Achten Sie darauf, dass der grüne Text „Alles in Ordnung“ angezeigt wird. Nur AMP-Seiten, die diesen Test bestehen, werden im AMP-Karussell angezeigt.

Hinweis: Der Inhalt sollte immer derselbe sein. Verwenden Sie für Nachrichtenartikel den Typ „NewsArticle“. Der Anzeigentitel sollte mit dem Titel Ihres Artikels übereinstimmen. „Bild“ bezieht sich auf das Hero-Image des Artikels.

Die wichtigsten Anforderungen für die Aufnahme in das neue Google Suche-Karussell für AMP-basierte Nachrichtenartikel sind:

1. Ihr AMP-Dokument muss validiert werden.
2. Verweisen Sie über das <link>-Tag von Ihrer herkömmlichen HTML-Seite auf Ihr AMP-Dokument und umgekehrt.
3. Fügen Sie das oben genannte Tag für Suchmaschinenmetadaten ein.

Weitere Informationen zur Seitenerkennung

7. Glückwunsch!

Sie haben das Codelab abgeschlossen und viele der grundlegenden Konzepte von AMP-Dokumenten kennengelernt.

Hoffentlich haben Sie nicht nur verstanden, wie diese Konzepte und Funktionen in einem AMP-Dokument implementiert werden können, sondern auch, warum AMP so konzipiert wurde, wie es ist.

Im Folgenden finden Sie einige zusätzliche Themen und Links, mit denen Sie Ihre Fähigkeiten noch weiter ausbauen können.

• Seite „Entdeckung“
• Nicht zulässige HTML-Tags
• Eingeschränkte CSS-Regeln und ‑Animationen
• Weitere Informationen zu iFrames
• Das AMP-CDN
• Liste der verfügbaren AMP-Komponenten