SEO für Grafiker und Webdesigner

Jeder im Unternehmen sollte “SEO machen”. Doch nicht jeder muss sich mit allen Details beschäftigen. In diesem Teil der Serie “SEO für Nicht-SEOs” nehme ich mir die Arbeit von Grafikern und Webdesignern vor.

seo für webdesigner und grafikerEin heikles Thema! Es gibt ja nur noch wenige Webdesigner, die NICHT auch SEO in ihrem Portfolio stehen haben. Allerdings machen wir immer wieder die Erfahrung, dass dies eher auf Wunsch als auf Können beruht. Damit will ich die Grafiker nicht beschimpfen. Doch es ist nun mal so, dass Suchmaschinenoptimierung so komplex ist, dass man sich den Großteil seiner Arbeitszeit damit beschäftigen muss, um es wirklich zu durchdringen. Ich mache ja auch nicht nebeher Webdesign…

Deshalb hier zunächst einige allgemeine Tipps, die beherzigt werden sollten – und dann die Fehler, die immer wieder auftauchen.

Was ein Webdesigner bitte beachten sollte

Hier nun eine Art Briefing für eine seo-vernünftige Webseite. Ich weiß, dass nicht immer wirklich alles davon umsetzbar ist. Doch das ändert nichts daran, dass es gut für SEO wäre:

  • Alle Formatierungen werden in ein Stylesheet ausgelagert
  • Im Code stehen nur Standard-HTML-Tags (<h1>, <h2>, <li>, <strong> u.s.w.)
  • Es gibt
    eine h1-Headline
    eine h2-Headline
    – mehrere h3-Headlines (Kapitelüberschriften)
    – mehrere h4-Headline (Unterkapitel)
  • Positionierungen erfolgen ausschließlich über <div>
  • Absätze werden mit <p> gekennzeichnet
  • Tabellen werden mit <table> gebaut
  • Bilder werden mit „align“ und den Attributen „height“, „width“, „alt“ und „title“ eingebaut.
  • Inhaltliche Bilder (die zum Content beitragen) werden mit einem „normalen“ Seitenverhältnis eingebaut.
  • Alle anderen Bilder (also Icons, Logos u.s.w.) werden über ein CSS-Sprites positioniert. Wer ein Fleiß-Sternchen von Karl Kratz bekommen möchte, bastelt möglichst viele Grafiken als Base64 im CSS.
  • Videos werden bei YouTube gehostet und über den YouTube-Player eingebaut.
  • Die Navigation innerhalb einer URL kann man über Anchor-Links machen. Auch, wenn die Darstellung über Javascript erfolgt.
  • Diese Meta-Angaben werden für jede URL vorbereitet: Title-Tag, Description-Tag, Keyword-Tag, Robots-Metatag, Canonical-Tag. Alle anderen Meta-Tags kann man verwenden – aber nicht aus SEO-Sicht.
  • Title-Tag, Description und Keyword-Tag können für jede URL unique sein und vom Benutzer manuell befüllt werden. Und wird ein CMS eingesetzt, sollte das auch für die anderen Meta-Tags möglich sein.
  • Social Media Buttons werden datenschutzkonform nach dam 2-Klick-Prinzip eingebaut.
  • Alle wesentlichen Informationen die per Flash oder Javascript zu erreichen sind, werden zusätzlich auch als HTML-Text ausgeliefert.
  • Text ist Text der URL – und Links zeigen davon weg. Damit ist gemeint, dass Teaser am besten vollständig mit dem Linkziel verlinkt werden.
Splash-Seiten wie diese sind zum Glück fast ausgerottet.

Splash-Seiten wie diese sind zum Glück fast ausgerottet.

Was Webdesigner immer wieder falsch machen

Nun, ab in die Designer-Hölle. Wir analysieren echt viele Webseiten und stoßen dabei häufig auf typische Grafiker-Marotten. Also mindestens die Webgrafiker, die „SEO“ in ihren Leistungen stehen haben, sollten diese Fehler nicht mehr machen:

  • Testumgebung bleibt aktiv und ist crawlbar: Ein böser Fehler ist, wenn die Präsentations-Umgebung (also z.B. auf einer Test-Domain oder einer Domain relaunch.domain.de) für den Crawler offen ist (hier bitte mindestens die robots.txt bemühen) und/oder nach dem Launch nicht abgeschaltet wird.
  • Javascript tötet Inhalte & Links: Wird ein relevanter Inhalt oder related Links so auf der Seite platziert, dass sie nur via Javascript (oder nur per Flash, aber das wird immer seltener) erreichbar sind, wird der Crawler sie nicht finden. Bitte: Schalte halt mal dein Javascript aus und surfe über die Seite. ist noch alles da?
  • Inhalte oder Links werden vor dem User versteckt: Der Klassiker! Da befindet der Grafiker, dass die Seite nicht „schön“ genug ist, wenn die Informationen drauf stehen, die der Crawler braucht, um sie zu verstehen. Also werden sie irgendwie so in den Code herein gepfriemelt, dass nur der User sie noch sehen kann. Das hat um die Jahrtausendwende noch gut funktioniert. In der Zwischenzeit ist Google klüger geworden. Außerdem: Der User will eine nützliche Seite und keine „schöne“ Seite….
  • Der Keyword-Metatag wird überbewertet: Da wird den Kunden vorgemacht, dass sie nur ihre Keywords in den Keyword-Tag schreiben müssen – und schon werden sie dafür gefunden.
  • Nach dem Relaunch wird nicht umgeleitet: Vor allem für kleine und mittlere Seiten gilt, dass jede frühere URL auf eine der neuen URLs umgeleitet werden muss. Ebenso sollte man das für die Bilder machen. Bei großen Seiten, nun ja, da fragt ihr ja sicher ohnehin einen SEO um Rat…
  • Nicht verstandener Canonical-Tag: Grundsätzlich sollte jede URL einen Canonical-Tag auf sich selbst haben. Und zwar so, dass mögliche Varianten immer auf die gleiche URL zeigen. Und: DIESE Variante wird intern und in der Navigation immer verlinkt. (Komplexes Thema. Bitte hier nachlesen)
  • Unklarheit bei der mobile Website: Auch mobile Seiten bzw. Responsive Design ist ein eher komplexes Thema. Grundsätzlich könnte man sagen, dass die „große“ Version einer Seite für den Web-Crawler gut ist und die „kleine“ für den Mobile Bot. Ich denke, ich werde das in den nächsten Wochen mal ausführlicher beschreiben…

Das gilt nicht nur für SEO: Schön ist nicht gleich gut

Klingt nicht so kompliziert? Gut! Möglicherweise fällt unseren cleveren Lesern noch der eine oder andere häufige Fehler ein. Das werde ich dann hier nachtragen. Um das aber noch mehr auf sein eigentliches Wesen zu komprimieren, hier ein Mantra, mit dem sich der gute Webdesigner auf seinen Anteil am SEO einstimmen kann:

Wir arbeiten mit möglichst klassischem HTML, verstecken keine Inhalte und halten den Google-Crawler nicht für doof. 

Foto: © alphaspirit – Fotolia.com

GD Star Rating
loading...
SEO für Grafiker und Webdesigner, 4.2 out of 5 based on 18 ratings

Eric Kubitz

Eric Kubitz ist einer der Chefs der CONTENTmanufaktur GmbH . Außerdem ist er Redner auf Konferenzen, Dozent bei Hochschulen, schreibt über SEO (und über andere Dinge) und ist der Chefredakteur des SEO-Book.

More Posts - Website - Twitter - Facebook - LinkedIn - Google Plus

Kommentare (14)

  1. Michael_Ertel

    Hallo Eric,
    was Du hier beschreibst betrifft doch eigentlich keinen Grafiker, oder? Das sind Dinge, die für Frontend-Entwickler gedacht sind. Da führt die Überschrift doch etwas in die Irre.
    Grüße

  2. rockthenet

    Super Beitrag – eine Frage noch zur Definition von Standard HTML-Tags: Sind die HTML5-Tags hier inklusive?

  3. acemace

    Michael_Ertel  
    Dasselbe habe ich mich auch gerade gefragt.

  4. Asokan von linkbird

    Cooler Beitrag! 🙂 Ich weiß noch, wie mein altes Onpage-Team zuweilen am Grafiker verzweifelt ist, weil er partout keinen Sinn für SEO hatte und unsere Vorgaben immer wieder zerschossen hat. Die Frontend-Entwickler waren da aber einsichtiger, auch wenn sie den Nutzen manchmal nicht verstanden. 😉

  5. Pingback: Top 10 der Woche 24/13 « Wochenrückblicke

  6. kleckerlabor

    Ich hätte da mal eine Frage der praktischen Art, H1 tritt bei mir laut seodoctor gleich 12 mal auf, ich bins aber nicht gewesen, obwohl ich in WordPress Seo von Yoast alle felder richtig ausfülle, sagt seodoctor keinen Titel vorhanden, aber immerhin 12xH1 Tag, in meinen Blog gibts es 39 Seiten, 26 Kategorien und 77 Schlagwörter und ein Free WP Theme installiert. Habe schon einiges probiert oder vielleicht auch nur Tomaten auf die Augen aber so langsam fänge ich an an meinen Verstand zu tweifeln vielleicht weiist jemanden wie ich hier abhilfe schaffen köntte

  7. eric108

    kleckerlabor Naja, das liegt weder an Yoast oder an Seodoktor: Irgendwie bastelt da wohl das WP-Theme die vielen H1-Headlines…

  8. kleckerlabor

    eric108 danke dir damit das Trauerspiel einen Ende hat sollte ich mich mit der Gedanken anfreuen kurzfristig einen kostenpflichtiges Theme zu kaufen

  9. Marco ST

    Vielen Dank für diesen tollen Beitrag – hätte allerdings eine kurze Anmerkung zu folgendem Punkt: „Javascript tötet Inhalte & Links“
    Nachdem Google schon in 2008 darauf hingewiesen hat das sie das lesen von Flash und Java „ausprobieren“ – würde ich sagen das sie spätestens nach Einführung von Chrome keine Probleme mehr haben sollten auch diesen Code zu lesen.

  10. eric108

    Marco ST Mmmmmh. Das sehe ich anders. Ich hoffe, dass wir uns über Flash nicht unterhalten müssen – da sieht Google echt kaum was. Bei Javascript würde ich mich aber auch definitiv nicht darauf verlassen, dass der Crawler etwas findet. Dass zwischendurch schon 5 Jahre vergangen sind, ist für mich kein Grund. 
    Uns haben sie schon 1998 ein pfeilschnelles Internet angeboten, wenn man das nächste Modem (19 200 baud) bestellt. Und daraus ist auch nichts flächendeckendes geworden 😉

  11. Pingback: SEO für Nicht-SEOs - Allgemein -SEO Book

  12. Pingback: SEO Auslese Juni 2013 | Online Marketing Agentur (Projecter GmbH)

  13. brittawein

    Hi, das ist eine super Seite. Vielen Dank für die Tips. Ich bin SEO, aber kein Tech-SEO und war gerade auf der Suche nach einer Anleitung für eine Kundin von mir, deren neue Responsive Webseite bald programmiert wird. Es sind seit 2013 ja doch einige Google Updates vergangen. Ich frage mich daher: welche der Dinge, die hier beschrieben sind haben denn noch Gültigkeit, und welche nicht. Hoffe es ist nicht zu umfangreich. Danke Euch für Rückmeldung.

  14. Pingback: http://doorupkeep.com

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *