Um Besucher möglichst lange auf der eigenen Website zu halten, werden allerlei Mühen auf sich genommen. Neben den richtigen Texten und Bildern ist die Ladezeit einer Website schon sehr lange ein großes Thema, vor allem im Bereich SEO. Daher treten seit neustem spezielle, mobile Ansichten von Websites auf den Plan, die wir Ihnen in diesem Beitrag vorstellen.
Inhalt
Was sind AMP?
Unter einer einzelnen AMP (Accelerated Mobil Pages) können Sie sich eine auf das Minimum reduzierte Version Ihrer Website vorstellen. Diese Seiten werden lediglich von mobilen Geräten geöffnet und dienen dazu, einen schnelle Informationsfluss zu liefern. AMPs bestehen nämlich fast ausschließlich aus HTML- und ein wenig CSS-Code, wodurch der Content Ihrer Seite im Mittelpunkt steht. Außerdem werden Javascripte und CSS-Codes der Website, Animationen, Effekte und ähnliches, ausgeschlossen. Dadurch wird die Ladezeit einer AMP merkbar gesteigert, immer mit dem Ziel, eine AMP beinahe ohne Verzögerung zu öffnen. Denn gerade bei der Benutzung von Mobilen Geräten geht es den Besuchern vor allem darum, schnell an die Informationen zu gelangen, nach denen sie suchen.
Seit Google die AMP in die Bewertung des Mobilen Designs einer Website aufgenommen hat sind die reduzierten Versionen Ihrer Website zudem ein Faktor für das Ranking Ihrer Site in den Suchergebnissen von Google.
Wie installiere ich AMP in WordPress?
Diese AMP in Ihrer WordPress-Website zu integrieren ist keine all zu große Herausforderung. Denn – wie so häufig bei WordPress – es gibt ein Plug-in dafür. Das Unternehmen Automattic hat bereits eine Erweiterung entwickelt, welches nach der Installation automatisch AMP für Ihre Blog-Beiträge erstellt. Seiten und Archive werden dabei zunächst noch außer Acht gelassen. Das liegt daran, dass Beiträge den größten Informationswert einer Website ausmachen und zumeist Fragen der Besucher beantworten, nach denen diese gesucht haben.
Das Plug-in AMP-WP erstellt Versionen Ihrer Website, die in der Regel von Ihrem Design deutlich abweichen können, es wird Beispielsweise das WordPress-Blau als Headerfarbe gewählt und Ihr Favicon wird in die obere linke Ecke platziert. An sich sieht die erstellte AMP-Version trotzdem schon sehr anständig aus.
Beispiel: (Oben) Unsere Testseite, (unten) die Seite als AMP
Innerhalb des Plug-ins lassen sich keine Einstellungen ändern, Farben und ähnliches sind festgelegt. Um diese zu ändern, müssen Sie ein weiteres Plug-in installieren, wobei Ihnen zwei gute zur Auswahl stehen.
Plug-in zum Erstellen und Anpassen von AMP in WordPress
PageFrog ist in erster Linie dazu da, die Farbe des Headers, sowie Schriftarten und Schriftfarben zu ändern. Außerdem können Sie ein eigenes Logo für die AMP-Seiten hochladen, welches an Stelle des normalen Logos gewählt wird. Das ist dann sinnvoll, wenn Ihr Logo einen Schriftzug enthält, der auf einer solchen Bildschirmgröße nicht mehr zu lesen ist.
Beitrag mit PageFrog
Bei dem Plug-in sind „nur“ Farben und Schriften, sowie Logo anpassbar, mehr ist aber auch nicht zwingend notwendig oder erwünscht, da die Site wenig Daten auskommen und die Ladezeit niedrig bleiben soll.
AMP durch Code erweitern
Sollten an den mobilen Seiten dennoch kleine Änderungen vorgenommen werden, so können Sie das durch die funktions.php Ihres Childthemes und der Hilfe dieser Anleitung des Automattic AMP-Plug-ins und ohne weiteres Plug-in erreichen.
Außerdem können Sie in dem Beitrag „Making the most of AMP for WordPress“ Code-Beispiele zum Einfügen von Menüleisten, Social Media Links und mehr finden. Sofern Sie sich mit CSS und PHP auskennen, können Sie mithilfe des Beitrags auch direkt den Code des AMP-Plug-ins an Ihre Bedürfnisse anpassen, anstatt ein weiteres Plug-in zu installieren.
Fazit:
AMP sind bisher ein eher umstrittenes Thema, da viele Webdesigner der Meinung sind, dass das Design einer Website nicht unter einem zu großen Geschwindigkeitswahn leiden sollte. Allerdings wird man sich in Zukunft mehr mit dieser Sache beschäftigen müssen, wenn man Google zufrieden stellen möchte.
Quelle Bilder: Eigene Screenshots
5 Kommentare. Wir freuen uns über Ihren Kommentar
Ich selber betreibe auch die ein oder andere Seite. Ich hatte mich auch nach langem hin und her überlegen für ein AMP PlugIn für meinen WordPress Blog entschieden. Nach etwa 6 Wochen habe ich das wieder gelöscht, da ich keine Veränderung in Irgendwelchen Zahlen feststellen konnte. Mittlerweile habe ich auch das Gefühl, das diese AMP Symbole in den Google Suchergebnissen immer weniger werden. Ich glaube das alles setzt sich nicht für die Masse durch, sondern nur für ein paar Seiten.
Hi… danke für den Artikel… kurze frage dazu … wie kann ich einen link direkt auf eine startseite setzen? Z.b. http://www.domain.de.
Ich kann auch das AMP Plugin „WP AMPT it up!“ empfehlen (https://wordpress.org/plugins/wp-amp-it-up/).
Es hat ein paar zusätzliche Features gegenüber den bisher erwähnten Plugins, z.B. übernimmt es eventuell vorhandene Google-Analytics-Ttackings, damit erhält man dann auch in seinem eigenen Analytics-Konto alle Nutzungsdaten zu den eigenen AMP-Seiten! Zusätzlich erstellt das Plugin automatisiert Social-Share-Buttons, damit lassen sich die AMP-Seiten dann auch teilen und weiterleiten.
Interessanter Artikel, danke dafür.
Sicher ein Ansatz um WordPress Webseiten, die vielleicht mit einem älteren Theme erstellt sind für mobile Endgeräte aufzupeppen. Werde ich mal testen für eine eigentlich brach liegende Seite auf der noch ein nicht responsives Template ein Einsatz ist.
Ansonsten bin ich ja eher ein Freund davon gleichwie Seite so zu gestalten das sie „mobile friendly“ ist.
Dieses ganze „zurechtbiegen“ mit irgendwelchen Plugins, gefallen mir persönlich eher nicht. Ich habe da eher nach der Devise „Weniger ist mehr“
Aber das ist wie so manche auch Ansichtssache.
Weniger ist immer mehr. Die meisten Betreiber von Seiten machen es fast immer genau falsch , diese überlagern ihre Seite förmlich , am Ende machen die User gar nichts weil diese überfordert sind und verlassen die Seite wieder sehr schnell. Schlichte Seiten mit einen schmalen Design ist fast immer viel erfolgreicher.