SPA SEO: Eine unmögliche Mission?

SPA SEO: What’s the Problem?
Server-seitiges Rendering: Wie Sie Ihre SPA für Suchmaschinen optimieren
Don’t Forget the Basics

Magnolia in Aktion

Unser Expertenteam zeigt Ihnen live, was Magnolia für Sie leisten kann.

Von Twitter und LinkedIn bis hin zu Netflix und Google Maps - Single Page Applications (SPAs) verändern den Alltag der Kunden.

Die Endnutzer erwarten inzwischen appähnliche Erlebnisse, sogar über ihre Desktop- und Laptop-Webbrowser.

Um mit diesem neuesten Trend im Bereich digitaler Erlebnisse Schritt zu halten, führen immer mehr Marken SPAs anstelle herkömmlicher Websites, eCommerce-Shops, Intranets, Online-Communities, Portale usw. ein. Dabei stellen sie jedoch fest, dass ihre SPAs im Gegensatz zu ihren herkömmlichen Websites von Google nicht annähernd so gut gecrawlt werden.

SPA SEO: What’s the Problem?

SPAs sind nicht von Natur aus suchmaschinenfreundlich - aber verlassen Sie sich nicht auf unser Wort.

Laut SEO-Experte Barry Adams, React-basierte SPAs (und andere JavaScript-basierte SPAs), spielen nicht gut mit Googles Crawler.

"Wenn Sie React ohne serverseitiges Rendering verwenden, hält der Crawler auf der allerersten Seite an, weil er keine Hyperlinks sieht, denen er folgen kann. Er sendet die Seite an den Indexer, der dann die Seite rendern und die Hyperlinks extrahieren muss, die dann in die Warteschlange des Crawlers aufgenommen werden. Dann wird der Crawler schließlich die nächste Reihe von Seiten crawlen und dort wieder anhalten, weil alle Links unsichtbar sind, bis das JavaScript gerendert ist. Er muss also warten, bis der Indexer mit einer neuen Reihe von URLs zurückkommt, die er crawlen kann", erklärt Adams in einem Medium-Artikel.

"Das macht den Crawl-Prozess unglaublich langsam und ineffizient. Und das ist der Grund, warum Websites, die auf React (und ähnlichen JavaScript-Plattformen) aufgebaut sind, bei Google schlechter abschneiden als Websites, die dem Crawler hauptsächlich einfaches HTML zur Verfügung stellen", fuhr er fort.

Aus Geschwindigkeitsgründen stellen SPAs eine leere Seitenhülle bereit, die erst mit Inhalt gefüllt wird, wenn ein Ajax-Aufruf erfolgt, d. h. wenn ein menschlicher Benutzer die Seite über einen Webbrowser lädt. Zum Laden des Inhalts selbst wird dann JavaScript verwendet.

Das einzige Problem in diesem Szenario ist, dass Googles Crawler die zusätzliche Arbeit nicht immer zu schätzen weiß, die er leisten muss, um auf Ihre Seite(n) und den darin enthaltenen Inhalt zuzugreifen.

Einfach ausgedrückt, eine JavaScript-basierte SPA macht Google das Leben schwer, wenn es darum geht, Ihre Website schnell zu crawlen. Einige Tests deuten darauf hin, dass JavaScript einfach unzuverlässig ist, wenn es um die Indizierung durch Suchmaschinen geht.

Erschwerend kommt hinzu, dass viele SPAs ohne eindeutige, suchmaschinenfreundliche URLs erstellt werden, was es für Google noch schwieriger macht, Seiten zu crawlen und zu indizieren, die über die SPAs hinausgehen und keine individuellen URLs für verschiedene Bereiche oder Seiten der Anwendung haben.

Es gibt jedoch eine gute Nachricht: SPA-SEO ist nicht unmöglich, es ist nur ein wenig schwieriger als die gute alte Website-SEO.

SPA: The Go-to Guide for Marketers

Go headless with no limits for your marketers. Enable marketers to edit the structure, layout and content of a fully headless SPA (Single-page Application), directly in the Magnolia Page Editor.

Holen Sie sich den Leitfaden

Server-seitiges Rendering: Wie Sie Ihre SPA für Suchmaschinen optimieren

Mit serverseitigem Rendering wird SPA SEO plötzlich viel weniger entmutigend.

Server Side Rendering (SSR) ermöglicht Google die Indizierung und Erkennung von Seiten innerhalb Ihrer SPA.

Bei SSR wird eine normalerweise nur clientseitige Single Page App (SPA) auf dem Server gerendert und dann eine vollständig gerenderte Seite an den Client gesendet. Dies bedeutet, dass der Inhalt der Website gecrawlt werden kann, auch wenn der Crawler nicht in der Lage ist, JavaScript-Code auszuführen. Außerdem können Social-Media-Plattformen wie Twitter und Facebook die Metadaten der Seite effizienter lesen, so dass sie Inhalte und Bilder für Vorschauen auf ihren Plattformen extrahieren können.

Der einzige Nachteil von SSR ist, dass es nicht ganz so schnell geladen werden kann wie eine normal funktionierende SPA. SPAs nutzen in der Regel Client Side Rendering (CSR) für optimale Geschwindigkeit, aber Sie müssen etwas von dieser Agilität für den SEO-Schub, den Sie suchen, eintauschen.

Angular-basierte Anwendungen können Angular Universal, den nativen Rendering-Service von Angular, nutzen. React-basierte SPAs sind auch SEO-freundlich, da sie "Render to String" oder beliebte Bibliotheken wie Next.js nutzen können, wodurch sie vollständiges HTML direkt auf dem Server zurückgeben können.

Don’t Forget the Basics

Was Sie nicht wollen, ist so gefangen in der SPA SEO technischen Details, die Sie vergessen, über die Grundlagen.

Also, sobald Sie durch die Server-Side-Rendering Reifen springen, hier sind einige weitere SPA SEO Reifen zu springen durch.

Content, Content, Content: Wie wir in unserem Blogbeitrag zur Enterprise-SEO erwähnt haben, sollte Ihr Inhalt Ihr SEO-Unterscheidungsmerkmal sein. Sicherlich werden Sie Ihre SPA nicht dazu verwenden, lange Blogbeiträge und textlastige Landing Pages zu veröffentlichen, aber das bedeutet nur, dass Sie noch sorgfältiger über Keywords, Header-Tags und Linkaufbau nachdenken müssen.
SEO-freundliche URLs: Genau wie bei einer normalen Website sollten Sie jeder Seite innerhalb Ihrer SPA einen eindeutigen, leicht lesbaren URL-Slug zuweisen.
Metadaten: Die folgenden Metadaten sollten direkt in den Quellcode der Seite eingefügt werden: Seitentitel, Meta-Beschreibung, kanonischer Tag, Meta-Robots und hreflang-Tags.
Internal Linking: Your SPA’s internal links should be embedded utilising link <a> tags as opposed to JavaScript onclick events. This helps enable search engine crawling.
XML-Sitemaps: Um sicherzustellen, dass Suchmaschinen Zugang zu Ihren tieferen, undurchsichtigeren SPA-Seiten erhalten, sollten Sie eine XML-Sitemap veröffentlichen.
Fehlerseiten: Vernachlässigen Sie auch nicht Ihre Fehlerseiten, die bei Fehlern den korrekten Status der Seitenüberschrift zurückgeben sollten. So sollte ein 404-Header-Status zurückgegeben werden, wenn ein Benutzer versucht, auf eine fehlende Seite zuzugreifen, während ein 500-Status für einen Serverfehler zurückgegeben werden sollte.
Alt-Tags für Bilder: Da viele SPAs sehr bildlastig sind, sollten Sie jedem Bild relevante, schlagwortreiche Alt-Tags geben.
Regelmäßige SEO-Audits durchführen: Achten Sie darauf, Ihre Inhalte regelmäßig auf Fehler, defekte Links, fehlende Tags usw. zu überprüfen. Mit dem Magnolia-SEO-Modul können Sie Ihre Seiten überprüfen, um eventuelle Schwachstellen in Ihrer SEO-Strategie zu entdecken.

Zusammenfassend lässt sich sagen: Wenn Ihr Unternehmen die Einführung einer Single Page Application vorbereitet, sollten Sie mit Ihren Entwicklern über das serverseitige Rendering sprechen, um sicherzustellen, dass Google jede von Ihnen veröffentlichte SPA-Seite problemlos crawlen und indexieren kann. Dann können Sie zu den Grundlagen zurückkehren - und hoffentlich an die Spitze der ersten Seite gelangen.

Wenn Sie mehr über SPAs aus der Marketing-Perspektive erfahren möchten, lesen Sie "The Definitive SPA Guide for Experience Makers".