Was passiert, wenn ein waschechter Profi-Programmierer und Google-Entwickler sich einem Blog annimmt? Richtig. Er geht steil nach oben. Leser ohne Ende, Reichweite, die stetig steigt, bei Google immer vorn dabei ist und Werbeeinnahmen generiert, dass die Kasse klingelt. Egal ob in einer Nische oder einem breitem Thema.

Willkommen beim ersten echten Ratgeber, wie du deinen Blog zum Geldmagneten machst. Anhand mehrerer Beispielblogs, die innerhalb von wenigen Wochen die 5.000 Leser pro Monat knackten und stetig so stark wachsen, dass die Konkurrenz (jahrzehntelang etablierte Marken und sogar Nachrichtenmagazine & Zeitungsverlage) darauf aufmerksam wurden, weil man sie bei Google auf den ersten Seiten bedrängt.

Willkommen zum ersten Teil meiner Blogreihe, wie du deinen Blog erfolgreich machst. Auf Grund von zahlreichen Fragen nach Tipps und Tricks, die wirklich etwas bringen (im Gegensatz zu vielen Ratgebern, die wenig bringen), sowie den technischen Details, habe ich mich nun dazu durchgerungen, mich dieser Artikelreihe anzunehmen.

Wer mit bloggen Geld verdienen möchte, der brauch nicht nur hochwertige Texte, sondern auch Leser. Diese Leser bringen dir im Endeffekt Geld durch Werbung, Affiliate-Marketing und mehr ein. Wie du jede Menge Leser bekommst, zeige ich dir in dieser Artikelreihe, bei der ich mich dem Blogsystem WordPress annehme.

Teil 1 – Finger weg von Baukästen wie Divi

divi

Kommt mir spontan in den Sinn, wenn ich an Divi denke

Aus meiner Erfahrung heraus als Programmierer für den Mittelstand, kann und darf ich ohne Reue sagen, dass bislang jeder “Webdesigner”, von dem ich gehört habe, der mit Divi arbeitet, ein Amateur ist. Denn diese Baukästen können deinen Blog zwar verschönern, aber auf Kosten von Ladezeiten, valider Programmierung, Flexibilität und Lesbarkeit. Es soll gute Programmierer geben, die auch damit arbeiten. Ich gehe aber davon aus, dass es dann eher durch “Druck von oben” geschieht. Denn um ein Divi-Theme auf Suchmaschinen zu optimieren und valide zu perfektionieren benötigt es mehr Aufwand, als eine komplette Website neu aufzusetzen. Zwei Mal.

Das Design

Das Design deines Blogs ist entscheidend für den ersten Eindruck, den der Besucher beim Besuch deiner Website erhält. Bei diesem Thema widme ich mich allerdings der technischen Seite eines speziellen Design-Baukastens, welches hochgelobt von Amateuren und verhasst bei Profis ist, die es später reparieren müssen. Die Grundlagen vom Design generell, sind uns allen bekannt und die brauche ich hier nicht weiter zu erörtern. Seriös, klar, lesbar, ohne schnörkelige Schriftarten. Ein Blog ist ein Buch. Nur online. Bücher zittern und flattern einem auch nicht um die Ohren, wenn man darin lesen will. Ein Blog muss in erster Linie lesbar sein.

Hier kommt Divi ins Spiel. Wer nicht programmieren kann, es auch nicht will und lediglich ein Lego-Baukasten-Set zusammenbauen möchte, entscheidet sich für Divi. Es ist einfach, wenn man es erst einmal verstanden hat und man kann jegliche Elemente von einem Ort zum Anderen positionieren und hat mehr Optionen und Vielfalt bei der Gestaltung einer Website. Das ist der positive Punkt. Der Einzige. Dass es für Divi unendlich viele Youtube-Tutorials gibt, ist ein negativer Punkt, auf den ich später noch eingehen werde.

Ich versuche es für Laien verständlich auszudrücken. Informiert mich bitte, wenn ich zu viele Fachbegriffe nenne. Ich versuche das dann zu korrigieren.

Was Google von einem Design erwartet

GoogleerklärtdieErmittlungundAktualisierungvonDatenimCrawl Statistikbericht

Google möchte seinen Besuchern das bestmögliche Ergebnis für deren Bedürfnisse bieten. Dabei achtet Google auf die folgenden Punkte am meisten:

Die Ladezeit einer Website

Wer eine schnelle Website hat, hat viele Vorteile bei Google. Warum ist das so? Stell dir vor, du bist gerade in der U-Bahn unterwegs und willst etwas lesen. Ein neuer Artikel zu einem Thema, welches dich gerade interessiert, erscheint. Du möchtest den Artikel lesen und klickst auf den Link bei Google. Doch es passiert… nichts. Es lädt. Es lädt lange. Warum? Vielleicht hat der Blog ein Divi Theme, welches für jedes Element eine eigene CSS-Datei benötigt, die dem jeweiligen Element sein Design verleiht. Dazu noch jede Menge Bilder und Grafiken, die in voller Größe eingebunden sind, obwohl du nur ein kleines Display vor dir hast. Was tust du? Wie lange willst du warten?

Der Durchschnittliche User verlässt nach spätestens 4-5 Sekunden die Website, wenn diese nicht geladen ist. Geduld ist im Internet keine Tugend. Ein grundlegender Fehler von designorientierten Bloggern ist es, den schönsten Blog haben zu wollen. Ist dieser dadurch aber sehr langsam, wird Google den Blog niemandem zumuten, sondern eher andere Websites und Blogs vorschlagen, die diese Probleme nicht haben.

Ein gutes Beispiel kam mir heute wieder zu Ohren. Eine Freundin, die einen Blog über Hunde betreibt, berichtete mir darüber, dass sie vor Kurzem ihre Website auf Divi hat umrüsten lassen, weil es ihr wärmstens empfohlen wurde. Zu ihrem Erstaunen jedoch, sank die Suchmaschinenoptimierung stark ab und die Website ist deutlich langsamer.

Warum ist das so? Nun. Der Browser, den du gerade benutzt, brauch Befehle. Was soll er wo anzeigen und in welcher Art und Weise? Diese Befehle kommen bei einer perfekten Website von einem HTML-Dokument, welches die grundlegende Struktur und den Inhalt bereithält & einer CSS-Datei, die die darin befindlichen Elemente in Form bringt und das Design bestimmt. Diese beiden Dateien sagen dem Browser, was er tun soll.

Divi allerdings (ebenso wie einige andere Baukastensysteme) haben eine CSS-Datei für jedes einzelne, unterschiedliche Element. Da kommen gut und gerne mal zwischen 15-20 CSS-Dateien nur auf der Startseite deines Blogs zusammen. Die müssen alle fleißig heruntergeladen werden, bevor dein Browser die Website vollständig anzeigen kann. Wie du dir schon denken kannst, ist das nicht gerade ein Vorteil.

Fast jedes Theme kann heutzutage eigene Bildformate wählen. Sowohl für die PC-Version, als auch für die mobile Version. So kann man am PC ruhig ein großes Bild laden, während an gleicher Stelle auf der mobilen Version die kleinere Version des Bildes geladen wird. Bei Divi scheint dies nicht der Fall zu sein. Zumindest konnte ich das noch nirgendwo beobachten. Sollte Divi das allerdings können, bekräftigt es meine Ansicht, dass diejenigen, die es verwenden, keinen Schimmer von Webdesign haben, wenn sie auf solche Dinge nicht achten oder es schlichtweg nicht wissen.

Dass jegliche Animationen und “Verschönerungen” via Javascript erledigt werden und Divi hierfür ebenso zahlreiche Dateien laden lässt, erwähne ich hier nur am Rande. Es ist im Prinzip das Gleiche, wie mit den CSS-Dateien. Bei Divi ist das Motto: Viel hilft viel. Realistisch ist das zwar nicht, aber Divi ist auch nicht dafür gemacht, perfekte Websites zu erstellen. Divi ist das oben genannte, zitternde, flatternde Buch.

Cumulative Layout Shift – Die wandernden Elemente

Jeder hat es schon einmal gesehen. Du rufst eine Website auf und kurz bevor sie fertig geladen ist, verschieben sich einige der Elemente auf dem Bildschirm. Warum ist das so? Wie oben erläutert, sagt ein Html-Dokument und eine CSS-Datei dem Browser, was er wo anzeigen soll. Das Html-Dokument ist dabei immer das Erste. Sind in diesem Dokument zwar alle Elemente enthalten, heißt das nicht, dass Divi es für nötig hält, die Größen auch zu definieren. So wird gerne bei einem 2-spaltigen Design einfach eine Box mit 45% Breite auf der linken Seite gefordert, sowie eine weitere Box mit 45% auf der rechten Seite (vereinfacht ausgedrückt).

Soweit so gut. Eine Box links und eine Rechts. Das macht ja Sinn. Ja, das tut es. Also legt der Browser diese beiden Boxen auch so auf deinen Bildschirm: Wenn man dem Browser aber dann danach erst sagt, dass die ganze Website eine maximale Breite von nur 1200 Pixeln haben soll, dann muss der Browser dies korrigieren, denn als Referenz hatte er 45% vom Bildschirm genommen und wusste nicht, dass der Layout-Container der Website eine Begrenzung in der Breite haben würde. Die Reihenfolge der geladenen Dateien spielt also auch eine Rolle.

Dieser Layout Shift stellt auch bei vielen Werbeträgern Probleme dar. So zum Beispiel sollte man bei Verwendung eines Ads-Plugins wie “Advanced Ads” darauf achten, dass man dem Werbebanner eine bestimmte Größe zuteilt. Denn die Werbung wird zumeist als letztes geladen und wenn ein Platz für einen Werbebanner reserviert ist, dieser aber ungenutzt blieb, dann ist er nur so groß wie das leere Element. Kommt dann der fertig geladene Banner hinein, verschiebt sich alles, was sich um das Element herum befindet.

Dieses Verhalten einer wackeligen Website schreckt viele Besucher ab. Das weiß auch Google. Zumal ein Layout Shift oftmals zu Fehlern führt und Elemente über Textabschnitte legt, wenn zu viele Bewegungen erfolgen. Dadurch können wichtige Texte verdeckt werden. Und wenn dies bei Rechtstexten, wie der Datenschutzerklärung passiert, dann gibt es nicht nur eine Abmahnung von einer netten Kanzlei, sondern eine generelle Abstrafung des Googlerankings. Dabei ist es nicht relevant, welcher Text verdeckt wird. Google wertet dies als potentiell gefährlich, da man etwas kaufen könnte, dessen Infos man nicht vollständig lesen konnte. Also ab nach hinten. Bei Google hat eine solche Website weit vorn nichts zu suchen.

Die Sicherheit der Besucher

Die Sicherheit spielt eine sehr große Rolle in der Webentwicklung und wenn ein Design mit einem Page-Builder wie Divi gestaltet wird, dann hat man oft mit Sicherheitsproblemen zu kämpfen. Es fehlt an jeglichen Warnungen, wenn man zum Beispiel ein Bild mit dem falschen Protokoll (http statt https) einfügt. Dieses Bild wird im Chrome-Browser geblockt und nicht angezeigt. In anderen Browsern nicht. Da dies eine Sicherheitsrelevante Situation ist und Google auch von anderen Browsern benutzt wird, werden Websites mit solchen Fehlern gern nicht nur nach hinten versetzt, sondern ab und zu auch komplett ausgeschlossen.

Updates gibt es bei Elegantthemes (der Entwickler des Divi Builders) nur sporadisch, um kosmetische Feinheiten zu korrigieren, während es an Sicherheitspatches oft mangelt. Zumal es sehr oft zu Problemen kommt, nachdem ein Update stattgefunden hat. Fehler werden durch Updates also oftmals mehr, anstatt weniger. Auf Sicherheitslücken gehe ich nun nicht näher drauf ein. Wir wollen ja nicht abschweifen, indem wir auf die Integration des Contactform7 in Divi zu sprechen kommen, durch das Millionen von WordPress Websites gehackt wurden. Das haben wir alle mitbekommen. Das ist keiner separaten Rede wert.

Google Fazit

Da Google natürlich viele weitere Faktoren berücksichtigt, von denen ich hier über 200 Google Ranking Faktoren aufgelistet habe, fallen viele auf die oben genannten Punkte herab, wie den Mangel der Lesbarkeit durch den Layout Shift oder das richtige Protokoll der Dokumente (http oder https) im Punkt Sicherheit. Divi hat viel Gutes. Mit Sicherheit. Ohne Grund werden es nicht so viele gekauft haben. Google jedenfalls mag Divi nicht und das aus offensichtlichen Gründen.

Die valide Programmierung

Steigern Sie Ihre SEO

Ein Code sollte sauber, verständlich, sortiert und schnell zu verarbeiten sein. Wenn ich bei bisherigen Projekten eine Website übernehmen musste, die mit Divi gestaltet wurde, stellten sich mir immer alle Haare auf. Der Code war mit Spaghetti-Code übersäht, Formatierungen, wo keine sein sollten und CSS-Dateien, die so viel ungenutzen Code enthielten, dass es im Browser qualmt.

Warum ist ein guter Quellcode wichtig?

Dabei gibt es verschiedene Herangehensweisen. Die erste ist die Logik. Wer seine Website pflegt, der kümmert sich auch um die Inhalte und deren Aktualität. Wessen Code wie bei Hempel’s unter dem Sofa aussieht, wirkt nicht gerade wie der ideale Betreiber einer seriösen Website mit qualifizierten Informationen.

Eine weitere Herangehensweise ist die Frage des Aufwands. Wieviel Aufwand wird vom Crawler benötigt, um deine Website zu scannen? Der Google-Crawler ist ein automatisches Scan-System, um deine Website zu scannen. Dies läuft auf einem Server, der natürlich Ressourcen verbraucht. Brauch der Crawler für deine Website 3 Mal so lange und muss mehr rechnen, als bei einer normalen Website, dann bringt deine Website Mehraufwand mit sich. Die Website sollte schon extrem gute Inhalte haben, um das ausgleichen zu können.

Dann kommt die Frage der Lesbarkeit für Browser. Nicht jeder Browser kann alles lesen. So wissen wir alle, dass der Internet Explorer zwar ein tolles, neues Upgrade erhalten hat, jedoch nicht mit jedem Code umgehen kann. Zumal viele Menschen immernoch auf Windows XP Rechnern unterwegs sind und eine alte Internet Explorer-Version nutzen. Auch gibt es viele Betriebssysteme mit eigenen Browsern, die alle unterschiedlich die Dateien deiner Website durchforsten. Google möchte sicherstellen, dass alle Browser mit der Website klarkommen, die Google ihnen präsentiert.

Was macht Divi falsch?

Auch wenn sich in den letzten Jahren schon viel getan hat, so ist und bleibt Divi ein Multi-Funktionales System. Also sehr viele Funktionen und Möglichkeiten, um alles Mögliche zu integrieren. Das wird mit Shortcodes erledigt, welche von deinem Server erst einmal berechnet und dargestellt werden müssen, bevor diese als endgültige Dokumente an deinen Browser gesendet werden. Wiedermal eine ordentliche Bremse.

Auch das zusammenlegen der vielen CSS-Dateien in nur noch eine Datei gestaltet sich eher nachteilig, denn es wird entgegen der Meinung Vieler, nicht nur der Code in die Datei gelegt, der auch benötigt wird, sondern die komplette CSS-Datei eines Elements, wird vollständig in eine Hauptdatei integriert. Egal ob man nur einen winzigen Teil davon bräuchte. Dadurch werden die CSS-Dateien bei Divi unnötig groß und sorgen wiederum für mehr Ladezeit, einem genervten Crawler, der die ja auch laden muss und so weiter.

Die eigene Bearbeitung des Blogs

Es klingt zu schön, um wahr zu sein: Mit Divi kannst du deine eigene Website zusammenschrauben, wie es dir passt. Super. Ja, das stimmt. Bis ein Update kommt und etwas davon kaputt macht und du einen Programmierer brauchst, der das repariert. Oder wenn du mal einen anderen Editor verwenden möchtest und Divi deaktivierst, löscht es gern den kompletten Inhalt der Seite. Es möchte seinem Unmut der Deaktivierung schließlich Ausdruck verleihen.

Viele Tutorials sind verfügbar. Wie ich oben bereits erwähnt habe, stellt das einen oder mehrere Nachteile dar. Zum Einen ist es das Alter der Tutorials. In Divi verändert sich stetig irgendwas. Da hält kaum einer den Überblick, der nicht täglich damit zu tun hat. Wer dann ein 2 Jahre altes Tutorial anschaut wird schnell enttäuscht, dass davon nahezu nichts mehr passt.

Ein weiterer Punkt ist die Masse an Amateur-Webdesignern, die sich als solche bezeichnen, ohne jemals eine Ausbildung gemacht zu haben oder einen Studiensaal von innen gesehen zu haben. Mit solchen Tutorials bringt Divi eine Masse an Learning-by-doing Webdesignern bei, wie man eine Website gestaltet. Soweit so gut. Wie man diese Website aber auch optimiert, den Code valide programmiert oder für Suchmaschinen optimiert, wird da wohl niemandem beigebracht. Solange es toll aussieht, wird es schon funktionieren. Das Motto von so ziemlich jedem WeBDeSiGNeR, dessen leblosen Schrott-Projekte ich den zitternden Händen meiner Kunden entnehmen durfte und komplett neu Aufsetzen musste. Ganz davon zu schweigen, dass sie mit den Dumping-Preisen den Markt völlig kaputt machen.

Divi entfernen?

Die Vorteile, die WordPress Plugins bieten

Aktuell kommt ein erschreckend hoher Anteil meiner Kunden von irgendwelchen Amateur-Webdesignern, oder dem Nachbarn der “fit mit Computern” ist. Es ist aktuell ein neuer Trend, immer erst einen billigen Webdesigner zu engagieren, in der Hoffnung, dass ein Wunder geschieht, um anschließend dennoch den vollen Preis bei einem Profi zu zahlen, damit das verhunzte Projekt gerettet wird.

Eine Rettung aus Divi ist meiner Erfahrung nach am Einfachsten, wenn man die komplette Website platt macht (nach Sicherung der Inhalte) und ohne Divi neu aufsetzt. Zu oft kam es vor, dass beim Deaktivieren die halbe oder ganze Website komplett hinüber ist, oder einfach viel mehr Zeit dabei drauf geht, das zu kitten, als wenn man die Website neu aufsetzen würde. Sowohl Design, als auch Inhalte werden wohl beim Deaktivieren des Divi-Builders wehement in Mitleidenschaft gezogen.

Warum das so ist, damit habe ich mich nicht beschäftigt. Es ist mir auch egal. Kommt ein Kunde mit einer Divi Website an, dann wird jegliche “Anpassung” von Grund auf abgelehnt und nur eine Neugestaltung kommt in Frage. Zu viele Stunden und Tage habe ich mich damit rumärgern müssen. Und ich habe in meinen 15 Jahren in der Branche schon viele Systeme kommen und gehen sehen, wie z.B. ComToDate oder WebToDate von Data Becker und viele weitere. Ein solcher Müllhaufen, wie Divi, ist mir dabei allerdings noch nie vor die Augen gekommen.

Dabei gibt es so viele tolle ausgereifte Page-Builder, wie den Fusion Builder, der stabil, valide und korrekt läuft und sogar alles optimieren kann. Aber das kann mittlerweile eigentlich fast jeder Page-Builder. Nur Divi ist da nicht so erpicht darauf, dazuzugehören. Die kleine Snowflake, die auf dem Schulhof gehänselt wird, ist eben stolz darauf nun ein paar Anhänger zu haben, die keinen Dunst davon haben, was sie alles falsch machen.

Fazit

Wie du siehst, gibt es eine Menge Faktoren, die man berücksichtigen sollte, wenn man sich den “einfachen” Page-Builder gönnen möchte. Denn auch, wenn er einer der teuersten am Markt ist, ist er auch ebenso der Unvorteilhafteste. Wenn schon schlecht, dann auch teuer. Halbe Sachen machen die jedenfalls nicht, das muss man ihnen lassen.

Wenn du Rücksicht auf dein Google Ranking hast und vorn mitspielen möchtest, dann nimm’ großen Abstand von solchen Baukästen. Google wird dich nicht nach vorn lassen, wenn du schon von vornherein mit einem Fahrrad bei der Formel 1 stehst und versuchst Erster zu werden.

Einfach ist meist auch gut. Du willst einen Blog perfekt machen? Halte ihn simpel. Du brauchst keinen super mega Editor, um ein Bild oder eine Auflistung einzufügen. Das kann WordPress schon sehr gut allein. Effekte, Boxen, Farbverläufe und Co gehen auch ganz gut ohne javascriptbasierte Implementierungen von Divi, wenn man sie denn unbedingt möchte. Und ja, es geht auch mit Effekten auf einer perfekten Website. Klick doch mal hier (öffnet in einem neuen Tab) und check die Website, die du dir gerade ansiehst. Jede Menge Funktionen, Effekte, kleine Animationen, Bilder, das volle Programm. Lass dich überraschen, wie das Ergebnis des SEO-Checks aussehen kann, wenn man eine perfekte Website hat.

Weitere Themen, die demnächst behandelt werden:

  • Die Wahl des richtigen Hosting-Anbieters & des Paketes
  • Plugins, die du nutzt, aber nur Nachteile bringen
  • Plugins, die du haben musst, um eine perfekte Website zu bekommen
  • Das eine, richtige Plugin, um deine Website zur schnellsten zu machen
  • SEO-Plugins, die wirklich etwas bringen und wie man sie einstellt
  • AMP – Vollgas auf mobilen Geräten
  • Responsive heißt nicht nur PC und Smartphone
  • Bildformate, Bildqualität und Container
  • Ich zeige dir meine perfekte Konfiguration – Wom87.de zieht blank
  • Social Media – Automatisierung, Reichweite und Rank ohne Aufwand
  • Welche Backlinks dir wirklich etwas bringen und welche schädlich sind
  • Inhaltsarten, die Google sehr positiv honoriert
  • Inhalte, die Google gar nicht gern sieht
  • Warum springen so viele ab? Wie du deine Bounce-Rate unter 10% bringst
  • Google Webmaster Console – Was sie dir sagt und wie sie dir hilft
  • Keyword-Spam oder natürlich? Google hat alles geändert
  • Latent Semantic Indexing Keywords in Content (LSI) – Was ist das und warum ist das wichtig?
  • Optimale Größen/Längen von Blogbeiträgen und Struktur
  • Breadcrumbs sind nun doch wieder wichtig – Wie du es richtig einstellst
  • Wie du mit Entitäten einen Ranking Boost erhälst (Google-Patent Nr. 9.355.140)
  • Wie der Canonical-Tag deine Website absichert und weiter voran bringt
  • Interne Links und wie sie deiner Website mehr als nur nützen
  • Die Domain-Autorität. Wir bringen deine Website nach oben
  • Der Unterschied zwischen “Qualität” und “Nützlich” – Google erkennt und nutzt ihn
  • uvm.

Mit suchmaschinenfreundlichen Grüßen
Daniel Wom