Der Marketer's Guide für serverseitiges Rendering

Programmiersprache ist kein leicht zu verstehendes Konzept, besonders wenn sich Ihre SEO-Arbeit hauptsächlich auf die nicht-technische Seite konzentriert hat. Aber hier ist die Sache mit technischem SEO: Das Wissen darüber hilft Ihnen, die Änderungen zu verstehen, die Ihre Website für ein besseres Suchmaschinenranking vornehmen muss.
Da Google im Juni Core Web Vitals ausrollte, das Teil seines Page Experience-Updates ist, wird jeder Vermarkter, der sich nicht näher mit technischer SEO befasst hat, dies jetzt tun wollen.
Und wenn Ihre Website auf JavaScript-Frameworks aufgebaut ist, müssen Sie sich mit dem serverseitigen Rendering befassen.

Was ist serverseitiges Rendern?

Beim serverseitigen Rendering wird eine Webseite abgerufen, der Code abgerufen und der Inhalt auf einem Bildschirm angezeigt – alles geschieht auf dem Server.
Im SSR:

• Der Server sendet eine wiedergabebereite Antwort an den Browser;
• Der Browser rendert die Seite, sodass sie angezeigt werden kann, und lädt dann das JavaScript herunter.
• Der Browser führt dann React aus, wenn die Seite bereit ist, angezeigt zu werden, und
• Die Webseite ist dann bereit für Interaktivität.

Die Art und Weise, wie dies alles geschieht, hat es zu einer besseren Option gegenüber anderen Arten des Renderings gemacht: clientseitiges Rendering (bei dem das JavaScript vom Browser, auch bekannt als Client, gerendert wird) und dynamisches Rendering (bei dem Benutzer vom Client-Server gerenderte Inhalte und Suchmaschinen erhalten). erhalten serverseitig gerenderten Inhalt). Sogar Google ermutigt Webentwickler, serverseitiges Rendering zu wählen.
Wieso den?

[Fallstudie] Verwaltung des Bot-Crawlings von Google

Mit mehr als 26.000 Produktreferenzen benötigte 1001Pneus ein zuverlässiges Tool, um seine SEO-Leistung zu überwachen und sicherzustellen, dass Google sein Crawl-Budget den richtigen Kategorien und Seiten zuweist. Erfahren Sie, wie Sie das Crawl-Budget für E-Commerce-Websites mit OnCrawl erfolgreich verwalten.

Lesen Sie die Fallstudie

Die Vorteile von SSR

• Es hilft beim Laden einer Webseite, wenn die Internetverbindung eines Benutzers langsam ist
• Es ermöglicht ein schnelles Laden von Seiten und trägt zu einer besseren Benutzererfahrung bei
• Es erstellt eine vollständige HTML-Seite, wodurch der zeitaufwändige Prozess des Datenabrufs vermieden wird
• Es ermöglicht das Laden von Seiten mit all ihren Elementen, selbst wenn ein Benutzer ein leistungsschwaches Gerät wie ein Smartphone der alten Generation hat
• Es trägt zur SEO-Leistung bei, da es Suchmaschinen ermöglicht, Seiten genau zu crawlen und zu indizieren; Bots können Seiten leicht crawlen, da sie JS verstehen

Insgesamt hilft Ihnen SSR, Online-Kunden besser zu bedienen, da Ihre Website-Besucher nicht darauf warten müssen, dass Seiten auf ihren Geräten angezeigt werden. Schnelle Seitenwechsel stellen außerdem sicher, dass Ihre Benutzer niemals eine leere Seite erhalten, sodass sie Ihre Website sofort verwenden können.
Da Google seine Kampagne verstärkt, um genauere Ergebnisse mit Algorithmusverbesserungen zu liefern, die auf der Benutzererfahrung basieren, ist SSR im Vergleich zum Client-Server-Rendering besser für Ihre SEO-Leistung.
Aber wie alles andere im digitalen Marketing funktioniert ein einzelner Ansatz selten für alle. In einigen Fällen kann serverseitiges Rendern ein Problem darstellen. Wie Google sagt, ist SSR „keine Wunderwaffe“.

Die Nachteile von SSR

• Es ist mit viel Arbeit verbunden, da dieselbe Anwendung zweimal ausgeführt wird: einmal auf dem Client und dann auf dem Server.
• Es könnte die Zeit bis zum ersten Byte verzögern
• Es könnte die interne Verlinkung oder die Seitenqualität beeinträchtigen, da es JS von Drittanbietern (z. B. benutzergenerierte Inhalte, Produktbewertungen usw.) oder Inhalte, die nicht in Ihrem statischen HTML enthalten sind, nicht darstellen kann; Bots können sie nicht sehen
• Nicht aktualisierte URLs können bedeuten, dass Bots keine neuen Artikel sehen können, was zu entgangenem Datenverkehr führen kann

Ein weiterer wichtiger Aspekt von SSR ist, dass es Kosten für das Unternehmen bedeutet, da das Rendern auf Ihren Servern erfolgt. Es handelt sich jedoch um Kosten, in die Sie möglicherweise investieren möchten, da diese Art der Wiedergabe zur Optimierung von Core Web Vitals beitragen könnte.

Warum ist SSR für CWV relevant?

Webentwickler und SEOs haben monatelang an der Einführung von CWV gearbeitet. Etwa 60 Prozent der befragten SEO-Agenturen waren damit beschäftigt, die CWV-Scores ihrer Kunden zu verbessern. Wenn Sie SSR verwenden, müssen Sie möglicherweise nicht viel tun, um die Erwartungen zu erfüllen.
Da SSR die Geschwindigkeit erleichtert, könnte Ihre Website bereits mit einer der Metriken gut abschneiden: dem Largest Contentful Paint (LCP).
LCP konzentriert sich auf das wahrgenommene Ladeerlebnis. Es misst die Seitenladezeit, wenn das größte Bild oder der größte Text einer Webseite im Darstellungsbereich sichtbar ist. Was Sie anstreben möchten, um eine gute Punktzahl zu erzielen, ist eine 75-prozentige Seitenlast bei <2,5 Sekunden.
Die größten Herausforderungen für ein gutes LCP sind Render-Blocking von JS und CSS; langsame Ressourcenladezeiten, langsame Serverantwort und clientseitiges Rendering.
Eine Umstellung auf SSR ist nur eine Lösung zur Verbesserung des LCP-Scores, da Ihr Problem möglicherweise nicht auf CSR beschränkt ist. Sie sollten mit Ihren Webentwicklern zusammenarbeiten, um zunächst herauszufinden, was die Verzögerung Ihres LCP verursacht.
Wenn die Seitenquelle Code zeigt, der keinen Sinn ergibt (und Ihr Entwickler wird es Ihnen sagen), dann könnte das Problem CSR sein. Wenn Ihr Entwickler feststellt, dass TTFB schlecht ist, haben Sie es möglicherweise mit einer langsamen Antwortzeit des Servers zu tun.
Die anderen CWV-Metriken sind:

• Erste Eingangsverzögerung, die sich auf Reaktionsfähigkeit konzentriert, und
• Cumulative Layout Shift, die sich auf visuelle Stabilität konzentriert.

Beide sind für SSR nicht relevant, daher sollten Sie sich in diese Metriken mehr Mühe geben, da SSR sich teilweise um das LCP kümmert.

Wie kann man feststellen, ob SSR Webseiten richtig rendert?

Der beste Weg, um festzustellen, ob SSR Ihre Seiten richtig rendert, wäre die Verwendung von Tools. Einer davon ist der Mobile Friendly Test. Es ist ein Tool, das Ihnen einen Schnappschuss davon liefert, wie Ihre Webseiten für Googlebots aussehen würden, und Ihnen eventuelle Fehler beim Rendern anzeigt.
Die Google Search Console verfügt auch über ein URL-Inspektionstool, mit dem Sie sehen können, ob die Suchmaschine Ihre Seiten rendert. Verwenden Sie es, um nach fehlenden Inhalten oder Fehlern in Bezug auf blockiertes JavaScript oder CSS zu suchen.
Sie können auch zu View Render Source gehen, einer kostenlosen Chrome-Erweiterung. Es wird Ihnen sagen, wie der Browser eine Seite von ihrem ursprünglichen HTML zu einem funktionierenden DOM rendert. Die Erweiterung veranschaulicht den Unterschied zwischen einer Roh- und einer gerenderten Version, mit Highlights, wie das JS Seiten zum Zeitpunkt des Renderns modifiziert hat.
Eine weitere Chrome-Erweiterung, die Sie ausprobieren sollten, ist SiteCrawler. Der JS-fähige Crawler crawlt Sitemaps, Links und Bilder und vergleicht reine HTML- und JS-fähige Seiten.

Die Zusammenfassung

Ein Großteil der SEO-Arbeit beinhaltet die Optimierung für Seiten, die bereits an den Client oder den Browser „geliefert“ wurden. Aber wenn Sie untersuchen, wie diese Seiten zum Kunden „kommen“ und wie Sie dies verbessern können, haben die Benutzer eine bessere Zeit auf Ihrer Website.
Bots crawlen Ihre Seiten korrekt. Ihre Seiten werden indexiert. Ihre Website hat ein besseres Suchmaschinen-Ranking.
Suchmaschinen-Updates und Änderungen im Verbraucherverhalten erfordern auch Änderungen an Ihrer Website. Mit der bevorstehenden Einführung von CWV wäre jetzt ein guter Zeitpunkt, sich mit SSR zu befassen, einem technischen Aspekt, der Ihre SEO-Bemühungen beeinflussen würde.