AMP: mobile Ausgabe von Beiträgen in WordPress

Mobile Ausgabe eines WordPress-Artikels, generiert mit AMP

Mit dem Plugin, welches den schillernden Namen Accelerated Mobile Pages (AMP) Project trägt und welches ich im letzten WordPress-Newsletter erwähnt habe, ist man in der Lage automatisch eine schlanke, für mobile Geräte optimierte Ausgabe von WordPress-Beiträgen zu generieren. Nach der Installation des Plugins werden automatisch von allen Beiträgen extra mobile Ausgaben generiert:

Mobile Ausgabe eines WordPress-Artikels, generiert mit AMP
Mobile Ausgabe eines WordPress-Artikels, generiert mit AMP

Einfach an die URL des jeweiligen Beitrags /amp/ dranhängen. Hier zum Beispiel ein Originalartikel und hier die AMP-Ausgabe. Wenn die sprechenden Permalinks nicht aktiviert sind, dann hängt man die Beitrags-URL ein ?amp=1 dran.

Warum das Ganze?

An sich ist das eine sinnvolle Maßnahme, denn auch wenn mittlerweile die meisten WordPress-Themes responsive sind und sie sich somit der Ausgabe am Bildschirm anpassen, so sind sehr viele Websites dennoch nicht für die mobilen Geräte angepasst. Hier vor allem in Bezug auf die Dateigröße. Bei meinen WordPress-Inspektionen hatte ich einige Websites, die zwar auf Tablets und Smartphones schick aussahen, aber ohne Probleme 7+ MByte und 100+ http-Aufrufe auf die Waage brachten. Je nach dem welche mobile Verbindung man gerade hat ist das nicht wirklich optimal und man kann so schnell das Datenvolumen ausreizen.

Daher lohnt es sich, sich AMP mal genauer anzuschauen. Zumal Google die AMP-Ausgaben in den mobilen Suchergebnissen hervorhebt.

Anpassung der Ausgabe

Momentan werden lediglich die Beiträge unterstützt. Die mobile Ausgabe von Seiten, Archiven und Custom Post Types ist noch nicht implementiert. Zumindest bei den Custom Post Types kann man es nachrüsten in dem man folgenden Code in die functions.php hinzufügt:

add_action( 'amp_init', 'xyz_amp_add_review_cpt' );
function xyz_amp_add_review_cpt() {
    add_post_type_support( 'custom-post-type-name', AMP_QUERY_VAR );
}

Möchte man die CSS-Angaben anpassen so kann man unter anderem nach folgender Methode verfahren:

// Styles für AMP
add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
function xyz_amp_my_additional_css_styles( $amp_template ) {
    // hier bitte nur die CSS-Angaben
    ?>
    /* deine CSS-Angaben */
    <?php
}

Den oberen Code ebenfalls in die functions.php einfügen. Man findet die Informationen zu dem Plugin sowohl im offiziellen Plugin-Verzeichnis, aber vor allem auf GitHub. Auf GitHub findet man auch Informationen darüber, wie zum Beispiel Analytics für die AMP-Ausgabe nachrüstet oder eigene Templates erstellt und einbindet.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

9 Kommentare

    1. Hallo Johannes,

      genau: ein amp/ am Ende jeder URL. Wegen Duplicate Content: rel="canonical" zeugt auf die originale URL … also die ohne amp/.

  1. Danke für diesen informativen Artikel. Ihr seid mit Abstand die beste Informationsquelle zum Thema WordPress. Ich erwische mich alle paar Monate wie ich denke, guck an – seit Jahren immer wieder Perun. Macht weiter so.

    Liebe Grüẞe aus Magdeburg

  2. Ich kann als Alternative das AMP Plugin “WP AMP it up!” empfehlen. Das Plugin benötigt keinerlei Anpassungen. Einfach installieren und fertig. Zusätzlich bietet es einige zusätzliche Features, wie z.B. die automatisierte Übernahme vom Google-Analytics-Tracking oder das automatisierte Hinzufügen von Social-Share-Buttons. Auch ein AMP Carousel wird automatisch erstellt:
    https://wordpress.org/plugins/wp-amp-it-up/

  3. […] Ich habe im März diesen Jahres zum ersten Mal über das AMP-Plugin berichtet, mit dem man in der Lage ist eine schlankere mobile Ausgabe der Beiträge zu erstellen. Nun gab es nach einigen Monaten das erste große Update für das Plugin und es sind ein paar neue Funktionen hinzugekommen. So ist jetzt ein Customizer mit dabei, mit dem man unter Design → AMP die von AMP erstellten Seiten rudimentär anpassen kann: […]

Kommentare sind geschlossen.