Wie optimiere ich SEO und Seiten-Geschwindigkeit in Styla CRM

Mit dem Styla CMS unter editor.styla.com erstellte Seiten nutzen automatisch viele Funktionen, die ihre SEO und Ladegeschwindigkeit verbessern. Dieses Dokument gibt Ihnen einen Überblick über die wichtigsten Funktionssätze.

SEO- und Pagespeed-Funktionen

Dieses Dokument gibt Ihnen einen Überblick über die wichtigsten Funktionssätze. Einige Teile liegen jedoch in der Hand des Inhaltserstellers. Beispiel: Sie sollten nur ein h1-Tag verwenden.

 

SEO-Funktionen


Alle großen Suchmaschinen wie Google, Bing und Yahoo verfügen über primäre Suchergebnisse, in denen Webseiten und andere Inhalte wie Videos oder lokale Einträge angezeigt und basierend darauf eingestuft werden, was die Suchmaschine für die Benutzer als am relevantesten erachtet. SEO kann für den Page-rank sehr vorteilhaft sein.

Für die meisten der unten aufgeführten Styla-Funktionen muss die SEO-Integration von einem Styla-Plugin bereitgestellt oder vom Kunden entwickelt werden und funktioniert ohne sie nicht. Kurz gesagt: Styla deckt das ab, was jede „normale“ Website in Bezug auf SEO leistet, aber zusätzlich richtig implementiert werden muss.

 

 

Metatitel und Beschreibung


Der Metatitel und die Beschreibung sind Elemente im Kopfbereich eines HTML-Dokuments, die eine kurze Zusammenfassung einer Webseite liefern. Suchmaschinen wie Google zeigen diese häufig in den Suchergebnissen an, was die Klickraten beeinflussen kann.

 

 Der Metatitel sollte eine Länge zwischen 50 und 60 Zeichen haben.

Die Meta-Beschreibung sollte eine Länge zwischen 50 und 160 Zeichen haben.


Styla Editor zeigt den Zähler für diese Felder in der Seitenzusammenfassung an, unmittelbar bevor Sie sie veröffentlichen.
 

Bild teilen


Das Freigabebild wird angezeigt, wenn der Inhalt auf Facebook oder Twitter geteilt wird. Zusätzlich zum Bild werden der Metatitel und die Beschreibung als Teilentitel und Beschreibung verwendet.

 1586937125901_2a129c0a-92b1-4642-87a5-692e63a09632

 Eine Übersicht über SEO-relevante Funktionen, die beim Veröffentlichen einer Seite im Styla Editor angezeigt werden

 

Das Freigabebild sollte in einer Größe von mindestens 1200 x 630 Pixel hochgeladen werden und wird automatisch auf die richtige Größe für jede Social-Media-Plattform angepasst.

 

Überschriften

Überschriften sind ein wichtiges Instrument zur Strukturierung einer Seite. Die Banner- und Textmodule bieten einen Rich-Text-Editor zum Hinzufügen von H1-, H2- und H3-Überschriften.

 

Jede Seite sollte nur eine h1-Überschrift enthalten.

 

1586939823022_6edc774a-cd24-4cef-9c34-56767ba505cc1586939843390_1c0ddf51-ae34-4b64-9bd7-a21a9d00da23

 

 

 Bild-Alt-Tags

Bilder werden von Suchmaschinen-Bots gecrawlt, diese Bots sind jedoch nicht intelligent genug, um zu wissen, was die Bilder zeigen. Hier kommen die ALT-Tags zum Einsatz. Auch sehbehinderte Benutzer, die Screenreader verwenden, benötigen die Informationen der ALT-Tags, um das Bild besser zu verstehen.

 

1586939343669_26c2b828-6856-4028-8de2-8d54a663b1a5

Styla Editor UI in which you set image ALT tags
 

Canonical Link

Ein Teil des Styla-Inhalts kann auf mehreren Domains oder URLs platziert werden, was zu Fehlern aufgrund doppelter Inhalte führen kann. Styla stellt immer einen kanonischen Link-Tag bereit, um Such-Bots den Ursprung des Inhalts anzuzeigen (die einzelne URL, die in den Suchergebnissen profitieren sollte) und doppelten Inhalt zu verhindern.

 

Keine Indexfunktion

Es gibt mehrere Gründe, warum eine Seite ein Noindex-Flag haben sollte, was bedeutet, dass die Seite nicht von Suchmaschinen indiziert wird. Beispielsweise könnte die Seite keinen wirklichen Wert haben oder die Seite sollte das Crawler-Budget nicht verschlingen. Jede Seite kann auf robots:noindex gesetzt werden.

 

Social-Media-Tags

Styla stellt zusätzlich zum Metatitel und der Beschreibung automatisch Social-Media-Tags für Facebook und Twitter bereit. Diese Tags werden zum Erstellen einer Seitenvorschau verwendet, wenn die Seite auf der jeweiligen Social-Media-Plattform geteilt wird.

Derzeit werden folgende Tags erstellt:

  • og:typ
  • og:URL
  • og:Titel
  • og:Beschreibung
  • og:Bild
  • og:image:width
  • og:image:height
  • Twitter:Titel
  • Twitter:Beschreibung
  • twitter:image

 

Mobile Anpassung

Jede Zeile auf der Styla-Seite kann auf Desktop- und Mobilgeräten angezeigt oder auf nur eines davon beschränkt werden. Dies ermöglicht eine hohe Anpassung und Optimierung für Mobilgeräte.

 

ACHTUNG:

Der statische HTML-Code, der für die Hydratation benötigt wird, enthält immer alle Module, auch wenn sie derzeit nicht sichtbar sind. Diese Funktion (Ausschalten von Modulen für Mobilgeräte oder Desktops) sollte so wenig wie möglich genutzt werden.

 

 XML-Sitemaps


Styla stellt XML-Sitemaps für alle erstellten Seiten und Storys bereit. Sie sollten entweder zum Sitemap-Index oder direkt in der robots.txt-Datei Ihrer Website hinzugefügt werden, auf der Styla-Inhalte angezeigt werden.

Die Sitemaps sind in Seiten und Storys unterteilt:

http://paths.styla.com/v1/sitemaps/hardeck/pages.xml
http://paths.styla.com/v1/sitemaps/hardeck/stories.xml

Die Sitemaps müssen pro Client aktiviert werden. Bei Bedarf wenden Sie sich bitte an Ihren jeweiligen Customer Success Manager.



Href Lang


Das HTML-hreflang-Attribut teilt Suchmaschinen mit, in welchen Sprachen Ihr Inhalt verfasst ist, und enthält Links zu demselben Inhalt in einer anderen Sprache oder Region. Der Editor von Styla bietet die Möglichkeit, Kopien der aktuellen Seite direkt in anderen Sprachen oder Regionen zu erstellen und generiert automatisch die href-lang-Attribute.

SEO-Paginierung
Zeitschriften-Feed-Module können über eine Endlos-Scrollfunktion verfügen, damit der Besucher durch den gesamten Inhalt scrollen kann. Damit auch Suchmaschinen den gesamten Feed-Inhalt durchsuchen können, bietet Styla eine Paginierung mit einem Offset-Parameter.

SEO-Analyse
Styla Editor führt kurz vor der Veröffentlichung eine schnelle SEO-Prüfung Ihres Seiteninhalts durch. Die Ergebnisse werden als Liste mit OKs, Warnungen und Fehlern angezeigt.

Die Benutzeroberfläche des Styla-Editors zeigt die Ergebnisse der SEO-Prüfung mit einigen OKs, Warnungen und Fehlern

 

1586940594168_0fd1f83d-b7d5-4b6a-b929-d21c86904116
Ein Beispiel für SEO-Analyseergebnisse

 

 ---
 

Page Speed

Die Seitengeschwindigkeit ist ein Maß dafür, wie schnell der Inhalt Ihrer Seite geladen wird, und ist für das Benutzererlebnis sehr wichtig. Es ist auch ein Rankingfaktor, der von Suchmaschinen verwendet wird. Geschwindigkeit kann sich auch indirekt auf das Ranking auswirken, indem sie die Absprungrate erhöht und die Verweildauer verkürzt.
 
Hydration
Hydration bezieht sich auf den clientseitigen Prozess, bei dem der in der Seitenantwort enthaltene statische HTML-Code mit JavaScript erweitert wird. Dadurch wird die Seitengeschwindigkeit erheblich erhöht, da der sichtbare HTML-Inhalt wiederverwendet werden kann und nicht vollständig neu gerendert werden muss.
 
Content Delivery Network (CDN)
Alle Styla-Inhalte werden über CDNs bereitgestellt (statisches HTML, Javascripts und Inhalte, die über AJAX-Anfragen geladen werden). Dies stellt sicher, dass die Inhalte sehr schnell geladen werden können und stellt darüber hinaus sicher, dass Anforderungsspitzen ohne Geschwindigkeitseinbußen bewältigt werden können.
 
Responsive Bilder
Bilder werden immer auf die perfekte Größe oder innerhalb bestimmter Haltepunkte skaliert angezeigt (es sind nicht viele verschiedene Bildgrößen erforderlich). Der Inhaltsersteller kann sie in der größtmöglichen Größe hochladen und muss sich nicht um die Größenänderung für jeden Ansichtsbereich kümmern, in dem die Seite angezeigt werden soll.
 
Minimierte Ressourcen (JS & CSS)
Alle JavaScript- und CSS-Ressourcen werden minimiert und jede Inhaltsanfrage wird komprimiert, um sicherzustellen, dass die Ressourcen schnell und effizient geladen werden.
 
Konvertieren Sie GIF in Video
Animierte GIF-Bilder eignen sich hervorragend, um die Aufmerksamkeit des Benutzers zu fesseln, können jedoch einen negativen Einfluss auf die Website haben. Um die Leistung zu verbessern, werden alle auf den Seiten verwendeten GIFs automatisch in MP4-Videos konvertiert, um die Größe erheblich zu verringern.
 
WebP-Bildformat
Bilder werden im WebP-Format ausgegeben, das einen aggressiveren und besser optimierten Komprimierungsalgorithmus als JPG und PNG verwendet, mit dem Ziel, die Dateigröße bei minimalem Qualitätsverlust zu reduzieren. Und das bedeutet schnellere Websites, die weniger Bandbreite verbrauchen.
 
Header zwischenspeichern
Alle für die Anzeige des Styla-Inhalts geladenen Ressourcen verfügen über ordnungsgemäße Caching-Header und stellen sicher, dass sie für einen bestimmten Zeitraum zwischengespeichert werden.
 
Lazy-Loading von Videos
YouTube- und Vimeo-Inhalte werden nicht direkt geladen. Zu Beginn wird nur das erste Bild des Videos angezeigt. Sobald der Besucher auf dieses Bild klickt, laden wir die Drittanbieter-Bibliothek und das Video.
 
Lazy-Loading von Bildern
Die meisten ausgegebenen Bilder enthalten das von Google Chrome unterstützte Lazy-Loading-Attribut. Das bedeutet, dass das Bild erst dann vom Browser geladen wird, wenn es das Ansichtsfenster erreicht. Es gibt einige Bilder (z. B. im Zeilenschieberegler), die aufgrund von Höhenproblemen schnell geladen werden.
 
HTTP2-Protokoll
Inhalte werden über das http2-Protokoll mit geringerem Netzwerkbedarf geladen. Es verringert den Aufwand beim Parsen von Daten und ist weniger fehleranfällig.
 
DNS-Prefetch-Header
Styla stellt über die SEO-API-Integration DNS-Prefetch-Header bereit, damit der Browser proaktiv Domain-Namensauflösungen durchführen kann, um Inhalte schneller abzurufen.