Kategorie: Webdesign

Was ist SEO und warum brauchst DU es?

SEO ( Search Engine Optimization) steht für Suchmaschinenoptimierung. Bei SEO ist es das Ziel, dass deine Webseite bei Google, Bing und Co. besser gefunden wird. Das Problem dabei: das wollen alle anderen auch.

So schreibt man SEO 🙂

Deine Webseite wird nicht gefunden, wenn sie bei Google auf Seite 5 steht. Meine Seite Webseiten-fritz.de steht bei Google auf dem ersten Platz, gleich unter den bezahlten Anzeigen.

Ist doch gut, oder? Nein. Auf Platz eins ist meine Seite nur, wenn man bei Google nach „Friedrich Ganter Webdesign“ sucht, was logischerweise nur Leute machen, die mich bereits kennen. Das ist aber nicht das, was man erreichen möchte.

Den zukünftigen Kunden kennen

Also muss man sich überlegen (und am besten noch einige Freunde/Bekannte und mich fragen) wonach ein Kunde suchen würde, der dein Produkt/Dienstleistung kaufen würde.

Angenommen, du möchtest als Scheidungsfotografin gebucht werden. Ich denke, kaum jemand würde nach „Scheidungsfotografin“ suchen, eben wenige Menschen auf diese Idee kommen würden, so etwas buchen zu wollen. Deine Kunden werden eher nach „Scheidung feiern“ oder ähnlichen suchen.

Die Umsetzung

Jetzt ist es wichtig, die Suchbegriffe in der Webseite umzusetzen. Am besten in einer H1 oder zumindest H2 Überschrift. Eine Möglichkeit für die H1 (Haupt-) Überschrift wäre z.B.: „Die Scheidung feiern: mit der Scheidungsfotografin“, dies sollte man auch in den Seitentitel schreiben, weil dieser im Suchergebnis angezeigt wird:

Google Ergebnis für „Scheidung feiern“

Für „Scheidung feiern“ gibt es aktuell 1,1 Mio. Suchergebnisse, ist also gefragter als „Scheidungsfotografin“ mit aktuell 716 Treffern.

Die Webseite technisch optimieren

Das ist ein Punkt, den dein Webdesigner – also ich – umsetzen muss. Die Seite sollte folgende Punkte erfüllen:

  • Schnell sein
  • Frei von HTML/CSS Fehlern
  • Für Mobilgeräte optimiert
  • Eine gute Menüstruktur aufweisen
  • Genug und gute Backlinks haben
  • Wichtige Suchbegriffe hervorheben (Überschriften, Fettschriften, Seitentitel)
  • Einbindung / Verlinkung deiner sozialen Medien
  • User Signale: Google merkt, wenn jemand die Seite schnell verlässt – gar nicht gut!

Backlinks

Das hat jetzt nichts mit Brotbacken zu tun. Backlinks sind einfach Verlinkungen zu Deiner Webseite von anderen Webseiten aus. Wichtig ist dabei der Linktext, daraus leitet Google ab, welches Thema für Deine verlinkende Seite relevant ist. Der Linktext ist der Text, auf den man klickt.

Sinnvolle Linktexte

Wäre in Deinem Fall der Linktext z.B. „Die Scheidung feiern: mit der Scheidungsfotografin“, dann ist dies optimal.

Wie man an die Backlinks kommt, verrate ich Dir wenn Du bei mir gebucht hast. 🙂

Keine Links von Linkfarmen kaufen!

Ganz schlechte Idee. Genau das bemerkt Google und kann dazu führen, dass du komplett aus den Suchergebnissen verschwindest. Google-Strafen sind sehr gefürchtet.

Bildnachweis: Pixabay

Onepager – was ist das?

Vielleicht hast du den Ausdruck im Zusammenhang mit einer Webseite schon gehört. Ein Onepager (dt. Einseiter) bzw. OnePage-Design ist genau das, was der Name verspricht: Eine Webseite, die nur aus einer Seite besteht.

Klingt jetzt irgendwie armselig, ist es aber nicht. Den die Seite ist lang. Sie kann sogar so richtig lang sein.

Warum macht man sowas? Sie ist einfacher zu navigieren: man scrollt einfach runter. Scrollen. Scrollen. So wird man durch den ganzen Inhalt der Seite geführt.

Manchmal hat man zwar oben eine Navigationsleiste, aber die öffnet auch keine neue Seite, sondern springt auf der langen Seite direkt zur gewünschten Stelle.

Hier ein kleines Video, um es zu verdeutlichen:

Onepager Demo

Was sind die Vorteile von einer Onepager-Seite?

  • Einfache Navigation, scrollen bzw. wischen ist die natürliche Art, sich auf einer Webseite zu bewegen
  • Tolle Effekte möglich
  • Sieht gut aus
  • Erzählt eine Geschichte
  • Übersichtlich und kompakt

Und die Nachteile?

  • Man muss bei einem Thema bleiben
  • Größere, komplexe Webauftritte nicht möglich
  • Eventuell für SEO nicht so optimal

Damit man einen Überblick bekommt, wie meine Seite Webseiten-fritz.de momentan aussieht, wenn man alles auf einmal sieht (Vorsicht, langes Bild):

Screenshot lange Seite

Man kann auch gerne scherzhaft einen „Schnell lesen“ Knopf anbringen…

Und hier nocheinmal mit der Fotografie-Seite

Ich habe es getan – ich bin zu Wix.com gewechselt – Ein Erfahrungsbericht

tl;dr Zusammenfassung am Ende des Artikels

Nein, natürlich nicht. Aber ich habe Wix ausprobiert. Eine Kundin möchte nämlich Ihre Seite selbst bearbeiten und ob ich dabei helfen kann. Bei dieser Kundin ja, bei Neukunden weiss ich nicht, ob ich mir das antue.

Preise

Bei Wix kann man sich eine kostenlose Webseite bauen, diese wird dort direkt gehostet, z.B. unter den Namen https://fritzganter.wixsite.com/webseitenfritz.

Im oberen Bildbereich sieht man Werbung, anscheinend nur für Wix selbst:

Bannerwerbung bei kostenloser Seite

Wenn man keine Werbung und eine eigene Domain verwenden will, fängt das bei knapp 11€/Monat an. Wenn man einen 2-Jahresvertrag abschliesst. Bei monatlicher zahlungsweise sind es schon € 16,66. Und das ist das billigste Model mit 3GB Speicherplatz und 2GB Bandbreite (was mit der Angabe Bandbreite gemeint ist, ist mir noch nicht klar, es ist nicht die „echte“ Bandbreite in MB/s oder so gemeint).

Mit unbegrenzter Bandbreite und 10GB Speicherplatz ist man bei 15 €/Monat, wenn man einen 2-Jahresvertrag nimmt. Bei monatlicher Zahlung sind es 25€.

Bei Strato bekommt man das billigste Paket um 4 €/Monat inkl. 3 Domains und 50GB Speicherplatz sowie5000 Postfächer und zusätzlich 20GB Speicherplatz für Mails. Die Bandbreite ist anscheinend unbegrenzt.

Erster Versuch mit Assistenten

Also, man registriert sich bei wix.com und kann sich sofort eines von vielen Vorlagen verwenden. Ich habe das mal mit einem Assistenten namens „Velo“ gemacht: Man gibt z.B. „Frisör“ ein, kann sogar eine Webseite angeben, aus der Daten importiert werden, dazu eine Buchungsseite und die Webseite ist dann fast fertig. Leider hat die Seite weder was mit Frisör zu tun, noch ist irgendein Text oder Bild importiert worden und Buchungsseite gibt es auch keine. Man kann nicht einmal die Texte in Schriftart/Größe ändern. Dieser „Velo“ ist also Mist. Hier gehts zur Seite: Klicke lieber nicht!

Die angebliche „Frisör“-Seite

Der Weg ohne Assistent

Verwendet man nicht den Assistenten, geht es schon besser.

Ich habe nun meine Seite schnell nachgebaut, also sowas ähnliches erstellt. Man ist in seinen Möglichkeiten schon eingeschränkt und muss praktisch das nehmen, was die Designvorlage hergibt. Wenigstens kann man die Schriftart und Größe ändern. Aber auch nicht unbeschränkt. Meine Schriftart ist z.B. Railway, die gibt es dort zwar auch, aber nicht in „light“. Die ganze Struktur ist etwas verwirrend, es geht sehr oft ein neuer Tab auf. SEO Sachen gehen nicht mit der Gratisversion ohne Domain. Schade, ich hätte mir sonst gerne eine kleine Linkfarm gebaut.

Wenn man keine besonderen Wünsche hat und auf einige Dinge keinen Wert legt, kann man damit durchaus leben. Flexibel ist halt was anderes.

Die resultierende Webseite

Ich möchte betonen, dass ich mit wix nur die erste Seite (Bild und Text) meiner Webdesigner Seite nachgebaut habe, also 1 von 5 Seiten.

Erst mal der Check auf korrekten HTML Code: 52 Fehler, 5 Warnungen. CSS: 19 Fehler und 516 Warnungen. Meine Seite: HTML und CSS 0 Fehler, 0 Warnungen. Muss sich jetzt nicht auf die Darstellung auswirken, zeugt aber sicher nicht von Qualität.

Jetzt der Vergleich der Geschwindigkeit in der mobilen Ansicht (gedrosselte Download-Geschwindigkeit). Jeweils erst die Wix-Version, dann meine Seite, wobei meine Seite fertig ist und einiges an Text und Bildern mehr hat, als die Wix-Version.

Man kann den Test kostenlos auf https://pagespeed.web.dev/ machen.

Die Wix-Seite: https://fritzganter.wixsite.com/webseitenfritz

Meine Seite: https://webseiten-fritz.de

Wix, Mobilansicht
Meine Seite, Mobilansicht

Jetzt die Desktopansicht. Wieder erst die Wix-Version, dann meine Seite.

Wix-Seite Desktop
Meine Seite, Desktop

Zur Erinnerung, die Wix-Seite hat viel weniger Nutzdaten, nur 1 Bild von mir und das Headerbild. Meine Seite hat 6 Bilder und mehr Text.

Man sieht deutlich, dass die Ladezeiten der Wix-Seite deutlich schlechter sind (10,6 gegen 1,9 Sekunden bei der mobilen Seite, Time to Interactive). Auf der Desktopseite ist die Wix-Seite schon erträglicher, aber noch immer fast 8x langsamer als meine Seite. Beim Test der mobilen Seite wird eine mittelmäßig schnelle Mobilfunk-Verbindung simuliert.

(Nachtrag: In einer früheren Version war der mobile Leistungsindex meiner Seite bei ca 87, jetzt ist er bei 100. Der Grund für die plötzliche Verbesserung: ich habe Google Analytics durch etwas viel besseres ersetzt, aber das ist eine andere Geschichte in einem neuen Blog-Artikel.)

Dafür macht die Wix-Seite einen schickeren Eindruck weil alles hin und her huscht. Wer es mag.

Mit der Wix-Seite kann man aber sehr viele Funktionen einbauen, zum großen Teil über Apps welche zum Teil kostenlos sind, aber auch schon einiges monatlich kosten können.

Ein Ausschnitt aus den zahlreichen Apps

Diese Funktionalitäten kann ich einfach nicht liefern, es wäre auch viel zu teuer. Wenn man die braucht, sollte man Wix oder vergleichbares verwenden, da bin ich raus. Ebenso wenn man sehr häufig Änderungen an der Seite machen will.

Einen Aspekt sollte man aus SEO Sicht betrachten: die langsame Ladegeschwindigkeit der Seiten wirkt sich ziemlich negativ auf das Google Ranking aus. Die zahlreichen Fehler im HTML und CSS Code eventuell auch. Man weiß es nicht genau.

Resume: 10 Gründe, die gegen Wix sprechen

Warum sollte man also Wix.com nicht verwenden und einen richtigen Webentwickler wie Webseiten-fritz.de beauftragen sollte:

  1. Wix ist relativ teuer, ein brauchbarer Tarif liegt bei 15€/Monat, wenn man sich 2 Jahre bindet.
  2. Lange Vertragsbindung, wenn man nicht den noch teureren Monatstarif zahlen möchte.
  3. Der Assistent Velo taugt nix, das normale Tool ist zwar vernünftig zu bedienen, ist aber eingeschränkt, z.B. Schriftarten nicht frei wählbar.
  4. Insgesamt kann man sich zwar „schöne“ Seiten zusammenklicken, aber flexibel ist es nicht. Man muss nehmen, was da ist.
  5. Die erzeugte Seite hat Unmengen von HTML und CSS Fehler, In meinem einfachen Test waren es über 50 Fehler. Dagegen kann man als Anwender nichts machen.
  6. Langsam: Die erzeugte Seite ist mindestens Faktor 4 langsamer, als eine vergleichbare handgebaute Seite. Besonders auf Mobilgeräten kann das nerven.
  7. Einige Funktionen kann man nur per kostenpflichtiger Apps einbauen.
  8. Durch die langsame Ladegeschwindigkeit wird man bei Google deutlich schlechter gefunden. Auch andere SEO Maßnahmen sind eventuell schwer oder gar nicht umsetzbar.
  9. Man kann die Seite auch nicht einfach von Wix zu einem anderen Provider übertragen, dies wird sogar in den AGB ausgeschlossen.
  10. Du bist Mieter bei Wix, nicht Besitzer deiner Webseite

Aber wenn du schnell eine schöne Seite brauchst und Geld keine Rolle spielt, bist du bei Wix gut aufgehoben.

Bitte um Mithilfe – Designvergleich A/B

Edit: Inzwischen habe ich das Design von B nach A gezogen und noch etwas angepasst.

Liebe Leute! Ich möchte kurz eure Zeit beanspruchen und um eure Mithilfe bitten. Dauert nicht länger als ca. 5 Minuten.

In welche Richtung soll es im Design gehen? Bitte seht euch diese beiden Seiten an, und schreibt in den Kommentar, welche ihr besser findet. Der Text ist nicht wichtig, da die zweite Seite ein anderes Thema hat. Bitte nicht nur das Bildchen ansehen, sondern auf die Seite gehen und rumscrollen/navigieren.

Seite A: Webseiten-fritz.de

Seite A

Und jetzt Seite B: fpunktgandi.de

Seite B

Gerne auch weitere Anmerkungen, was gefällt, was nicht gefällt, bezogen auf die preferierte Seite.

Vielen Dank für Eure Mühe

Es ist besser, Bilder richtig zu machen, als Bilder falsch zu machen.

Frei nach Christian Lindner

Für eine Webseite ist es wichtig, die passenden, beschreibenden Bilder auszuwählen. Wenn man kein passendes Bild hat, dann einfach weitersuchen oder selbst fotografieren. Noch besser: jemanden fragen, der sich auskennt.

Worum es mir geht: Setze Bilder in dem Sinne ein, dass „ein Bild sagt mehr als tausend Worte“ auf dein Bild zutrifft. Es soll praktisch den Text, den man vielleicht gerade nicht lesen will, bildlich darstellen. Natürlich darf eine Bildunterschrift zur besseren Verständlichkeit beitragen.

Ein kleines Beispiel auf der Seite „Aktuell“ für das griechische Restaurant Leandros, finde den Fehler (den ersten Eintrag genau lesen):

Schlechtes Bild
Sehr unpassendes Foto für ein griechisches Restaurant

Und? Den Fehler gefunden? Wenn nicht, dann noch das Bild, wie es sein sollte:

Gutes Bild
Ein erhabenes Foto für meinen Lieblingsgriechen

Wenn das Bild nicht das zeigt, was man zeigen möchte: lass es einfach, mach selbst ein passendes Foto oder suche nach einem Stockfoto. Ich kann z.B. Pixabay empfehlen, die dort vorhanden Fotos und Vektorgrafiken kann man kostenlos verwenden. Ich habe dort selbst einen recht frischen Account -> hier.

Und wer jetzt Hunger bekommen hat, kann hier gerne vorbei schauen: Griechisches Restaurant Leandros in Hamburg-Sasel. Und wer jetzt unbedingt wissen will, welche Version tatsächlich auf der Webseite ist, findet es unter „Aktuell“.

Wer jetzt Fragen an jemand hat, der sich auskennt, hier geht es zu der Webseite: Webseiten-fritz.de

Titelbild: Bild von Bessi auf Pixabay

Einmal mit Profis arbeiten…

Vorab: Es geht hier um kleinere Firmen-Webseiten, nicht um Blogs, Shops usw. mit WordPress.

Ich baue Webseiten. Ich bin alt. Deswegen schreibe ich Webseiten in HTML 5 und CSS, bei Bedarf noch mit Javascript und PHP.

Aber kein WordPress oder ein anderes CMS (Content Management System). Nie und nimmer! Ok, ja, dieser Blog ist in WordPress. Und ich würde auch nie ein Shop-System händisch schreiben. Aber das ist auch nicht mein Geschäftsfeld.

Hinweis: Immer wenn ich in diesem Artikel von der „WordPress“ Seite rede, ist das gesamte System gemeint, also WordPress mit allen teils nützlichen, teils überflüssigen/schlechten/unsicheren Plugins.

Thema Sicherheit

Warum also kein WordPress & Co. für meine Kunden? Weil ich durch die händische Programmierung die Webseiten sicherer machen kann. Ein paar Beispiele aus dem ersten Halbjahr 2022 gefällig? Ich habe hier nur nach WordPress gesucht, andere CMS sind ebenso teilweise unsicher.

Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de
Artikel auf heise.de

Der älteste Artikel ist vom 22.12.2021, den musste ich noch mit reinnehmen. Klar, für alle diese Schwachstellen gab es Bugfixes, aber bis dahin war man in jedem Fall angreifbar.

Wollen Sie sich als Webseiten-Besitzer wirklich täglich um Updates kümmern? Wird das Unternehmen, welches Ihnen Ihre Seite verkauft hat, dies zuverlässig machen? Oder überhaupt machen? Oder Sie auf die Gefahren hinweisen?

Was könnte passieren wenn Ihre Webseite „gehackt“ würde?

  • Der Inhalt kann verändert werden
  • Schadcode kann eingebaut werden, Ihre Webseite wird z.B. zum Verschicken von Spam-Mails missbraucht.
  • Es kann ev. auf Ihre Kundendaten zugegriffen werden.
  • Sie verteilt Schadsoftware. Sie könnten ev. dafür haftbar gemacht werden.
  • Google könnte Ihre Seite als „schädliche Webseite“ aus dem Suchindex nehmen.

Thema Geschwindigkeit

Ein Vergleich zwischen einer zufällig ausgewählten Kundenwebseite eines Mitbewerbers und meiner eigenen Seite. Ich habe diese gewählt, weil sie einen vergleichbaren Umfang hat. Es wird zuerst die Auswertung des WordPress-Kunden, dann meiner eigenen Seite gezeigt. Die ersten zwei Bilder zeigen die Auswertung der Desktop Version.

Performance WordPress-Kunde gemessen mit pagespeed.web.dev
Performance meine Webseite

Die nächsten zwei Bilder zeigen die Auswertung, wie ein Smartphone die Seite sieht. Hier wird berücksichtigt, dass ein Smartphone eine mobile Datenverbindung hat, die deutlich langsamer ist.

Performance Mobilansicht WordPress Kunde mit web.dev/measure gemessen
Performance Mobilansicht meiner Seite

Der Vergleich zeigt deutlich: meine händische Programmierung ist deutlich schneller, obwohl ich auf meiner Seite mehr Inhalt und mehr Bilder habe.

Das liegt aber nur teilweise an der Tatsache, dass es sich um eine WordPress-Seite handelt. Die WordPress Seite hat alleine auf der Startseite im HTML Code 2011 Zeilen, meine Seite insgesamt nur 404 Zeilen, dies bei mehr Inhalt auf meiner Seite. Ich habe auch schon Popel-Seiten mit 40.000 Codezeilen für wenig Inhalt gesehen. Ich weiss aber nicht mehr, welches CMS es war.

Ein großer Faktor, warum diese Seite so langsam ist, ist die stümperhafte Art und Weise, wie Bilder eingebaut werden. Das liegt hauptsächlich an demjenigen, der die Seite erstellt.

Als Beispiel: Die längste Ladezeit hat eine PNG Bilddatei mit 1,6MB. Dann habe ich das Bild auf der Seite gesucht, es muss wohl ein riesiges Hintergrundbild sein. Es war ein 48x48px kleines Portrait Foto. Ich habe mal ein solches von mir in der selben Größe gemacht:

Ich, in 48×48 Pixel

Die Dateigröße: 36kB als JPG, also Faktor 44 kleiner. Selbst als PNG wären es nur 43 kB gewesen.

Wenn es schon ein PNG Bild wegen der Transparenz sein muss, nimmt man doch lieber stattdessen das WebP Format. Es ist erheblich kleiner als JPG und noch erheblicher kleiner als PNG. Wissenswertes über das WebP-Format gibt es hier.

Man sieht also, durch die saubere Programmierung in HTML und CSS werden die Ladezeiten deutlich kürzer. Sie werden also mit Ihrer Seite besser gefunden.

Was sind nun die konkreten Nachteile einer langsamen Webseite?

  • Schlechteres Google Ranking
  • Ihre Besucher sind von der langen Ladezeit genervt
  • Ihre Besucher verlassen die Seite ohne sie gesehen zu haben, laut Untersuchungen spätestens nach 4 Sekunden.
  • Erweckt beim Kunden den Eindruck einer schlechten/billigen Webseite

Qualität des Codes

Zum Abschluss noch etwas zur Codequalität. Nicht nur, dass die WordPress Seite 3x mehr Zeilen hat, so ist sie absolut nicht fehlerfrei. Dies liegt alleine am WordPress Code, der Kunde kann daran nix ändern.

Zahlen? Bitte gerne: WordPress-Kunde hat laut Validator 5 Fehler und 72 Warnungen. Was eventuell zu einer nicht korrekten Darstellung im Browser führen kann. Man weiß es nicht genau.

Meine Seite: 0 Fehler, 0 Warnungen.

Tipp: Gute Webseiten gibt es vom Webseiten-Fritz.

Deine Seite ist bisher ein Witz? Dann geh’ besser zu Webseiten-Fritz!

Friedrich Ganter, Dichter und Denker

© 2022 Fritz’ Blog

Theme von Anders NorénHoch ↑