In den letzten Jahren sind Single Page Applications (SPAs) zunehmend populär geworden. Doch SPA-SEO ist eine Herausforderung. Unternehmen bevorzugen häufig Single Page Lösungen, weil das sowohl für die Nutzer als auch für die Webentwickler erhebliche Vorteile bietet. Diese Webentwicklungslösungen sind schnell und benutzerfreundlich, unterstützen ReSTful-APIs und ermöglichen eine Verteilung der Verarbeitungslast zwischen Server und Client-Computern. Außerdem ist es viel einfacher, eine Single Page Application in eine native mobile Anwendung umzuwandeln.
Die besten On-Page-SEO-Praktiken drehen sich jedoch stark um die interne Verlinkung zwischen verschiedenen Seiten, die für unterschiedliche Suchbegriffe optimiert sind. Für Single Page Applications ist daher ein anderer Ansatz erforderlich. Tatsächlich ist SEO für Single Page Applications schwieriger, als für traditionelle mehrseitige Webanwendungen. Aber nicht unmöglich. Erfahren Sie im Folgenden, wie K&C die Herausforderungen für einen unserer Kunden gemeistert hat.
Single Page App SEO 101 – Erstellung der sitemap.xml
Das Sitemap-Protokoll ist für SEO unerlässlich – unabhängig davon, ob es sich um eine Single oder Multi Page Application handelt. Es informiert Suchmaschinen darüber, welche Seiten auf unserer Website zum Crawling zur Verfügung stehen. Auf diese Weise können Google und andere Suchmaschinen verstehen, worum es in Ihrer Anwendung geht und auf welche Suchanfragen der Nutzer sie wertvolle Antworten liefert.
Eine Sitemap ist eine .xml-Datei, die URLs für eine Website auflistet. Dort können Sie Informationen zu jeder Seite hinterlegen: Zeitpunkt der letzten Aktualisierung, Häufigkeit der Aktualisierung und Bedeutung der Seite im Verhältnis zu anderen URLs auf der Website. Suchmaschinen-Crawler wie Googlebot lesen diese Datei und können – auf diese Weise informiert – den Prozess des Crawlens Ihrer Website effizienter gestalten.
Mit Crawling-Tools wie Screaming Frog können Sie auf einfach Weise eine perfekte Sitemap erstellen. Auch das kürzlich veröffentlichte ChatGPT-3 AI-Tool kann Ihnen helfen, schnell und einfach eine Sitemap zu erstellen – ohne dass Sie Programmierkenntnisse oder vorherige Erfahrung mit dem Prozess benötigen.
Single Page Application SEO Sitemap.xml Beispiel:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="https://www.w3.org/1999/xhtml"> <url> <loc>https://kruschecompany.com/</loc> <xhtml:link rel="alternate" hreflang="de" href="https://kruschecompany.com/de/" /> <xhtml:link rel="alternate" hreflang="en" href="https://kruschecompany.com/" /> <lastmod>2016-05-17</lastmod> <changefreq>yearly</changefreq> <priority>1.0</priority> </url> </urlset>
Die Herausforderung der JavaScript-Zugänglichkeit für Single Page App SEO
Single Page Applications werden häufig, wenn nicht sogar meistens, mit JavaScript erstellt. Suchmaschinen-Crawler wie Google können jedoch JavaScript nicht so gut lesen, weil es clientseitiges Rendering verwendet. Dadurch ist es für die Crawler schwierig, auf den in SPAs veröffentlichten Textinhalt zuzugreifen und ihn zu „lesen“ – es sei denn, die technische Konfiguration hilft ihnen dabei. Wie kann man also einem Suchmaschinen-Crawler helfen, in einer Single Page Application veröffentlichte Inhalte zu verstehen, ohne ein hässliches „#!“ in der URL zu verwenden?
Um einen Suchmaschinen-Crawler darüber zu informieren, dass es sich bei Ihrer Applikation um eine einzelne Seite handelt, müssen Sie den Tag <meta name=“fragment“ content=“!“> am Anfang der Website hinzufügen. Der beste Weg, Seiten anzugeben, die indiziert werden sollen, ist jedoch die Verwendung einer Sitemap.XML-Datei. Es ist, als würde man der Suchmaschine sagen: „Ich würde es schätzen, wenn du dich auf diese bestimmten URLs konzentrieren könntest“. Und Suchmaschinen-Crawler wiederum schätzen höfliche Webentwickler!
Die Sitemap ermöglicht es Ihnen, kanonische URLs (nicht-kanonische sind nicht anwendbar) der Website mit Seitenpriorität, Datum der letzten Änderung, Änderungshäufigkeit und – besonders wichtig für mehrsprachige Websites – mit zurückkehrenden <hreflang>-Links anzugeben.
Auf jeden Fall erfordern Sitemaps eine gewisse Werbung. Sie sollten dafür sorgen, dass ein Such-Crawler als erstes die Datei robot.TXT ansteuert. Fügen Sie die folgende Zeile hinzu: „Sitemap: https://www.example.com/sitemap.xml“ weist auf den Speicherort Ihrer Sitemap hin und stellt sicher, dass sie bei den ersten und allen folgenden Besuchen des Crawlers die erste Adresse ist.
Der zweite Schritt zu einer guten Sitemap-Promotion besteht darin, sie an die Webmaster-Tools-Seiten zu übermitteln. Dies ist ein guter Weg, um einen Crawl zu veranlassen, der dann in der Regel in den nächsten Stunden stattfinden wird.
Clientseitiges Rendering
Das clientseitige Rendering von JavaScript bringt auch SEO-bezogene Erwägungen mit sich. Martin Splitt von Google erklärt:
„Wenn Sie ein JavaScript-Framework verwenden, ist die Voreinstellung clientseitiges Rendering. Das bedeutet, dass Sie den reinen HTML-Code senden und dann ein Stück JavaScript, das den Inhalt im Browser abruft und zusammensetzt.“
Botify schlägt vor, sich das clientseitige Rendering wie eine Möbelbestellung bei IKEA vorzustellen: Die Möbel werden in Einzelteilen geliefert, die dann zusammengebaut werden müssen.
Quelle: Botify
Ein Nachteil des clientseitigen Renderings ist die Art und Weise, wie Suchmaschinen-Bots wie Googlebot auf Inhalte zugreifen. Googlebot hat eine so genannte zweite Indizierungswelle, d. h. der HTML-Code einer Seite wird zuerst gecrawlt und indiziert. Die Bots kommen dann zurück, um das JavaScript zu rendern, wenn Ressourcen verfügbar sind. Dieser zweistufige Ansatz bedeutet, dass JavaScript-Inhalte manchmal übersehen werden können und nicht in den Google-Index aufgenommen werden.
Erstellen von Meta-Tags für Social Media
Die Integration einer Web-App in die sozialen Medien ist im modernen Online-Bereich unerlässlich. Dies gilt sowohl für die Suchmaschinenoptimierung von einseitigen als auch von mehrseitigen Anwendungen. Für erstere ist es jedoch besonders wichtig. Protokolle wie Open Graph optimieren und strukturieren die Informationen, die wir in sozialen Netzwerken teilen wollen.
Ursprünglich für Facebook entwickelt, wird das Open-Graph-Protokoll heute verwendet, um die Daten zu kontrollieren, die ein Nutzer über den URL-Link zu den Inhalten von Websites Dritter teilt.
Um OG (Open Graph) in Ihre Website zu integrieren, müssen Sie lediglich spezielle <meta>-Tags in den <head>-Abschnitt der HTML-Seite einfügen, die Sie zum Teilen bereitstellen möchten.
Die OG-Meta-Tags sind dafür verantwortlich, wie Ihre Webseite aussieht, wenn sie in sozialen Medien geteilt wird. Wenn der Nutzer einen URL-Link zum ersten Mal teilt, analysiert der Crawler von Facebook die Seite, sammelt Informationen über sie und erstellt ein grafisches Objekt, das dann auf Facebook-Seiten angezeigt wird.
Es gibt mehrere erforderliche Tags für OG:
– og: title – der Name (z. B. des Artikels);
– og: description – eine kurze Beschreibung des Inhalts Ihrer Daten;
– og: type – der Datentyp des Seiteninhalts (der Standard ist „Website“);
– og: image – URL-Adresse des Bildes, das die Seite darstellen soll;
– og: url – kanonische URL der Seite.
Wenn die Seite keine OG <meta>-Tags enthält, sucht der Facebook-Crawler automatisch nach den erforderlichen Inhalten und entscheidet selbständig, wie die auf Ihrer Seite gefundenen Informationen am besten übermittelt werden. Dies entspricht möglicherweise nicht Ihren eigenen Präferenzen.
Die Einrichtung von Open Graph-Meta-Tags auf Ihrer Seite ist der beste Weg, um die Website gut in soziale Netzwerke zu integrieren. Dies ist einfach zu bewerkstelligen, wenn Sie bereits Erfahrung mit Meta-Tags haben.
<head> <meat property="og:title" content="Some Title"/> <meat property="og:description" content="Short description"/> <meat property="og:type" content="article"/> <meat property="og:image" content="https://example.com/progressive/image.jpg"/> <meat property="og:url" content="https://example.com/current-url"/> </head>
Kanonischen Link hinzufügen
Das Link-Element rel=canonical ist ein HTML-Element, das Webentwicklern hilft, doppelte Inhalte zu vermeiden. Die Verwendung dieses Elements verbessert SEO einer Single-Page-Application, da die Bots von Google nicht scharf auf identische oder sehr ähnliche Inhalte auf einer Website sind.
Die Idee ist einfach: Wenn Sie mehrere ähnliche Inhalte haben, die Google verwirren können – was dazu führen kann, dass keine der Seiten mit doppeltem Inhalt in den SERPs (Suchmaschinenergebnisseiten) gut sichtbar ist –, wählen Sie eine Version aus und machen sie „kanonisch“. Die Suchmaschinen konzentrieren sich dann auf den von Ihnen gewählten Inhalt und ignorieren weitestgehend die anderen doppelten oder ähnlichen Inhalte.
Die Wahl einer geeigneten kanonischen URL für jeden Satz ähnlicher URLs verbessert die Suchmaschinenoptimierung Ihrer Website. Da die Suchmaschine weiß, welche Version maßgebend ist, kann sie alle Links zu den verschiedenen Versionen als Links zu dieser einen Version zählen.
Wenn Sie das Link-Element rel=“canonical“ für Single-Page-Anwendungen verwenden möchten, müssen Sie die URLs dynamisch generieren.
Denken Sie auch daran, dass die URLs von „canonical“ und „sitemap.xml“ identisch sein müssen!
Single-Page Application SEO – Herausforderung angenommen
Man kann mit Sicherheit sagen, dass SEO für Single Page Applications eine Herausforderung darstellt und wahrscheinlich nicht die erste Wahl für einen SEO-Berater ist. Die standardmäßige Unzugänglichkeit von JavaScript für Suchmaschinen-Crawler kann jedoch wie oben beschrieben umgangen werden. Die Single-Page-Struktur schränkt die seiteninterne Verlinkung und den Content-Silo-Ansatz ein, mit dem SEO-Experten gerne arbeiten.
Aber es ist sicherlich nicht unmöglich, Ihre Single Page Application bei Google und anderen Suchmaschinen zu indizieren und für Ihre Schlüsselbegriffe gut zu ranken. Es bedeutet jedoch, dass ein gewisser Mehraufwand zu erwarten ist, wenn Sie sich aus unternehmerischen Gründen für eine Single Page Application entscheiden.
K&C – Münchner Nearshore-IT-Outsourcing-Anbieter
K&C (Krusche & Company) ist ein in München ansässiges IT-Outsourcing-Unternehmen, das Tech-Talente im Nearshore– und Midshore-Bereich rekrutiert. Wir ergänzen oder stellen Ihre Software-Entwicklung und andere IT-Ressourcen flexibel und bequem durch:
- IT-Team-Erweiterung
- Dedicated Teams
Sie können aus flexiblen Kooperationsmodellen wählen, die vom Body-Leasing bis zum vollständigen Projekt-/Liefermanagement reichen.
Wir verfügen über Niederlassungen an 4 Nearshore- und Midshore-Standorten sowie über eine Fernpräsenz an vielen weiteren Standorten.
Unser Alleinstellungsmerkmal sind IT-Outsourcing-Partnerschaften von bis zu über 20 Jahren mit einigen der bekanntesten Marken in Deutschland und Europa. Wir versprechen Ihnen, dass wir Ihre IT-Outsourcing- und Personalbedürfnisse genauso gut erfüllen werden.
Kernkompetenzen: Webentwicklung, Cloud Native Development, Mobile Development, DevOps, QA/Testing, UI/UX Design, Data Engineering, Blockchain.
