SEO für Progressive-Web-Apps (PWA)

Progressive-Web-Apps erlauben Entwicklern die Integration vieler Funktionen, die sonst nur klassische Native-Apps bieten. Zusätzlich kommen PWAs ganz ohne die Beschränkungen der App-Shops aus. Ein weiterer großer Vorteil ist ihre Präsenz im Web und die damit verbundenen SEO-Möglichkeiten. In diesem Artikel erfährst Du, wie SEO für Progressive-Web-Apps funktioniert.

Willkommen in der Zukunft

Progressive-Web-Apps erlauben zum Beispiel das Versenden von Push-Mitteilungen, ermöglichen den Offline-Zugriff auf die App-Inhalte und bieten die Möglichkeit, ein Icon auf dem Homebildschirm zu platzieren – so wie es auch bei klassischen Native-Apps der Fall ist. Aber anders als bei Native-Apps sind die Inhalte in PWAs den Suchmaschinen zugänglich. Du kannst also für eine PWA dieselben Onlinemarketing-Strategien nutzen wie für klassische Websites.

Der Begriff Progressive-Web-App kommt von Google. Entsprechend groß ist die Unterstützung und der Glaube an die Technologie in Mountain-View. Anders sieht es (noch) in Cupertino in Apples Glaspalast aus. Mit iOS 11.3 haben zwar einige Funktionen der PWAs auch Einzug auf iPhone und iPad gehalten. Trotzdem können zum Beispiel Push-Nachrichten nach wie vor nicht versendet werden – anders als bei Android. Es ist aber davon auszugehen, dass auch Apple an einer Lösung zur vollständigen Integration in sein Betriebssystem arbeitet. Und weltweit gesehen hat iOS gerade mal 12 Prozent Marktanteil. Der Löwenanteil von knapp 88 Prozent wird von Android beherrscht.

Progressive-Web-Apps haben großes Zukunftspotenzial. Die Änderungen sind schleichend, nicht eruptiv. Trotzdem könnten PWAs die nächste Evolutionsstufe im Internet darstellen. Schon jetzt gibt es viele Fälle, in denen PWAs die empfehlenswertere Alternative zu Native-Apps, klassischen Web Apps und Websites sind.

• Du willst Deine App nicht verkaufen
• Du möchtest Push-Nachrichten versenden (bisher nur via Android möglich)
• Deine User arbeiten viel offline/haben instabile Internetverbindungen (z. B. in Ländern mit schlechter Infrastruktur)
• Die User greifen sehr häufig auf die Inhalte zu
• Du präsentierst viel und regelmäßig neuen Content

Zusammenfassend gesagt, sind PWAs eine gute Wahl, wenn Du auf nutzerfreundliche Weise Inhalte anbieten willst, mit denen die User regelmäßig arbeiten. Doch wie sieht es mit der Indexierung von Progressive-Web-Apps aus und wie funktioniert SEO mit ihnen? Die Antwort: Beachtest Du einige Punkte, kannst Du die meisten bekannten SEO-Strategien anwenden.

PWA und SEO: Grundlegendes

Bei Native-Apps entscheiden die App-Shop-Betreiber mit ihren Betriebssystem-Updates über neue Funktionen. Anders bei PWAs: Hier sind neue Funktionen erst verwendbar, wenn der genutzte Browser sie unterstützt. Voraussetzung dafür sind in der Regel Webstandards, bis zu deren Implementierung eine Weile vergehen kann. Deshalb empfiehlt Google für die Auffindbarkeit von PWAs das Progressive-Enhancement. Nach dieser Methode trennen Webdesigner Informationen, Funktionen und Design. Die grundlegenden, wichtigen Informationen sind immer verfügbar. Ob und welche der Design- und Präsentationselemente sowie Funktionen der User sieht bzw. nutzen kann, entscheidet dann sein Browser. Weil aber jeder Nutzer zumindest die wesentlichen Inhalte konsumieren kann, ist progressive-Enhancement auch ein Vorteil für SEO.

Die richtigen URLs

Manche PWAs nutzen das #-Symbol in ihren URLs. Das Problem: Die Google-Bots lesen nur bis »#«. Alles was folgt, wird demzufolge nicht indiziert. Es gilt also auch bei PWA den traditionellen SEO-Empfehlungen für URLs zu folgen und für suchmaschinenrelevante URLs zu sorgen.

Keinen Bot aussperren

Nur was der Google-Bot kennt, kann er ranken. Deshalb ist es wichtig, ihm über die robot.txt die richtigen Zugriffsrechte zu gewähren. Zum Beispiel sollten Frameworks, JavaScript-Ressourcen und APIs vollständig zugänglich sein.

Der Blick durch die Google-Brille

Mit der Funktion »Abruf wie durch Google«“ siehst Du, wie Google eure PWA crawlt und rendert. Auf der Hilfeseite listet Google auch gleich eine Tabelle mit möglichen Fehlern und Möglichkeiten zu ihrer Behebung auf. Auch für Chrome gibt es eine sehr hilfreiche Extension namens »Lighthouse«. Hier erhält man sowohl detaillierte Auswertungen zu SEO-Aspekten wie auch zur PWA-Funktionalität an sich.

Vorsicht bei JavaScript

Progressive-Web-Apps enthalten in aller Regel viel JavaScript oder basieren vollständig auf entsprechenden JavaScript-Frameworks. Google und JavaScript waren lange Zeit keine Freunde. Zwar sind Google-Bots im Lesen von JS-Elementen besser geworden, trotzdem kann es zu Fehlern kommen. Bei Bots von anderen Suchmaschinen und Sozialen Netzwerken ist die Situation unklarer. In Deutschland und USA ist Google Marktführer. Seid ihr ein internationales Unternehmen, solltet ihr auch andere Suchmaschinen wie Yandex und Baidu und deren Bots im Blick behalten.

Bartosz Góralewicz stellt in seinem Blogbeitrag auf moz.com fest, dass eigentlich nur Google und ASK in der Lage sind JavaScript sauber zu interpretieren bzw. zu indizieren. Als sicherste Maßnahmen gilt deswegen – auch für Google – derzeit ein sogenanntes serverseitiges Pre-Rendering. Dabei werden im Prinzip die Seiten als statisches HTML vorgerendert und der Suchmaschine ausgegeben. Eine Frameworks (z. B. Angular4) bieten entsprechende Möglichkeiten an. Auch externe Tools wie zum Beispiel prerender.io können hierfür in Frage kommen.

Zudem können HTML5-Pushstates eine Lösung darstellen. Das AJAX-Crawling-Scheme ist dagegen veraltet und nicht mehr zu empfehlen. Pre-gerenderte Seiten stellen übrigens kein Cloaking dar, so lange Nutzer und Suchmaschine am Ende die gleichen Inhalte zu sehen bekommen. Es gilt also sicherzustellen, dass die ausgegebenen Versionen gleich sind.

Kein Duplicate-Content

Ein Kerngedanke von Progressive-Web-Apps ist die Anpassungsfähigkeit im Sinne eines sich progressiv verbessernden Angebots. Im Idealfall passt sich die PWA also dem Browser und dem verwendeten Endgerät an und kombiniert App und Website zu einem geräteübergreifenden Angebot.

Manche Entwickler entscheiden sich aber, die PWA nur für Smartphone und Tablet anzubieten und parallel eine Desktop-Variante der Website weiter zu betreiben. Verwenden nun beide Projekte denselben Content, wertet Google das möglicherweise als Duplicate-Content und wertet eine oder beide Seiten ab. Eine Lösung bieten canoncial-Tags.

Ein simples „rel=canonical“ im Header der URL vermeidet Duplicate-Content.

Darüber hinaus gilt bei SEO für Progressive-Web-Apps auch das, was für Websites gilt: Schlanke Programmierstrukturen, schnelle Ladezeiten, gute Usability und User-Experience sowie hochwertiger Content führen zu guten Rankings.

SEO für Progressive-Web-Apps: Fülle an Möglichkeiten

Zwar gibt es auch für Native-Apps inzwischen einige Möglichkeiten der Suchmaschinenoptimierung. Zum Beispiel ist es möglich – sofern der User die jeweilige App installiert hat – über Deep-Links im Head-Bereich auf Unterseiten der App zu verweisen. Progressive-Web-Apps bieten aber mehr und schöpfen das gesamte SEO-Potenzial aus. Zum Beispiel fließen sowohl der PWA-Content als auch die Verlinkungen voll in das Ranking mit ein. Sauber umgesetzt sind PWAs für SEO gut geeignet. Damit verbinden sie die mannigfaltigen Onlinemarketing-Möglichkeiten von Websites mit vielen Vorteilen der Native-Apps.

Mehr zum Thema Progressive-Web-Apps findest Du auch in unserem kostenlosen Whitepaper! Zum Download geht es hier!