Seit einiger Zeit rollt Google schon sogenannte accelerated mobile Pages (AMP) in den mobilen Suchergebnissen aus. Welchen Vorteile können Sie sich durch diese Entwicklung sichern? Ich erkläre ihnen in diesem Beitrag, wie Sie durch AMP die User Experience auf ihren mobilen Seiten verbessern können.
Das AMP-Projekt wurde vor einigen Monaten gestartet. Bist du bereit dafür? In meinem heutigen Beitrag gebe ich Ihnen einen kurzen Überblick zeige Ihnen, wie Sie die Arbeit mit AMP beginnen können.
Was ist AMP?
Im vergangenen Oktober kündigte Google Accelerated Mobile Pages (AMP) an, ein sehr zugängliches Framework für die Erstellung von schnell ladenden mobilen Webseiten. Die Open-Source-Initiative wurde entwickelt, um Publisher in die Lage zu versetzen, die Geschwindigkeit (und damit die Benutzerfreundlichkeit) für ihre mobile Leserschaft zu verbessern, ohne dabei die Werbeeinnahmen zu verzichten, auf die sie sich verlassen können.
In dem folgenden Video finden Sie eine Einführung zu AMP von Google Chrome Developers:
Obwohl erfahrene Entwickler oft ähnliche Ergebnisse durch intensive Performance-Optimierungen erzielen können, vernachlässigen Publisher dies oft aufgrund von Ressourcenengpässen. AMP ermöglicht es, diese Optimierungen einfach zu erreichen, ohne das primäre mobile Web-Erlebnis zu verändern.
Hinzu kommt der zusätzliche Nutzen der zukünftigen Nutzung durch Google und andere namhafte Web-Technologie-Unternehmen, die die Nutzung durch eine starke Integration in ihre jeweiligen Plattformen fördern.
Wie funktioniert AMP?
Als Framework für die Erstellung mobiler Webseiten, besteht AMP aus drei grundlegenden Teilen:
- AMP HTML: Eine Untermenge von HTML, diese Auszeichnungssprache hat einige benutzerdefinierte Tags und Eigenschaften und viele Einschränkungen. Aber wenn Sie mit normalem HTML vertraut sind, sollten Sie keine Schwierigkeiten haben, bestehende Seiten an AMP HTML anzupassen. Für weitere Details darüber, wie es sich von einfachem HTML unterscheidet, schauen Sie sich die Liste der erforderlichen Markups in AMP Project an, die Ihre AMP-HTML-Seite „haben muss“.
- AMP JS: Ein JavaScript-Framework für mobile Seiten. In den meisten Fällen verwaltet es das Ressourcenhandling und das asynchrone Laden. Es ist zu beachten, dass JavaScript von Drittanbietern bei AMP nicht erlaubt ist.
- AMP CDN: Ein optionales Content Delivery Network, das Ihre AMP-fähigen Seiten aufnimmt, zwischenspeichert und automatisch einige Performance-Optimierungen vornimmt.
Wie bekommen Sie eine AMP-Version ihrer Website?
Für den Anfang müssen Sie mindestens zwei Versionen jeder Artikelseite pflegen: Die Originalversion Ihrer Artikelseite, die Benutzer normalerweise sehen werden und die AMP-Version dieser Seite.
Da AMP Dinge wie Formularelemente und JavaScript von Drittanbietern nicht zulässt, werden Sie wahrscheinlich nicht in der Lage sein, Lead-Formulare, On-Page-Kommentare und einige andere Elemente zu haben, die Sie vielleicht gewohnt sind.
Es ist auch wahrscheinlich, dass Sie Ihre Website-Vorlage neu schreiben müssen, um den Einschränkungen gerecht zu werden. Zum Beispiel, alle CSS in AMP müssen in-line sein und weniger als 50KB groß sein. Aufgrund der Ladeintensität von benutzerdefinierten Schriften müssen diese mit einer speziellen Amp-Font-Erweiterung geladen werden, um das Laden besser kontrollieren zu können.
Multimedia muss besonders gehandhabt werden. Beispielsweise müssen Bilder das benutzerdefinierte amp-img-Element verwenden und eine explizite Breite und Höhe enthalten. (Bei der Konvertierung einer Legacy-Website in eine AMP-Vorlage kann dies ein großes Problem sein, wenn die Breiten- und Höhenattribute nicht bereits verwendet werden). Wenn es sich bei Ihren Bildern um animierte GIFs handelt, müssen Sie zusätzlich die separate erweiterte Amp-Animationskomponente verwenden.
Wie Bilder gibt es einen benutzerdefinierten Tag, der verwendet werden muss, um lokal gehostete Videos über HTML5 einzubetten, genannt Amp-Video. Für die Einbettung von YouTube-Videos gibt es jedoch – was die meisten Webvideos sind – eine separate, erweiterte Komponente, Amp-Youtube.
Unterstützt werden auch Diashows über Amp-Carousel und Image-Lightboxes über Amp-Image-Lightboxes sowie Social Media-Einbettungen für Twitter, Instagram, Facebook, Pinterest und Vine über eigene, erweiterte Komponenten.
Diese Tag- und Erweiterungskomponenten sind nicht schwer zu verwenden; sie erfordern lediglich eine gewisse Planung in Ihrem Website-Design.
Damit Google (und andere Technologien, die das AMP-Projekt unterstützen) die AMP-Version Ihres Artikels erkennen können, müssen Sie die Originalversion der Artikelseite ändern. Die ursprüngliche Artikelseite muss das folgende Tag enthalten, im Wesentlichen ein kanonisches Tag für AMP-Seiten:
<link rel=“amphtml“ href=“http://www.example.com/blog-post/amp/„>
Die AMP Discovery Page erwähnt auch, dass einige Plattformen, die AMP unterstützen, Metadaten von Schema.org benötigen, um den Inhaltstyp der Seite anzugeben.
Darüber hinaus weist es auch darauf hin, dass Schema.org-Metadaten „eine Voraussetzung dafür sind, dass Ihre Inhalte in der Demo des Google Search News-Carusels erscheinen können“. Wenn Sie also versuchen, durch die Implementierung von AMP einen zukünftigen Nutzen aus Google zu ziehen, stellen Sie sicher, dass Sie Ihr Schema richtig einsetzen!
Wie kann ich Geld mit AMP-Anzeigen verdienen?
Der zunehmende Anstieg der Werbeblocker hat es den Publishern erschwert, ihre Websites zu monetarisieren. Für einige Benutzer war die Verbesserung der Ladezeit der Website ein Anreiz, Werbeblocker zu verwenden, die bei der Verbesserung der Browsing-Geschwindigkeit helfen können. AMP kann als eine Antwort auf dieses Problem gesehen werden, wobei das Projekt erklärt wird:
„A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the mobile web while embracing a user-centric approach. With that context, the objective is to provide support for a comprehensive range of ad formats, ad networks and technologies in Accelerated Mobile Pages.“
Infolgedessen verwenden einige der populärsten Werbenetzwerke derzeit die erweiterte AMP-Add-Komponente:
- Amazon A9
- AdReactor
- Google Adsense
- AOL AdTech
- Google Doubleclick
- Flite
- Taboola
- Adform
- DotAndAds
- etc.
Wenn Sie sehen möchten, wie diese aussehen, finden Sie Beispiele für jedes Anzeigennetzwerk in den.md-Dateien auf der GitHub-Seite von AMP.
Wenn Ihre Monetarisierung komplexer ist – mit Hilfe von Paywalls oder Abonnements -, gibt es eine Dokumentation, die auch für die Implementierung innerhalb von AMP zur Verfügung steht und zwar mit der Erweiterung „AMP Access“.
Gibt es eine Art AMP Analytics?
Ja. Tatsächlich funktioniert Analytics in AMP sehr gut. Um zu verhindern, dass das Tracking mehrerer Analysen eine Website verlangsamt, haben sie die Philosophie von „measure once, report to many“ eingeführt. Es gibt zwei Wege, um die Analysefunktionalität mit AMP für Ihre Website zu aktivieren:
- Das Amp-Pixel-Element: Dies ist ein einfaches Tag, das verwendet werden kann, um Seitenaufrufe zu zählen, wie es ein typisches Zählpixel mit Hilfe einer GET-Anfrage tun würde. Es gibt eine Reihe von Variablen, die durch sie übergeben werden können, wie z.B. DOCUMENT_REFERRER und Title.
- Die Amp-Analytics Extended Component: Diese Komponente ist etwas fortschrittlicher als das Amp-Pixel. Es ist wahrscheinlich, was Sie verwenden werden, um Analytics auf Ihrer Website zu implementieren, da es eine größere Konfigurationsebene für Analytics-Interaktionen ermöglicht.
Wenn Sie nicht versuchen, Google Analytics zum Laufen zu bringen, ist AMP Analytics der richtige Weg. Sie müssen die notwendige JavaScript-Bibliothek im <head> hinzufügen und diese dann über ein JSON Markup im <body> Bereich Ihrer Seite konfigurieren.
Wenn Sie an Google Analytics in AMP interessiert sind, schauen Sie sich den Abschnitt AMP Analytics von Google auf der Entwicklerseite an. Es gibt mehrere Beispiele für Implementierungen.
Was wird bei AMP so aussehen wie bei Google?
Google hat eine Demo zur Verfügung gestellt, wie ein AMP-Feature im SERP aussehen würde. Sie können es ausprobieren, indem Sie auf Ihrem Mobiltelefon zu g.co/ampdemo navigieren (oder es in den Chrome Developer Tools emulieren). Dann suchen Sie nach so etwas wie „Mars“. Oder probieren Sie es direkt hier im Browser aus. Rufen Sie dazu die AMP-Seite der bestehenden Website auf.
Mehrere große Magazine nutzen bereits AMP. Dazu gehört z.B. der Spiegel oder Focus.
Wie kann ich mit AMP in WordPress beginnen?
Eine der einfachsten Möglichkeiten, um AMP zu implementieren, bietet das CMS WordPress. Ein offizielles Plugin wird von Automattic/WordPress entwickelt und regelmäßig auf GitHub aktualisiert.
1. Installieren Sie das offizielle WordPress-Plugin.
Um loszulegen, gehen Sie auf die GitHub-Seite von amp-wp und klicken Sie auf die Schaltfläche „Download ZIP“.
Sie können dies auf Ihrer WordPress-Seite genauso installieren wie jedes andere WordPress-Plugin.
Sobald es installiert ist, müssen Sie einfach „/amp/“ an eine Artikelseite anhängen.
2. Validieren und Optimieren.
Schließlich sollte die Google Search Console die AMP-Version Ihrer Artikel über das rel=“amphtml“-Tag, das vom Plugin angehängt wird, aufgreifen, um eine einfache Validierung von Artikeln in großen Mengen zu ermöglichen. Das einzige Problem dabei ist nach meiner bisherigen Erfahrung, dass es Veränderungen nicht sehr schnell erkennt. Wenn Sie etwas reparieren, kann es sein, dass die Korrektur tagelang nicht angezeigt wird.
Ich empfehle die Verwendung einer Kombination aus Search Console und Chrome-Validierung. Um den Chrome-Validierungsprozess zu verwenden, gehen Sie zu einer Ihrer AMP-Seiten in Chrome und hängen Sie „#development=1“ an das Ende der URL an. Klicken Sie auf Steuerung + Umschalttaste + I, um die Chrome-Entwicklertools zu öffnen und zur Konsole zu wechseln.
Möglicherweise müssen Sie die Seite aktualisieren, aber sobald Sie dies getan haben, wird entweder „AMP-Validierung erfolgreich“ angezeigt oder Sie erhalten eine Liste der zu behebenden Probleme.
Mehr als wahrscheinlich reicht es nicht aus, das WordPress-Plugin einfach nur zu installieren und Sie müssen alle Seiten, die Sie von AMP profitieren möchten, durchgehen und validieren.
Abhängig davon, wie Ihre Artikel formatiert sind, müssen Sie möglicherweise einige Änderungen vornehmen, um die AMP-Seiten zu validieren. Die häufigsten Probleme, die ich persönlich erlebt habe, waren die Angabe von Höhen- und Breitenattributen für Bilder und die Korrektur alter YouTube-Einbettungscodes, die nicht mit https erstellt wurden.
3. Schema-Markup zur Validierung holen.
Wie bereits erwähnt, ist es auch wichtig, gültige Schema-Auszeichnungen auf Ihren AMP-Seiten zu haben. Um Ihre Seiten auf gültiges Markup zu testen, können Sie das Structured Data Testing Tool von Google verwenden. Ich hatte einige Probleme damit, dass WordPress kein Publisher-Logo anzeigt und musste die folgende Änderung am Plugin vornehmen.
Bearbeiten Sie die Datei class-amp-post-template.php entweder per FTP oder in Ihrem WordPress Dashboard (gehen Sie zu Plugins > Editor und wählen Sie dann „AMP“) und ändern Sie sie:
if ( $site_icon_url ) {
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => $site_icon_url,
'height' => self::SITE_ICON_SIZE,
'width' => self::SITE_ICON_SIZE,
);
}
to:
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => 'http://domain.com/wp-content/uploads/logo-60.png',
'height' => 60,
'width' => 170,
);
Achten Sie darauf, die URL durch einen Pfad zu Ihrem eigenen Publisher-Logo zu ersetzen und Höhe und Breite in Pixel anzugeben. Informationen zum relevanten Markup finden Sie hier, der besagt: „Idealerweise sind Logos genau 60px hoch mit einer Breite von <= 600px“.
4. Erste Google Analytics Arbeiten mit dem AMP WordPress Plugin.
Was nützt eine Website, wenn man sie nicht mit Hilfe von Analytics verfolgen kann? Das AMP WordPress-Plugin ermöglicht zwar keine Analyse von AMP direkt nach dem Auspacken, aber es ist relativ einfach zu aktivieren.
Damit das AMP WordPress-Plugin mit Google Analytics arbeiten kann, bearbeiten Sie die Datei amp-post-post-template-actions.php (eine andere Datei als die zuvor erwähnte), entweder per FTP oder in Ihrem WordPress-Dashboard (gehen Sie zu Plugins > Editor und wählen Sie dann „AMP“) und fügen Sie das Folgende am Ende hinzu:
add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
(<)script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">(<)/script>
?>
(<)script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
(<)/script>
}
Stellen Sie sicher, dass Sie UA-XXXXXXX-Y so ändern, dass es die Google Analytics-Eigenschafts-ID Ihrer Website darstellt.
Jetzt sollten Sie Ihre AMP-Seiten erneut validieren und Sie sollten ein grundlegendes AMP-Setup mit aktiviertem Tracking für Ihre WordPress-Website haben.
Schlußfolgerung.
AMP bietet eine relativ einfache Möglichkeit, die Geschwindigkeit mobiler Websites für Publisher zu verbessern. Da sich Ende Februar nähert und das Google News Lab regelmäßige Bürozeiten über Hangouts durchführt, können wir davon ausgehen, dass Google seine Integration bald einführen wird. In dem, was eine Reaktion auf die Dynamik des AMP-Projekts zu sein scheint, könnte sogar Facebook reagieren. Sie hat kürzlich beschlossen, Instant-Artikel für alle Verlage zu öffnen.
Sind Sie ein Verleger? Dann sollten Sie sich Gedanken über Accelerated Mobile Pages machen.