CSS-Grundwissen für SEO I.
Ein SEO sollte vieles sein: Programmierer, Administrator, Texter, Designer und Marketeer. Es mag da draussen ein Universal-Genie geben, alle anderen müssen sich vor allem in technischen Angelegenheiten damit begnügen zu wissen, dass es funktioniert.
Vor allem Designer haben mit Optimierungen nach meiner Erfahrung oft ein Problem; angeblich geht dieses nicht und jenes sowieso nicht. Daher ist ein wenig CSS-Grundwissen von unschätzbarem Vorteil, denn meist sind dann noch ganz andere Änderungen möglich, wenn der Webdesigner das Gefühlt hat, dass jemand mit Fachwissen gegenüber sitzt.
Ich möchte der Designer-Zunft nicht Unrecht tun, wahrscheinlich sind die 99,99 Prozent der kreativen Webworker kompetente und willige Partner. Trotzdem veröffentliche ich hier einige CSS-Tipps; das Online-Beispiel gibt es unter http://lohas.lovos.me.
- HTML-Tags kann man ganz einfach mittels CSS umstylen, so dass es den optischen Gesamteindruck des Webdesigns nicht stört. Im Beispiel habe ich H3 verkleinert, damit der Inhalt des Tags noch über der eigentlichen Überschrift steht und nicht stört. So Über-Überschriften eignen sich prima, um ohne großes Aufsehen zu erregen die Wunsch-Keys unterzubringen.
- Das “Stylen” von Tags wird bei normalen Designs oft angewandt, nur eben nicht zur Optimierung. Im Beispiel ist der <b>-Tag so überschrieben, dass er zur Pseudo-Überschrift passt. Meist kommen die Wunsch Keys in der Überschrift vor, aber man möchte nicht gleich alle Wörter hervorheben. Das ist also ein Ansatz.Kursiv würde sich im Fließtext wahrscheinlich nicht so gut machen, vor allem wenn LOHAS und LOVOS irgendwann gekippt daher kommen. Aus diesem Grund ist der <i>-Tag retuschiert, also die Kursive überschrieben.
- Probleme gibt es auch immer wieder, wenn die doch recht mächtigen H-Tags in den Fließtext eingebaut werden sollen. Warum, so frage ich mich, denn ein “display: inline” via CSS zugeordnet, schiebt Bedenken wegen der Nutzung zur Seite. Im Beispiel stehen die Worte LOHAS bzw. LOVOS am Zeilenbeginn im Fließtext in <h4>-Tags. Überschriften für die Spider, jedoch nicht für den normalen Browser-Nutzer.Das Wort “Krise” steht übrigens nicht in <h4>-Tag, das habe ich nur mittels CSS optisch angeglichen.
Ein Webdesigner könnte das Beispiel bestimmt sauberer gestalten, mir geht es nur um die grundsätzliche Technik.
Die LOHAS/LOVOS Seite liegt übrigens direkt auf Blogger.Com, nur mit eigener Domain, Favicon (einfach im Code angeben) und retuschierter Navbar. Wenn man im Admin-Bereich von Blogger.Com unter “Layout” / “HTML bearbeiten” sich für die klassische Variante entscheidet, schluckt Blogger.Com - wie im Beispiel - jeden HTML Code.
Wenn Sie eine eigene Meinung dazu haben, schreiben Sie doch einen Kommentar. Oder vielleicht möchten Sie aktuell über neue Beiträge informiert werden, dann abonnieren Sie doch den Feed.
Kommentare
Hi Alin, klaro können das Webdesigner besser; es geht nur darum zu zeigen, was geht, weil (wahrscheinlich nicht nur ich) immer in große Augen des personifizierten Unwillens gucke, wenn ich von einen Web(Design)Worker was in diese Richtung haben möchte. Wenn man sagen kann, wie es im Prinzip funktioniert, “geht” auf einmal einiges mehr ;)
Da kann ich mich Matthias, nur anschließen und wie wir gesehen haben funktioniert, die Theorie ja auch wunderprächtig. Nicht wahr Alin??;))
@ricarda: klar, das Beispiel vom Matthias ist gut und zeigt, wie Du schon sagst, in der Theorie, was alles möglich ist. Aber da liegt oftmals der Hund begraben. Der Webdesigner gestalltet die Templates und oftmals müssen dann diese von einem Programmierer in ein CMS eingebunden werden. Und genau bei diesem Punkt trennt sich dann sehr schnell die Theorie von der Praxis…
Theoretisch kann ich jede Seite mit CSS so hinbiegen wie es gewünscht ist. Aber wenn Redakteuere bequeme über ein CMS das Ganze pflegen sollen, dann wird es haarig. Und dann kommt es eben auf die Kleinigkeiten, Feinheiten und Tricks an.
Ja Leute, Ihr habt alle Recht, alle führ Ihren Teil. Aber Alin´s Kommentar trifft zu 100% zu, auf die Feinheiten kommt es zu guter letzt an, sonst “Kopfschmerz”.
Dies ist ein perfektes Beispiel dafür, dass man gewisse Dinge in Profihände geben sollte. Ich habe selbst einen Artikel über ein ähnliches Thema vor einigen Tagen geschrieben ( http://www.webdesign-frankfurt.eu/blog/verschiedenes/frauen-sind-die-besseren-seos.html ). Man kann nicht alles können ;)
P.S.: Bitte den externen Link “entwerten”, da ich nicht als Spammer gelten möchte ;) )
Es ist schwer den effizienten weg für css zu finden aber wenn man sich eine eigene vorgehensweise eingeprägt hat die funktionert und übersichtlich ist, gibt keine probleme mehr bezüglich änderungen in der zukunft
Ei, ei, ei….
Grundsätzlich hast Du mit Deinem Artikel völlig recht. Mit dem richtigen CSS ist nahezu alles möglich.
Ein paar Verbesserungsvorschläge meinerseits, die Dir vielleicht in Zukunft auch helfen:
1. Das XML Prolog solltest Du weglassen. Das führt nur dazu, dass der IE 6 in den Quirksmode arbeitet. Und dann haut es mit dem CSS auch nicht mehr hin. Vor allem dann wenn ein Projekt in XHTML - Strict umgesetzt werden muss.
2. Du verwendest divs für Text. Hierfür würden sich span Tags eher anbieten. In Deinem Beispiel verwandelst Du ein h4-Block Element in einem Inline Element. Das geht umgekehrt auch ;) Inline Elemente (span, strong, em) können mittels display:block; ähnliche Eigenschaften zugewiesen bekommen wie Block-Elemente (div, h, p, …)
3. b und i sind deprecated. Auch wenn das keine große Relevanz bei SuMas haben wird, sollte man einfach mit der Zeit gehen.
So, genug gemotzt.