In der Vergangenheit verwendeten Webentwickler HTML für Inhalte, CSS für das Design und JavaScript (JS) für interaktive Elemente. JS ermöglicht das Hinzufügen von Funktionen wie Popup-Dialogfeldern und erweiterbaren Inhalten auf Webseiten. Heutzutage vorbei 98 % aller Websites verwenden JavaScript aufgrund seiner Fähigkeit, Webinhalte basierend auf Benutzeraktionen zu ändern. 

Ein relativ neuer Trend bei der Integration von JS in Websites ist die Einführung von Single-Page-Anwendungen. Im Gegensatz zu herkömmlichen Websites, die alle ihre Ressourcen (HTML, CSS, JS) laden, indem sie sie bei jedem Bedarf vom Server anfordern, erfordern SPAs nur ein anfängliches Laden und belasten den Server nicht weiter. Stattdessen übernimmt der Browser die gesamte Verarbeitung. 

Dies führt zu schnelleren Websites, was gut ist, denn Studien zeigen, dass Online-Käufer erwarten, dass Websites schneller geladen werden drei Sekunden. Je länger der Ladevorgang dauert, desto weniger Kunden bleiben auf der Seite. Die Übernahme des SPA-Ansatzes kann eine gute Lösung für dieses Problem sein, kann aber bei falscher Umsetzung auch eine Katastrophe für die Suchmaschinenoptimierung bedeuten. 

In diesem Beitrag diskutieren wir, wie SPAs erstellt werden, untersuchen die Herausforderungen, die sie für die Optimierung mit sich bringen, und geben Anleitungen für die richtige Durchführung von SPA-SEO. Wenn Sie SPA-SEO richtig einsetzen, können Suchmaschinen Ihre SPAs verstehen und sie gut einstufen.

SPA auf den Punkt gebracht

Eine Single-Page-Anwendung oder SPA ist eine spezielle JavaScript-basierte Technologie für die Website-Entwicklung, die nach dem ersten Seitenaufruf keine weiteren Seitenladevorgänge erfordert. React, Angular und Vue sind die beliebtesten JavaScript-Frameworks, die zum Erstellen von SPA verwendet werden. Sie unterscheiden sich hauptsächlich hinsichtlich der unterstützten Bibliotheken und APIs, beide dienen jedoch dem schnellen clientseitigen Rendering. 

Ein SPA steigert die Website-Geschwindigkeit erheblich, indem es die Anfragen zwischen Server und Browser eliminiert. Doch Suchmaschinen sind von diesem JavaScript-Trick nicht so begeistert. Das Problem liegt darin, dass Suchmaschinen nicht wie Benutzer mit der Website interagieren, was zu einem Mangel an zugänglichen Inhalten führt. Suchmaschinen verstehen nicht, dass der Inhalt dynamisch hinzugefügt wird, und hinterlassen eine leere Seite, die noch ausgefüllt werden muss.

Endbenutzer profitieren von der SPA-Technologie, da sie problemlos durch Webseiten navigieren können, ohne sich mit zusätzlichen Seitenladevorgängen und Layoutverschiebungen herumschlagen zu müssen. Da Single-Page-Anwendungen alle Ressourcen in einem lokalen Speicher zwischenspeichern (nachdem sie bei der ersten Anfrage geladen wurden), können Benutzer sie auch bei instabiler Verbindung weiter durchsuchen. Trotz des zusätzlichen SEO-Aufwands, den sie erfordert, sorgen die Vorteile der Technologie dafür, dass sie dauerhaft präsent ist.

Beispiele für SPAs

Viele hochkarätige Websites werden mit einer Single-Page-Anwendungsarchitektur erstellt. Beispiele für beliebte sind:

• Google Maps

Mit Google Maps können Benutzer Karten anzeigen und Wegbeschreibungen finden. Wenn ein Benutzer die Website zum ersten Mal besucht, wird eine einzelne Seite geladen und weitere Interaktionen werden dynamisch über JavaScrip abgewickelt. Der Benutzer kann die Karte schwenken und zoomen, und die Anwendung aktualisiert die Kartenansicht, ohne die Seite neu laden zu müssen.

Airbnb ist eine beliebte Reisebuchungsseite, die ein einzelnes Seitendesign verwendet, das dynamisch aktualisiert wird, wenn Benutzer nach Unterkünften suchen. Benutzer können Suchergebnisse filtern und verschiedene Immobiliendetails erkunden, ohne zu neuen Seiten navigieren zu müssen.

• Facebook 

Wenn sich Benutzer bei Facebook anmelden, wird ihnen eine einzige Seite angezeigt, auf der sie mit Beiträgen, Fotos und Kommentaren interagieren können, sodass die Seite nicht aktualisiert werden muss. 

Trello ist ein webbasiertes Projektmanagement-Tool, das von SPA unterstützt wird. Auf einer einzigen Seite können Sie Projekte, Karten und Listen erstellen, verwalten und gemeinsam daran arbeiten.

Spotify ist ein beliebter Musik-Streaming-Dienst. Damit können Sie Musik auf einer einzigen Seite durchsuchen, suchen und anhören. Kein Neuladen oder Wechseln zwischen Seiten erforderlich.

Ist eine Single-Page-Anwendung gut für SEO?

Ja, wenn man es klug umsetzt.

SPAs bieten ein nahtloses und intuitives Benutzererlebnis. Sie erfordern nicht, dass der Browser beim Navigieren zwischen verschiedenen Abschnitten die gesamte Seite neu lädt. Benutzer können ein schnelles Surferlebnis genießen. Außerdem ist es weniger wahrscheinlich, dass Benutzer durch Neuladen von Seiten oder Unterbrechungen beim Surfen abgelenkt oder frustriert werden. So kann ihr Engagement höher sein. 

Der SPA-Ansatz ist auch bei Webentwicklern beliebt, da er einen Hochgeschwindigkeitsbetrieb und eine schnelle Entwicklung ermöglicht. Entwickler können diese Technologie nutzen, um basierend auf vorgefertigtem Code verschiedene Plattformversionen zu erstellen. Dies beschleunigt den Entwicklungsprozess für Desktop- und Mobilanwendungen und macht ihn effizienter.

Während SPAs zahlreiche Vorteile für Benutzer und Entwickler bieten können, stellen sie auch einige Herausforderungen für SEO dar. Da Suchmaschinen traditionell auf HTML-Inhalte angewiesen sind, um Websites zu crawlen und zu indizieren, kann es für sie schwierig sein, auf die Inhalte in SPAs zuzugreifen und diese zu indizieren, die stark auf JavaScript basieren. Dies kann zu Problemen bei der Crawlbarkeit und Indexierbarkeit führen. 

Dieser Ansatz ist in der Regel sowohl für Benutzer als auch für SEO von Vorteil, Sie müssen jedoch die richtigen Schritte unternehmen, um sicherzustellen, dass Ihre Seiten leicht zu crawlen und zu indizieren sind. Mit der richtigen Single-Page-App-Optimierung kann Ihre SPA-Website genauso SEO-freundlich sein wie jede herkömmliche Website.

In den folgenden Abschnitten gehen wir darauf ein, wie man SPAs optimiert.

Warum es schwierig ist, SPAs zu optimieren

Bevor JS in der Webentwicklung dominant wurde, haben Suchmaschinen nur textbasierte Inhalte aus HTML gecrawlt und indiziert. Als JS immer beliebter wurde, erkannte Google die Notwendigkeit, JS-Ressourcen zu interpretieren und Seiten zu verstehen, die darauf basieren. Die Suchcrawler von Google haben sich im Laufe der Jahre erheblich verbessert, es gibt jedoch immer noch viele Probleme hinsichtlich der Art und Weise, wie sie Inhalte in Einzelseitenanwendungen wahrnehmen und darauf zugreifen.

Es liegen zwar nur wenige Informationen darüber vor, wie andere Suchmaschinen Single-Page-Anwendungen wahrnehmen, man kann jedoch mit Sicherheit sagen, dass nicht alle von ihnen von Javascript-abhängigen Websites begeistert sind. Wenn Sie auf Suchplattformen außerhalb von Google abzielen, geraten Sie in eine ziemliche Zwickmühle. A Moz-Experiment 2017 ergab, dass nur Google und überraschenderweise auch Ask in der Lage waren, JavaScript-Inhalte zu crawlen, während alle anderen Suchmaschinen für JS völlig blind blieben. 

Derzeit hat außer Google keine Suchmaschine nennenswerte Ankündigungen zu Bemühungen gemacht, JS- und Single-Page-App-Websites besser zu verstehen. Aber einige offizielle Empfehlungen do existieren. Zum Beispiel, Bing macht die gleichen Vorschläge wie Google, das serverseitige Pre-Rendering fördert – eine Technologie, die es Bingbot (und anderen Crawlern) ermöglicht, auf statisches HTML als vollständigste und verständlichste Version der Website zuzugreifen.

Crawling-Probleme

HTML, das von Suchmaschinen leicht gecrawlt werden kann, enthält nicht viele Informationen zu einer SPA. Alles, was es enthält, ist eine externe JavaScript-Datei und die hilfreichen src attribute. The browser runs the script from this file, and then the content is dynamically loaded, unless the crawler fails to perform the same operation. When that happens,  it sees an empty page. 

Zurück in 2014, Google kündigte dass sie zwar die Funktionalität verbesserten, um JS-Seiten besser zu verstehen, aber auch zugaben, dass es jede Menge Blocker gab, die sie daran hinderten, JS-reiche Websites zu indizieren. Während der Google I/O '18 In dieser Serie diskutierten Google-Analysten das Konzept zweier Indexierungswellen für JavaScript-basierte Websites. Das bedeutet, dass der Googlebot den Inhalt erneut rendert, wenn er über die erforderlichen Ressourcen verfügt. Aufgrund der höheren Verarbeitungsleistung und des für JavaScript erforderlichen Speichers erfolgt der Zyklus des Crawlens, Renderns und Indizierens nicht augenblicklich. 

Zum Glück im Jahr 2019 Google sagte dass sie eine durchschnittliche Zeit von 5 Sekunden für den Übergang von JS-basierten Webseiten vom Crawler zum Renderer anstrebten. Gerade als sich Webmaster an den zweistufigen Indexierungsansatz von Google gewöhnten sagte Martin Splitt im Jahr 2020 dass die Situation „komplizierter“ sei und dass das bisherige Konzept nicht mehr zutreffe.

Google hat seinen Googlebot weiterhin mit den neuesten Webtechnologien aktualisiert und so seine Fähigkeit zum Crawlen und Indexieren von Websites verbessert. Als Teil dieser Bemühungen hat Google das Konzept eines eingeführt immergrüner Googlebot, das auf der neuesten Chromium-Rendering-Engine (derzeit Version 114) läuft. 

Mit dem Evergreen-Status des Googlebot erhält er Zugriff auf zahlreiche neue Funktionen, die modernen Browsern zur Verfügung stehen. Dadurch kann Googlebot den Inhalt und die Struktur moderner Websites, einschließlich Single-Page-Anwendungen, genauer wiedergeben und verstehen. Dies führt zu Website-Inhalten, die sein können gecrawlt und indiziert besser. 

Hier ist vor allem zu verstehen, dass es zu einer Verzögerung bei der Verarbeitung von JavaScript auf Webseiten durch Google kommt und dass alle auf der Clientseite geladenen JS-Inhalte möglicherweise nicht als vollständig angesehen werden, geschweige denn ordnungsgemäß indiziert sind. Suchmaschinen entdecken die Seite möglicherweise, können jedoch nicht feststellen, ob die Kopie auf dieser Seite von hoher Qualität ist oder der Suchabsicht entspricht.

Probleme mit Fehler 404

Mit einem SPA verlieren Sie auch die traditionelle Logik dahinter 404-Fehlerseite und viele andere Nicht-200-Serverstatuscodes. Aufgrund der Natur von SPAs, bei denen alles vom Browser gerendert wird, neigt der Webserver dazu, eine zurückzugeben 200 HTTP-Statuscode auf jeden Wunsch. Dadurch haben Suchmaschinen Schwierigkeiten, Seiten zu unterscheiden, die nicht für die Indexierung geeignet sind. 

URL und Routing

Obwohl SPAs ein optimiertes Benutzererlebnis bieten, kann es aufgrund ihrer verwirrenden URL-Struktur und Weiterleitung schwierig sein, eine gute SEO-Strategie für sie zu entwickeln. Im Gegensatz zu herkömmlichen Websites, die für jede Seite unterschiedliche URLs haben, verfügen SPAs normalerweise nur über eine URL für die gesamte Anwendung und verlassen sich auf JavaScript, um den Inhalt der Seite dynamisch zu aktualisieren.

Entwickler müssen die URLs sorgfältig verwalten, sie intuitiv und beschreibend gestalten und sicherstellen, dass sie den auf der Seite angezeigten Inhalt genau wiedergeben.

Um diese Herausforderungen zu bewältigen, können Sie serverseitiges Rendering und Pre-Rendering verwenden. Dadurch werden statische Versionen des SPA erstellt. Eine andere Möglichkeit besteht darin, das zu verwenden Verlaufs-API or pushState()-Methode. Mit dieser Methode können Entwickler Ressourcen asynchron abrufen und URLs aktualisieren, ohne Fragment-IDs zu verwenden. Durch die Kombination mit der History-API können Sie URLs erstellen, die den auf der Seite angezeigten Inhalt genau wiedergeben.

Tracking-Probleme

Ein weiteres Problem, das bei SPA-SEO auftritt, hängt mit dem Google Analytics-Tracking zusammen. Bei herkömmlichen Websites wird der Analysecode jedes Mal ausgeführt, wenn ein Benutzer eine Seite lädt oder neu lädt, wobei jeder Aufruf genau gezählt wird. Wenn Benutzer jedoch durch verschiedene Seiten einer Einzelseitenanwendung navigieren, wird der Code nur einmal ausgeführt und löst keine einzelnen Seitenaufrufe aus. 

Die Art des dynamischen Ladens von Inhalten verhindert, dass GA für jeden Seitenaufruf eine Serverantwort erhält. Aus diesem Grund bieten Standardberichte in GA4 in diesem Szenario nicht die notwendigen Analysen. Dennoch können Sie diese Einschränkung überwinden, indem Sie die erweiterte Messung von GA4 nutzen und Google Tag Manager entsprechend konfigurieren. 

Paginierung kann auch eine Herausforderung für SPA-SEO darstellen, da Suchmaschinen möglicherweise Schwierigkeiten beim Crawlen und Indexieren dynamisch geladener paginierter Inhalte haben. Glücklicherweise gibt es einige Methoden, mit denen Sie die Benutzeraktivität auf einer einseitigen Anwendungswebsite verfolgen können 

Wir werden diese Methoden später behandeln. Bedenken Sie vorerst, dass sie zusätzlichen Aufwand erfordern.

Wie man SPA-SEO durchführt

Um sicherzustellen, dass Ihr SPA sowohl für Suchmaschinen als auch für Benutzer optimiert ist, müssen Sie einen strategischen Ansatz verfolgen auf Seite Optimierung. Hier ist Ihr Komplettpaket On-Page-SEO-Leitfadendeckt die überzeugendsten Strategien zur On-Site-Optimierung vollständig ab.

Erwägen Sie auch die Verwendung von Tools, die Ihnen bei diesem Prozess helfen können, wie z. B. SE Rankings On-Page-SEO-Checker-Tool. Mit diesem Tool können Sie den Inhalt Ihrer Seite für Ihre Zielschlüsselwörter, Ihren Seitentitel und Ihre Beschreibung sowie andere Elemente optimieren.

Schauen wir uns nun die Best Practices von SEO für SPA genauer an.

Serverseitiges Rendern

Beim serverseitigen Rendering (SSR) wird eine Website auf dem Server gerendert und an den Browser gesendet. Diese Technik ermöglicht es Such-Bots, den gesamten Website-Inhalt basierend auf JavaScript-basierten Elementen zu crawlen. Dies ist zwar lebensrettend in Bezug auf Crawling und Indizierung, kann jedoch die Auslastung verlangsamen. Ein bemerkenswerter Aspekt von SSR besteht darin, dass es vom natürlichen Ansatz der SPAs abweicht. SPAs basieren hauptsächlich auf clientseitigem Rendering, was zu ihrer schnellen und interaktiven Natur beiträgt und ein nahtloses Benutzererlebnis bietet. Es vereinfacht auch den Bereitstellungsprozess.

Isomorphe JS

Eine mögliche Rendering-Lösung für eine Single-Page-Anwendung ist isomorphes oder „universelles“ JavaScript. Isomorphes JS spielt eine wichtige Rolle bei der Seitengenerierung auf der Serverseite und macht einen Such-Crawler zum Ausführen und Rendern von JS-Dateien überflüssig. 

Die „Magie“ isomorpher JavaScript-Anwendungen liegt in ihrer Fähigkeit, sowohl auf der Server- als auch auf der Clientseite ausgeführt zu werden. Es funktioniert, indem Benutzer mit der Website interagieren können, als ob deren Inhalt vom Browser gerendert würde, obwohl der Benutzer tatsächlich die auf der Serverseite generierte HTML-Datei verwendet. Für jedes gängige SPA-Framework gibt es Frameworks, die die isomorphe App-Entwicklung ermöglichen. Lasst uns verwenden Next.js und Gatsby für React als Beispiele hierfür. Ersteres generiert HTML für jede Anfrage, während letzteres eine statische Website generiert und HTML in der Cloud speichert. Ähnlich, Nuxt.js for Vue rendert JS auf dem Server in HTML und sendet die Daten an den Browser.

Vorrendern

Eine weitere Lösung für Einzelseitenanwendungen ist das Pre-Rendering. Dazu müssen alle HTML-Elemente geladen und im Server-Cache gespeichert werden, die dann an Suchcrawler weitergegeben werden können. Mehrere Dienste wie Prerender und BromBone fangen Anfragen an eine Website ab und zeigen Suchbots und echten Benutzern unterschiedliche Seitenversionen von Seiten an. Der zwischengespeicherte HTML-Code wird den Such-Bots angezeigt, während der „normale“ JS-reiche Inhalt echten Benutzern angezeigt wird. Websites mit weniger als 250 Seiten können verwendet werden Vorrendern kostenlos, während größere Anbieter eine monatliche Gebühr ab 200 US-Dollar zahlen müssen. Es ist eine unkomplizierte Lösung: Sie laden die Sitemap-Datei hoch und es erledigt den Rest. BromBone erfordert nicht einmal einen manuellen Sitemap-Upload und kostet 129 $ pro Monat. 

Es gibt andere, zeitaufwändigere Methoden, um Crawlern statisches HTML bereitzustellen. Ein Beispiel ist die Verwendung von Headless Chrome und dem Puppenspieler Bibliothek, die Routen zu Seiten in den hierarchischen Baum von HTML-Dateien konvertiert. Beachten Sie jedoch, dass Sie den Bootstrap-Code entfernen und Ihre Serverkonfigurationsdatei bearbeiten müssen, um den für Such-Bots bestimmten statischen HTML-Code zu finden.

Progressive Verbesserung mit Merkmalserkennung

Die Verwendung der Feature-Erkennungsmethode ist eine der stärksten Empfehlungen von Google für SPAs. Bei dieser Technik geht es darum, das Erlebnis mit verschiedenen Coderessourcen schrittweise zu verbessern. Dabei wird eine einfache HTML-Seite als Grundlage verwendet, die sowohl für Crawler als auch für Benutzer zugänglich ist. Oben auf dieser Seite finden Sie zusätzliche Funktionen wie z CSS und JS werden je nach Browserunterstützung hinzugefügt und aktiviert oder deaktiviert. 

Um die Feature-Erkennung zu implementieren, müssen Sie separate Codeabschnitte schreiben, um zu prüfen, ob jede der erforderlichen Feature-APIs mit jedem Browser kompatibel ist. Glücklicherweise gibt es spezielle Bibliotheken wie Modernizr Das kann Ihnen helfen, Zeit zu sparen und diesen Prozess zu vereinfachen.

Ansichten als URLs, um sie crawlbar zu machen

Wenn Benutzer durch ein SPA scrollen, passieren sie separate Website-Abschnitte. Technisch gesehen enthält ein SPA nur eine Seite (eine einzelne index.html-Datei), aber Besucher haben das Gefühl, mehrere Seiten zu durchsuchen. Wenn Benutzer durch verschiedene Teile einer einseitigen Anwendungswebsite navigieren, ändert sich die URL nur in ihrem Hash-Teil (z. B. http://website.com/#/about, http://website.com/#/contact). . Die JS-Datei weist Browser an, bestimmte Inhalte basierend auf Fragment-IDs (Hash-Änderungen) zu laden. 

Damit Suchmaschinen unterschiedliche Abschnitte einer Website als unterschiedliche Seiten wahrnehmen können, müssen Sie mithilfe von unterschiedliche URLs verwenden Verlaufs-API. Dies ist eine in HTML5 standardisierte Methode zur Manipulation des Browserverlaufs. Google Codelabs schlägt vor, diese API anstelle von Hash-basiertem Routing zu verwenden, um Suchmaschinen dabei zu helfen, verschiedene durch Hash-Änderungen ausgelöste Inhaltsfragmente als separate Seiten zu erkennen und zu behandeln. Mit der History-API können Sie Navigationslinks ändern und Pfade anstelle von Hashes verwenden. 

Google-Analyst Martin Splitt gibt den gleichen Rat– um Ansichten mithilfe der Verlaufs-API als URLs zu behandeln. Er schlägt außerdem vor, Link-Markup mit href-Attributen hinzuzufügen und für jede Ansicht eindeutige Titel und Beschreibungs-Tags zu erstellen (mit „etwas mehr JavaScript“).

Die wichtigste Regel besteht also darin, Links crawlbar zu machen. Stellen Sie sicher, dass Ihre Links folgen Google-Standards für SPA SEO und dass sie wie folgt aussehen:

Google versucht möglicherweise, anders formatierte Links zu analysieren, es gibt jedoch keine Garantie dafür, dass dies gelingt oder gelingt. Vermeiden Sie daher Links, die wie folgt erscheinen:

Sie möchten zunächst Links mithilfe des HTML-Elements hinzufügen, das Google als klassisches Linkformat versteht. Stellen Sie als Nächstes sicher, dass es sich bei der enthaltenen URL um eine gültige und funktionierende Webadresse handelt und dass sie den Regeln eines URI-Standards (Uniform Resource Identifier) ​​entspricht. Andernfalls können Crawler den Inhalt der Website nicht richtig indizieren und verstehen.

Ansichten für Fehlerseiten

Bei einseitigen Websites hat der Server nichts mit der Fehlerbehandlung zu tun und gibt immer den Statuscode 200 zurück, der (in diesem Fall fälschlicherweise) anzeigt, dass alles in Ordnung ist. Da Benutzer jedoch manchmal die falsche URL verwenden, um auf eine SPA zuzugreifen, sollte es eine Möglichkeit geben, mit Fehlerantworten umzugehen. Google empfiehlt, für jeden Fehlercode (404, 500 usw.) separate Ansichten zu erstellen und die JS-Datei so zu optimieren, dass Browser auf die jeweilige Ansicht weitergeleitet werden.

Titel und Beschreibungen für Ansichten

Titel und Metabeschreibungen sind wesentliche Elemente für On-Page-SEO. Ein gut gestalteter Metatitel und eine gut gestaltete Beschreibung können sowohl die Sichtbarkeit der Website in den SERPs verbessern als auch ihre Klickrate erhöhen.

Im Fall von SPA SEO kann die Verwaltung dieser Meta-Tags eine Herausforderung sein, da es nur eines gibt HTML-Datei und URL für die gesamte Website. Gleichzeitig kommt es am häufigsten zu doppelten Titeln und Beschreibungen häufige SEO-Probleme.

Wie kann man dieses Problem beheben?

Zu einstellen oder ändern die Meta-Beschreibung und Element in einem SPA können Entwickler JavaScript verwenden. 

Verwendung von Robots-Meta-Tags

Roboter-Meta-Tags Bereitstellung von Anweisungen für Suchmaschinen zum Crawlen und Indexieren der Seiten einer Website. Bei korrekter Implementierung können sie sicherstellen, dass Suchmaschinen die wichtigsten Teile der Website crawlen und indizieren und gleichzeitig doppelte Inhalte oder eine falsche Seitenindizierung vermeiden.

Beispielsweise kann die Verwendung einer „nofollow“-Anweisung verhindern, dass Suchmaschinen Links innerhalb einer bestimmten Ansicht folgen, während eine „noindex“-Anweisung im Robots-Meta-Tag bestimmte Ansichten oder Abschnitte der SPA von der Indexierung ausschließen kann.

Sie können auch JavaScript verwenden, um ein Robots-Meta-Tag hinzuzufügen. Wenn eine Seite jedoch ein Noindex-Tag im Robots-Meta-Tag enthält, rendert oder führt Google auf dieser Seite kein JavaScript aus. In diesem Fall sind Ihre Versuche, das Noindex-Tag mithilfe von JavaScript zu ändern oder zu entfernen, wirkungslos, da Google diesen Code niemals sehen wird.

Um Probleme mit Robots-Meta-Tags in Ihrer SPA zu überprüfen, führen Sie eine Einzelseiten-App aus Prüfung mit SE Ranking. Das Audit-Tool analysiert Ihre Website und erkennt alle technischen Probleme, die verhindern, dass Ihre Website die Spitze der SERP erreicht.

Vermeiden Sie Soft-404-Fehler

Ein Soft-404-Fehler tritt auf, wenn eine Website für eine Seite, die nicht existiert, den Statuscode 200 (OK) anstelle des entsprechenden 404 (Nicht gefunden) zurückgibt. Der Server teilt Suchmaschinen fälschlicherweise mit, dass die Seite existiert. 

Soft-404-Fehler können für SPA-Websites aufgrund der Art und Weise, wie sie aufgebaut sind und der von ihnen verwendeten Technologie, besonders problematisch sein. Da SPAs stark auf JavaScript angewiesen sind, um Inhalte dynamisch zu laden, kann der Server möglicherweise nicht immer genau erkennen, ob eine angeforderte Seite existiert oder nicht. Aufgrund des clientseitigen Routings, das typischerweise in clientseitig gerenderten SPAs verwendet wird, ist es oft unmöglich, aussagekräftige HTTP-Statuscodes zu verwenden.

Sie können weiche 404-Fehler vermeiden, indem Sie sich bewerben eine der folgenden Techniken:

• Verwenden Sie eine JavaScript-Weiterleitung zu einer URL, die einen 404-HTTP-Statuscode vom Server auslöst.
• Fügen Sie über JavaScript ein Noindex-Tag zu Fehlerseiten hinzu. 

Faul geladener Inhalt

Unter Lazy Loading versteht man die Praxis, Inhalte wie Bilder oder Videos nur dann zu laden, wenn sie benötigt werden, typischerweise wenn ein Benutzer auf der Seite nach unten scrollt. Diese Technik kann Verbesserungen bringen Seitengeschwindigkeit und Erfahrung, insbesondere für SPAs, in denen große Mengen an Inhalten auf einmal geladen werden können. Bei falscher Anwendung können Sie jedoch unbeabsichtigt Inhalte vor Google verbergen.

Um sicherzustellen, dass Google den gesamten Inhalt Ihrer Seite indexiert und sieht, müssen unbedingt Vorkehrungen getroffen werden. Stellen Sie sicher, dass bei jeder Anzeige im Ansichtsfenster alle relevanten Inhalte geladen werden. Sie können dies tun, indem Sie:

• Anwendung natives Lazy-Loading für Bilder und Iframes, implementiert mit dem „loading“-Attribut.
• Die richtigen IntersectionObserver-API Dadurch können Entwickler sehen, wann ein Element in das Ansichtsfenster eintritt oder es verlässt, und a Polyfüllung um die Browserkompatibilität sicherzustellen.
• Rückgriff auf eine JavaScript-Bibliothek, die eine Reihe von Tools und Funktionen bereitstellt, die es einfach machen, Inhalte nur dann zu laden, wenn sie in das Ansichtsfenster gelangen.

Welchen Ansatz Sie auch wählen, stellen Sie sicher, dass er richtig funktioniert. Benutze einen Puppenspieler-Skript um lokale Tests durchzuführen und das URL-Inspektionstool in der Google Search Console zu verwenden, um zu sehen, ob alle Bilder geladen wurden.

Social Shares und strukturierte Daten

Die Optimierung des Social Sharing wird von Websites oft übersehen. Egal wie unbedeutend es auch erscheinen mag, die Implementierung von Twitter Cards und Facebooks Open Graph ermöglicht eine umfangreiche Weitergabe über beliebte Social-Media-Kanäle, was sich positiv auf die Sichtbarkeit Ihrer Website in der Suche auswirkt. Wenn Sie diese Protokolle nicht verwenden, löst das Teilen Ihres Links die Vorschau eines zufälligen und manchmal irrelevanten visuellen Objekts aus.

Die richtigen strukturierte Daten ist auch äußerst nützlich, um verschiedene Arten von Website-Inhalten für Crawler lesbar zu machen. Schema.org bietet Optionen zum Beschriften von Datentypen wie Videos, Rezepten, Produkten usw.

Sie können JavaScript auch verwenden, um die erforderlichen strukturierten Daten für Ihr SPA in Form von JSON-LD zu generieren und in die Seite einzufügen. JSON-LD ist ein leichtes Datenformat, das einfach zu generieren und zu analysieren ist. 

Sie können eine durchführen Reichhaltiger Ergebnistest auf Google, um alle aktuell zugewiesenen Datentypen zu entdecken und umfangreiche Suchergebnisse für Ihre Webseiten zu ermöglichen.

Testen eines SPA für SEO

Es gibt mehrere Möglichkeiten, die SEO Ihrer SPA-Website zu testen. Sie können Tools wie die Google Search Console oder mobilfreundliche Tests verwenden. Sie können auch Ihren Google-Cache überprüfen oder Ihre Inhalte in den Suchergebnissen überprüfen. Wir haben unten beschrieben, wie Sie die einzelnen Funktionen verwenden.

URL-Überprüfung in der Google Search Console

Auf die wesentlichen Crawling- und Indexierungsinformationen können Sie im Abschnitt „URL-Inspektion“ von zugreifen Google Search Console. Es gibt keine vollständige Vorschau davon, wie Google Ihre Seite sieht, aber es liefert Ihnen grundlegende Informationen, darunter:

• Ob die Suchmaschine Ihre Website crawlen und indizieren kann 
• Das gerenderte HTML 
• Seitenressourcen, die von Suchmaschinen nicht geladen und verarbeitet werden können

Details zu Seitenindizierung, mobiler Benutzerfreundlichkeit, HTTPS und Logos erfahren Sie, indem Sie die Berichte öffnen.

Google Mobile-Friendly Test

Google Handy-freundliche-Test zeigt fast die gleichen Informationen wie GSC. Es hilft auch zu überprüfen, ob die gerenderte Seite auf mobilen Bildschirmen lesbar ist.

Lesen Sie unseren Leitfaden Mobile SEO um Profi-Tipps zu erhalten, wie Sie Ihre Website mobilfreundlich gestalten können.

sogar für Kopfloses Chrom ist ein hervorragendes Tool zum Testen Ihres SPA und zum Beobachten, wie JS ausgeführt wird. Im Gegensatz zu herkömmlichen Browsern verfügt ein Headless-Browser nicht über eine vollständige Benutzeroberfläche, sondern bietet die gleiche Umgebung, die echte Benutzer erleben würden. 

Verwenden Sie schließlich Tools wie BrowserStack um Ihr SPA auf verschiedenen Browsern zu testen.

Überprüfen Sie Ihren Google-Cache

Eine weitere grundlegende Technik zum Testen Ihrer SPA-Website auf SEO besteht darin, den Google-Cache der Seiten Ihrer Website zu überprüfen. Der Google-Cache ist ein Schnappschuss einer Webseite, der vom Google-Crawler zu einem bestimmten Zeitpunkt erstellt wurde.

So öffnen Sie den Cache:

• Suchen Sie bei Google nach der Seite. 
• Klicken Sie auf das Symbol mit den drei Punkten neben dem Suchergebnis.
• Wählen Sie die Option „Cache“.

Alternativ können Sie die Suchoperator „cache:“ und fügen Sie Ihre URL nach einem Doppelpunkt (ohne Leerzeichen) ein, oder Sie können es verwenden Google Cache Checker, unser kostenloses und einfaches Tool zum Überprüfen Ihrer zwischengespeicherten Version.

Achtung! Die zwischengespeicherte Version Ihrer Seite ist nicht immer die aktuellste. Google aktualisiert seinen Cache regelmäßig, es kann jedoch eine Verzögerung zwischen der Aktualisierung einer Seite und dem Erscheinen der neuen Version im Cache geben. Wenn die zwischengespeicherte Version einer Seite von Google veraltet ist, spiegelt sie möglicherweise nicht genau den aktuellen Inhalt und die aktuelle Struktur der Seite wider. Aus diesem Grund ist es keine gute Idee, sich beim SEO-Testen einzelner Seitenanwendungen oder sogar zu Debugging-Zwecken ausschließlich auf den Google-Cache zu verlassen.

Überprüfen Sie den Inhalt im SERP

Es gibt mehrere Möglichkeiten, zu überprüfen, wie Ihr SPA in SERPs angezeigt wird: 

• Sie können direkte Zitate Ihres Inhalts im SERP überprüfen, um zu sehen, ob die Seite, die diesen Text enthält, indiziert ist.
• Sie können den Befehl site: verwenden, um Ihre URL im SERP zu überprüfen. 

Schließlich können Sie beides kombinieren. Eingeben site:Domainname „Inhaltszitat“, wie im Screenshot unten, und wenn der Inhalt gecrawlt und indiziert ist, wird er in den Suchergebnissen angezeigt.

An grundlegender Suchmaschinenoptimierung führt kein Weg vorbei

Abgesehen von der Besonderheit einer Einzelseitenanwendung gelten die meisten allgemeinen Optimierungshinweise für diese Art von Website. Einige grundlegende SEO-Strategien umfassen die Optimierung für:

• Security. Wenn Sie es noch nicht getan haben, schützen Sie Ihre Website mit HTTPS. Andernfalls könnten Suchmaschinen Ihre Website ignorieren und ihre Benutzerdaten gefährden, sofern sie welche verwenden. Niemals überqueren Website-Sicherheit von Ihrer To-Do-Liste, da eine regelmäßige Überwachung erforderlich ist. Überprüfe dein SSL/TLS-Zertifikat für kritische Fehler regelmäßig, um sicherzustellen, dass Ihre Website sicher aufgerufen werden kann:

• Inhaltsoptimierung. Wir haben über spezifische Maßnahmen zur Optimierung von Inhalten in SPA gesprochen, wie zum Beispiel das Schreiben eindeutiger Titel-Tags und Beschreibungs-Meta-Tags für jede Ansicht, ähnlich wie Sie es für jede Seite einer mehrseitigen Website tun würden. Bevor Sie die oben genannten Maßnahmen ergreifen, müssen Sie jedoch über optimierte Inhalte verfügen. Ihre Inhalte sollten auf die richtigen Benutzerabsichten zugeschnitten, gut organisiert, optisch ansprechend und reich an hilfreichen Informationen sein. Wenn Sie keine Keyword-Liste für die Website zusammengestellt haben, wird es schwierig, den Inhalten bereitzustellen, die Ihre Besucher benötigen. Werfen Sie einen Blick auf unsere Leitfaden zur Keyword-Recherche für neue Erkenntnisse.
• Linkaufbau. Backlinks spielen eine wichtige Rolle dabei, Google zu signalisieren, wie viel Vertrauen andere Ressourcen in Ihre Website haben. Aus diesem Grund ist der Aufbau eines Backlink-Profils ein wichtiger Bestandteil der SEO Ihrer Website. Kein Backlink gleicht dem anderen und jeder Link, der auf Ihre Website verweist, hat einen anderen Wert. Während einige Backlinks Ihr Ranking erheblich verbessern können, können Spam-Links Ihrer Suchpräsenz schaden. Erwägen Sie, mehr darüber zu erfahren Backlink-Qualität und befolgen Sie Best Practices, um Ihr Linkprofil zu stärken. 
• Konkurrenzüberwachung. Sie haben höchstwahrscheinlich bereits in den frühen Phasen der Entwicklung Ihrer Website Recherchen zu Ihren Mitbewerbern durchgeführt. Wie bei allen SEO- und Marketingaufgaben ist es jedoch wichtig, Ihre Nische kontinuierlich zu überwachen. Dank datenreicher Tools können Sie dies ganz einfach tun Überwachen Sie die Strategien Ihrer Konkurrenten in der organischen und bezahlten Suche. Auf diese Weise können Sie die Marktlandschaft bewerten, Schwankungen bei wichtigen Wettbewerbern erkennen und sich von erfolgreichen Keywords oder Kampagnen inspirieren lassen, die bereits für ähnliche Websites funktionieren.

Verfolgen von Einzelseitenanwendungen

Verfolgen Sie SPA mit GA4

Das Verfolgen des Benutzerverhaltens auf SPA-Websites kann eine Herausforderung sein, aber GA4 verfügt über die Tools, um damit umzugehen. Durch die Nutzung GA4 für SEO, können Sie besser verstehen, wie Benutzer mit Ihrer Website interagieren, Bereiche mit Verbesserungspotenzial identifizieren und datengesteuerte Entscheidungen treffen, um die Benutzererfahrung zu verbessern und letztendlich den Geschäftserfolg voranzutreiben.

Wenn Sie Google Analytics noch nicht installiert haben, lesen Sie die Anleitung zur GA4-Einrichtung um herauszufinden, wie es schnell und richtig geht. 

Wenn Sie bereit sind, fortzufahren, befolgen Sie die nächsten Schritte:

• Gehen Sie zu Ihrem GA4-Konto und dann im Admin-Bereich auf „Datenströme“. Klicken Sie auf Ihren Web-Datenstrom.

• Stellen Sie sicher, dass der Schalter „Erweiterte Messung“ aktiviert ist. Klicken Sie auf das Zahnradsymbol.

• Öffnen Sie die erweiterten Einstellungen im Abschnitt „Seitenaufrufe“ und aktivieren Sie die Einstellung „Seitenänderungen basierend auf Browserverlaufsereignissen“. Denken Sie daran, die Änderungen zu speichern. Es wird außerdem empfohlen, alle Standard-Tracks zu deaktivieren, die nichts mit Seitenaufrufen zu tun haben, da sie die Genauigkeit beeinträchtigen könnten.
• Öffnen Sie Google Tag Manager und aktivieren Sie den Vorschau- und Debug-Modus.
• Navigieren Sie durch verschiedene Seiten Ihrer SPA-Website.
• Im Vorschaumodus beginnt der GTM-Container mit der Anzeige der Verlaufsänderungsereignisse. 
• Wenn Sie im Vorschaumodus auf Ihre GA4-Mess-ID neben dem GTM-Container klicken, sollten Sie beobachten, dass mehrere Page View-Ereignisse an GA4 gesendet werden. 

Wenn diese Schritte funktionieren, kann GA4 Ihre SPA-Website verfolgen. Wenn dies nicht der Fall ist, müssen Sie möglicherweise Folgendes tun zusätzliche Schritte:

• Implementierung des Auslösers für Verlaufsänderungen in GTM.
• Bitten Sie die Entwickler, einen dataLayer.push-Code zu aktivieren

Verfolgen Sie SPA mit dem Rank Tracker von SE Ranking

Ein weiteres umfassendes Tracking-Tool ist Der Rank Tracker von SE Ranking. Mit diesem Tool können Sie einzelne Seitenanwendungen auf die Schlüsselwörter überprüfen, für die sie ein Ranking erstellen möchten, und es kann sie sogar an mehreren geografischen Standorten, Geräten und Sprachen überprüfen. Dieses Tool unterstützt das Tracking in beliebten Suchmaschinen wie Google, Google Mobile, Yahoo! und Bing.

Um mit der Verfolgung zu beginnen, müssen Sie Folgendes tun ein Projekt erstellen für Ihre Website auf der SE-Ranking-Plattform, Schlagworte hinzufügen, Wählen Sie Suchmaschinen und Konkurrenten angeben.

Sobald Ihr Projekt eingerichtet ist, gehen Sie zur Registerkarte „Rankings“, die aus mehreren Berichten besteht:

• Zusammenfassung
• Detailliert
• Insgesamt:
• Historische Daten

Wir konzentrieren uns auf die standardmäßige Registerkarte „Detailliert“. Dies wird wahrscheinlich der erste Bericht sein, den Sie sehen, nachdem Sie Ihr Projekt hinzugefügt haben. Oben in diesem Abschnitt finden Sie Ihre SPAs: 

• Durchschnittliche Position
• Verkehrsprognose
• Sichtbarkeit suchen
• SERP-Funktionen
• % in den Top 10
• Stichwortliste  

Die unter diesen Diagrammen angezeigte Keyword-Tabelle bietet Informationen zu jedem Keyword, für das Ihre Website rankt. Es enthält Details wie die Ziel-URL, das Suchvolumen, SERP-Funktionen, Ranking-Dynamik usw. Sie können die Tabelle mit zusätzlichen Parametern anpassen, die im Abschnitt „Spalten“ verfügbar sind.

Mit dem Tool können Sie Ihre Schlüsselwörter basierend auf Ihren bevorzugten Parametern filtern. Sie können auch Ziel-URLs und Tags festlegen, Ranking-Daten für verschiedene Daten anzeigen und sogar Ergebnisse vergleichen.

Der Keyword Rank Tracker bietet Ihnen zwei zusätzliche Berichte:

• Daten zum Ranking Ihrer Website: Dazu gehören alle Suchmaschinen, die Sie dem Projekt hinzugefügt haben. Diese sind in einem einzigen Tab mit der Bezeichnung „Gesamt“ zu finden.
• Historische Informationen: Dazu gehören Daten zu den Veränderungen Ihrer Website-Rankings seit dem Basisdatum. Navigieren Sie zur Registerkarte „Historische Daten“, um diese Informationen zu finden. 

Weitere Informationen zum Überwachen von Website-Positionen finden Sie in unserem Leitfaden unter Rangverfolgung in verschiedenen Suchmaschinen.

Einseitige Anwendungswebsites richtig gemacht

Nachdem Sie nun alle Besonderheiten von SEO für SPA-Websites kennen, besteht der nächste Schritt darin, die Theorie in die Tat umzusetzen. Machen Sie Ihre Inhalte für Crawler leicht zugänglich und beobachten Sie, wie Ihre Website in den Augen der Suchmaschinen glänzt. Während den Besuchern ein dynamisches Laden von Inhalten, eine hohe Geschwindigkeit und eine nahtlose Navigation geboten werden, ist es auch wichtig, daran zu denken, Suchmaschinen eine statische Version zu präsentieren. Sie sollten außerdem sicherstellen, dass Sie über eine korrekte Sitemap verfügen, eindeutige URLs anstelle von Fragment-IDs verwenden und verschiedene Inhaltstypen mit strukturierten Daten kennzeichnen. 

Der Aufstieg von Single-Page-Erlebnissen auf Basis von JavaScript kommt den Anforderungen moderner Benutzer entgegen, die sich eine unmittelbare Interaktion mit Webinhalten wünschen. Um die UX-zentrierten Vorteile von SPAs beizubehalten und gleichzeitig hohe Platzierungen in der Suche zu erreichen, wechseln Entwickler zu den Entwicklern von Airbnb Spike Brehm nennt „den harten Weg“– geschicktes Ausbalancieren der Client- und Serveraspekte der Webentwicklung.

Anastasia ist Content-Vermarkterin und Redakteurin bei SE Ranking und schreibt über SEO, Marketing und Technologie. Sie behandelt nicht nur verschiedene Themen für SE Ranking, sondern verbringt auch Zeit damit, Musik zu machen, alte Filme anzusehen und mit ihrem Hund zu spielen.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• PlatoAiStream. Web3-Datenintelligenz. Wissen verstärkt. Hier zugreifen.
• Die Zukunft prägen mit Adryenn Ashley. Hier zugreifen.
• Kaufen und verkaufen Sie Anteile an PRE-IPO-Unternehmen mit PREIPO®. Hier zugreifen.
• Quelle: https://seranking.com/blog/single-page-application-seo/