WDS10H Lernheft

Das Studienheft und seine Teile sind urheberrechtlich geschützt. Jede Nutzung in anderen als den gesetzlich zugelassenen Fällen ist nicht erlaubt und bedarf der vorherigen schriftlichen Zustimmung des Rechteinhabers. Dies gilt insbesondere für das öffentliche Zugänglich- machen via Internet, Vervielfältigungen und Weitergabe. Zulässig ist das Speichern (und Ausdrucken) des Studienheftes für persönliche Zwecke.

$ WDS10H

Website-Optimierung

0516N01

Simone Zimmermann ©

Falls wir in unseren Studienheften auf Seiten im Internet verweisen, haben wir diese nach sorgfäl- tigen Erwägungen ausgewählt. Auf Inhalt und Gestaltung haben wir jedoch keinen Einfluss. Wir distanzieren uns daher ausdrücklich von diesen Seiten, soweit darin rechtswidrige, insbesondere jugendgefährdende oder verfassungsfeindliche Inhalte zutage treten sollten. © SGD, 16.11.16, Dorn, Hans-Peter (772587)

Website-OptimierungWDS10H

Inhaltsverzeichnis

0516N01

Einleitung ...... 1

1 Barrierefreiheit ...... 3 1.1 Site auf Barrierefreiheit überprüfen ...... 3 1.1.1 BITV-Selbstbewertung für die Website „StruwwelHaar“ ...... 4 1.1.2 Die einzelnen Prüfpunkte der Selbstbewertung ...... 5 1.1.3 Die To-do-Liste ...... 10 1.2 Website barrierefrei optimieren ...... 11 Wiederholungsaufgaben ...... 33

2 Suchmaschinenmarketing ...... 34 2.1 Allgemeines ...... 34 2.1.1 Suchmaschinenwerbung ...... 34 2.1.2 Suchmaschinenoptimierung ...... 35 2.1.3 Zielgruppe ...... 36 2.2 Entwicklung der Suchdienste ...... 37 2.3 Erfassung von Datenbeständen ...... 39 2.3.1 Automatische Erfassung von Datenbeständen ...... 39 2.3.2 Manuelle Erfassung von Datenbeständen ...... 40 2.3.3 Suchanfragen ...... 40 2.4 Suchdienste ...... 46 2.4.1 Suchmaschinen ...... 46 2.4.2 Webkataloge/Verzeichnisse ...... 47 2.4.3 Kombinationen Webkataloge – Suchmaschinen ...... 47 2.4.4 Metasuchmaschinen ...... 47 2.4.5 Preisvergleichsmaschinen ...... 49 2.4.6 Online-Enzyklopädien ...... 49 2.4.7 Personensuchdienste ...... 50 2.4.8 Bewertungsportale ...... 51 2.4.9 Spezialsuchdienste ...... 52 2.5 Bewertungskriterien relevanter Websites ...... 53 2.5.1 Websitebezogene Bewertungskriterien (OnPage-Optimierung) ...... 53 2.5.2 Umfeldbezogene Bewertungskriterien (OffPage-Optimierung) ...... 55 2.6 Überprüfung der Website ...... 57 2.6.1 Title-Tag vorhanden? ...... 57 2.6.2 Enthält Webadresse/URL auch keine Sonderzeichen? ...... 58 2.6.3 Datei „robots.txt“ korrekt? ...... 59 2.6.4 Alle nötigen Meta-Angaben vorhanden und richtig? ...... 60 2.6.5 Schlüsselwörter im Text ...... 61 0516N01

WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)

Inhaltsverzeichnis

2.6.6 Alt-Attribute bei Grafiken vorhanden? ...... 61 2.6.7 Seiteninhalte logisch ausgezeichnet? ...... 62 2.6.8 Keine Inhaltsduplikate? ...... 62 2.6.9 Kein Text als Bild? ...... 63 2.6.10 Gut benannte Links? ...... 63 2.6.11 Keine Cookies nötig? ...... 63 2.6.12 Keine Website-Duplikate? ...... 64 2.6.13 Keine Weiterleitungsseiten? ...... 64 2.6.14 Einsatz von JavaScript, AJAX und Flash wohlüberlegt? ...... 65 2.6.15 Nicht ausschließlich dynamische Seiten verwendet? ...... 65 2.6.16 Site nicht zu oft anmelden ...... 66 2.6.17 Website, die noch im Aufbau ist, nicht anmelden ...... 67 2.7 To-do-Liste ...... 68 2.8 Website für Suchdienste optimieren ...... 68 2.9 Suchmaschinenwerbung ...... 73 Wiederholungsaufgaben ...... 77

3 Styleguide ...... 78 3.1 Layout ...... 78 3.2 Verwendete Schriftarten ...... 79 3.3 Verwendete Farben ...... 79 3.4 Verwendete Grafiken ...... 81 3.5 CSS-Angaben ...... 82 3.6 Dokumentenbenennung/Verzeichnisstruktur ...... 90 3.7 Sitemap ...... 91 3.8 Dokumenttitel ...... 91 3.9 Informationen zur Site-Definition ...... 91 3.10 Meta-Angaben für Suchmaschinen ...... 92

Anhang A. Lösungen zu den Wiederholungsaufgaben ...... 95 B. Literaturverzeichnis ...... 96 C. Sachwortverzeichnis ...... 99 D. Einsendeaufgabe ...... 101

WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)

Einleitung WDS10HWebsite-Optimierung0116N01 Wie schon in früheren WDS-Studienheften, in denen die Website geplant und realisiert wurde, angekündigt, begegnen Sie hier noch einmal der Website „StruwwelHaar“. Die Validität, also die Korrektheit des Quellcodes dieser Website nach den Standards des W3C, wurde im Zuge der Erstellung wiederholt getestet und bestätigt. In diesem Heft geht es also nicht darum, „Fehler“ bei der Erstellung zu korrigieren! Es wurde bisher nichts wissentlich Falsches in den Studienheften vermittelt, was einer didaktischen Grundlage auch völlig widersprechen würde! Vielmehr geht es hier um eine Optimierung der Website nach den Kriterien der Barri- erefreiheit und Suchmaschinenoptimierung. Prinzipiell sollte ein Web-Designer bei der Erstellung einer Website immer darauf achten, dass sie möglichst barrierefrei ist und den Vorgaben für die Suchmaschinenoptimie- rung genügt. Je nach Bedarf und Anforderung des Auftraggebers kann dies jedoch sehr ins Detail gehen und, dementsprechend aufwändig, viel Zeit in Anspruch nehmen. Daher werden diese Bereiche in der Regel bei einer Auftragsvergabe als gesonderte Punkte aufgeführt und in Rechnung gestellt oder alternativ als Folgeaufträge erteilt, wobei eine nachträgliche Überarbeitung meist wesentlich umfangreicher ist. Vielleicht hat Frau Struwwel schon während der Erstellung der Website für ihren Fri- seursalon „StruwwelHaar“ den Auftrag dahingehend erweitert, dass die Site für Such- maschinen optimiert werden soll? Möglicherweise kam der Auftrag aber auch erst nach- träglich als Folgeauftrag? Wie dem auch sei: Ein barrierefreier Webauftritt ermöglicht einer Vielzahl potenzieller Kunden mit verschiedensten technischen Voraussetzungen die Betrachtung und Nut- zung der Website. Eine suchmaschinenoptimierte Website erhöht die Chance einer guten Platzierung ohne laufende Kosten. Sie bietet eine gute, stimmige und übersichtliche Struktur und Infor- mationsdarstellung. Wie dies genau realisiert werden kann, was zu beachten und was zu vermeiden ist, erfahren Sie in den folgenden Kapiteln. Die optimierte Website „StruwwelHaar“ finden Sie unter http://www.struwwelhaar.de

WDS10H 1 © SGD, 16.11.16, Dorn, Hans-Peter (772587)

Einleitung

2 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587) 1

1 Barrierefreiheit

1.1 Site auf Barrierefreiheit überprüfen Sie haben unter anderem im ersten WDS-Studienheft schon einiges zum Thema Barrie- refreiheit erfahren. Die dort bereits erwähnte BITV-Selbstbewertung, zu finden auf der Website des BIK- Projekts (http://www.bitvtest.de), dient im Folgenden als Basis zur Bewertung der Web- site „StruwwelHaar“. Sie ist, im Gegensatz zum umfangreicheren BITV-Test, der bspw. bei BIK-Beratungsstellen in Auftrag gegeben werden kann, kostenfrei.

Tipp: Es gibt eine Liste „90+“ mit Agenturen, die einen Webauftritt erstellt haben, der bei dem BITV-Test mindestens 90 Punkte oder mehr erreicht hat und damit als „gut“ in Bezug auf die Zugänglichkeit bewertet worden ist. Sie können sich als Webagentur oder Freelancer für diese Liste bewerben, wenn Sie einen Webauftritt realisiert haben und dieser bei einem abschließenden BITV-Test 90 Punkte oder mehr erzielt hat. Zur Anmeldung müssen Sie ein Anfrageformular ausfüllen und abschicken. Für den abschließenden BITV-Test ist eine Gebühr ab 567,- Euro (Stand Oktober 2015) fällig. Ausführliche Informationen zum abschließenden BITV-Test finden Sie unter  http://www.bitvtest.de/bitvtest/bitv_test_beauftragen/infos_preise/ preise_abschliessend.html. In der Rubrik „Infothek“ können Sie sich einen Eindruck der bewerteten Websites der Liste verschaffen, sowie deren Prüfberichte lesen.

Ob die Selbstbewertung für die Überprüfung einer Website ausreicht oder doch lieber ein BITV-Test in Auftrag gegeben werden sollte, hängt von verschiedenen Faktoren ab. Zum einen ist es wichtig, ob die Website für einen öffentlichen Träger gemacht wurde. Bundesbehörden bspw. sind seit dem Jahr 2005 verpflichtet, ihre Internetauftritte barrierefrei zu gestalten. Es muss also mit dem Kunden abgeklärt werden, wie wichtig ihm ein Nachweis der Zu- gänglichkeit ist und wie detailliert der Test auf Zugänglichkeit demzufolge sein muss. Bietet ein Kunde z. B. eine Dienstleistung für Menschen mit körperlichen Beeinträchti- gungen an (etwa ein Optiker), dann spielt eine sehr gute Zugänglichkeit seiner Website für seine Zielgruppe und damit für den Erfolg seiner Website eine entscheidende Rolle. Ein BITV-Test dient hier ggf. als „Gütesiegel“. Zum anderen ist es eine Frage der Kosten; der BITV-Test kostet Geld, die BITV-Selbstbe- wertung nicht.

WDS10H 3 © SGD, 16.11.16, Dorn, Hans-Peter (772587)

1 Barrierefreiheit

Dafür ist die Selbstbewertung naturgemäß subjektiver als eine Bewertung „von außen“. Eine eigene Arbeit zu bewerten, fällt immer schwerer, da der Abstand fehlt und die Ge- fahr der Betriebsblindheit vorhanden ist. Immerhin hat man die Website selbst entwickelt und schon zigmal gesehen, sodass einem Kritikpunkte vielleicht einfach nicht mehr auffallen. Außerdem spielt die Erfahrung eine große Rolle. Hat man bereits einige Websites entwickelt und das Thema „Barrierefreiheit“ ernst genommen, weiß man in groben Zügen, worauf man sein Augenmerk besonders richten muss. Will man den BITV-Test auch als Nachweis der Qualität und Professionalität der eigenen Arbeit sehen und verstehen, dann ist es vielleicht sinnvoll, einen BITV-Test in Auftrag zu geben. Aber man sollte die Bewertungskriterien nicht unterschätzen! Nicht alles ist, selbst mit der ausführlicheren Beschreibung des jeweiligen Prüfpunkts, ohne weiteres sofort nach- vollziehbar. Wir werden nun nach bestem Wissen und Gewissen die Selbstbewertung durchführen, um zumindest eine gute Zugänglichkeit der Website zu erreichen.

1.1.1 BITV-Selbstbewertung für die Website „StruwwelHaar“ Zunächst wird unter http://testen.bitv-test.de/selbstbewertung/ ein Benutzerkonto mit E-Mail-Adresse und Passwort angelegt. Nach dem Erhalt der Anmeldebestätigung per E-Mail und der Aktivierung des Kontos über den entsprechenden Verweis in der E-Mail wird ein neuer Test angelegt. Titel Projekt StruwwelHaar URL http://www.struwwelhaar.de Nun zu den einzelnen Prüfpunkten: Die eigene Bewertung kann mit „erfüllt“, „eher erfüllt“, „teilweise erfüllt“, „eher nicht er- füllt“, „nicht erfüllt“ und „nicht anwendbar“ (wenn der zu bewertende Prüfpunkt auf der Website nicht vorhanden ist) angegeben werden (Abb. 1.1).

Abb. 1.1: BITV-Selbstbewertung: Bewertung/Punktevergabe

4 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)

Barrierefreiheit 1

Die negativen Punktzahlen in Klammern werden abhängig von der Wichtigkeit des jeweiligen Prüfpunkts angegeben, variieren also. Ist man bei einem Prüfpunkt unsicher oder versteht die Anforderungen nicht, kann man diesen anklicken und erhält in einem neuen Fenster eine genauere Beschreibung. Alle Prüfpunkte, die im Moment noch nicht erfüllt oder nur teilweise erfüllt sind und verbessert werden können, werden hier von uns auf einer To-do-Liste schriftlich festge- halten; nach Beendigung der Selbstbewertung wird die Website entsprechend optimiert.

1.1.2 Die einzelnen Prüfpunkte der Selbstbewertung 1.1 Für jeden Nicht-Text-Inhalt sind Alternativen in Textform bereitzustellen, die an die Bedürfnisse der Nutzerinnen und Nutzer angepasst werden können. 1.1.1a Alternativtexte für Bedienelemente  nicht anwendbar (nicht vorhanden) 1.1.1b Alternativtexte für Grafiken und Objekte  erfüllt 1.1.1c Leere alt-Attribute für Layoutgrafiken Hoppla! Hier wird es schon schwieriger (bei Punkt 3 von 52, das kann ja heiter werden!). Sind die benutzten Bilder nun Dekoration oder informativ? Es gibt sicherlich Grafiken, bei denen diese Frage leichter zu beantworten ist. Wenn in eine Seite bspw. ein Bild eines Balkendiagramms eingebunden ist, um bei einer Wahl die Verteilung der Stimmen auf die einzelnen Parteien darzustel- len, ist dieser Inhalt sehr informativ. Hier ist es wichtig, das alt-Attribut zu nutzen, außerdem das title-Attribut und vielleicht noch eine genauere Beschrei- bung in einer separaten Datei (longdesc). In der Beschreibung zu diesem Prüfpunkt steht: „Eine Grafik, die keine infor- mative Funktion hat, benötigt keinen Alternativtext. Grafiken ohne informati- ve Funktion sind zum Beispiel Abstandshalter, Farbflächen, Muster oder rein dekorative Fotos. Solche Grafiken sollen mit einem leeren alt-Attribut (alt="") ausgezeichnet werden“. Wir haben zum einen Bilder, die in diesem Sinne einen informativen Inhalt haben, dort sind die alt-Attribute vorhanden und gerechtfertigt (Bilderbereich im Hauptteil). Zum anderen haben wir aber auch Grafiken, die als Abstandshalter dienen (auf der Teamseite) und deshalb leere alt-Attribute haben sollten. Die Grafiken, die mittels CSS-Datei eingebunden werden, bleiben unberück- sichtigt, da sie nicht direkt in der HTML-Datei verlinkt sind, sondern über die CSS-Datei eingebunden werden und deshalb keinen alt-Text haben.

WDS10H 5 © SGD, 16.11.16, Dorn, Hans-Peter (772587)

1 Barrierefreiheit

Es müssen also die alt-Texte der Abstandshalter entfernt werden. Der erste Punkt für die To-do-Liste.  nicht erfüllt 1.1.1d Alternativtexte für CAPTCHAs  nicht anwendbar (nicht vorhanden) 1.2 Für zeitgesteuerte Medien sind Alternativen bereitzustellen. 1.2.1a Alternativen für Audiodateien und stumme Videos  nicht anwendbar (nicht vorhanden) 1.2.2a Videos mit Untertiteln  nicht anwendbar (nicht vorhanden) 1.2.3a Audiodeskription für Videos  nicht anwendbar (nicht vorhanden) 1.3 Inhalte sind so zu gestalten, dass sie ohne Informations- oder Strukturver- lust in unterschiedlicher Weise präsentiert werden können. 1.3.1a HTML-Strukturelemente für Überschriften Die Überschriften sind nicht aussagekräftig genug, ein Punkt für die To-do- Liste.  teilweise erfüllt 1.3.1b HTML-Strukturelemente für Listen  erfüllt 1.3.1c HTML-Strukturelemente für Zitate  nicht anwendbar 1.3.1d Inhalte gegliedert Hervorhebung von Begriffen innerhalb eines Textes mit den logischen Aus- zeichnungen und kann verbessert werden, also To-do-Liste.  teilweise erfüllt 1.3.1e Datentabellen richtig aufgebaut Da es sich um eine einfache Tabelle handelt, ist die Struktur nicht grundlegend falsch, kann aber noch verbessert werden. Also ebenfalls auf die To-do-Liste.  teilweise erfüllt 1.3.1 f. Zuordnung von Tabellenzellen  nicht anwendbar (nicht vorhanden) 1.3.1g Kein Strukturmarkup für Layouttabellen  nicht anwendbar (nicht vorhanden) 1.3.2a Layouttabellen linearisierbar  nicht anwendbar (nicht vorhanden)

6 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)

Barrierefreiheit 1

1.3.2b Sinnvolle Reihenfolge Bei ausgeschaltetem/deaktiviertem Stylesheet wird die Überschrift des Infobe- reichs vor der des Hauptbereichs angezeigt. Das hängt mit der Reihenfolge der Divs zusammen. Außerdem wird zuerst der Infobereich angezeigt und erst danach der Hauptbereich. Da der Hauptbereich aber wichtiger ist, sollte er oben stehen, die Struktur der Website muss also geändert werden. Ein Fall für die To-do-Liste.  nicht erfüllt 1.3.3a Ohne Bezug auf sensorische Merkmale nutzbar  erfüllt 1.4 Nutzerinnen und Nutzern ist die Wahrnehmung des Inhalts und die Un- terscheidung zwischen Vorder- und Hintergrund so weit wie möglich zu erleichtern. 1.4.2a Ton abschaltbar  nicht anwendbar (nicht vorhanden) 1.4.3a Kontraste von Texten ausreichend Zur Überprüfung wurde der numerische Wert des Helligkeitsunterschieds, wie in der Beschreibung dieses Prüfpunkts angeraten, ebenfalls mittels Colour Contrast Analyser ermittelt (die Farbangabe des verwendeten „Orange“ ist uns ja bekannt, #C60). Der Kontrast zwischen der schwarzen Schrift des Kopf- bereichs und dem orangefarbenen Hintergrund hat einen Wert von 5,5 : 1, ist also ausreichend.  erfüllt

Tipp: Um nachträgliche Änderungen der Kontraste bzw. der Farben zu vermeiden, sollte man schon bei der Planung des Layouts einer Website ein Au- genmerk auf die verwendeten Farben und auf ausreichende Kontraste haben.

1.4.3b Kontraste von Grafiken ausreichend Erfüllt, da es sich hier größtenteils um Fotos handelt und diese ausgenommen sind. Der Kontrast zwischen Schrift und Hintergrund der Animation ist jedoch mit einem Wert von lediglich 1,5 : 1 eigentlich nicht ausreichend. Diese Farbangabe kann man mit dem empfohlenen Colour Contrast Analyser, Ver- sion 2.2, ermitteln. Logos sind von der Prüfung jedoch ausgeschlossen und dazu zählen wir die Animation. Der Name „StruwwelHaar“ wird auf der Website wiederholt genannt, ist also in der Animation nicht zwingend notwendig. Man hätte jedoch auch in der PNG-Datei der Animation den Farbwert ändern können, um einen ausreichenden Kontrast zu erhalten.  erfüllt 1.4.3c Inhalte bei benutzerdefinierten Farben erkennbar  erfüllt

WDS10H 7 © SGD, 16.11.16, Dorn, Hans-Peter (772587)

1 Barrierefreiheit

1.4.4a Schriftgröße variabel  erfüllt 1.4.4b Zoom auf 200 % benutzbar Im IE und Firefox gemäß der Beschreibung zu diesem Prüfpunkt getestet.  erfüllt 1.4.5a Verzicht auf Schriftgrafiken Da Logos hier ausgenommen sind und die Animation als eine Art Logo lediglich „nett anzusehen“ sein soll, sehen wir diesen Punkt als erfüllt an.  erfüllt 2.1 Für die gesamte Funktionalität ist Zugänglichkeit über die Tastatur  sicherzustellen. 2.1.1a Ohne Maus nutzbar  erfüllt 2.2 Den Nutzerinnen und Nutzern ist ausreichend Zeit zu geben, um Inhalte zu lesen und zu verwenden. 2.2.1a Zeitbegrenzungen anpassbar  erfüllt 2.2.2a Bewegte Inhalte abschaltbar Die Animation dauert nicht länger als 5 Sekunden.  erfüllt 2.3 Inhalte sind so zu gestalten, dass keine epileptischen Anfälle ausgelöst werden. 2.3.1a Verzicht auf Flackern  erfüllt 2.4 Der Nutzerin oder dem Nutzer sind Orientierungs- und Navigationshilfen sowie Hilfen zum Auffinden von Inhalten zur Verfügung zu stellen. 2.4.1a Inhaltsbereiche strukturiert  erfüllt 2.4.2a Sinnvolle Dokumenttitel Könnte noch verbessert werden, also To-do-Liste.  teilweise erfüllt 2.4.3a Schlüssige Reihenfolge bei der Tastaturbedienung  erfüllt 2.4.4a Aussagekräftige Linktexte  erfüllt

Barrierefreiheit 1

2.4.4b Links informieren über Dateiformat  nicht anwendbar (nicht vorhanden) 2.4.5a Alternative Zugangswege Im Moment gibt es nur die Navigation. In der ausführlichen Beschreibung zum Prüfpunkt heißt es zwar: „Bei kleinen Angeboten mit nur wenigen Seiten, die alle von der Startseite verlinkt sind, gilt diese gleichzeitig als Sitemap, sofern auf allen Unterseiten des Angebotes deutlich ein Link auf die Startseite angeboten wird.“, eine zusätzli- che Sitemap ist aber trotzdem sinnvoll, als ein „To-do“-Punkt.  nicht erfüllt 2.4.6a Title-Attribut für Symbole  nicht anwendbar (nicht vorhanden) 2.4.7a Aktuelle Position des Fokus deutlich Es gibt keine besondere Hervorhebung außer den Standardhervorhebungen der Browser. Punkt für die To-do-Liste.  nicht erfüllt 2.4.8a Position im Webauftritt deutlich  erfüllt 2.4.8b Zweck der Alternativversion einleuchtend  nicht anwendbar (nicht vorhanden) 3.1 Texte sind lesbar und verständlich zu gestalten. 3.1.1a Hauptsprache angegeben  erfüllt 3.1.2a Anderssprachige Abschnitte ausgezeichnet  nicht anwendbar (nicht vorhanden) 3.1.2b Anderssprachige Wörter ausgezeichnet Begriffe wie „Website“ tauchen auf, müssen aber laut Beschreibung dieses Prüfpunkts nicht unbedingt ausgezeichnet werden. Andere Begriffe sind jedoch auszuzeichnen, damit Screenreader „wissen“, wie sie diese aussprechen müssen. Ein weiterer Punkt für die To-do-Liste!  nicht erfüllt 3.2 Webseiten sind so zu gestalten, dass Aufbau und Benutzung vorhersehbar sind. 3.2.1a Kein Öffnen neuer Fenster beim Laden der Seite  erfüllt

1 Barrierefreiheit

3.2.2a Keine unerwartete Kontextänderung bei Eingabe  erfüllt 3.2.3a Navigation einheitlich Die Animation, die unser Logo darstellen soll, verweist nicht auf die Startseite, also nur fast erfüllt – To-do-Liste!  eher erfüllt 3.3 Zur Fehlervermeidung und -korrektur sind unterstützende Funktionen für die Eingabe bereitzustellen. 3.3.1a Fehlermeldungen hilfreich  nicht anwendbar (nicht vorhanden) 3.3.2a Formularfelder richtig beschriftet  erfüllt 3.3.4a Fehlervermeidung wird unterstützt Auf der Website werden keine Online-Bestellvorgänge oder andere finanzielle Transaktionen durchgeführt.  nicht anwendbar (nicht vorhanden) 4.1 Die Kompatibilität mit Benutzeragenten, einschließlich assistiver Techno- logien, ist sicherzustellen. 4.1.1a Valides HTML  erfüllt 4.1.1b Verzicht auf veraltete Elemente und Attribute  erfüllt 4.1.2a Name und Rolle von Bedienelementen verfügbar  erfüllt Im Moment sind es 13,75 Punktabzüge bei einer erreichten Gesamtpunktzahl von 86,25 Punkten. Die Website „StruwwelHaar“ ist nach den Angaben der Selbstbewertung als „eingeschränkt zugänglich“ zu bewerten. Na, da geht aber noch was!

1.1.3 Die To-do-Liste Unsere To-do-Liste sieht folgendermaßen aus: 1.1.1c Leere alt-Attribute für Layoutgrafiken Es müssen bei den Grafiken auf der Teamseite, die als Abstandshalter dienen, die alt-Texte entfernt werden. 1.3.1a HTML-Strukturelemente für Überschriften Die Überschriften sind nicht aussagekräftig genug. Bessere Benennungen und Anordnungen sind nötig.

Barrierefreiheit 1

1.3.1d Inhalte gegliedert Korrekter Einsatz des - und des -Tags zur Hervorhebung von Textteilen/Wörtern. 1.3.1e Datentabellen richtig aufgebaut Die Tabellenstruktur ist zu überdenken und ggf. zu verfeinern. 1.3.2b Sinnvolle Reihenfolge Bei ausgeschaltetem/deaktiviertem Stylesheet wird die Überschrift des Infobe- reichs vor der des Hauptbereichs angezeigt. Das hängt mit der Reihenfolge der Divs zusammen. Außerdem wird zuerst der Infobereich angezeigt und erst danach der Hauptbereich. Da der Hauptbereich aber wichtiger ist, sollte er oben stehen, die Struktur der Website muss also geändert werden. 2.4.2a Sinnvolle Dokumenttitel Der Dokumenttitel enthält zwei Bestandteile: eine immer gleiche, allgemeine Bezeichnung des Webauftritts und eine unterscheidende, individuelle Bezeich- nung der jeweiligen Seite. 2.4.5a Alternative Zugangswege Eine Sitemap ist zu erstellen und einzufügen. 2.4.7a Aktuelle Position des Fokus deutlich Bei der Tastaturnutzung sollte der Fokus deutlicher gemacht werden. 3.1.2b Anderssprachige Wörter ausgezeichnet Eine Liste der zu ändernden Begriffe ist zu erstellen und der Quellcode entsprechend zu ändern. 3.2.3a Navigation einheitlich Das Logo/die Animation muss noch mit der Startseite verknüpft werden.

1.2 Website barrierefrei optimieren Nun werden die Bereiche der Website, die zu Punktabzügen geführt haben, überarbeitet. Dazu nehmen wir uns die To-do-Liste Punkt für Punkt vor und führen die Änderungen an den entsprechenden Dateien in Dreamweaver durch. 1.1.1c Leere alt-Attribute für Layoutgrafiken Es müssen bei den Grafiken auf der Teamseite, die als Abstandshalter dienen, die alt- Texte entfernt werden. Dieser Punkt lässt sich einfach lösen, indem bei Dreamweaver über die Funktion „Su- chen und ersetzen“ auf der Team-Seite (Aktuelles Dokument) nach „alt="Abstandhal- ter"“ gesucht und durch „alt=""“ ersetzt wird. Es handelt sich um insgesamt 8 Grafiken. 1.3.1a HTML-Strukturelemente für Überschriften Die Überschriften sind nicht aussagekräftig genug. Bessere Benennungen und Anord- nungen sind nötig.

1 Barrierefreiheit

Um zu kontrollieren, wie sinnvoll die Struktur und Benennung der Überschriften ist, wird, wie empfohlen, die AIS Web Accessibility Toolbar für den Internet Explorer genutzt. Um diese zu installieren, können Sie sie bspw. von der Seite http://www.webforall.info (Suchbegriff „AIS“ in das Suchfeld eingeben) herunterladen und installieren. Über die Funktion „Struktur – Überschriftenstruktur“ können Sie sich in einem neuen Fenster die Überschriftenstruktur der aktuellen Seite anzeigen lassen. Für die „index.html“ sieht die Struktur etwas ernüchternd aus (Abb. 1.2):

Abb. 1.2: Überschriftenstruktur der „index.html“

Die Struktur der anderen Seiten ist im Großen und Ganzen ebenfalls nicht sehr aussa- gekräftig. Hier sollte sich etwas ändern. Zunächst bearbeiten wir jedoch Punkt 1.3.2b, der ebenfalls mit der Struktur der Inhalte und deren sinnvoller Reihenfolge zusammenhängt, bevor die Überschriften optimiert werden. 1.3.2b Sinnvolle Reihenfolge Die Überschrift des Infobereichs wird vor der des Hauptbereichs angezeigt. Das hängt mit der Reihenfolge der Divs zusammen. Bei ausgeschaltetem Stylesheet wird ebenfalls zuerst der Infobereich angezeigt und erst danach der Hauptbereich. Da der Hauptbereich aber wichtiger ist, sollte er oben stehen, die Struktur der Website muss also geändert werden. Die Divs #info und #bilder werden dementsprechend verschoben.

Barrierefreiheit 1

Die alte Reihenfolge war:

…

…

…

…

…

Die Änderung der Reihenfolge der Divs wirkt sich auf das Erscheinungsbild aus, das entsprechend angepasst werden muss. Zunächst wird die Reihenfolge geändert, dann werden die Anpassungen gemacht. Achten Sie beim Verschieben der Divs besonders darauf alle dazugehörigen Codeteile mit zu verschieben, dies gilt besonders für die jeweils schließenden Div-Tags! Die neue Reihenfolge ist nun:

…

…

…

…

…

Hinweis: Denken Sie bei kontakt.html daran, dass die Seite ein weiteres Div class="formular" beinhaltet und dementsprechend ein zusätzliches schließendes Div-Tag!
WDS10H 13 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
Wie man sieht, haben sich lediglich die Divs im Div #haupt in der Positionierung ver- ändert. Allerdings hat das weiterreichende Auswirkungen auf die Darstellung der Sei- ten, das Layout scheint im Moment „zerschlagen“. Mit einigen wenigen Änderungen innerhalb der CSS-Datei „passt“ dann aber alles wieder! Zunächst muss jedoch die neue Reihenfolge für alle HTML-Dateien der Website von Hand vorgenommen werden. Das ist zugegebenermaßen ein wenig kniffelig und fehler- anfällig, aber mit etwas Konzentration relativ zügig zu schaffen. Als Nächstes geht es zu den zu ändernden CSS-Angaben. Das Div #inhalt erhält die Angabe float: left, beim Div #info wird die float-Angabe von right auf left geändert. Außerdem werden einige Angaben zum Innen- und Außenabstand und zur Breite angepasst, um ein stimmiges Bild zu erhalten. Wenn Sie den alten mit dem neuen CSS- Code vergleichen, sehen Sie die Unterschiede. Im Div #inhalt bspw. wurden die Innenabstände angepasst und der Außenabstand da- für ganz beseitigt. Im Div #info kommt dafür ein Außenabstand hinzu. Das Div #bilder erhält einen Innenabstand. Im Div #inhalt soll es zwischen Text und Div ebenfalls einen Innenabstand geben, damit der Text nicht zu dicht an die umliegen- den Divs „heranfließt“.
#inhalt { width: 415px; float: left; color: #000; background-color: #FFC; background-image: url(../bilder/bg_inhalt.jpg); background-repeat: repeat-x; background-position: bottom right; padding: 30px 20px 30px 20px; margin: 0; line-height: 1.3em; }
#bilder { width: 120px; float: left; padding: 30px 10px 40px 15px; margin: 0; }
#info { width: 150px; float: left; font-size: 85%; background-color: #CCC; background-image: url(../bilder/bg_info.jpg); background-repeat: repeat-x; background-position: bottom right; margin: 0px 0px 0px 20px; padding: 30px 15px 30px 15px; }
14 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
Die Angaben für die CSS-Datei müssen zum Glück nur einmal gemacht werden und sind, dank Auslagerung in eine externe CSS-Datei, für alle Dateien gültig. Die strukturellen Änderungen innerhalb der HTML-Dateien müssen jedoch leider von Hand vorgenommen werden. Das bedeutet zwar ein wenig Fleißarbeit, so macht man sich aber auch mit dem Quellcode und der Struktur vertraut und wird sicherer in deren Umgang. Und da die Website „StruwwelHaar“ eine überschaubare Anzahl von Seiten aufweist, halten sich die Änderungen zeitlich im Rahmen. Prinzipiell sollte man sich jedoch schon bei der Planung Gedanken über die strukturelle Anordnung machen, dann ist diese Art nachträglicher Änderungen überflüssig. Denken Sie daran, alle Dateien zu ändern, so auch die „kontaktiert.html“! Bei der Überprüfung und Anpassung der Seiten fällt auf, dass sich in der Team-Seite die Darstellung der Liste geändert hat, sie wird nun eingerückt dargestellt, die Standardan- zeige von Listen im Browser. Um die Liste wieder ohne Einrückung anzuzeigen, wird folgende CSS-Angabe ergänzt:
#inhalt ul { margin: 0; padding-left: 0; } Zur Überprüfung der Änderungen wird die Vorschau in den Browsern IE und Firefox genutzt sowie die Validatoren des W3C, um sicherzugehen, dass sich keine Fehler ein- geschlichen haben. Schaltet man nun das Stylesheet aus, zeigt sich der Inhalt der HTML-Dateien in der logisch korrekten Reihenfolge (Abb. 1.3):
WDS10H 15 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
Abb. 1.3: index.html-Datei ohne CSS-Formatierungen
Zurück zu Prüfschritt 1.3.1a – HTML-Strukturelemente für Überschriften! Jetzt können die Überschriften sinnvoll geändert werden. Allerdings sollte hier ebenfalls im ersten Schritt die Struktur überdacht werden. Betrachtet man sich die Datei „index.html“ ohne CSS-Anweisungen, fällt auf, dass der Name „StruwwelHaar“, der als Wichtigster ganz oben steht, am kleinsten ist. Er sollte eigentlich als größte Überschrift eine
-Anweisung erhalten. Dementsprechend würde die Überschrift im Hauptbereich (zurzeit noch „Hallo…“) eine
-Auszeichnung erhalten, die zweite Überschrift („Wir möchten Sie herzlich…“) eine
. Im Infobereich sollte die Überschrift ebenfalls die Zuordnung
erhalten.
16 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
Diese Strukturierung testen wir nun.
Tipp: In Dreamweaver gibt es die Möglichkeit, Entwurfsphasen-Stylesheets zu nutzen. In der Symbolleiste „Stilwiedergabe“ (über Menü „Ansicht – Symbolleisten“ aufrufbar) gibt das letzte Icon rechts die Möglichkeit, ein Entwurfphasen-Stylesheet auszusu- chen und hinzuzufügen. So kann etwa die aktuelle CSS-Datei ausgewählt, unter einem anderen Namen ge- speichert und über die Entwurfsphasen-Stylesheets als „während der Entwurfsphase angezeigt“ ausgewählt werden. Vorteil: Man überschreibt nicht das bestehende Sty- lesheet, sondern kann die Veränderungen während des Entwurfs in Dreamweaver testen. Außerdem muss man dieses Stylesheet nicht mit der HTML-Datei verknüp- fen. Nachteil: Man sieht die Veränderungen nur in Dreamweaver, nicht in der Brow- servorschau. Da manchmal die Dreamweaver-Ansicht „Entwurf“ jedoch nicht alle Angaben einwandfrei so anzeigt wie im Browser, kann es hier zu ärgerlichen „Falschdarstellungen“ kommen.
Also muss von Hand getüftelt werden, welche Angaben des Divs #kopf_name für das
-Tag im Kopf übernommen werden können/müssen und welche nicht. Außerdem spielen die anderen in der CSS-Datei definierten Stilangaben für
ebenfalls eine Rolle. Um sich eine Übersicht zu verschaffen, werden zunächst alle Überschriften-CSS-Defini- tionen innerhalb der CSS-Datei gesucht. In diesem Zusammenhang kann man auch schon einmal anfangen, die CSS-Datei aus- zukommentieren, was die Pflege und den Überblick sehr erleichtert. Dies sollte man am besten schon von Anfang an machen, für die externe CSS-Datei der Website „StruwwelHaar“ wird die Ordnung und Kommentierung in Kapitel 3 „Stylegui- de“ vorgenommen. Danach erhält der Name „StruwwelHaar“ im Kopfbereich ein umschließendes
- Tag.
StruwwelHaar
Nun sieht der Name leider ganz anders aus als vorher, grau und fett und zu groß. Jetzt beginnt die Handarbeit! Zunächst wird eine CSS-Definition namens #kopf_name h1 für die Darstellung von
-Tags im Kopf-Div erstellt. Danach werden alle Angaben des Divs #kopf, die die Anzeige der Schrift betreffen könnten, Stück für Stück in die neue CSS-Definition verschoben, um zu sehen, welche davon Veränderungen hervorrufen. Als Nächstes werden die Angaben der anderen CSS-Definitionen, die Formatierungen für
festlegen, ebenfalls überprüft und ggf. übernommen.
WDS10H 17 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
Um zu erkennen, welche Angaben Veränderungen des
-Tags im Kopfbereich aus- lösen, kann man entweder diese jeweils einzeln kurzzeitig in der CSS-Datei mit Kom- mentaren deaktivieren oder, was einfacher und schneller geht, man nutzt das „Web De- veloper Tool“ im Browser Firefox. Über die Funktion „CSS (Keine CSS-Fehler) – CSS bearbeiten“ (Abb. 1.4) kann man sich die CSS-Definitionen ansehen und sie verändern.
Abb. 1.4: Funktion „CSS bearbeiten“ im „Web Developer Tool“ von Firefox
Eine Änderung der Angaben, das Hinzufügen oder Entfernen ganzer Stildefinitionen oder auch nur von Attributen und Werten wird sofort angezeigt und hilft dabei zu erkennen, welche Angaben was bewirken (Abb. 1.5):
Abb. 1.5: Funktion „Edit CSS“ – Anzeige der externen CSS-Datei links
18 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
Seien Sie übrigens nicht überrascht, in diesem Ansichtsmodus werden mittels CSS ein- gebundene Grafiken lokaler Dateien nicht angezeigt. Die Änderungen, die hier gemacht werden, sind nur temporär, sie werden nicht gespei- chert, verändern also nicht wirklich die CSS-Datei. Diese Option ist zwar auch vorhanden, sollte aber zugunsten von Änderungen in Dre- amweaver nicht genutzt werden, weil sie weiteren eigenen Code in die Dateien einfügt. Die drei Angaben für den Kopfbereich sehen nun wie folgt aus:
#kopf { background: #C60; background-image: url(../bilder/banner.jpg); background-repeat: no-repeat; min-height: 65px; margin: 0px; text-align: right; overflow: hidden; }
#kopf_name { padding: 25px 10px 0px 0px; }
#kopf_name h1 { color: #000; font-weight: normal; font-size: 250%; letter-spacing: 5px; margin: 0px; } Hat man alle Angaben dahingehend verändert, dass der Name wieder in etwa die frü- here Erscheinungsform angenommen hat, fügt man in alle anderen Dateien das
- Tag ebenfalls in den Kopf ein. Dazu markiert man bspw. in der Codeansicht den Namen „StruwwelHaar“ und klickt im Bedienfeld „Einfügen“ – Registerkarte „Text“ auf das Icon
. Auf diese Art wird um das markierte Wort herum das einleitende und schließende
-Tag eingefügt. Nun hat jede Seite den Namen „StruwwelHaar“ als
-Überschrift. Die anderen Überschriften werden ebenfalls in jeder HTML-Datei jeweils um einen Ordnungsschritt nach unten gesetzt. Am einfachsten geht dies, wenn in der Entwurfsansicht die entsprechende Überschrift markiert und dieser über den Eigenschafteninspektor über „Format“ das entsprechende Überschriften-Tag zugewiesen wird (Abb. 1.6). So wird sichergestellt, dass die Tags ersetzt und nicht einfach ergänzt werden.
WDS10H 19 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
Abb. 1.6: Überschriften über den Eigenschafteninspektor zuweisen
In der „index.html“ wird die bisherige
-Überschrift „Hallo…“ im Inhaltsbereich zu einer
-Überschrift. Die bisherigen
-Überschriften „Wir möchten Sie herzlich…“ im Inhaltsbereich und „Aktuelles“ im Infobereich werden zu
-Überschriften. Die CSS-Angaben in der CSS-Datei müssen natürlich auch dementsprechend umbe- nannt werden, von „h1“ in „h2“ (natürlich außer der h1-Definition von #kopf_name) und von „h2“ in „h3“ (die Überschriften unter #info nicht vergessen!). Jetzt sieht man sehr schnell, ob alle die
-Überschrift betreffenden Angaben korrekt übernommen worden sind oder es sonstige Probleme in der Darstellung gibt. Wurde nämlich bspw. eine Angabe übersehen, verändert sich das Aussehen des Namens „StruwwelHaar“ im #kopf-Div. In diesem Fall heißt es erneut überprüfen und ergänzen. Die CSS-Angaben für h3 im Infobereich (#info h3) werden ebenfalls verändert.
#info h3 { font-size: 120%; margin: 20px 0px -5px 0px; } Außerdem fallen die gemeinsamen Angaben für h1, h2 weg (da h1 insgesamt wegfällt, außer im Kopfbereich), die Informationen werden in die jeweiligen Definitionen für h2 und h3 integriert.
h2 { font-size: 120%; color: #333; margin: 0em 0em 0.4em 0em; }
20 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
h3 { font-size: 110%; color: #666; margin: 0em 0em 1.5em 0em; } Sie sehen, es fällt einem immer wieder etwas Neues auf, was man verändern und ver- bessern kann. So, als letzten Schritt müssen „nur“ noch die Überschriften selbst aussagekräftiger benannt werden (die eigentliche Aufgabe dieses Prüfpunkts). Um dies gezielt tun zu können, lassen wir uns im IE wieder über die Funktion „Struktur – Überschriftenstruktur“ nacheinander die Überschriftenstruktur der einzelnen Seiten anzeigen und ändern sie sinnvoll. (Schön an dieser Funktion ist u. a., dass sie auch den Titel anzeigt. So kann man gleich mit überprüfen, ob dieser angegeben ist und stimmt.) Hier die neuen Überschriftentexte der einzelnen Seiten: index.html
StruwwelHaar

Friseursalon StruwwelHaar stellt sich vor …

Herzlich willkommen auf unserer Website!

Neues aus dem Salon
produkte.html
StruwwelHaar

Produkte, die wir empfehlen und verwenden …

Nur das Beste für Ihr Haar!

Hersteller
preise.html
StruwwelHaar

Unsere Leistungen und Preise …

Was kostet die Schönheit?

Aktionen

Angebot
team.html
StruwwelHaar

Unser Team stellt sich vor …

Gemeinsam möchten wir Sie verwöhnen!
events.html
StruwwelHaar

Unser aktuelles Event …

Haare schneiden nach dem Mondkalender!

Termine
WDS10H 21 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
kontakt.html
StruwwelHaar

Der Kontakt zu uns …

Sie möchten gerne mit uns in Verbindung treten?

Was geschieht mit Ihren Angaben?
kontaktiert.html
StruwwelHaar

Kontakt …

Ihre Mitteilung wurde an uns übermittelt!

Kontaktaufnahme
impressum.html
StruwwelHaar

Ein Impressum muss sein …

Geschäftsangaben des Friseursalon StruwwelHaar

Fakten
1.3.1d Inhalte strukturieren Das -Tag wurde bereits für das Motto auf der Startseite eingesetzt. Für die drei Produktserien „GoodHair“, „BioColor“ und „Struwwelig“, die auf der Pro- dukte-Seite genannt werden, bietet sich logischerweise das -Tag zur Auszeich- nung an. Hier wird jeweils Preisliste Anwendungen Preise Schneiden, Waschen, Fönen (kurze Haare) … Damit das Aussehen der Tabellenüberschrift innerhalb des -Tags definiert wird, definieren wir in der CSS-Datei Formatierungen für dieses Tag. caption { font-weight: bold; text-align: left; padding-left: 3px; } Außerdem wird eine Fußzeile eingefügt, die den Stand der Preise angibt. Um als stimmigen Abschluss der Tabelle auch in dieser Zeile einen grauen Hintergrund zu erhalten, erhält das -Tag die entsprechende Klasse.
Stand 1/2013 In der CSS-Datei bekommt der Text der Fußzeile jeweils eine Angabe zur Textgröße und zum linken Innenabstand.
.td_fuss { font-size: 75%; padding-left: 3px; } In diesem Zusammenhang wird die Tabelle noch etwas verbreitert. Dazu wird in der Klasse „.right“ die Breite geändert.
.right { text-align: right; padding: 0.3em 0.1em 0.3em 0.1em; width: 150px; } Die kleine Tabelle ist nun genauer strukturiert und dürfte den Prüfpunkt erfüllen. 2.4.2a Sinnvolle Dokumenttitel
WDS10H 23 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
Der Dokumenttitel enthält zwei Bestandteile: eine immer gleiche, allgemeine Bezeich- nung des Webauftritts und eine unterscheidende, individuelle Bezeichnung der jeweiligen Seite.
Dateien Titel der Dateien Home Willkommen [Friseursalon StruwwelHaar in Hauptstadt] Produkte Produktserien [Friseursalon StruwwelHaar in Hauptstadt] Preise Preise [Friseursalon StruwwelHaar in Hauptstadt] Team Team [Friseursalon StruwwelHaar in Hauptstadt] Events Events [Friseursalon StruwwelHaar in Hauptstadt] Kontakt Kontakt [Friseursalon StruwwelHaar in Hauptstadt] Impressum Impressum [Friseursalon StruwwelHaar in Hauptstadt]
Tipp: Nicht vergessen, zwischenzeitlich immer mal wieder zu testen, ob der Quellcode noch valide ist!
2.4.5a Alternative Zugangswege Eine Sitemap dient zum einen der Orientierung und einem guten Überblick über die an- gebotenen Inhalte. Wenn es auf einer Website keine Suche-Funktion gibt, sollte auf jeden Fall immer eine Sitemap zur Verfügung gestellt werden. Zum anderen hilft eine Sitemap einem Suchmaschinen-Crawler, die Website zu indizieren, da er deren Links folgen kann. Dies wird deshalb auch von Suchmaschinen positiv bewertet. Es wird also eine Sitemap in der Navigation nach „Impressum“ eingefügt. Am einfachsten geht es, wenn eine schon vorhandene Datei (bspw. die Teamseite) unter dem neuen Namen „sitemap.html“ abgespeichert wird. Die Navigation kann etwa über die Funktion „Suchen und ersetzen“ schnell erweitert werden. Vergessen Sie hierbei nicht, • den Navigationspunkt „Sitemap“ auf allen Seiten einzufügen, • die „aktuelle“ Verlinkung auf der Sitemap-Seite selbst anzupassen, • den Titel der Seite zu ändern (Sitemap [Friseursalon StruwwelHaar in Haupt- stadt]), • zu überprüfen, ob die Sitemap alle bisher genannten Anforderungen der Barriere- freiheit erfüllt. • die folgenden Überschriften einzufügen und entsprechend auszuzeichnen:
Die Sitemap unseres Webauftritts …

Hier finden Sie eine Auflistung aller Seiten!
Für alle Seiten außer der index.html und sitemap.html wird folgender Code eingefügt:
24 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
…
>Sitemap
Für die index.html lautet der Code:
…
Sitemap
und für die sitemap.html:
…
Sitemap
Die Sitemap hat (zur Veranschaulichung schon an dieser Stelle als Abb. 1.7 zu sehen) zu- nächst folgendes Erscheinungsbild:
Abb. 1.7: Die eingefügte „sitemap.html“
Die einzelnen Punkte werden mittels einer ungeordneten Liste eingefügt. Um die Auf- zählungszeichen ein wenig passender zur Website zu gestalten, wird die Grafik der Ab- standshalter benutzt, die schon für die Team-Seite verwendet worden ist (trenner.png). In die Sitemap werden die Grafiken der Aufzählungszeichen dann jeweils direkt hinter die Listenpunkte gesetzt. Als Alternativtext wird nichts angegeben, das alt-Tag also leer eingefügt.
WDS10H 25 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
…
Home
… Die Unterseiten werden über eine weitere Liste integriert, achten Sie hierbei auf die korrekte Verschachtelung:

…

…
…
Diese Unterseiten erhalten jeweils zwei Grafiken hintereinander (Sie könnten aber auch eine zweite Grafik mit zwei Trennern erstellen und diese einbinden).
…
GoodHair
… Als Bild im linken Bereich wurde das Bild der Startseite gewählt, man kann jedoch selbstverständlich auch ein neues gestalten und einfügen. Um die Ansicht der Sitemap-Punkte besser handhaben zu können, wird zunächst der In- halt des Hauptbereichs (wie bei kontakt.html für das Formular) in ein eigenes Div namens #sitemap gepackt.
…

Die Sitemap unseres Webauftritts …

Hier finden Sie eine Auflistung aller Seiten!

…

… In der CSS-Datei werden dann zum einen Angaben zum Erscheinungsbild der Links gemacht:
#sitemap a:link, #sitemap a:visited { color: #900;
26 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
text-decoration: none; border-bottom: thin dotted #C60; }
#sitemap a:focus, #sitemap a:hover, #sitemap a:active { color: #900; text-decoration: none; background-color: #E9E9E9; } Zum anderen wird eine Klasse .li_abstand eingetragen, die den Unterseiten einen gleichmäßigen Einzug gibt:
.li_abstand { margin-bottom: -2em; line-height: 3em !important; text-indent: 1.7em; } Der eingefügte Quellcode für eine Auflistung der Seiten sieht dementsprechend folgen- dermaßen aus:

Home

Produkte

GoodHair

Struwwelig

Preise

Team

Events

Kontakt

Impressum

Sitemap
WDS10H 27 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit

Die beiden Unterseiten der Produktseite wurden zwar in die Sitemap aufgenommen, weil dies korrekt ist, da sie aber Teil einer Einsendeaufgabe waren, wurden sie nicht in die Website eingefügt. Bei umfangreicheren Websites ist die Sitemap natürlich auch entsprechend größer, bei einer so kleinen Website wie unserer gibt es jedoch nicht viele Seiten und die Sitemap bleibt sehr übersichtlich. 2.4.7a Aktuelle Position des Fokus deutlich Um den Fokus bei der Tastaturnutzung zu verdeutlichen, werden die gleichen Effekte eingefügt wie bei a:hover mit der Maus. Da der Internet Explorer a:focus als a:active interpretiert, ist es für eine einheitliche Dar- stellung im Internet Explorer und Firefox wichtig, außerdem a:active zu definieren mit den gleichen Eigenschaften wie a:focus. Hier ist außerdem die Reihenfolge der Angaben zu beachten (link, visited, focus,  hover, active), um eine korrekte Darstellung der Zustände zu erreichen. Für die Navigation bedeutet dies:
#navlist a:link.aktuell, #navlist a:visited.aktuell, #navlist a:focus, #navlist a:hover #navlist a:active { border-bottom: 3px solid #C60; padding-bottom: 2px; color: #FFF; }
Mit diesen Angaben wird sichergestellt, dass sowohl im Internet Explorer als auch im Firefox in der Navigation der Unterstrich korrekt beim Überfahren mit der Maus, beim Anklicken und bei der Aktivierung mit der Tastatur erscheint. Die Darstellung von Verweisen im Hauptbereich wird wie folgt abgeändert:
#haupt a:link { color: #cc6600; text-decoration: none; border-bottom: thin dotted #990000; }
#haupt a:visited { color: #900; text-decoration: none; border-bottom: thin dotted #C60; }
#haupt a:focus, #haupt a:hover,
28 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
#haupt a:active { color: #900; text-decoration: none; background-color: #E9E9E9; } Diese Angaben sorgen dafür, dass sowohl im Internet Explorer als auch im Firefox im Hauptbereich bei vorkommenden Verweisen beim Überfahren mit der Maus, beim An- klicken und bei der Aktivierung mit der Tastatur zur besseren Orientierung ein hellgrau- er Hintergrund erscheint. 3.1.2b Anderssprachige Wörter ausgezeichnet Es folgt eine Liste der zu ändernden Begriffe (in Klammern steht, ob der Begriff ausgezeichnet werden muss oder kann), die mittels xml:lang="" Angabe eine Sprachaus- zeichnung erhalten. Bei diesen Wörtern handelt es sich um englische Begriffe, also en. • Website (kann) Website • Team (kann) Team • Events (muss) Events • GoodHair (muss) GoodHair • Light (muss) Light • Medium (muss) Medium • Strong (muss) Strong • Beautiful Look (muss) Beautiful Look • Sitemap (muss) Sitemap
Achtung:
Innerhalb des Quellcodes , sowie des title-Tags … und des Attributs title im img-Tag darf kein -Tag eingefügt werden!
WDS10H 29 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
3.2.3a Navigation einheitlich Das Logo wird mit der Startseite verknüpft. Dazu wird zunächst innerhalb einer Datei das Logo mit der Startseite verknüpft und dies dann über die Funktion „Suchen und ersetzen“ für alle anderen Dateien innerhalb des Ordners „Dateien“ ergänzt.
Abb. 1.8: Logo mit der „index.html“ verknüpfen
Da in diesem Ordner auch die Datei liegt, in der Sie die Verknüpfung bereits eingefügt haben, wird diese nun ggf. doppelt eingefügt. In diesem Fall entfernen Sie die doppelt eingefügte Verlinkung einfach wieder aus dem Quellcode. Jetzt wird um das Logo jedoch ein Rahmen angezeigt und eine gepunktete Linie als Zei- chen einer Verknüpfung. Der Rahmen wird über eine CSS-Definition entfernt, die man im Definitionsfenster angibt, indem man in der Entwurfsansicht die Animation anklickt und dann „neue CSS- Regel“ auswählt:
#info img { border-style: none; } Die gepunktete Linie wird entfernt, indem eine neue Klasse definiert wird, die ausdrück- lich die Anzeige der Linie als Zeichen eines Verweises unterdrückt.
.a_img { text-decoration: none; border-bottom: none !important; }
Die Angabe !important sorgt explizit dafür, dass alle anderen Angaben zur Darstel- lung des unteren Rahmens eines Verweises überschrieben werden, die Angabe innerhalb dieser Klasse also die höchste Priorität erhält. Verknüpft wird die Klasse mit dem -Tag der Animation, die auf die „index.html“ (die Startseite) verweist.
30 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
Nun ist die To-do-Liste abgearbeitet und einige sinnvolle Änderungen wurden vorgenommen. Ein abschließender Test der Dateien auf Validität, sowie der korrekten Darstellung in den wichtigsten Browsern rundet die Überarbeitung ab. Gemäß der Selbstbewertung (alle Angaben wurden nach bestem Wissen und Gewissen gemacht) ist die Website „StruwwelHaar“ nun mit 100 Punkten als „sehr gut zugänglich“ bewertet. An diesem Punkt noch einmal zurück zum Erscheinungsbild der Website. Im Zuge der Prüfung des Kontrasts ist aufgefallen, dass der Hintergrund im Infobereich je nach Länge des Textes unterschiedlich dunkel erscheint. Dieser Effekt wurde ja eigentlich auch bewusst eingesetzt. Da die Inhalte jedoch bei einer gleichbleibenden Gesamtlänge der jeweiligen Seiten sehr unterschiedlich lang sind, wirkt der Hintergrund uneinheitlich. Oder anders ausgedrückt: Es wird nicht klar, warum der Hintergrund des Infobereichs auf verschiedenen Seiten der Website unterschiedlich aussieht, obwohl die Seiten selbst gleich lang sind. Also entscheiden wir uns kurzerhand doch noch um und wählen die, im Studienheft WDS09H erläuterte, alternative Methode, mittels eines Hintergrundbildes farbige Berei- che zu simulieren. Hierzu werden zum einen die Hintergrundbilder und Hintergrundfarben der Divs #inhalt und #info entfernt (Sie können die Angaben auch sicherheitshalber zunächst in der CSS-Datei jeweils innerhalb eines Kommentars setzen und damit ausblenden). Zum anderen wird dem Div #gesamt das Hintergrundbild „bg_gesamt.png“ hinzuge- fügt.
Hinweis: Sie finden die Grafik zum Download auf der Online-Lernplattform im heftbezoge- nen Downloadbereich.
Vor dem Einfügen wird die Grafik zuvor in Fireworks leicht verändert, der linke Bereich wird weiß und nicht mehr beigefarben, der rechte Bereich bleibt grau, sowie einige An- gaben zur Positionierung und dem Wiederholungsverhalten:
#gesamt { width: 800px; border: 1px solid #000; margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; padding: 0px; background-image: url(../bilder/bg_gesamt.png); background-repeat: repeat-y; background-position: top right; }
WDS10H 31 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
Außerdem wird das Browserfenster selbst noch grau eingefärbt:
body { font-family: Arial, Helvetica, sans-serif; font-size: small; background-color: #CCC; color: #000; border: 0px; margin: 0px; padding: 0px; } Diese Methode der Darstellung farbiger Bereiche ist jedoch nicht für alle Layouts anwendbar. Man kann bei gefloateten Divs auch mit einem linken oder rechten Rahmen arbeiten, der so breit wie die gewünschte Spalte ist, eine Hintergrundfarbe erhält und durch das Floating, hinter der entsprechenden Spalte angeordnet, wie deren Hintergrundfarbe wirkt. Ausführliche Informationen und Beispiele finden Sie bspw. unter  http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#schritt-fuer-schritt
Zusammenfassung
Es gibt nach wie vor viele Kunden, die den Sinn einer Optimierung ihrer Website nach den Richtlinien der Barrierefreiheit als nicht so wichtig erachten. Häufigstes Argument ist hier, dass man kaum Menschen mit körperlichen Beeinträchtigungen zu seinem Kun- denstamm zähle. Nach dem Durcharbeiten diesem Kapitel sollten Sie nun gute Gegenargumente finden können. Nicht nur die Erkenntnis, dass Barrierefreiheit primär eine gute Zugänglichkeit der Website für alle gewährleistet (die korrekte Wiedergabe der Inhalte sollte also nicht ab- hängig sein von den technischen Voraussetzungen der Betrachter), spricht dafür. Auch die Tatsache, dass eine Optimierung gemäß den oben genannten Prüfpunkten die Website in ihrer Struktur und Informationsdarstellung verbessert, wirkt sich auf jede Zielgruppe positiv aus. Die bisher vorgenommenen Anpassungen bilden außerdem eine gute Basis für den nächsten Schritt, die Suchmaschinenoptimierung, die in Kapitel 2 durchgeführt wird.
32 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Barrierefreiheit 1
Wiederholungsaufgaben
1.1 Wann bleiben alt-Attribute bei Grafiken leer? 1.2 Warum und wie sollen anderssprachige Wörter in einem Text ausgezeichnet werden? 1.3 Warum ist eine sinnvolle Anordnung und Auszeichnung von Überschriften sinnvoll? 1.4 Eine Sitemap ist wichtig, weil…?
WDS10H 33 © SGD, 16.11.16, Dorn, Hans-Peter (772587) 2
2 Suchmaschinenmarketing
Prinzipiell erfüllt eine gut durchdachte und gestaltete Website, die die Standards zur Barrierefreiheit einhält, bereits die meisten Voraussetzungen, um in Suchma- schinen gut gelistet zu werden. Beinhaltet der Auftrag explizit auch den Bereich des Suchmaschinenmarketing, ist es jedoch notwendig, besonders genau zu überprüfen, wo eventuell noch Ver- besserungen/Anpassungen vorzunehmen sind (Suchmaschinenoptimierung) und welche Werbemaßnahmen ggf. zum Einsatz kommen sollen (Suchmaschinenwer- bung). Wie gut und passend eine Website bei einer Suche positioniert wird, hängt von verschiedenen Faktoren ab. Die wichtigsten davon werden in diesem Kapitel the- matisiert und die Website „StruwwelHaar“ an den Stellen optimiert, an denen es nötig ist.
2.1 Allgemeines Suchmaschinenmarketing (Search Engine Marketing, SEM) ist ein Teilgebiet des Online-Marketing und umfasst alle Werbe-Maßnahmen zur Gewinnung von Be- suchern für eine Webpräsenz über Websuchmaschinen. (Quelle: Wikipedia, http://de.wikipedia.org/wiki/Suchmaschinenmarketing, Januar 2015)
Ziel des Suchmaschinenmarketing ist es, nicht nur in und von Suchmaschinen gefunden zu werden, sondern auch eine sehr gute Platzierung im oberen Bereich des Suchmaschi- nenranking der Suchergebnisse zu erhalten. Dafür werden verschiedene Maßnahmen ergriffen, die man in zwei Hauptbereiche einteilen kann: Suchmaschinenwerbung und Suchmaschinenoptimierung.
2.1.1 Suchmaschinenwerbung Suchmaschinenwerbung, meist mit SEA (engl. Search Engine Advertising) oder manchmal auch synonym mit SEM bezeichnet, beschreibt den Bereich der kostenpflichtigen (Be-)Werbung der Website. Dabei handelt es sich in der Regel um gekaufte Werbeanzeigen bzw. Werbeeinblendun- gen. Das Budget, das man auszugeben bereit ist, entscheidet über die Häufigkeit der Ein- blendungen, ebenso die definierten Suchbegriffe, anhand derer die Website gefunden bzw. die Anzeige eingeblendet werden soll. Das Ziel, bei einer Suchanfrage mit Begriffen, die auf die Website zutreffen, auf den obersten Plätzen zu erscheinen und so die Chance zu erhöhen, dass Suchende die Web- site besuchen, wird hier erkauft. Das klingt erst einmal gut und einfach, mit genügend Kapital kann man sich jeden Platz kaufen. Allerdings nutzt die beste Platzierung wenig, wenn der Suchende auf der Web- site nicht die Informationen findet, die er eigentlich sucht oder diese so schlecht aufbereitet sind, dass die Website für ihn unbefriedigend ist.
34 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Je nach Inhalt der Website ist es aus Sicht des Auftraggebers der Website wünschens- wert, auch andere, neue Kunden zu gewinnen, die nicht bewusst gesucht haben. Hier ziehen in der Regel werbetechnische Maßnahmen. Werbung allgemein will Interesse wecken an einem Produkt, von dem man bisher noch gar nicht wusste, dass man es nicht hat, aber unbedingt braucht. In Suchmaschinen suchen dagegen setzt voraus, dass man zumindest eine Ahnung davon hat, was man vermisst (sucht), aber unbedingt benötigt (finden will). Die meisten Internetnutzer verwenden Suchmaschinen, um Interessantes zu finden. Neue Websites werden im Internet meist aufgrund von Suchanfragen gefunden und nicht durch Werbung. Also muss der Web-Designer alles tun, damit die Website gefunden wird, und zwar möglichst weit vorne in der Trefferliste und möglichst ohne unnö- tige Kosten. Neben den klassischen Formen der Werbung mittels Radio, Fernsehen oder Printmedien gibt es im Internet z. B. die Formen der platzierten Anzeigenschaltung oder Bannerwer- bung. Besonders die gezielte Anzeigenschaltung hat mittlerweile auch bei Suchmaschinen Einzug gehalten, ist jedoch, wie meist bei Werbemaßnahmen, nicht kostenfrei. Werbung kostet Geld! Ein Eintrag in Suchmaschinen hingegen, zumindest was den Basiseintrag betrifft, nicht.
2.1.2 Suchmaschinenoptimierung Suchmaschinenoptimierung, oft mit SEO (engl. Search Engine Optimization) abge- kürzt, steht für die Anpassung und Optimierung einer Website an Vorgaben und Krite- rien, die Suchmaschinen zur Indizierung von Websites ansetzen. Die Optimierung für Suchmaschinen wird häufig in zwei Aufgabenbereiche eingeteilt, die OnPage-Optimierung und die OffPage-Optimierung. Die OnPage-Optimierung (siehe Abschnitt 2.5.1) beinhaltet alle strukturellen und inhaltlichen Anpassungen der Website, auf die man Zugriff hat und die man entsprechend ändern kann. Hier kann man direkt Einfluss nehmen und bspw. Texte, Benennungen, Verweise u.v.m so bearbeiten, dass sie von Suchmaschinen gut bewertet und gelistet werden. Bei der OffPage- Optimierung (siehe Abschnitt 2.5.2) hingegen geht es nicht um Maßnahmen direkt „an“ der Website, sondern in deren Umfeld. Dabei handelt es sich bspw. um den Aufbau qualitativ hochwertiger Verweisstrukturen zwischen der eigenen Website und gut bewerteten, für die eigene Website bzw. deren Themenbereich relevanten fremden Websites. Ziel ist es auch hier bei einer Suchanfrage auf den obersten Plätzen zu erscheinen.  Allerdings wird die Platzierung nicht gekauft, sondern die Website dahingehend optimiert, dass potentielle Interessenten und Besucher der Website diese schnell finden. Aber warum muss eine Website überhaupt für eine Suchmaschine angepasst werden, sie soll doch primär die Zielgruppe ansprechen? Gegenfrage: Wie wollen Sie dieser Zielgruppe mitteilen, dass es hier eine Website gibt, die genau das beinhaltet, was sie sucht? Was ist das Ziel einer Website?
WDS10H 35 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Eine Frage, die sehr einfach klingt, es jedoch verdient, sich dazu ein paar Gedanken zu machen. Für den Web-Designer stehen meist zwei Aspekte im Vordergrund: 1. Wie gestalte ich eine Website, damit der Auftraggeber (aber auch ich als Web-Desi- gner mit einem gewissen Anspruch an meine Arbeit) mit dem Layout zufrieden ist? 2. Wie schaffe ich es, alle Inhalte, die der Auftraggeber in der Regel vorgibt, in dieses Layout zu integrieren und leicht zugänglich zu machen? Der Mensch ist ein visuelles Wesen, eine schön gestaltete Website spricht ihn an (und, seien wir ehrlich, schmeichelt dem Ego des Web-Designers). Der erste Eindruck entscheidet häufig schon, ob man einer Website (und damit auch dem Unternehmen bzw. Inhaber der Website) Professionalität ansieht und zutraut oder nicht. Wenn die Zielgruppe jedoch auf einer wunderbar gestalteten Website die erhofften/ge- wünschten Inhalte nicht findet, nutzt auch die schönste Gestaltung nichts. Sie wird weitersuchen nach einer Website, die ihr den Informationszugewinn bringt, nach dem sie sucht. Allerdings kann auch eine Website, die alle von der Zielgruppe gesuchten Informationen beinhaltet, erfolglos bleiben, wenn sie es nicht schafft, diese Informationen ansprechend, übersichtlich und logisch strukturiert zu präsentieren. Oder wenn sie einfach im Verborgenen bleibt, weil sie nicht gefunden wird. Es gilt also, einen Weg zu finden, die optische Gestaltung mit der inhaltlichen in ein größtmögliches, effektives Gleichgewicht zu bringen. Im Lauf der Zeit werden Sie die meisten der Optimierungspunkte so weit verinnerlichen, dass Sie sie schon während der Planung und Umsetzung in Ihre Arbeit einbeziehen. Die nachträgliche Optimierung wird dann entsprechend geringer ausfallen. Dies ist sicherlich in Ihrem Sinne, denn von Anfang an bestimmte Aspekte zu berücksichtigen, ist einfacher und weniger zeitaufwendig, als am Ende eines Projekts noch einmal „Hand anlegen“ und bereits fertiggestellte Dateien erneut bearbeiten zu müssen.
2.1.3 Zielgruppe Dass die Definition der (potenziellen) Zielgruppe hier eine wichtige Rolle spielt, haben Sie in den vorangegangenen Studienheften erfahren. Sicher gibt es in der Praxis Auftraggeber, die bereits über einen festen Kundenstamm, also über eine klar definierte Zielgruppe, verfügen und dieser mit einer Website lediglich eine neue Informationsplattform schaffen wollen. Dies wäre bspw. der Fall, wenn ich als Tutorin den Studierenden eines Studiengangs Lernmaterial, Übungsdateien, etc. zum Download auf einer Website zur Verfügung stellen wollte. In diesem Fall ist meine Zielgruppe klar definiert und mein Ziel ist es, die Website als Informationsplattform zu nutzen. Ich will keine neuen Kunden ansprechen, sondern einfach einen Mehrwert schaffen für die bereits vorhandene „Klientel“. In diesem Fall würde ich die Website aber auch nicht über Suchmaschinen veröffentlichen. Vielmehr würde ich die Adresse der Website nur einer bestimmten, klar definierten Gruppe mitteilen und damit zugänglich machen.
36 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Auf einer solchen Website müssen dann auch nicht unbedingt allgemeine Informationen zu dem Studiengang stehen, da diese Informationen schon bekannt sind. Will ich jedoch auch Interessenten ansprechen, die noch keinen Studiengang belegt haben, sich jedoch für die Informationen der Website interessieren, ist mein Ziel also zu- sätzlich die Akquise von Neukunden, werde ich mehr Informationen anbieten und diese gegebenenfalls auch anders strukturieren und präsentieren. In diesem Fall werde ich versuchen, die Website einer möglichst breiten Masse zugänglich zu machen und sie auch bei Suchmaschinen anzumelden. Eine Suchmaschine ist eigentlich nur ein Hilfsmittel für die Suchenden, um schnell die Website zu finden, die die gesuchten Informationen beinhaltet. Suchmaschinenoptimierung ist demzufolge im eigentlichen Sinn nicht auf die Suchma- schinen, sondern auf die Suchenden ausgerichtet. Eine für Suchmaschinen optimierte Website hat das primäre Ziel, ihre Inhalte/Informa- tionen so gut zu präsentieren, dass sie von allen gefunden werden kann, die sich für diese Informationen interessieren. Der Web-Designer will eine Website also dahingehend optimieren, dass sie eine gute Platzierung in den Suchmaschinen erhält, in der Trefferliste möglichst weit oben gelistet wird. Die für den Suchenden passenden Websites sollen also schnell auffindbar sein. Werfen wir einen kurzen Blick auf die Sichtweise der Suchenden. Der Suchende (die potenzielle Zielgruppe) will mittels einer Suchmaschine Websites mit Informationen finden, von denen er zumindest im Ansatz weiß. Frei nach dem Motto: „Ich kann nichts suchen, von dessen Existenz ich gar keine Ahnung habe.“ Außer, er stößt zufällig darauf, dann hat er aber nicht bewusst gesucht. Oder die Website wird über Werbung bekannt gemacht! Suchmaschinenoptimierung bedeutet also im Grunde, alles zu tun, um von der potenziellen Zielgruppe gefunden zu werden. Suchmaschinenwerbung bedeutet darüber hinaus, Interesse zu wecken und neue Zielgruppen zu erschließen.
2.2 Entwicklung der Suchdienste „Do you Yahooooo…“ oder googeln Sie lieber? Die ersten Suchmaschinen wurden, parallel zur Entwicklung des Internet, Anfang der 1990er-Jahre entwickelt. Da sich die Masse an Informationen im Internet rasant vergrö- ßerte, wurde es immer wichtiger, Instrumente/Programme zu entwickeln, um diese In- formationen zu finden, zu ordnen und bereitzustellen. Die bekanntesten Programme waren Archie, Gopher und Veronica. Archie durchsuchte alle bekannten FTP-Server. Dabei wurden zunächst lediglich die Namen der gefundenen Dateien in einer Daten- bank abgelegt/indiziert. Da eine solche Suche ausschließlich über Dateinamen keine op- timalen Suchergebnisse bringen konnte, entwickelte man die Suche in den Inhalten der Dateien (Volltextsuche). Dies geschah mittels eines speziellen Datenbanksystems
WDS10H 37 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
(WAIS). Weltweit verteilte Server stellten ihre Informationen zur Verfügung. Gezielt in Datenbeständen gesucht werden konnte jedoch nur auf den entsprechenden Servern, nicht serverübergreifend. Deshalb wurde eine Art übergeordnetes Verzeichnis erstellt, in dem man suchen konnte, auf welchen Servern relevante Infos lagen. Wurde man fün- dig, konnte man dann gezielt auf dem entsprechenden Server weitersuchen. Gopher dagegen strukturierte und katalogisierte alle auf den beteiligten Servern vor- handenen Daten über Verzeichnisse, die allgemein zugänglich zur Verfügung gestellt wurden. Bei einer Suche musste man nicht, wie bei Archie, erst den passenden Server finden, um dann auf ihn zu wechseln und dort weiterzusuchen. Die Server waren über die Verzeichnisse bereits miteinander verknüpft. In der Regel suchte man jedoch auf speziellen bekannten Servern nach bestimmten Informationen. Mit Veronica konnte man dann in allen Gopher-Verzeichnissen nach Datenbeständen suchen, ohne Themeneinschränkung. Das kurz danach entwickelte World Wide Web (WWW), das heute oft synonym für das Internet steht, jedoch im eigentlichen Sinne nur ein Dienstprogramm darstellt, wurde ursprünglich entwickelt, um Informationen im Internet leichter bereitzustellen und zu finden. Durch Hypertext, hauptsächlich durch die Möglichkeit der Verlinkung, sollten sich die Informationen besser miteinander verknüpfen lassen. Dadurch stieg die Informationsmenge zwar quantitativ enorm an, inwieweit die Dateien jedoch auch qualitativ, zumindest bezüglich der Strukturierung und sinnvollen Gliede- rung der Informationen, besser auffindbar wurden, hing allein von den „Erstellern“ der Dateien ab. Die ersten automatisierten Suchmaschinen, die selbstständig das WWW durchkämm- ten, wurden anfangs entwickelt, um lediglich die frei verfügbaren Webserver zu zählen. Dadurch sollte das Wachstum des Webs ermittelt werden. Schnell wurden sie dahingehend weiterentwickelt, außerdem die Adressen der Websites zu speichern und somit eine Suche direkt nach den Adressen von Websites bzw. später auch nach kompletten Texten zu ermöglichen. WebCrawler zählte hier zu einer der ersten Suchmaschinen dieser Art. Suchmaschinen wie bspw. Lycos, Altavista und Infoseek folgten. Während in den folgenden Jahren immer mehr Suchmaschinen entwickelt und eingesetzt wurden, entfernte sich die Entwicklung dann aber im Lauf der Zeit von einer immer größeren Auswahl und Konkurrenz an Suchmaschinen und legte den Fokus auf einige wenige relevante Suchmaschinen, allen voran Google, die erstmals Ende der 1990er-Jahre kommerziell eingesetzt wurden. In den vergangenen Jahren zeichnete sich jedoch bereits ein Trend ab, verstärkt alternative Suchmaschinen in sogenannten „Nischen“, also in bestimmten Themenbereichen zu etablieren. Nach wie vor ist aber Google mit einem Marktanteil von ca. 89,2 % Marktführer, gefolgt von bing.com (Microsoft) mit ca. 4,3 %, Yahoo mit 2,0 % sowie T-Online mit ca. 1,7 % . Die restlichen Prozente teilen sich Suchmaschinen wie AOL, ask.com, gmx.net, u. v. m. (Quelle: http://www.webhits.de, Web-Barometer, Stand Oktober 2015.)
38 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Google hat seine Popularität und Marktführung mittlerweile so weit ausgebaut, dass sowohl der Name „Google“ als auch das Verb „googeln“ in die 23. Ausgabe des Dudens aufgenommen worden sind.
2.3 Erfassung von Datenbeständen Um eine Website indizieren zu können, muss sie entdeckt, ihr Inhalt analysiert und in einer bestimmten Form so abgelegt werden, dass eine schnelle Zuordnung bei einer relevanten Suchanfrage möglich ist. Die Unterschiede bei der Erfassung von Datenbeständen bestehen hier größtenteils in den verschiedenen Techniken der Datenerfassung und Datenaufbereitung. Obwohl permanent weltweit Websites gefunden und indiziert werden, wächst die Da- tenmenge im WWW so schnell, dass bei Weitem nicht jedes online zur Verfügung ge- stellte Dokument zeitnah entdeckt und aufgelistet werden kann.
2.3.1 Automatische Erfassung von Datenbeständen Wie werden Websites indiziert? Suchmaschinen nutzen sogenannte Robots (häufig auch als Spider, Crawler oder Soft- Bots bezeichnet), die sich „wie Spinnen“ durchs Netz bewegen und nach zu indizierenden Websites suchen. Dabei beginnen sie in der Regel mit der Startseite einer Site, die entweder von Hand bei einem Suchdienst angemeldet oder bspw. über einen Link von einer anderen Website aus gefunden worden ist. Haben diese Robots eine Datei gefunden, werden alle enthaltenen Hyperlinks genutzt, um die dahinterliegenden Seiten ebenfalls zu indizieren, sie „hangeln“ sich sozusagen von Seite zu Seite. Dieses Vorgehen wird so lange fortgesetzt, bis keine neuen Seiten mehr gefunden werden, eine bestimmte Menge an Seiten erfasst worden ist oder eine vorgegebene Anzahl von Unterebenen erreicht wurde (Spidering Depth). Sitemaps, die direkt von der Startseite aus erreichbar sind, sind hier sehr hilfreich für Robots, da diese einfach den Hyperlinks folgen können. Außerdem erhalten Dateien, die direkt von der Startseite aus verknüpft werden, eine höhere Relevanz bei der Bewertung von Suchanfragen, dazu aber später mehr. Neben den Hyperlinks werden auch Inhalte erfasst und indiziert. Dabei wird, je nach Robot, ein besonderes Augenmerk auf den Titel der Seite, vorhandene Meta-Tags (allerdings nicht mehr in der Wichtigkeit, die sie früher für die Indizierung hatten) und zuletzt den Informationsinhalt gerichtet. Für die Indizierung des Informationsinhalts werden nicht alle Wörter eines Textes aufgenommen, sondern lediglich solche, die einen Stichwortcharakter haben. Allgemeine Wörter wie „der“, „die“, „das“, „und“, „oder“ etc. werden nicht indiziert, da sie nichts über die eigentlichen Informationen der Website aussagen. Das Ergebnis der automatischen Indizierung ist eine Wortliste aller relevanten Begriffe für eine stichwortbasierte Suche.
WDS10H 39 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Interessant an dieser Wortliste ist, dass Wörter, auch wenn sie im Text häufiger auftau- chen, zwar nur einmal gelistet werden, ihre Häufigkeit jedoch vermerkt wird, weil dies Aufschluss über die Relevanz bei einer Suchanfrage gibt. Wenn ein Wort in einem Text häufiger auftaucht, kann man davon ausgehen, dass sich dieser Text, eventuell sogar die ganze Website, mit dem Thema dieses Wortes beschäftigt. Der Anbieter einer Website kann die Indizierung seiner Dateien und Verzeichnisse dahingehend beeinflussen, dass er eine sogenannte robots.txt-Datei anlegen kann, die den Robots mitteilt, welche Dateien/Verzeichnisse von welchen Robots indiziert oder explizit von der Indizierung ausgeschlossen werden sollen. Diese Datei muss, als reine Textdatei und korrekt klein geschrieben, „robots.txt“ genannt werden und im Stammordner der Website liegen. Der Inhalt der folgenden Textdatei bspw. erlaubt allen Robots den Zugriff (* für alle Ro- bots), verbietet jedoch die Indizierung des Unterverzeichnisses „intern“, mit Ausnahme des hier untergeordneten Verzeichnisses „kontaktdaten“:
User-agent (* für alle), disallow, allow User-agent: * Disallow: /intern/ Allow: /intern/kontaktdaten/
2.3.2 Manuelle Erfassung von Datenbeständen Neben den Robots gibt es auch noch die manuelle Erfassung. Diese redaktionelle Bear- beitung/Überprüfung durch Menschen findet meist nach der Anmeldung in einem Webverzeichnis bzw. Webkatalog statt. Dabei wird jede angemeldete Seite von einem Redaktionsmitglied besucht, auf ihre Richtigkeit hin überprüft und von Hand erfasst. Dieser Vorgang der Indizierung kann naturgemäß lange dauern. Durch die nicht automatisierte, sondern personalisierte Begutachtung kann die Indizie- rung qualitativ besser ausfallen. Dazu sollte man vor der Anmeldung jedoch dafür Sorge tragen, dass die Website vollständig ist, einwandfrei funktioniert (validen Quellcode ent- hält) und gut gestaltet ist. Wird eine Website in einen Webkatalog aufgenommen, wird sie in eine, meist hierarchisch nach Themen geordnete, Katalogstruktur aufgenommen, die sich von einem allgemeinen Bereich zu immer spezifischeren Unterthemen hin verzweigt. Neben dem Titel und der Adresse wird eine kurze Inhaltsbeschreibung angezeigt, die teils schon bei der Anmeldung vom Besitzer der Website eingetragen, teils aber auch erst von der Redaktion erstellt wird.
2.3.3 Suchanfragen Beim Thema Suchmaschinenoptimierung ist es ebenfalls wichtig, einen Blick „auf die andere Seite“ zu werfen, nämlich darauf, wie gesucht wird. Suchanfragen stellen eine große Herausforderung an die Suchdienste dar. Denn gesucht wird sehr individuell und in der Regel nicht nach festen Vorgaben.
40 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Sollen zu einer Suchanfrage möglichst passende Treffer gefunden werden, müssen verschiedene Punkte berücksichtigt werden: • verschiedene Bezeichnungen für denselben Begriff (Synonyme) • gleiche Begriffe mit verschiedenen Bedeutungen (sog. „Teekesselchen“, Fachbegriff „Homonymie“ bzw. „Polysemie“) • regionale/umgangssprachliche Begriffe • Singular-/Pluralformen • Abkürzungen • falsche Schreibweisen Diese Punkte sind sowohl für die Suchdienste und die Indizierung der Datenmengen von Bedeutung als auch für die Suchanfragen der Suchenden. Sind die für eine Suchanfrage gewählten Begriffe zu allgemein, wird die Trefferliste zu lang oder ungenau. Werden andererseits zu spezifische Begriffe abgefragt, gibt es eventuell zu wenig passende Treffer. Bei Schreibfehlern bietet Google benutzerfreundlich und vorausschauend direkt ober- halb der Trefferliste einen alternativen Suchvorschlag an (Abb. 2.1):
Abb. 2.1: Alternativer Suchvorschlag bei Google
WDS10H 41 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Über die Funktion „Suchoptionen“ (Abb. 2.1, Zeiger) können einige einfache, aber effek- tive Sucheinschränkungen, bspw. zeitlicher Art oder nach Darstellungsart, schnell er- gänzt werden (in Abb. 2.1 aktiviert unterhalb des Buttons „Suchoptionen“ zu sehen). Auch die Möglichkeit sich im Bereich „Alle Ergebnisse“ den Punkt „Verwandte Suchanf- ragen“ anzeigen zu lassen, ist interessant. Yahoo differenziert sogar noch etwas weiter und bietet die Auswahl, nach dem vermeintlich „korrekten“ Begriff zu suchen bzw. diesen mit in die Trefferliste aufzunehmen oder nur die Ergebnisse des eingegebenen Begriffs aufzulisten (Abb. 2.2).
Abb. 2.2: Alternativer Suchvorschlag bei Yahoo
Bei einer einfachen Suchanfrage werden in das Suchfeld ein oder mehrere Begriffe eingegeben. Dabei können die verschiedenen Suchbegriffe nach Wunsch miteinander kombiniert werden, um Suchanfragen zu erweitern oder zu spezifizieren. Die Kombination, genauer gesagt die Verknüpfung der Suchbegriffe geschieht mittels Boolescher Operatoren. Suchdienste setzen meist die Booleschen Operatoren AND (+), OR und NOT(–) ein. Für eine einfache Suchanfrage bedeutet dies, dass nach Dokumenten gesucht wird, die alle diese Begriffe (Boolescher Operator AND) beinhalten. Also Dokumente, in denen sowohl Suchbegriff 1 als auch Suchbegriff 2 und Suchbegriff 3… vorkommen.
42 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Für die Trefferliste bedeutet dies, je mehr Suchbegriffe, desto weniger Treffer in der Tref- ferliste, denn jeder weitere Suchbegriff grenzt die Suche stärker ein. Diese Verknüpfung von Suchbegriffen ist die Standardabfrage bei einfachen Suchfeldern und muss nicht explizit angegeben werden. Möchte man dagegen eine Suchanfrage erweitern, weil es zu einem Suchbegriff zu wenige Treffer gibt, wird mit dem Booleschen Operator OR gearbeitet. Dabei gibt man verschiedene Begriffe ein, die alternativ gefunden werden können. Für die Suchanfrage bedeutet dies, dass nach Dokumenten gesucht wird, die entweder Suchbegriff 1 oder Suchbegriff 2 oder Suchbegriff 3… beinhalten. Je mehr Suchbegriffe, desto mehr Treffer in der Trefferliste, denn jeder zusätzliche Such- begriff erweitert die Suche. Man kann auch explizit Suchbegriffe ausschließen (Boolescher Operator NOT), wenn ein Begriff auf verschiedene Themen zutrifft, man aber nur nach einem Themengebiet sucht. Für die Suchanfrage bedeutet dies, dass nach Dokumenten gesucht wird, in denen bspw. Suchbegriff 1 und Suchbegriff 2 vorkommt, nicht aber Suchbegriff 3. Eine detaillierte Suchanfrage wird meist über die „Erweiterte Suche“ (manchmal unter „Optionen“ zu finden) eingegeben, damit nicht im Suchfeld von Hand mit den Boole- schen Operatoren gearbeitet werden muss. Außerdem stehen hier noch einige weitere Suchkriterien zur Auswahl. In Abb. 2.3 sieht man, welche Möglichkeiten neben den oben genannten Einschränkun- gen (unter „Seiten suchen, die…“) noch zur Verfügung stehen, um die Suche bei Google zu verfeinern. Außerdem kann man hier erkennen, wie Google die Booleschen Operato- ren und Sucheinschränkungen umsetzt.
WDS10H 43 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Abb. 2.3: Erweiterte Suche bei Google
Interessant ist hier außerdem der Bereich „Begriffe erscheinen:“, in dem bestimmt werden kann, an welcher Stelle die Suchbegriffe enthalten sein sollen (Abb. 2.4).
44 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Abb. 2.4: Bereich „Begriffe erscheinen“ in der erweiterten Suche
Diese Einschränkung legt fest, wo überall wichtige Schlüsselwörter in einer Website gefunden (und somit zur Optimierung auch untergebracht) werden können. Der Vollständigkeit halber sei an dieser Stelle erwähnt, dass sich nicht nur Websites erfassen und suchen lassen (die in diesem Kapitel am häufigsten erwähnt werden), sondern außerdem noch verschiedene andere Dateitypen (Abb. 2.5).
Abb. 2.5: Suche/Einschränkung nach Dateitypen
Nach diesen Dateiformaten kann entweder gezielt gesucht werden oder sie sind explizit aus der Suche ausschließbar. Möchte man bei einer Suche also möglichst passende Treffer erhalten, sollte man sich vorher über die Suchbegriffe Gedanken machen, verschiedene Variationen ausprobieren und die Möglichkeiten der Verfeinerung der Suchanfrage nutzen. Für die Suchmaschinenoptimierung sollte man diese Kriterien der Suchverfeinerung bei der Benennung der Dateien, Verzeichnisse und Verweise sowie der Inhalte und ihrer Po- sitionierung berücksichtigen.
WDS10H 45 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
2.4 Suchdienste Bisher wurde der Begriff „Suchmaschine“ zur Vereinfachung synonym für alle Program- me im Internet benutzt, die der Suche von Informationen dienen. Dies ist, genau genommen, nicht ganz korrekt. Obwohl die Unterschiede bzw. Übergänge zwischen diesen Programmen teilweise flie- ßend sind und Suchmaschinen den quantitativ größten Raum unter den Suchdiensten einnehmen, lohnt es sich doch, einen Blick auf die verschiedenen Suchdienste zu werfen.
2.4.1 Suchmaschinen Die klassische Suchmaschine ist ein Programm, mit dessen Hilfe man nach online zur Verfügung gestellten Dateien suchen/recherchieren kann. Dabei dient als Quelle ein mittels Robots automatisch erfasster Datenbestand. Eine Suchmaschine zeichnet sich dadurch aus, dass man dabei nach frei wählbaren Be- griffen oder Phrasen suchen kann, meist lässt sich die Suche über Suchmasken noch im Detail verfeinern (siehe Abschnitt 2.3.3). Eine Suchmaschinen-Datenbank (Abb. 2.6) finden Sie bspw. unter  http://www.suchmaschinen-datenbank.de/
Abb. 2.6: Suchmaschinen-Datenbank – Startseite
Die Suchmaschinen-Datenbank hat zurzeit (Stand Januar 2016) 212 Suchmaschinen im Portfolio. Sie teilt die Suchmaschinen nach Themen ein (siehe Abb. 2.6 linker Bereich), ermöglicht aber auch eine Filterung nach Land oder Name. Außerdem stellt sie jede Suchmaschine im Einzelnen mit einer Bewertungsmöglichkeit vor.
46 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
2.4.2 Webkataloge/Verzeichnisse Im Gegensatz zu Suchmaschinen arbeiten Webkataloge bzw. Verzeichnisse nicht mit automatisch erzeugten Indizes. Über die Websites der Kataloge angemeldete Webauftrit- te werden redaktionell bewertet und kategorisiert (siehe Abschnitt 2.3.2). Kataloge bieten eine gute Übersicht, da sie Linklisten zu verschiedenen Themenberei- chen hierarchisch geordnet präsentieren. Eine Suche gestaltet sich hierdurch ggf. angenehmer und übersichtlicher, da nicht nur Suchbegriffe eingegeben werden, sondern man sich über die hierarchische Gliederung einen guten Gesamteindruck verschaffen kann, in welchem thematischen Kontext die Suchbegriffe stehen.
2.4.3 Kombinationen Webkataloge – Suchmaschinen Der Unterschied zwischen Webkatalogen und Suchmaschinen wird immer geringer, da mittlerweile häufig beide Formen kombiniert werden, um die Möglichkeit zu schaffen, sowohl eine klassische Suchanfrage zu starten als auch in einem Webkatalog zu suchen. Einige Kataloge und Suchmaschinen arbeiten hierbei zusammen, AOL bspw. nutzt die Suchfunktion von Google. Andere werden aufgekauft, Yahoo z. B. kaufte Inktomi und Overture, um deren Suchtechniken zu nutzen.
2.4.4 Metasuchmaschinen Als Alternative zur Suche von Hand nacheinander in mehreren Suchmaschinen gibt es Metasuchmaschinen. Diese Dienste stellen eine Benutzeroberfläche zur Verfügung, in die die Suchanfrage lediglich einmal eingegeben werden muss. Bei der Suche wird in der Regel nicht auf eigene Datenbestände zurückgegriffen, sondern parallel in mehreren Suchmaschinen gesucht. Die Metasuchmaschine listet die Er- gebnisse dann sortiert auf. Da die verschiedenen Suchmaschinen über unterschiedliche Suchmöglichkeiten verfü- gen, sind Suchanfragen nicht zu 100 Prozent übertragbar. Deshalb muss bei einer Such- anfrage über eine Metasuchmaschine der „kleinste gemeinsame Nenner“ gefunden werden, was die Suchmöglichkeiten einschränkt.
MetaGer (http://www.metager.de) MetaGer bietet, wie die meisten anderen Metasuchmaschinen auch, die Auswahlmög- lichkeit, welche Suchmaschinen durchsucht werden sollen. Außerdem erlauben die Op- tionen verschiedene Kriterien der Suche und Ausgabe (Abb. 2.7).
WDS10H 47 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Abb. 2.7: MetaGer
Ein besonders interessantes Feature bei MetaGer ist der Web-Assoziator. Hier können Begriffe eingegeben werden, aus denen dann eine Assoziationskette mit neuen, ähnlichen oder verwandten Begriffen gebildet wird. Die Eingabe des Begriffs „webdesign“ bspw. liefert als Ergebnis folgende Assoziations- kette (Auszug):
… webdesigner website internet websites webentwicklung suchmaschinenoptimierung graphics barrierefrei webseiten gestaltung …
48 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
2.4.5 Preisvergleichsmaschinen Im Gegensatz zu Suchmaschinen erfassen Preisvergleichsmaschinen wie bspw. idealo (http://www.idealo.de/), Preissuchmaschine.de (http://preissuchmaschine.de/), guenstig.de (http://www.guenstig.de/), billiger.de (http://www.billiger.de/) oder Geizkra- gen.de (http://www.geizkragen.de/) auch Websites mit dynamischen Inhalten. Dabei handelt es sich meist um Online-Shops. Sie helfen bei der Suche unterschiedlichster, größtenteils in Kategorien eingeteilter Pro- dukte und listen in der Regel die Preise sowie die verschiedenen Anbieter zum Vergleich auf. Dabei kann man sich entweder über die Kategorien einen Überblick verschaffen oder gezielt nach einem bestimmten Produkt suchen.
Abb. 2.8: Suche bei Lycos Shopping nach „katzenfutter“
2.4.6 Online-Enzyklopädien Das Interesse an virtuellen Nachschlagewerken ist in den letzten Jahren rasant gewach- sen. Nicht zuletzt durch die freie Enzyklopädie Wikipedia (http://de.wikipedia.org/), deren Inhalt zu 100 Prozent aus den Beiträgen Freiwilliger besteht. Seit der Gründung der deutschsprachigen Wikipedia 2001 wurden über 1,8 Millionen Artikel zu den unter- schiedlichsten Themen eingestellt (Stand Juni 2015).
WDS10H 49 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Abb. 2.9: Suche bei Wikipedia nach „Suchmaschinenoptimierung“
Zwar hat jeder die Möglichkeit, Artikel einzugeben und damit auch, Falsches zu veröf- fentlichen. Da aber auch jeder den Wahrheitsgehalt überprüfen und ggf. falsche Angaben ändern kann, ergibt die gegenseitige Kontrolle ein nicht zu unterschätzendes Qualitätskriteri- um. Außerdem existieren verschiedene Vorgaben, die man beim Verfassen eines Artikels be- rücksichtigen sollte. Online-Enzyklopädien sind eine wichtige, kostenlose und schnelle Möglichkeit der In- formationsbeschaffung. Man kann entweder direkt per Eingabe nach einem oder mehreren Suchbegriffen recherchieren oder über Themenportale.
2.4.7 Personensuchdienste Vor einiger Zeit stieg die Präsens von Personensuchmaschinen enorm. Fast jeder hat schon einmal nach einer bestimmten Person (oder sich selbst) gegoogelt. Über Anbieter wie Yasni (http://www.yasni.de/) oder 123people.de (http://www.123people.de/) kann man jedoch sehr viel effektiver suchen. Dabei werden alle Informationen zu einer Per- son zusammengetragen, die im WWW frei verfügbar sind, bspw. auch Wunschlisten und Rezensionen bei Amazon!
50 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Netzwerke, XING (http://www.xing.com/) ist ein solches typisches Business-Netzwerk, werden verstärkt genutzt, um geschäftliche Beziehungen zu knüpfen. Freunde-Suchmaschinen sind ebenfalls sehr gefragt, um ein eigenes Profil aufzubauen und/oder alte Bekannte wiederzufinden. Dabei handelt es sich jedoch eher um ein pri- vates Interesse. Beispiele hierfür sind StayFriends (http://www.stayfriends.de/), MySpace (http://www.myspace.com/) und natürlich Facebook (http://www.facebook.de/).
Abb. 2.10: Suche bei Yasni nach „Paulchen Panther“
2.4.8 Bewertungsportale Bewertungsportale nehmen ebenfalls einen immer größeren Stellenwert ein. Hier gibt es fast nichts mehr, was nicht bewertet werden kann, sei es der eigene Arbeitgeber  (http://www.kununu.com/), der Arzt (http://www.docinsider.de/), der Prof. an der Uni (http://www.meinprof.de/), das Urlaubshotel (http://www.holidaycheck.de/) oder das Lokal an der Ecke (http://www.restaurant-kritik.de/).
WDS10H 51 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Abb. 2.11: Suche bei Restaurant-Kritik nach „afrikanischer Küche in Frankfurt am Main“
2.4.9 Spezialsuchdienste Für bestimmte Themengebiete haben sich spezielle Suchdienste etabliert. Man findet zwar meist auch in allgemeinen Suchmaschinen Informationen zu den gewünschten Themen, die Suche wird über Spezialsuchdienste jedoch häufig erleichtert, weil die Da- tenmenge geringer und schon thematisch aufbereitet worden ist. Spezialsuchmaschinen nutzen in der Regel keinen eigenen Datenbestand als Basis einer Suche, sondern durchforsten wie Metasuchmaschinen die Datenbestände anderer Such- dienste. Themen wie Immobilien (http://www.immobilienscout24.de/), Jobs (http://www.stepstone.de/) und Autos (http://www.autoscout24.de/) sind hier besonders gefragt. Aber auch Kulturelles, etwa Kartenvorverkäufe, (http://www.eventim.de/) sind von großem Interesse. Unter http://www.abkuerzungen.de/ findet man einen Dienst ganz anderer Art, wenn man schnell erfahren möchte, was hinter einer bestimmten Abkürzung steckt.
52 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Abb. 2.12: Suche bei abkuerzungen.de nach „www“
2.5 Bewertungskriterien relevanter Websites Welche Bewertungsmaßstäbe werden angesetzt, um die relevanten, zu einer Suchanfra- ge passenden Websites auszuwählen und aufzulisten? Wird in einer Suchmaschine eine Suchanfrage gestartet, erhält der „Suchende“ als Er- gebnis eine Liste mit Treffern vermeintlich passender Websites. Damit die Suchmaschi- ne diese Trefferliste zusammenstellen und ausgeben kann, muss sie ermitteln, welche Websites relevant für die Suchanfrage sind. Suchmaschinen halten sich zumeist eher bedeckt, wenn es darum geht, preiszugeben, nach welchen Kriterien sie Websites für relevant erachten. Einige Kriterien sind jedoch bekannt und das Wissen um diese Kriterien ist wichtig, wenn es später um die Optimierung von Websites geht.
2.5.1 Websitebezogene Bewertungskriterien (OnPage-Optimierung) Bei den Kriterien, die sich direkt auf die Website beziehen, wird versucht, anhand des Inhalts einer Website deren Relevanz für eine Suchanfrage zu ermitteln. Diese Kriterien können direkt vom Web-Designer bzw. dem Inhaber der Website beeinflusst werden.
WDS10H 53 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Titel einer Website Der Titel einer Website wird im Kopf der Datei angegeben und sollte aussagekräftig, aber nicht zu lang sein, jedoch auf jeden Fall den Namen des Anbieters beinhalten. Wie wichtig die Angabe eines Titels ist, wurde schon mehrfach in den vorangegangenen Stu- dienheften erwähnt. Sollte der Titel fehlen, ist dies ein peinlicher Anfängerfehler, wenngleich sich diese Web- site mit ca. 527.000 anderer deutschsprachiger Dateien (Google-Suche nach „Unbenann- tes Dokument“) in guter bzw. eher schlechter Gesellschaft befindet.
Webadresse (URL) Ebenso wie der Titel einer Website möglichst sinnvoll und selbsterklärend sein sollte, sollte es auch die URL einer Website sein. Aus diesem Grund sollten kryptische Zeichen- folgen vermieden werden.
Meta-Angaben einfügen Bei Meta-Angaben (meist Meta-Tags genannt) handelt es sich um allgemeine Informa- tionen im Kopf einer Datei, die für den Betrachter einer Website nicht sichtbar sind, von verschiedenen Programmen wie Browsern und Suchmaschinen jedoch ausgelesen und interpretiert werden. Dabei muss unterschieden werden zwischen Meta-Tags, die zur korrekten Interpretation und Darstellung einer Seite notwendig sind, und solchen, die optional für Suchmaschi- nen gedacht waren. Folgendes Meta-Tag sollte in jeder deutschsprachigen (X)HTML-Datei vorhanden sein, da es Angaben zum verwendeten Zeichensatz bzw. zur Zeichenkodierung enthält. Die Angabe des eigentlichen Zeichensatzes (charset) unterscheidet sich hierbei je nach ge- wähltem Zeichensatz:
Informationen hierzu finden Sie im Studienheft WDS05H, Kapitel 4. Während noch vor einigen Jahren suchmaschinenrelevante Meta-Tags fast schon als Garant für eine gute Indizierung und Platzierung in Suchmaschinen galten, spielen sie mittlerweile fast keine Rolle mehr. Der Grund liegt in der exzessiven missbräuchlichen Nutzung der Tags auf Websites, um sich eine bessere Platzierung zu verschaffen. Da in den Meta-Tags immer mehr Websites häufig gesuchte Begriffe, allen voran der Begriff „Sex“, auftauchten, die Websites selbst jedoch nichts mit diesen Begriffen zu tun hatten, entwickelten die Suchmaschinen andere, differenzierte Kriterien der Bewertung. Es gibt jedoch eine Einschränkung, weshalb sie nur „fast“ keine Rolle mehr spielen. Ist eine Website gut strukturiert und weist sie im Textbereich wiederkehrende Stichwörter auf, die ebenfalls in den Meta-Angaben erscheinen, kann dies die Bewertung der Web- site durch eine Suchmaschine positiv beeinflussen. Die Meta-Tags dienen dann sozusagen der qualitativen Bestätigung der Informationen im Textbereich.
54 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
Wird mit den Meta-Tags jedoch Missbrauch betrieben, tauchen hier bspw. Begriffe auf, die im Text nicht vorhanden sind, wird sich dies negativ bei der Bewertung durch die Suchmaschinen auswirken! Die Benutzung folgender Meta-Tags ist, wenn sie gut durchdacht ist, heute noch sinnvoll:
Beinhaltet in ein bis zwei kurzen Sätzen eine kurze Beschreibung dessen, was auf der Website zu finden ist. Eine solche Beschreibung taucht häufig in der Ergebnisliste einer Suchanfrage zu den entsprechenden Websites auf, weshalb ihr Einsatz nach wie vor wichtig ist.
Enthält eine Liste mit Stichwörtern, die den Inhalt der jeweiligen Seite/Datei aufgreifen.
Der Seiteninhalt Es gibt Verfahren, um sowohl den gesamten Seiteninhalt zu bewerten, als auch nur aus- gewählte sinnvolle Bereiche. Zu diesen sinnvollen Bereichen zählen im Text logisch her- vorgehobene Wörter. Dabei handelt es sich bspw. um Überschriften, die, wenn sie korrekt in Überschriften-Tags (
bis
) angegeben worden sind, als wichtige Text- teile identifiziert werden können. Ebenso verhält es sich mit den Texthervorhebungen und , da man davon ausgehen kann, dass auf diese Weise gekennzeichnete Wörter im Text wichtig sind und in der Regel Stichwörter enthalten könnten. Wird der gesamte Seiteninhalt zur Bewertung herangezogen, ermittelt man zunächst die vermeintlichen Stichwörter. Wie wichtig diese Stichwörter eingeschätzt werden, hängt davon ab, wie häufig sie in einem Text vorkommen oder wie weit oben sie im Text stehen. Je häufiger oder je weiter oben im Text ein Begriff auftaucht, desto wichtiger scheint dieses Wort zu sein, seine Relevanz steigt entsprechend. Auch die Regelmäßig- keit der Verteilung eines Stichworts in einem Text wird teilweise ermittelt und bewertet.
2.5.2 Umfeldbezogene Bewertungskriterien (OffPage-Optimierung) Im Gegensatz zu den oben genannten Kriterien, bei denen die Website selbst bzw. deren Inhalt zur Bewertung herangezogen wird, beschäftigen sich die folgenden Kriterien mit dem „Umfeld“ der Datei. Diese Kriterien können auch nicht in dem Rahmen vom Web- Designer beeinflusst werden wie die websitebezogenen.
Klick-Verhalten Beim Klick-Verhalten wird ermittelt, wie häufig eine in der Trefferliste erscheinende Seite angeklickt wird. Die Annahme dahinter: Je häufiger eine in der Trefferliste aufge- führte Seite auch tatsächlich ausgewählt und angeklickt wird, desto passender scheint sie für die Suchanfrage zu sein. Als dementsprechend wichtig wird sie eingestuft.
WDS10H 55 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
2 Suchmaschinenmarketing
Da das alleinige Anklicken einer gefundenen Seite jedoch nicht wirklich aussagekräftig ist (vielleicht wirkt die Seite nur auf den ersten Blick passend, weil ihr Name und ihre Beschreibung gut sind, die Inhalte jedoch nicht halten, was sie versprechen), wird zur qualitativen Verfeinerung teilweise noch die Dauer des tatsächlichen Aufenthalts auf dieser Seite gemessen. Dieser Messwert ist sehr viel aussagekräftiger, denn je länger man auf einer Seite verweilt, desto interessanter scheint sie zu sein.
Term Vector Bei der Methode des Term Vectors wird das Umfeld bzw. der Kontext untersucht, in dem die Seite steht. Zum einen ist es wichtig, dass sich die gesuchten Begriffe innerhalb einer aufgelisteten Seite im Kontext dieser Seite befinden, sich also die Seite selbst mit dem Thema beschäftigt. Zum anderen sollte sich auch die Website, in die die gefundene Seite integriert ist, dem gesuchten Thema widmen. Ist dem so, dann wird diese Seite als relevanter eingestuft als eine, deren dazugehörige Website sich mit ganz anderen Themen befasst. Eine Seite, die sich demzufolge bspw. mit dem Thema „Klassische Musik“ beschäftigt (weil ein Konzert angekündigt wird), deren Website jedoch vom Kleintierzüchterverein stammt, wird als weniger relevant eingestuft werden als eine Seite, die Teil einer Website eines Anbieters klassischer Musik ist. Der Kleintierzüchterverein hat wahrscheinlich eher nebenbei mit klassischer Musik zu tun, während der Anbieter ein Spezialist zu sein scheint.
Link-Popularität/PageRank Das Kriterium des PageRank ist ein Google-eigenes Bewertungsinstrument. Ausgangsgedanke hier ist, dass eine Website zu einem bestimmten Themenbereich umso wichtiger ist, je mehr externe Websites, die ebenfalls dieses Themengebiet behandeln, auf diese Site verweisen. Aus der Anzahl der externen Links, die auf die entsprechende Website verweisen, er- rechnet sich der PageRank einer Website (Link-Popularität). Außerdem in die Bewer- tung einbezogen wird, welchen PageRank die verlinkenden Websites haben. Wichtige Websites, auf die von wichtigen Websites verlinkt wird, müssen nach diesem Gedanken besonders wichtig sein. Der höchste zu erreichende PageRank einer Site wäre 10, der niedrigste 0. Die Berech- nung ist dabei jedoch nicht linear, es ist einfacher, innerhalb der ersten Hälfte (0–5) sei- nen PageRank zu steigern, als in der zweiten Hälfte (6–10). Der PageRank der meisten deutschsprachigen Websites hält sich dementsprechend in der unteren Hälfte auf.
56 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)
Suchmaschinenmarketing 2
2.6 Überprüfung der Website Gute Platzierungen bei Suchmaschinen sind kein Teufelswerk und ebenso wenig ein zu- fälliges Ergebnis, sie hängen von vielen verschiedenen Faktoren ab, wie Sie bisher bereits erfahren haben. Auch wenn manche Kriterien als gut gehütetes Geheimnis der Suchmaschinen gehandelt werden (sollen), gibt es einiges, was man selbst beeinflussen kann. Außerdem kursieren Gerüchte, dass man Topplatzierungen sozusagen „heimlich unter der Ladentheke“ bei den Suchmaschinenanbietern kaufen kann. Dazu ist jedoch keine Heimlichkeit notwendig. Per AdWords bspw. bei Google oder einfach über die Pay-per- Click-Angebote (siehe Abschnitt 2.9) kann man Websites, wenn man möchte, besonders hervorheben und platzieren lassen. Allein für sich genommen garantieren diese kostenpflichtigen Maßnahmen allerdings noch keine Topplatzierung. Ist die Website selbst nicht suchmaschinenoptimiert, ist sie in vielen Bereichen auch nicht benutzerfreundlich (oder barrierefrei), da die Optimierung primär auch eine Benutzerfreundlichkeit und gute Informationspräsentation bewertet. Zum Glück wird nicht für jede einzelne Suchmaschine bzw. für jeden eigenen Such- dienst eine individuelle Optimierung benötigt, da sich bspw. die Methoden der Indizie- rung immer mehr angleichen. Es wäre sogar kontraproduktiv, wenn man versuchen würde, für verschiedene Suchmaschinen Websites mit identischem Inhalt zu gestalten und anzumelden. Denn sogenannte Website-Duplikate werden häufig erkannt und, als Spam eingestuft, im schlimmsten Fall ganz aus den Indizes gelöscht. Es gibt einige häufig gemachte Fehler, die man, wenn man sie (er-)kennt, jedoch leicht beseitigen und in Zukunft auch gleich von Anfang an vermeiden kann. Zunächst werden primär die websitebezogenen Optimierungsmöglichkeiten geprüft.
2.6.1 Title-Tag vorhanden? Ein nach wie vor sehr häufig gemachter Fehler ist es, einer Webseite keinen Titel zu geben. Wenn Sie, wie oben schon erwähnt, bspw. in Google „Unbenanntes Dokument“ eingeben, erhalten Sie ca. 527.000 Treffer, die keine Titel-Angabe haben, bei „untitled document“ ca. 38,9 Millionen Treffer weltweit. Zur Überprüfung, ob jede Seite der Website „StruwwelHaar“ auch einen korrekten Titel hat, wird in Dreamweaver über die Funktion „Suchen und ersetzen“ im Quellcode gesucht. In der Auflistung zeigt sich dann schnell, ob alle title-Tags korrekt benannt worden sind (Abb. 2.13).WDS10H 57 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingAbb. 2.13: Suche nach den Titeln der Dateien des Projekts „StruwwelHaar“Angelehnt an die Überprüfung der Website auf Barrierefreiheit, werden wir auch hier mit „erfüllt“, „teilweise erfüllt“ und „nicht erfüllt“ arbeiten, um eine To-do-Liste aufzu- stellen. Bei diesem Punkt wird dementsprechend angegeben:  erfüllt2.6.2 Enthält Webadresse/URL auch keine Sonderzeichen? Bei der Benennung von Dateien und Ordnern einer Website sollte auf die Verwendung von Sonderzeichen und hier besonders auf die Verwendung von Leerzeichen verzichtet werden. Außerdem ist es sinnvoll, alle Namen klein zu schreiben, um unnötige Fehlerquellen zu vermeiden. Ob alle Dateien und Ordner gut benannt sind, kann man bspw. in Dreamweaver im Be- dienfeld „Dateien“ überprüfen.58 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2Außerdem gilt: Je sinnvoller/selbsterklärender die Dateien benannt sind, desto besser. Wenn eine Seite z. B. Informationen zu Produkten der Marke „BioCo- lor“ enthält und neben dem Begriff „BioColor“ im Text der Seite auch dementsprechend die Datei „biocolor.html“ benannt wurde, komplettiert dies die Annahme, dass es sich auf der Seite tatsächlich um Produktinformationen zur Marke „BioColor“ handelt. Für die Suchmaschine ein Plus bei der Bewer- tung. Für die URL/Domain einer Website ist es hilfreich, wenn diese schon Näheres zum Thema der Website erahnen lässt. www.struwwelhaar.de beinhaltet hier den Begriff „Haar“, was schon einmal nicht schlecht ist. www.friseursalon-struwwelhaar.de wäre noch aus- sagekräftiger, dafür aber relativ lang. www.friseur-struwwel.de oder www.salon- struwwelhaar.de wären eventuell Alternativen.Abb. 2.14: Dateien des Projekts „StruwwelHaar“ Hier gilt es immer abzuwägen, welche Domain eingängig, aber nicht zu lang und vor allen Dingen auch noch frei ist. Bei mehreren Begriffen, wie „friseur“ und „struwwel“ sollte zur besseren Lesbarkeit ein Bindestrich verwendet werden. Sind mehrere Versionen einer Domain frei, können und sollten diese registriert werden. Hinter einer Domain wird dann die Website hinterlegt, die anderen Domains werden automatisch auf diese „Hauptdomain“ umgeleitet, was in der Regel der Provider über- nimmt oder über dessen Interface leicht einzustellen ist.  erfüllt2.6.3 Datei „robots.txt“ korrekt? Mit einer robots.txt-Datei kann man gezielt Dateien von der Indizierung ausschließen oder deren Indizierung explizit erlauben. Wenn jedoch der Inhalt dieser Datei nicht korrekt ist, wird sie ggf. nicht richtig indiziert. Deshalb sollte die Datei „robots.txt“ wenn vorhanden, auf ihre Richtigkeit hin überprüft werden. Soll eine Website komplett indiziert werden, wird keine robots.txt-Datei benötigt.WDS10H 59 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingAuf der unter der URL http://www.struwwelhaar.de veröffentlichten, optimierten Web- site „StruwwelHaar“ wird explizit die Site von der Indizierung ausgeschlossen, da es sich um eine fiktive Website handelt, die als Beispiel dient und nicht indiziert werden soll! Wenn Sie die von Ihnen erstellte Website online stellen, dann fügen Sie bitte ebenfalls die robots.txt-Datei mit dem Ausschluss der Indizierung in Ihre Dateien ein:User-agent: * Disallow: / Obwohl der Ausschluss im Fall der Website „StruwwelHaar“ wichtig und richtig ist, wird dieser Punkt hier als „erfüllt“ angegeben. Im Normalfall ist die Indizierung einer Website natürlich sehr erwünscht, außer, bestimmte Dateien oder Ordner sollen explizit von der Indizierung ausgeschlossen oder nur bestimmte Robots an der Indizierung ge- hindert werden.  erfüllt2.6.4 Alle nötigen Meta-Angaben vorhanden und richtig? Die gewünschte Indizierung oder aber auch der Ausschluss der Indizierung von Teilen einer Website kann neben der Datei „robots.txt“ auch über eine Meta-Angabe gesteuert werden. Mit der Angabe<meta name="robots" content="noindex, nofollow" /> im Kopf der entsprechenden Datei schließen Sie diese explizit von der Indizierung aus.Hinweis: Fügen Sie diese Meta-Angabe bitte ebenfalls in alle Ihre Dateien des Projekts „StruwwelHaar“ ein, wenn Sie sie online bereitstellen wollen.Für den Fall, dass Sie nur bestimmte Dateien einer Website dementsprechend gekennzeichnet haben, sollten Sie überprüfen, ob Sie nicht irrtümlich auch anderen Dateien diese Meta-Angabe beigefügt haben. Sollen Dateien indiziert werden, brauchen Sie die Meta-Angabe nicht einfügen, da die gewünschte Indizierung sozusagen der Default-Wert ist. Zwingend notwendig ist die Meta-Angabe zum verwendeten Zeichensatz:Zeichensatz<meta http-equiv="content-type" content="text/html;  charset=iso-8859-1" /> Weitere Meta-Angaben, die einzusetzen sinnvoll sein kann, sind:Beschreibung der Seite<meta-Angabe <meta name="description" content="…" />60 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2Stichwörter<meta name="keywords" lang="de" content="…" /> Da noch nicht alle dieser Meta-Angaben in den Dateien der Website „Struwwel-Haar“ vorhanden sind, kommt dieser Punkt auf die To-do-Liste und ist somit momentan  nicht erfüllt2.6.5 Schlüsselwörter im Text Die Bedeutung von Schlüsselwörtern innerhalb einer Website wurde nun bereits an mehreren Stellen erwähnt. Die in den Meta-Angaben genannten Schlüsselwörter wurden entsprechend individuell auf jeder Seite aus den Texten heraus generiert. Zu viele Schlüsselwörter im Text (werden leicht als Spam eingestuft) sind zu vermeiden. Ebenso nachteilig ist es, wenn zwar in den Meta-Angaben Schlüsselwörter angegeben werden, diese aber im Text nicht vorkommen. Darüber hinaus ist es sinnvoll, Schlüsselwörter im Titel der Seite, also im title-Tag und in den benutzten Überschriften-Tags <h1> bis <h6> zu haben. Die Titel der jeweiligen Seiten wurden bereits bearbeitet und optimiert. Hier wäre ein Zuviel ebenfalls nicht sinnvoll. Wichtige Schlüsselwörter, wie der Name des Friseursalons, die Stadt, in der er sich befindet, und das „Thema“ der Seite kommen in den Titeln vor. Die Überschriften sollten aussagekräftig und ansprechend formuliert sein, ohne überla- den zu wirken. Außerdem gilt es hier, einen gewissen durchgängigen, zueinander passenden Textstil zu entwickeln und beizubehalten. Die bereits optimierten Überschriften sind in unserem Fall durchgängig und ausreichend, es besteht keine Notwendigkeit der erneuten Überarbeitung.  erfüllt In diesem Zusammenhang fällt aber eines auf: Es ist zwar der Name des Friseursalons auf jeder Seite zu sehen, der Standort des Salons ist aber, gerade bei einem Geschäft wie diesem, ebenfalls sehr wichtig. Deshalb kommt auf die To-do-Liste noch der Punkt, in die Fußzeile die Adresse des Fri- seursalons einzufügen.2.6.6 Alt-Attribute bei Grafiken vorhanden? Teilweise wurde dieser Punkt schon bei der Überprüfung der Website auf Barrierefrei- heit aufgegriffen. Alt-Attribute sollten bei allen außer rein dekorativen Grafiken vorhanden sein und aus sinnvollem Text bestehen.WDS10H 61 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingDie informativen Grafiken der Website „StruwwelHaar“ enthalten alt-Attribute und title-Attribute, also  erfüllt2.6.7 Seiteninhalte logisch ausgezeichnet? Die logische Auszeichnung der Seiteninhalte wurde im Zusammenhang des barrierefrei- en Zugangs bereits optimiert und kann deshalb guten Gewissens als erfüllt gekennzeichnet werden.  erfüllt2.6.8 Keine Inhaltsduplikate? Gleiche Texte auf verschiedenen Seiten bedeuten keinen Mehrwert an Informationen, sondern Inhaltsduplikate, zumindest aus Sicht der Suchmaschinen, die hierin häufig einen Versuch unterstellen, das Ranking zu manipulieren. Deshalb sollte man darauf achten, Texte nicht einfach wortwörtlich zu duplizieren. Dies gilt sowohl für Seiten einer Website als auch für verschiedene Websites mit gleichen In- halten. Werden spezielle Druckdateien zur Verfügung gestellt, sollte man bspw. über Meta-Tags oder die robots.txt-Datei Angaben machen, dass diese Dateien nicht indiziert werden sollen. Über spezielle Stylesheets können Dateien jedoch ebenfalls für den Ausdruck optimiert werden, ohne sie doppelt anzulegen. Die Website „StruwwelHaar“ hat theoretisch Inhaltsduplikate, und zwar an der Stelle der Produkte. Die zwei Unterseiten der Produkte, die in den Einsendeaufgaben des letzten Studienhefts erstellt wurden, enthalten im Infobereich die gleichen Texte.„Die in unserem Salon  verwendeten Produkte der Firma GoodHair im Überblick.Unsere Hausmarke Struwwelig bietet Qualität zu einem Preis, der auch Sie überzeugen wird.“ Da es sich aber im Prinzip auf den Unterseiten eher um Teaser bzw. Links handelt, sind die Duplikate an dieser Stelle nicht wirklich schlimm. Trotzdem kann der Text auf den Unterseiten leicht abgeändert werden. Dieser Punkt kommt als erster auf die To-do-Liste.  teilweise erfüllt62 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 22.6.9 Kein Text als Bild? Texte sollten als solche eingefügt werden und nicht als Grafiken. Solche Texte sind nämlich von Suchmaschinen und Screenreadern nicht lesbar, ebenso wenig im Browser bei ausgeschalteter Grafikanzeige. Die Website „StruwwelHaar“ setzt keine Texte als Grafik ein, also  erfüllt2.6.10 Gut benannte Links? Auf vielen Websites findet man Linktexte, wie bspw. „Hier klicken“ oder „Weiter“. Diese Linkbeschreibungen sind nicht sehr aussagekräftig, besonders, wenn man bedenkt, dass zur Bewertung einer Website auch die Benennungen der Verweise herangezogen werden. Ein Link, der sinnvoll benannt ist, gibt darüber Auskunft, wohin er führt, und dient so der Benutzerfreundlichkeit einer Website. Im Idealfall enthält ein Verweis neben der Auskunft über sein Verweisziel außerdem wichtige Stichwörter. So ist z. B. ein Verweistext „Unsere Adventskränze mit festlicher Dekoration“ unbestrit- ten aussagekräftiger als lediglich „Hier klicken“! Neben den beiden Unterseiten der Produkte, die in den Einsendeaufgaben des letzten Studienhefts erstellt wurden, gibt es nur noch in der Sitemap Verweise innerhalb der Website. Die Verweistexte der Unterseiten sind aussagekräftig genug, die der Sitemap können vielleicht noch etwas ergänzt werden. Schreiben wir diesen Punkt also auf die To-do-Liste:  teilweise erfüllt2.6.11 Keine Cookies nötig? Wenn eine Website Cookies benötigt, um korrekt dargestellt werden zu können, ist dies alles andere als benutzerfreundlich. „Cookies (cookies = Kekse – die Herkunft des Namens ist unbekannt) bieten Ihnen die Möglichkeit, direkt aus einer HTML-Datei heraus Daten auf dem Rechner des Anwenders zu speichern und beim erneuten Aufruf der gleichen HTML-Datei wieder auszulesen. So kann eine WWW-Seite dynamisch auf gespeicherte Daten reagieren.“ (Quelle: SELFHTML, http://de.selfhtml.org)Nicht jedem ist es angenehm, wenn er weiß, dass eine Website, die er gerade besucht, Informationen über ihn bzw. über sein Surfverhalten auf dieser Website sammelt und weitergibt. Besonders, weil nicht klar ist, um welche Informationen es sich genau handelt. Auch wenn der direkte Zugriff auf den Rechner des Betrachters ausgeschlossen ist und auch keine Viren o. Ä. übertragen werden können, erfüllt der Einsatz viele Betrach- ter mit Unbehagen.WDS10H 63 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingZum einen gibt es die Möglichkeit, in den Browsern explizit anzugeben, dass keine Coo- kies akzeptiert werden. Zum anderen lässt sich angeben, ob nachgefragt wird, bevor ein Cookie akzeptiert wird. Beides führt dazu, dass eine Website nicht korrekt angezeigt wird, wobei die Nachfrage sehr nervtötend sein kann, weil sie in der Regel mehrmals hintereinander erfolgt. Der Einsatz von Cookies sollte also genau überlegt und, wenn möglich, auch eher vermieden werden. Denn Suchmaschinen unterstützen ebenfalls keine Cookies. Die Website „StruwwelHaar“ enthält keine Cookies.  erfüllt2.6.12 Keine Website-Duplikate? Manche Websites haben zwar unterschiedliche URLs, jedoch identische Inhalte. Dabei handelt es sich um sogenannte Website-Duplikate, auch Spiegel-Sites genannt. Entde- cken Suchmaschinen solche Websites, führt dies meist zum kompletten Ausschluss der Sites. Die Website „StruwwelHaar“ ist „einmalig“, also  erfüllt2.6.13 Keine Weiterleitungsseiten? Manche Websites arbeiten mit sogenannten Weiterleitungsseiten ohne Inhalt, in denen sie bspw. per JavaScript lediglich Browserweichen eingefügt haben. Dabei wird der Browser des Betrachters mittels Script ermittelt und dieser dann auf die für den entsprechenden Browser optimierte Website weiter geleitet. Dies hat mehrere Nachteile: Zum einen müssen mehrere Websites mit identischem In- halt erstellt und synchron gepflegt/aktualisiert werden, was zeitintensiv, fehleranfällig und überflüssig ist. Dabei besteht auch wieder die Gefahr des Ausschlusses, da es sich um Website-Duplikate handelt. Zum anderen funktioniert die Weiterleitung nicht, wenn im Browser JavaScript deakti- viert wurde. Um das Erscheinungsbild einer Website auf verschiedenen Browsern möglichst einheitlich zu gestalten, sollte man die Formatierung mit CSS vornehmen.Tipp: Vermeiden Sie die Gestaltung einer Website lediglich für einen Browser und auf jeden Fall den Hinweis „Diese Website ist optimiert für…“ auf einer Website. Das ist nicht nur unprofessionell sondern auch unhöflich, weil Sie von vornherein potenzielle Besucher ausschließen oder nötigen, einen von Ihnen bevorzugten Browser einzusetzen, um die Website zu betrachten.64 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2Es wurde früher auch häufig eine Seite der eigentlichen Website vorangestellt, die speziell für die Suchmaschine optimierten Inhalt bereitgestellt hat. Dieser Inhalt hat sich jedoch häufig grundlegend vom Inhalt der eigentlichen Website unterschieden. Dieser Trick wird heutzutage von Suchmaschinen sehr negativ bewertet. Wir benutzen keine Weiterleitungsseiten, also  erfüllt2.6.14 Einsatz von JavaScript, AJAX und Flash wohlüberlegt? Manche Suchmaschinen sind mittlerweile in der Lage, Flash-Dateien zu indizieren und aus diesen Dateien für die Indizierung relevante Texte und Links herauszuziehen. Trotzdem sollte man auf gänzlich mit Flash erstellte Websites verzichten, ebenso ist von der früher gebräuchlicheren Methode abzuraten, zwei Varianten einer Website anzubie- ten, eine reine Flash-Seite und eine HTML-Version (siehe Argumente zu Website-Dupli- katen, Weiterleitungsseiten und Barrierefreiheit). Sinnvoller ist es, in HTML-Dateien Flash-Dateien einzubinden. In diese HTML-Dateien können dann entsprechend relevante Texte und Links, die in der Flash-Animation vorkommen und von Bedeutung sind, eingebunden werden. Suchmaschinen können JavaScript nicht ausführen, da dies clientseitig im Browser geschieht. Sehr negativ wirkt sich das besonders bei mit diesen Techniken erstellten Navi- gationen aus. Ebenso verhält es sich bei dem Einsatz von AJAX (Asynchronous JavaScript and XML). Hier können dynamisch vom Server Daten in den Browser nachgeladen werden, wenn bspw. eine Interaktivität zwischen Betrachter und Website (Klicken mit der Maus, Über- fahren/Berühren eines festgelegten Bereichs innerhalb der Website mit der Maus, etc.) stattfindet. Dabei wird nicht die gesamte Seite neu geladen, sondern lediglich Teile nachgeladen. Da diese Inhalte also erst bei Bedarf vom Server geholt werden, können Suchmaschinen sie nicht erkennen und dementsprechend auch nicht indizieren. Navigationen und wichtige Informationen müssen auch ohne zusätzliche Techniken funktionieren bzw. zugänglich sein. Diese Techniken können sozusagen als „Zugaben“ verwendet werden, sie dürfen jedoch für die korrekte Darstellung einer Website nicht zwingend notwendig sein. Keine dieser Techniken wird auf der Website „StruwwelHaar“ eingesetzt, also  erfüllt2.6.15 Nicht ausschließlich dynamische Seiten verwendet? Werden Websites bzw. deren Inhalte ausschließlich dynamisch erzeugt, kann es bei der Indizierung durch Suchmaschinen zu Problemen kommen. Hauptgrund sind die meist mit Sonderzeichen gespickten, nicht selbsterklärenden Webadressen dynamischer Sei- ten.WDS10H 65 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingDiese Webadressen werden häufig individuell auf den Betrachter zugeschnitten und dynamisch erstellt. So erhält die Webadresse vielleicht einen Zusatz, wenn besondere Be- dingungen, wie bspw. ein Rabatt für Einkäufe oder Produktvariable, wie bspw. eine Far- be, ausgewählt worden sind. Durch diese individuellen Zusätze (Parameter) steigt die Anzahl der eventuell von Such- maschinen gefundenen und zu indizierenden Webadressen schnell um ein Vielfaches. Die Indizierung wird dann meist sehr schnell abgebrochen. Deshalb sollte man beim Einsatz dynamischer Inhalte die Pfade möglichst kurz halten und eindeutig benennen. Viele dynamisch erzeugte Seiten weisen sehr lange, kryptische Zeichenketten auf, die nicht auf den Inhalt schließen lassen. Da zur Bewertung einer Website jedoch auch Pfadbezeichnungen herangezogen werden, ist dies nicht optimal. Außerdem lassen sich, was ja Grundgedanke dynamischer Seiten ist, Inhalte sehr schnell ändern. Suchmaschinen haben aber lieber mit relativ statischen Inhalten zu tun, um relevante Treffer zu einer Suchanfrage auch längerfristig zu gewährleisten. Ebenso verhält es sich mit redundanten Informationen. Datenbanken sind meist dafür gedacht, gleiche Informationsteile immer wieder neu kombiniert zur Verfügung zu stellen, Suchmaschi- nen mögen jedoch keine immer wiederkehrenden Inhalte (siehe Argumente zu Website- Duplikaten). Wenn also auf einer Website dynamische Inhalte eingebunden werden, sollte zumindest die Startseite weitestgehend statisch bleiben und eine Zusammenfassung der auf der Website zu findenden Informationen beinhalten. Je mehr statische Seiten, desto besser für die Indizierung. In unserem Fall gilt dieser Punkt als  erfüllt2.6.16 Site nicht zu oft anmelden Manchmal dauert es ziemlich lange, bis eine Website nach der Anmeldung auch wirklich indiziert wird. Deshalb wird manchmal geraten, die Website nach einer gewissen Zeit erneut anzumelden, falls sie bis dahin noch nicht indiziert worden ist. Das sollte jedoch höchstens einmal im Monat geschehen und nur bei Suchdiensten, die dies explizit vorschlagen. Ansonsten kann es ebenfalls zum Ausschluss kommen. Aktualisierungen dagegen können immer dann, meist über ein dafür vorgesehenes Feld, angemeldet werden, wenn sich auf der Website inhaltlich etwas Wichtiges verändert hat. Die Website „StruwwelHaar“ wird nicht tatsächlich bei Suchmaschinen angemeldet, da es sich um ein fiktives Projekt handelt. Im „wirklichen Leben“ jedoch würde sie bspw. einmal bei dmoz, dem open directory project (http://www.dmoz.org) angemeldet. Dieses Verzeichnis arbeitet mit Suchdiensten, wie AOL Search, Google, Netscape Search, HotBot u. v. m. zusammen, an die eine erfolgreich angemeldete und indizierte Website weitergegeben wird.66 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2Parallel dazu könnte man sie gleich auch noch bei Google anmelden, damit sie vielleicht schneller indiziert wird. Da es sich um verschiedene Suchdienste handelt, kann man dies ruhig tun, ohne Sanktionen befürchten zu müssen.Tipp: Lesen Sie sich die Bedingungen der Aufnahme bei dmoz einmal in Ruhe durch, Sie erhalten wertvolle Tipps, auf was Sie achten und was Sie unbedingt vermeiden sollten.Betrachten wir die Website also als angemeldet, dementsprechend  erfüllt2.6.17 Website, die noch im Aufbau ist, nicht anmelden Melden Sie keine Websites an, die sich noch im Aufbau befinden. Der Gedanke ist zwar naheliegend, eine Website möglichst schnell nach der Domainre- gistrierung anzumelden, damit die Site, wenn sie mal fertig sein sollte, gleich indiziert ist. Da die Suchmaschinen jedoch den Inhalt bewerten, wäre dies fatal. Bei Robots führt eine verfrühte Anmeldung ggf. „nur“ zu einer schlechteren oder falschen Indizierung der Inhalte und damit des Rankings. Bei redaktionell bearbeiteten Anmeldungen jedoch können unvollständige, eindeutig im Aufbau befindliche Websites ein Ausschlusskrite- rium darstellen. Besonders, wenn die Funktionalitäten (Links, Grafiken etc.) noch nicht richtig funktionieren. Die Website „StruwwelHaar“ würde erst angemeldet, wenn sie komplett fertig wäre und alle Funktionen einwandfrei funktionieren würden.  erfülltNun noch ein paar Tipps zu den umfeldbezogenen Optimierungsmöglichkeiten: Die umfeldbezogenen Optimierungsmöglichkeiten lassen sich nicht ganz so „aktiv“ rea- lisieren, da sie nicht allein im Entscheidungs- und Umsetzungsbereich des Web-Desig- ners liegen. Je besser die Website gemacht und für die Suchdienste optimiert wurde, desto höher ist die Wahrscheinlichkeit, dass die Website in einer relevanten Trefferliste auftaucht und auch angeklickt wird (Klick-Verhalten). Dabei spielt auch die Qualität der präsentierten Inhalte eine große Rolle. Da dabei die Verweildauer auf der Seite ebenfalls ein wichtiges Kriterium darstellt, ist es sinnvoll, zusätzliche interessante Features, wie bspw. Neuigkeiten, Downloads und Zusatzinformationen bereitzustellen, die dem Betrachter einen Mehrwert liefern. Das erhöht die Attraktivität, lädt den Besucher zum Wiederkommen ein und vergrößert die Chance der Verlinkung zu dieser Website.WDS10H 67 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingAußerdem kann man Netzwerke bilden bzw. einen Linkaustausch mit Websites anstre- ben, die ähnliche Themen anbieten. Für Geschäftspartner und Freunde kann es ebenfalls interessant sein, Links auszutauschen (Link-Popularität und PageRank). In Bezug auf das Kriterium des Term Vectors kann es, je nach Inhalt der Website, eine Überlegung wert sein, bestimmten wichtigen Themen bzw. Schlüsselwörtern eine eigene Seite/einen eigenen Bereich zu geben. Dadurch erhalten diese Themen/Schlüsselwör- ter eine viel höhere Wichtigkeit und Wertung.Hinweis: Um die Zugriffe auf eine Website auszuwerten, stellen viele Provider Auswertungs- Tools zur Verfügung. Alternativ kann man bspw. den kostenlosen Google-Dienst Google Analytics nutzen.Zur Auswertung muss hier lediglich ein Account angelegt sowie ein JavaScript in die Startseite der auszuwertenden Website eingebunden werden. Nach ca. 24 Stunden erhält man die ersten Auswertungen. Dabei werden u. a. Informationen zu den Besuchern, den Zugriffsquellen, der Verweildauer ausgewertet und als Berichte bereitgestellt.2.7 To-do-Liste Unsere To-do-Liste sieht folgendermaßen aus: 2.6.4 Meta-Angaben Die Meta-Angaben zur Seitenbeschreibung und den Stichwörtern fehlen in den einzelnen Dateien und müssen ergänzt werden. 2.6.8 Inhaltsduplikate Auf den Unterseiten zu den Produkten sind die Texte im Infobereich identisch. Ein Vorteil unterschiedlicher Texte ist jedoch, dass auf diese Art zusätzliche In- formationen zu den Produkten weitergegeben werden können und die Leser nicht mit wiederkehrenden Infos gelangweilt werden. Also werden die Texte auf jeder Seite leicht abgeändert. 2.6.10 Schlecht benannte Links Die Verweistexte der Sitemap können vielleicht noch etwas verfeinert werden. Zusätzlich: Einfügen der Adresse in die Fußzeile der Website.2.8 Website für Suchdienste optimieren Die in der To-do-Liste aufgelisteten Punkte werden nun der Reihe nach abgearbeitet und die Website entsprechend optimiert. 2.6.4 Meta-Angaben Die Meta-Angabe, die die Indizierung der Seiten verbietet, wird eingefügt, weil die Website als fiktive Site nicht indiziert werden soll.68 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2<meta name="robots" content="noindex, nofollow" /> Die Angabe zum Zeichensatz ist schon bei allen Dateien vorhanden, da die Dateien sonst nicht valide gewesen wären.<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> Die ergänzten Angaben sind je nach Datei unterschiedlich und werden für jede Datei aufgelistet. Meist wird die Beschreibung einer Seite in der Trefferliste einer Suchmaschine unter der URL angezeigt. Die gesuchten Stichwörter werden dabei häufig fett formatiert angezeigt, was dem Suchenden eine Orientierung verschafft, wie passend die Website für seine Suchanfrage ist. Die Beschreibung sollte nicht länger als ca. 150 Zeichen (inklusive Leerzeichen) sein. Um passende Stichwörter zu finden, können verschiedene, frei im Internet verfügbare Tools, wie bspw. auf der Seite http://www.abakus-internet-marketing.de/tools/topword.html zu finden, genutzt werden. Nach der Eingabe der URL der entsprechenden Website werden alle potenziellen Stich- wörter dieser Seite aufgelistet. Die für sinnvoll erachteten Stichwörter können dann übernommen werden, ebenso Wortvariationen. Allerdings sollten die Stichwörter, die in der Meta-Angabe aufgelistet werden, im Text ebenfalls vorkommen. Um dies zu gewährleisten und wichtige Stichwörter auch unterzubringen, muss meist außerdem der Text der jeweiligen Seite entsprechend ergänzt bzw. abgeändert werden. Da die Stichwörter bei Suchmaschinen nur noch relevant zu sein scheinen, wenn sie auch im Text vorkommen, sind ellenlange Stichwörterlisten unnötig. index.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Unsere Produkte pflegen Ihr Haar, unsere Schnitte und Naturhaarfarben betonen Ihre Persönlichkeit!" /> <meta name="keywords" lang="de" content="struwwelhaar,eröffnung,trends,looks,pflege, pflegetipps,pflegeserie,friseursalon,friseur,salon, hauptstadt,produkte,produktserie,preise,team,events, veranstaltungen,kontakt,impressum,sitemap" /> produkte.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Naturhaarfarben von BioColor, Pflegeprodukte von GoodHair und unsere Hausmarke Struwwelig verwöhnen!" />WDS10H 69 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 Suchmaschinenmarketing<meta name="keywords" lang="de" content="struwwelhaar,haar,produktserien,hersteller, qualität,preise,salon,pflegeprodukte,goodhair,brillante,lang anhaltende,farben,naturfarben,biocolor,hausmarke,hervorragend, struwwelig,verwendete produkte,wunderschöne,farbbrillanz, home,produkte,preise,team,events,kontakt,impressum,sitemap" /> preise.html<meta name="description" content=" StruwwelHaar, der trendige Friseursalon in Hauptstadt! Höchste Qualität zu moderaten Preisen, das überzeugt unsere Kunden!" /> <meta name="keywords" lang="de" content="struwwelhaar,preise,qualität,schneiden,waschen,föhnen, kurze haare,kurze,lange haare,lange,dauerwelle,tönung,tönung light,tönung medium,tönung strong,light,medium,strong,strähnchen, pflege,hausmarke struwwelig,hausmarke,struwwelig, serie,goodhair,biocolor,marke,haarschnitt,rabatt,aktionen, rabattkarten,produkte,home,team,events,kontakt,impressum,sitemap" /> team.html<meta name="description" content=" StruwwelHaar, der trendige Friseursalon in Hauptstadt! Unser Team wird Sie begeistern, wir haben Experten speziell für Farbe, Kurzhaarfrisuren und Locken!" /> <meta name="keywords" lang="de" content="struwwelhaar,team,verwöhnen,farbexpertin,expertin, friseurmeisterin,meisterin,friseur,experte,kurzhaarfrisuren, kurzhaar,haar,kurz,locken,wellen,vizemeister,beautiful look, beautiful,look,london,home,produkte,preise,events,kontakt, impressum,sitemap" /> events.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Unsere Events bieten immer etwas Besonderes! Aktuell: Haare schneiden nach dem Mondkalender!" /> <meta name="keywords" lang="de" content="struwwelhaar,events,haare schneiden,haare,schneiden, mondkalender,mond,kalender,termine,bestmöglicher service, service,trend,wachstum,vollmond,kräftiger,gesünder,wachsen, länger geöffnet,geöffnet,home,produkte,preise,team,kontakt, impressum,sitemap" /> kontakt.html/kontaktiert.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Wir freuen uns, wenn Sie mit uns in Kontakt treten und einen Termin in unserem Salon vereinbaren!" /> <meta name="keywords" lang="de" content="struwwelhaar,kontakt,kontaktformular,verbindung, persönliche angaben,vertraulich,öffnungszeiten,hauptstraße, hauptstadt,home,produkte,preise,team,events,impressum,sitemap" />70 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2 impressum.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Unsere Geschäftsangaben helfen Ihnen den Weg zu uns zu finden!" /> <meta name="keywords" lang="de" content="struwwelhaar,impressum,geschäftsangaben,friseursalon, friseur,salon,geschäftsinhaberin,sieglinde struwwel, öffnungszeiten,hauptstraße,hauptstadt,home,produkte,preise, team,events,kontakt,sitemap" /> sitemap.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Hier finden Sie alle Seiten unserer Website aufgelistet, damit Sie sich gleich zurecht finden!" /> <meta name="keywords" lang="de" content="struwwelhaar,sitemap,seiten,website,aufgelistet, home,produkte,goodhair,struwwelig,preise,team,events,kontakt, impressum" /> 2.6.8 Inhaltsduplikate Auf der Unterseite zu den Produkten der Serie „GoodHair“ könnte der Text im Infobe- reich bspw. wie folgt abgeändert werden:„Die Produkte der Firma GoodHair werden in verschiedenen Pflegeserien angeboten, die jeweils aufeinander aufbauen und so eine optimal Versorgung der Haare gewährleisten. Unsere Hausmarke Struwwelig wurde extra auf die Bedürfnisse unserer Kundinnen und Kunden abgestimmt.“Auf der Unterseite zu den Produkten der Hausmarke „Struwwelig“ könnte der Text im Infobereich folgendermaßen optimiert werden:„Die in unserem Salon verwendeten Produkte der Firma GoodHair erfüllen höchste Ansprüche an Qualität und natürlichen Inhaltsstoffen. Die Produkte unserer Hausmarke Struwwelig können individuell auf die Bedürfnisse der Haare abgestimmt und kombiniert werden.“2.6.10 Schlecht benannte Links Die Verweistexte der Sitemap können vielleicht noch etwas verfeinert werden. Also werden die Texte wie folgt ergänzt:WDS10H 71 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingAbb. 2.15: Sitemap des Projekts „StruwwelHaar“Zusätzlich Einfügen der Adresse in die Fußzeile jeder Seite der Website. Dies dient der zusätzlichen schnellen Orientierung des Betrachters der Website, da der Standort eines Friseursalons immens wichtig für potenzielle Kunden ist. Da die Auszeichnung „fett“ den Text schwerer lesbar macht, wird die Klasse „.fett“ noch aus dem Div #fuss entfernt.Abb. 2.16: Adresse in der FußzeileWie weiter oben schon erwähnt, wurde früher gerne getrickst, um eine bessere Platzie- rung einer Website zu erreichen. Dabei wurden verschiedene Methoden genutzt, die den Suchdiensten inzwischen hinlänglich vertraut sind und zu einer Herabsetzung des Page- Rank oder sogar zum Ausschluss einer Website führen, wenn sie entdeckt werden.72 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2Hier ist zur Information eine Liste mit Beispielen von Tricks, die Sie auf jeden Fall vermeiden sollten: • Benutzung gleicher Farben für Schrift und Hintergrund zum Verstecken von Schlüs- selwörtern • Sehr kleine Schriftgröße für Texte, um ebenfalls Text zu verstecken • Schlüsselwörter, die sich im Text zu häufig wiederholen (keyword stuffing) • Schlüsselwörter in HTML-Kommentare einfügen (versteckter Text) • Schlüsselwörter in Meta-Angaben nutzen, die nichts mit der Website zu tun haben • Linkfarmen nutzen (Websites, die mit Links handeln, ohne thematischen Bezug zum Inhalt der Website) • Komplette Inhalte von Seiten einer Website oder eine gesamte Website nach einer erfolgreichen Indizierung austauschen2.9 Suchmaschinenwerbung In Zusammenhang mit Suchmaschinenwerbung stößt man häufig auf den Begriff Pay-for-Performance. Wie der Name schon sagt, wird hier sozusagen leistungsbezogen bezahlt bzw. abgerechnet, ein klares Suchmaschinenwerbung Instrument. Der Anbieter einer Website kann eine Anzeige verfassen und bestimmte Schlüsselwörter auswählen, unter denen er gefunden werden möchte. Wird nach diesen Begriffen gesucht, erscheint dessen Seite im Bereich „Anzeigen“ (manchmal auch als „Sponsored Links“ gekennzeichnet). Bei Google handelt es sich hier bspw. um die Nutzung einer AdWords-Anzeige, die oben in der Trefferliste auftaucht (Abb. 2.17).WDS10H 73 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingAbb. 2.17: Anzeigen bei GoogleDie Abrechnung ist erfolgsabhängig von den getätigten Klicks, d. h., jeder Klick auf die Seite wird über Google mit dem Anbieter der Seite abgerechnet. Diese Form der Abrech- nung nennt man Preis-pro-Klick (CPC = Cost per Click). Der Vorteil dieser Art von „Werbung“ besteht darin, dass der Anbieter nur zahlt, wenn Suchende tatsächlich seine Seite aufsuchen, indem sie die Anzeige anklicken. Um eine Kontrolle darüber zu behalten, wie hoch die Kosten sein werden, kann der Anbieter ein Tages- oder Monatsbudget festlegen. So kann bspw. festgelegt werden, wie viel der An- bieter pro Tag oder Monat zu zahlen bereit ist. Ist das Budget ausgeschöpft, wird die An- zeige ausgeblendet. Dazu ist es wichtig, den tatsächlichen CPC zu kennen. Die Preise der Schlüsselwörter unterscheiden sich hier teilweise sehr stark. Häufig benutzte, beliebte Schlüsselwörter sind entsprechend teurer, da die Nachfrage größer ist. Um eine Anzeige bei Google schalten zu können und/oder die verschiedenen Tools un- eingeschränkt zu nutzen, muss man bei Google AdWords ein Konto einrichten und eine Kampagne erstellen.74 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2Nach erfolgreicher Anmeldung hat man bspw. Zugriff auf den Keyword-Planer, mit dem relevante Schlüsselwörter und Schlüsselwörterkombinationen für die Website gefunden werden können. Es wird unter anderem angezeigt, wie viele Suchanfragen es monatlich zu den entsprechenden Wörtern oder Wörterkombinationen gibt. Abb. 2.18 zeigt beispielhaft die Ergebnisse für das Keyword „Rechtsschutzversiche- rung“. Außerdem werden Keyword-Ideen angezeigt, die man u. a. nach der Häufigkeit der Suchanfragen sortieren kann.Abb. 2.18: Keyword-Planer von Google AdWordsDer Keyword-Planer ist auch sehr informativ und hilfreich bei der Zusammenstellung relevanter Schlüsselwörter für eine Website und dementsprechend deren Inhalte/Texte, wenn letztendlich doch keine Kampagne bei AdWords geschaltet werden soll. Hier können Sie überprüfen, ob wichtige, zur Website (zum Thema) passende Schlüssel- wörter vorhanden sind, und solche, die kaum benutzt werden, entfernen oder anpassen. Darüber hinaus können Sie eine Webadresse eingeben und sich zusätzlich aus deren In- halt ermittelte Schlüsselwörter anzeigen lassen. Dabei wird schnell deutlich, wenn die Informationen der Website nicht optimiert worden sind. Dann erhalten Sie nämlich Schlüsselwörter und Vorschläge, die gar nichts mit dem eigentlichen Inhalt der Website zu tun haben.Hinweis: Die Angaben beziehen sich auf tagesaktuelle Angaben, sind also dynamisch und werden täglich neu ermittelt.Entscheidet man sich für AdWords, bestimmte Schlüsselwörter und ein Budget, garan- tiert dies aber immer noch nicht, dass die Website bei einer Suchanfrage dieser Begriffe auch ganz oben angezeigt wird. Das hängt wieder von der Häufigkeit ab, mit der die An- zeige dann auch tatsächlich angeklickt wird.WDS10H 75 © SGD, 16.11.16, Dorn, Hans-Peter (772587)2 SuchmaschinenmarketingWird eine AdWords-Anzeige angezeigt, meist aber nicht angeklickt, wird sie wieder ausgeblendet. Außerdem ist die Konkurrenz, besonders bei sehr beliebten Themen, groß. Je besser man positioniert ist, desto größer ist die Chance, angeklickt zu werden. Je häu- figer eine Anzeige angeklickt wird, desto größer die Wahrscheinlichkeit, weit oben in den „Anzeigen“ aufzutauchen. Da also ein Budget für diese Art der „Werbung“ nicht automatisch Erfolg/eine besonders gute Platzierung gewährleistet, sollte man die Kosten und den Nutzen, besonders bei kleineren Websites, gut gegeneinander abwägen.ZusammenfassungDie Website ist nun gemäß den gängigen Maßstäben und Kriterien für Suchmaschinen optimiert. Die typischen Fehler, die gerne einmal gemacht werden, wurden vermieden oder beseitigt und mögliche Verbesserungen durchgeführt. Wie weit oben die Site nun aber platziert würde (da es sich um eine Beispiel-Website handelt, wird sie ja nicht wirklich bei Suchmaschinen angemeldet), hängt, trotz aller Be- mühungen, von den Suchmaschinen ab. Denn neben den genannten Maßstäben zur Bewertung und Indizierung einer Website ziehen die Suchmaschinen weitere Kriterien heran, die sie jedoch nach außen nicht transparent machen. Suchmaschinenoptimierung ist, besonders am Anfang, zeitintensiv und manchmal auch mühsam. Je mehr Erfahrungen Sie aber sammeln, desto geringer wird der Arbeitsaufwand für die Optimierung einer von Ihnen erstellten Website. Dementsprechend kürzer wird auch der zeitliche Aufwand, weil Sie viele der durchgeführten Optimierungspunkte schon bei der Erstellung berücksichtigen. Gemeinsam mit der Verbesserung der Website in punkto Barrierefreiheit haben Sie nun durch die Suchmaschinenoptimierung eine Website erstellt, die in ihrer Struktur gut durchdacht und gut zugänglich ist. Da der Quellcode der Dateien noch einmal verändert worden ist, sollte erneut ein ab- schließender Test der HTML- und CSS-Dateien bezüglich deren Validität erfolgen. Au- ßerdem ist auch zu einem letzten Durchlauf aller Dateien bspw. mittels BrowserShots zu raten, um ungewünschte fehlerhafte Darstellungen weitestgehend auszuschließen. In Kapitel 3 wird nun noch ein Styleguide der Website erstellt. Dabei handelt es sich um eine Position, die mit dem Auftraggeber im Vorfeld vereinbart werden kann und dementsprechend auch bei der Kostenkalkulation Berücksichtigung finden sollte. In diesem Styleguide werden u. a. Informationen zu verwendeten Schriften, Farben, Gra- fiken etc. aufgelistet, um einem Auftraggeber Informationen an die Hand zu geben, die die Pflege oder Änderung der Website erleichtern.76 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Suchmaschinenmarketing 2Nicht jeder Auftraggeber legt Wert auf einen solchen Styleguide. Aber selbst wenn Sie selbst mit der Pflege der Website beauftragt werden, kann es sinnvoll sein, solch einen „Stilführer“ anzulegen. Denn sind erst ein paar Monate verstrichen und diverse weitere Websites bearbeitet worden, verblasst die Erinnerung zunehmend und ein Styleguide erleichtert es Ihnen, sich schneller wieder zurechtzufinden.Wiederholungsaufgaben2.1 Was unterscheidet die klassische Werbung von Suchmaschinenoptimierung? 2.2 Welche Funktion hat eine robots.txt-Datei? 2.3 Was unterscheidet einen Webkatalog von einer Suchmaschine? 2.4 Was bewirkt der Boolesche Operator OR? 2.5 Was bewirkt der Boolesche Operator AND? 2.6 Welche Meta-Angaben sollten auf jedem Fall in einer Datei vorhanden sein?WDS10H 77 © SGD, 16.11.16, Dorn, Hans-Peter (772587) 33 StyleguideBei einem Styleguide (frei aus dem Englischen übersetzt ein „Stil-Leitfaden“ oder ein „Leitfaden des Erscheinungsbilds“) handelt es sich um ein Dokument, in dem alle auf der Website gemachten Vorgaben zur formalen und inhaltlichen Ge- staltung der Website aufgeführt sind, um ein einheitliches Erscheinungsbild zu erreichen und zu bewahren (Gestaltungsrichtlinien). Änderungen oder Ergän- zungen, die nachträglich gemacht werden, sind so einfach umsetzbar, da nicht erst mühsam nach den entsprechenden Formatierungen oder Bildauflösungen gesucht werden muss. Viele Informationen zu Schriften etc. kann man allerdings auch aus der CSS- Datei „herausziehen“. Für die Website „StruwwelHaar“ könnte ein Styleguide etwa folgende Informati- onen beinhalten:3.1 LayoutAbb. 3.1: LayoutbereicheAus dieser Aufteilung ergeben sich die nachstehenden Bereiche, die als Boxen (DIVs) in CSS definiert werden: alles umschließender Bereich #gesamt Kopfbereich #kopf Kopfbereich (für Namen) #kopf_name78 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Styleguide 3Navigation #navi umschließender Bereich (Bilder-, Inhalts- und Infobereich) #haupt Bildbereich #bilder Inhaltsbereich #inhalt Infobereich #info Fußzeile #fuss Fußzeile (für Hintergrund) #bg_fussWeitere Bereiche, die als Boxen (DIVs) in CSS definiert werden, sind:Teil der Navigation #navlist Teil der Sitemap-Seite #sitemap Teil der Formular-Seite div class="formular" Teil der Team-Seite div id="liste"3.2 Verwendete Schriftarten • Arial, Helvetica, sans-serif – body – .formular – input, textarea, select • Trebuchet MS, Times New Roman, Times, serif – .unterschrift – .name3.3 Verwendete Farben• #CCC (hellgrau) – body (Hintergrund) – .bg_grau (Hintergrund) • #000 (schwarz) – body (Schrift) – #gesamt (Rahmen) – #kopf_name h1 (Schrift) – #inhalt (Schrift) – #navi (Rahmen) WDS10H 79 © SGD, 16.11.16, Dorn, Hans-Peter (772587)3 Styleguide• #FFF (weiß) – #navlist a:link, #navlist a:visited (Schrift) – #navlist a:link.aktuell, #navlist a:visited.aktuell,  #navlist a:focus, #navlist a:hover, #navlist a:active (Schrift) – #fuss (Schrift) • #C60 (orange) – #kopf (Hintergrund) – #haupt a:link, #haupt a:visited, (Rahmen) – #navlist a:link.aktuell, #navlist a:visited.aktuell,  #navlist a:focus, #navlist a:hover, #navlist a:active  (Rahmen) – #fuss (Hintergrund) – fieldset (Rahmen) – legend (Schrift) – input.button (Rahmen) • #333 (dunkelgrau) – h2 (Schrift) • #666 (mittelgrau) – h3 (Schrift) – #navi (Hintergrund) • #900 (dunkelrot) – #haupt a:link (Rahmen), #haupt a:visited (Schrift) – #haupt a:focus, #haupt a:hover, #haupt a:active (Schrift) – #sitemap a:link, #sitemap a:visited (Schrift) • #C00 (orange-rot) – .name (Schrift) • #E9E9E9 (hell-hellgrau) – input:focus, textarea:focus, select:focus (Hintergrund) – #haupt a:focus, #haupt a:hover, #haupt a:active (Hintergrund) – #sitemap a:focus, #sitemap a:hover, #sitemap a:active (Hintergrund) • #EFEFEF (hell-hell-hellgrau) – input.button (Hintergrund) 80 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Styleguide 33.4 Verwendete GrafikenSeite Bild alt-Text title-Text Maße (Pixel)Home home_120x383.jpg Verschiedene Unser Friseur- 120x383 (index.html) Ansichten des salon FriseursalonsProdukte produkte_120x383.jpg Verschiedene bei- Unsere Produkt- 120x383 (produkte.html) spielhafte Produkte palette aus unseren Pflege- serienPreise preise_120x383.jpg Bild mit Geldschei- Wie würden Sie 120x383 (preise.html) nen und Münzen gerne zahlen?Team team_120x383.jpg Fotos unserer Mitar- Unser Team 120x383 (team.html) beiter/-innen trenner.png 15x11Events events_120x383.jpg Bilder vom Haare- Impressionen 120x383 (events.html) schneiden nach dem zum aktuellen Mondkalender EventKontakt kontakt_120x383.jpg Bilder von Möglich- Kontaktmög- 120x383 (kontakt.html) keiten der Kontakt- lichkeiten aufnahmeKontaktiert kontakt_120x383.jpg Bilder von Möglich- Kontaktmög- 120x383 (kontaktiert.html) keiten der Kontakt- lichkeiten aufnahmeImpressum impressum_120x383.jpg Verschiedene Haar- Haarfarben der 120x383 (impressum.html) farben Saison anfahrtskizze.png Anfahrtskizze 231x170Sitemap home_120x383.jpg Verschiedene Unser Friseur- 120x383 (sitemap.html)  Ansichten des salon  Friseursalons trenner.png Aufzählungszeichen 15x11 auf allen Seiten ani.gif Eine Animation des Animation 150x100 Salonnamens StruwwelHaar StruwwelHaar als LogoHinweis: Da die beiden Unterseiten der Produktserien „GoodHair“ und „Struwwelig“ von den Teilnehmer/-innen als Einsendeaufgabe erstellt wurden, fallen die Angaben zu diesen Seiten individuell aus und werden hier nicht aufgeführt.WDS10H 81 © SGD, 16.11.16, Dorn, Hans-Peter (772587)3 StyleguideSeitenübergreifende HintergrundbilderBereiche Bilder Maße (Pixel) Kopfbereich banner.jpg 800x65 #kopf Fußzeile bg_fuss_unten.png 20x5 #bg_fuss Fußzeile bg_fuss_oben.png 20x100 #fuss Infobereich bg_info.jpg 50x1000 #info Hauptnavigation bg_navi.jpg 20x400 #navi Gesamtbereich bg_gesamt.png 800x100 #gesamt3.5 CSS-Angaben Für eine leichtere Pflege und bessere Orientierung ist es sinnvoll, in der externen CSS-Datei die Formatierung zu ordnen und mittels Kommentaren auszuzeichnen.Externe CSS-Datei: screen.css /************************************************************ StruwwelHaar CSS-Definitionen ------************************************************************//************************************************************ Allgemeine Element-Definitionen ************************************************************/ body { font-family: Arial, Helvetica, sans-serif; font-size: small; background-color: #CCC; color: #000; border: 0; margin: 0; padding: 0; } h2 { font-size: 120%; color: #333; margin: 0em 0em 0.4em 0em; }82 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Styleguide 3 h3 { font-size: 110%; color: #666; margin: 0em 0em 1.5em 0em; }/************************************************************ Alles umschliessender Container ************************************************************/ /* Das verwendete Design kommt gaenzlich ohne Tabellen aus. Der Textfluss wird mithilfe sog. floats gebrochen (Bsp. "float: left;") und an geeigneter Stelle wieder hergestellt (Bsp. "clear: both;").Der Container beinhaltet saemtliche fuer das Layout wichtige Elemente. */#gesamt { width: 800px; border: 1px solid #000; margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; padding: 0px; background-image: url(../bilder/bg_gesamt.png); background-repeat: repeat-y; background-position: top right; }/************************************************************ Kopfbereich ************************************************************/#kopf { background-color: #C60; background-image: url(../bilder/banner.jpg); background-repeat: no-repeat; height: 65px; overflow: hidden; margin: 0; text-align: right; }WDS10H 83 © SGD, 16.11.16, Dorn, Hans-Peter (772587)3 Styleguide/************************************************************ Kopfbereich Ueberschriften ************************************************************/#kopf_name { padding: 25px 10px 0px 0px; }#kopf_name h1 { color: #000; font-weight: normal; font-size: 250%; letter-spacing: 5px; margin: 0; }/************************************************************ Hauptnavigation ************************************************************//* Die Navigation ist mithilfe einer horizontalen Liste realisiert. */#navi { height: 100%; font-size: 115%; padding: 10px 0px 5px 0px; border-bottom: 1px solid #000; background-color: #666; background-image: url(../bilder/bg_navi.jpg); background-repeat: repeat-x; }#navlist { margin: 0; padding: 0; }#navlist li { margin: 0; padding: 0; display: inline; list-style-type: none; }/* Die folgende Definition wirkt sich auf alle, durch Komma getrennten Elemente aus. */#navlist a:link, #navlist a:visited { line-height: 14px; font-weight: bold; margin: 0px 10px 4px 10px; text-decoration: none;84 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Styleguide 3 color: #FFF; }/* Auf der aktuellen Seite wird der Navigationslink unterstrichen. Das Gleiche gilt fuer das "Ueberfahren" von Links mit der Maus ("hovern"), beim Anklicken und bei der Aktivierung mit der Tastatur. */#navlist a:link.aktuell, #navlist a:visited.aktuell, #navlist a:focus, #navlist a:hover, #navlist a:active { border-bottom: 3px solid #C60; padding-bottom: 2px; color: #FFF; }/************************************************************ Inhaltsbereich Navigation/Verweise ************************************************************/#haupt a:link { color: #cc6600; text-decoration: none; border-bottom: thin dotted #990000; }#haupt a:visited { color: #990000; text-decoration: none; border-bottom: thin dotted #cc6600; }#haupt a:focus, #haupt a:hover, #haupt a:active { color: #900; text-decoration: none; background-color: #E9E9E9; }/************************************************************ Bildbereich ************************************************************/#bilder { width: 120px; float: left; padding: 30px 10px 40px 15px; margin: 0; }WDS10H 85 © SGD, 16.11.16, Dorn, Hans-Peter (772587)3 Styleguide/************************************************************ Inhaltsbereich ************************************************************/#inhalt { width: 415px; float: left; color: #000; padding: 30px 20px 30px 20px; margin: 0; line-height: 1.3em; }/************************************************************ Inhaltsbereich Listen ************************************************************/#inhalt ul { margin: 0; padding-left: 0; }#inhalt ul li { padding-bottom: 15px; list-style-type: none; line-height: 1.5em; }/************************************************************ Infobereich ************************************************************/#info { width: 150px; float: left; font-size: 85%; margin: 0px 0px 0px 20px; padding: 30px 15px 30px 15px; }/************************************************************ Infobereich Ueberschriften ************************************************************/#info h3 { font-size: 120%; margin: 20px 0px -5px 0px; }/************************************************************ Infobereich Listen ************************************************************/#info ul li { list-style-type: none; line-height: 1.2em;86 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Styleguide 3 text-indent: -2.8em; }/************************************************************ Infobereich Bilder ************************************************************/#info img { border-style: none; }/************************************************************ Fusszeile ************************************************************/#fuss { clear: both; height: 100%; background-color: #C60; background-image: url(../bilder/bg_fuss_oben.png); background-repeat: repeat-x; color: #FFF; text-align: right; line-height: 27px; padding: 0; margin: 0; }#bg_fuss { background-image: url(../bilder/bg_fuss_unten.png); background-position: bottom left; background-repeat: repeat-x; padding: 0px 5px 0px 0px; margin: 0; }/************************************************************ Tabellendefinitionen ************************************************************/ table#produkte { text-align: left; } th { text-align: left; } caption { font-weight: bold; text-align: left; padding-left: 3px; }.td_fuss { font-size: 75%;WDS10H 87 © SGD, 16.11.16, Dorn, Hans-Peter (772587)3 Styleguide padding-left: 3px; }/************************************************************ Formulardefinitionen ************************************************************/.formular { font-size: 90%; font-family: Arial, Helvetica, sans-serif; } fieldset { margin: 10px 0px 0px 0px; padding: 0px 0px 0px 10px; border: 1px solid #C60; } label { font-weight: bold; margin: 0px 20px 0px 0px; } legend { margin: 0px 0px 10px 0px; font-weight: bold; color: #C60; } input, textarea, select { margin: 0px 10px 10px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 90%; width: 340px; cursor: pointer; } input:focus, textarea:focus, select:focus { background-color: #E9E9E9; }.radio { margin: 0px 3px 10px 0px; padding: 0; width: 20px; } input.button { border: 1px solid #C60; background-color: #EFEFEF; width: 166px; cursor: pointer;88 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Styleguide 3}/************************************************************ Sitemap-Definitionen ************************************************************/.li_abstand { margin-bottom: -2em; line-height: 3em !important; text-indent: 1.7em; }#sitemap a:link, #sitemap a:visited { color: #900; text-decoration: none; border-bottom: thin dotted #C60; }#sitemap a:focus, #sitemap a:hover, #sitemap a:active { color: #900; text-decoration: none; background-color: #E9E9E9; }/************************************************************ Allgemeine Klassendefinitionen ************************************************************//* Die folgenden Klassendefinitionen koennen auf jedem beliebigen Element verwendet werden, da sie an kein konkretes Element gebunden sind. */.unterschrift { font-family: "Trebuchet MS", "Times New Roman", Times, serif; font-size: 105%; font-style: italic; }.right { text-align: right; padding: 0.3em 0.1em 0.3em 0.1em; width: 150px; }.bg_grau { background-color: #CCC; } .name { font-family: "Trebuchet MS", "Times New Roman", Times, serif;WDS10H 89 © SGD, 16.11.16, Dorn, Hans-Peter (772587)3 Styleguide font-size: 110%; font-weight: bold; color: #C00; }.a_img { text-decoration: none; border-bottom: none !important; }3.6 Dokumentenbenennung/Verzeichnisstruktur Alle Dateien und Verzeichnisse werden einheitlich klein geschrieben.Abb. 3.2: Dateien/Verzeichnisstruktur90 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Styleguide 33.7 SitemapAbb. 3.3: Sitemap des Friseursalons „StruwwelHaar“3.8 DokumenttitelDateien Dokumenttitel Home Willkommen [Friseursalon StruwwelHaar in Hauptstadt] Produkte Produktserien [Friseursalon StruwwelHaar in Hauptstadt] Preise Preise [Friseursalon StruwwelHaar in Hauptstadt] Team Team [Friseursalon StruwwelHaar in Hauptstadt] Events Events [Friseursalon StruwwelHaar in Hauptstadt] Kontakt Kontakt [Friseursalon StruwwelHaar in Hauptstadt] Kontaktiert Kontakt [Friseursalon StruwwelHaar in Hauptstadt] Impressum Impressum [Friseursalon StruwwelHaar in Hauptstadt] Sitemap Sitemap [Friseursalon StruwwelHaar in Hauptstadt]3.9 Informationen zur Site-Definition Kategorie SiteSite-Name: StruwwelHaar Lokaler Site-Ordner: c:\webdesign\projekte\struwwelhaar\ Kategorie Server, Server hinzufügen über PluszeichenServername: Host-Server Verbinden über: FTP FTP-Adresse: www.struwwelhaar.de Benutzername: Benutzerkennung Kennwort: Passwort Stammverzeichnis: /projekte/struwwelhaar/WDS10H 91 © SGD, 16.11.16, Dorn, Hans-Peter (772587)3 StyleguideKategorie Erweiterte Einstellungen, Bereich Lokale InfoStandard-Bilderordner: c:\webdesign\projekte\struwwelhaar\bilder\ Hyperlinks relativ zu: Dokument Groß-/Kleinschreibung bei Hyperlinks: Häkchen Cache aktivieren: Häkchen3.10 Meta-Angaben für Suchmaschinen index.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Unsere Produkte pflegen Ihr Haar, unsere Schnitte und Naturhaarfarben betonen Ihre Persönlichkeit!" /> <meta name="keywords" lang="de" content="struwwelhaar,eröffnung,trends,looks,pflege,pflege tipps,pflegeserie,friseursalon,friseur,salon,hauptstadt, produkte,produktserie,preise,team,events,veranstaltungen, kontakt,impressum,sitemap" /> produkte.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Naturhaarfarben von BioColor, Pflegeprodukte von GoodHair und unsere Hausmarke Struwwelig verwöhnen!" /> <meta name="keywords" lang="de" content="struwwelhaar, haar,produktserien,hersteller, qualität,preise,salon,pflegeprodukte,goodhair,brillante, langanhaltende,farben,naturfarben,biocolor,hausmarke, hervorragend,struwwelig,verwendeteprodukte,wunderschöne, farbbrillanz,home,produkte,preise,team,events,kontakt, impressum,sitemap" /> preise.html<meta name="description" content=" StruwwelHaar, der trendige Friseursalon in Hauptstadt! Höchste Qualität zu moderaten Preisen, das überzeugt unsere Kunden!" /> <meta name="keywords" lang="de" content="struwwelhaar,preise,qualität,schneiden,waschen, föhnen,kurze haare,kurze,lange haare,lange,dauerwelle,tönung, tönung light,tönung medium,tönung strong,light,medium,strong, strähnchen,pflege,hausmarke struwwelig,hausmarke,struwwelig, serie,goodhair,biocolor,marke,haarschnitt,rabatt,aktionen, rabattkarten,produkte,home,team,events,kontakt,impressum, sitemap" />92 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Styleguide 3 team.html<meta name="description" content=" StruwwelHaar, der trendige Friseursalon in Hauptstadt! Unser Team wird Sie begeistern, wir haben Experten speziell für Farbe, Kurzhaarfrisuren und Locken!" /> <meta name="keywords" lang="de" content="struwwelhaar,team,verwöhnen,farbexpertin,expertin, friseurmeisterin,meisterin,friseur,experte,kurzhaarfrisuren, kurzhaar,haar,kurz,locken,wellen,vizemeister,beautiful look, beautiful,look,london,home,produkte,preise,events,kontakt, impressum,sitemap" /> events.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Unsere Events bieten immer etwas Besonderes! Aktuell: Haare schneiden nach dem Mondkalender!" /> <meta name="keywords" lang="de" content="struwwelhaar,events,haare schneiden,haare,schneiden, mondkalender,mond,kalender,termine,bestmöglicher service, service,trend,wachstum,vollmond,kräftiger,gesünder,wachsen, länger geöffnet,geöffnet,home,produkte,preise,team,kontakt, impressum,sitemap" /> kontakt.html/kontaktiert.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Wir freuen uns, wenn Sie mit uns in Kontakt treten und einen Termin in unserem Salon vereinbaren!" /> <meta name="keywords" lang="de" content="struwwelhaar,kontakt,kontaktformular,verbindung, persönliche angaben,vertraulich,öffnungszeiten,hauptstraße, hauptstadt,home,produkte,preise,team,events,impressum, sitemap" /> impressum.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Unsere Geschäftsangaben helfen Ihnen den Weg zu uns zu finden!" /> <meta name="keywords" lang="de" content="struwwelhaar,impressum,geschäftsangaben, friseursalon,friseur,salon,geschäftsinhaberin,sieglinde struwwel,öffnungszeiten,hauptstraße,hauptstadt,home,produkte, preise,team,events,kontakt,sitemap" /> sitemap.html<meta name="description" content="StruwwelHaar, der trendige Friseursalon in Hauptstadt! Hier finden Sie alle Seiten unserer Website aufgelistet, damit Sie sich gleich zurecht finden!" /> <meta name="keywords" lang="de" content="struwwelhaar, sitemap,seiten,website,aufgelistet, home,produkte,goodhair,struwwelig,preise,team,events,kontakt, impressum" />WDS10H 93 © SGD, 16.11.16, Dorn, Hans-Peter (772587)3 StyleguideDa die meisten der Informationen in den Studienheften explizit benannt und erklärt wurden, sieht der Styleguide wie eine Wiederholung aus. In der Praxis stehen diese In- formationen aber in der Regel nicht oder nur in geringerem Umfang zur Verfügung. Sinnvoll ist es deshalb, alle Informationen, an die man im Fall von Änderungen und Er- gänzungen ggf. schnell herankommen muss, im Styleguide festzuhalten.ZusammenfassungDie Website wurde nun für zwei Bereiche optimiert, sie erfüllt viele Punkte der Barrie- refreiheit und ist gut für die Aufnahme in Suchmaschinen vorbereitet. Wie anfangs schon erwähnt, ist eine nachträgliche Optimierung zeitaufwändiger und arbeitsintensiver; je vertrauter Sie jedoch mit den beiden Bereichen und deren wichtigsten Punkten und Kriterien werden, desto schneller wird Ihnen zukünftig die Optimie- rung von der Hand gehen. Denn Vieles werden Sie schon von Beginn eines Projekts an berücksichtigen. Trotzdem ist einem Check vor Abschluss eines Projekts, z. B. anhand der BITV-Selbstbe- wertung anzuraten. Außerdem ist es wichtig, sich etwa über das Internet auf dem Laufenden zu halten, da z. B. in Bezug auf die Suchmaschinenoptimierung die Verfahren und Kriterien immer wieder modifiziert werden. Eine in allen Bereichen gut durchdachte und optimierte Website spiegelt eine qualitativ hochwertige Arbeit wider, die Sie nach außen hin als Referenz positiv darstellt. Das Projekt „StruwwelHaar“ ist somit abgeschlossen, Frau Struwwel erhält alle Dateien, sowie den Styleguide. Sie haben mit dieser Studienheftreihe beispielhaft ein Projekt vom ersten Kundenge- spräch bis hin zum Zusammenfassen der wichtigsten Informationen in einem Styleguide erarbeitet und realisiert. In Ihrer praktischen Arbeit werden Sie mit Sicherheit die eine oder andere Vorgehens- weise anpassen, modifizieren oder ändern. Das ist natürlich nicht falsch, sondern vielmehr wünschenswert, um eine individuelle Arbeitsweise zu entwickeln, die ganz auf Sie zugeschnitten ist. So können Sie auf verschiedene Situationen in Ihrer Arbeitspraxis als Web-Designer adäquat und flexibel reagieren.94 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587) AA. Lösungen zu den Wiederholungsaufgaben 1.1 Bei Layoutgrafiken wie Abstandshaltern, Farbflächen und Mustern ohne informativen Inhalt. 1.2 Ein Screenreader kann sich beim Vorlesen auf die entsprechende Aussprache des Wortes einstellen, wenn ihm mitgeteilt wird, aus welcher Sprache das Wort stammt. Gekennzeichnet wird es bspw. mit … für einen englischsprachigen Begriff. 1.3 Damit die Struktur und damit die entsprechende (X)HTML-Datei auch ohne CSS-Formatierungen übersichtlich und logisch dargestellt wird. 1.4 … sie zum einen der Orientierung dient und einen guten Überblick über die an- gebotenen Inhalte gibt – besonders, wenn es auf einer Website keine Suche- Funktion gibt. Zum anderen hilft es einem Suchmaschinen-Crawler, die Website zu indizieren, da er den Links der Sitemap folgen kann. Sie wird deshalb von Suchmaschinen positiv bewertet. 2.1 Werbung allgemein will Interesse wecken an einem Produkt, von dem man bisher noch gar nicht wusste, dass man es nicht hat, aber unbedingt braucht. In Suchmaschinen suchen dagegen setzt voraus, dass man zumindest eine Ah- nung davon hat, was man vermisst (sucht), aber unbedingt benötigt (finden will). Suchmaschinenoptimierung bedeutet also, alles zu tun, um von der potenziellen Zielgruppe gefunden zu werden, Werbung, Interesse zu wecken und neue Ziel- gruppen zu erschließen. 2.2 Gezielt Dateien/Verzeichnisse zu indizieren bzw. auszuschließen und dies für alle oder nur für bestimmte Robots. 2.3 Kataloge: meist redaktionell gepflegt, hierarchische Einordnung, Auflistung und Darstellung nach Themengebieten. Suchmaschinen: meist automatisch erstellt, nicht nach Themengebieten geordnet. 2.4 Der Boolesche Operator OR erhöht die Trefferquote, weil nach Websites gesucht wird, die Suchbegriff 1 oder Suchbegriff 2 oder … enthalten. 2.5 Der Boolesche Operator And verringert die Trefferquote, weil nach Websites gesucht wird, die Suchbegriff 1 und Suchbegriff 2 und … enthalten. 2.6 Zeichensatz (muss angegeben werden), Beschreibung (kann angegeben werden), Stichwörter (können angegeben werden).WDS10H 95 © SGD, 16.11.16, Dorn, Hans-Peter (772587) BB. LiteraturverzeichnisHinweis: Die unten genannten Adressen sind nur eine kleine Auswahl von Websites im Inter- net. Über eine Recherche in Suchmaschinen können Sie eine Vielzahl weiterer geeigneter Websites finden. Da es sich bei allen aufgeführten Internetadressen um externe Websites handelt, kann sich sowohl der Inhalt als auch die Adresse ändern. Verantwortlich hierfür ist allein der jeweilige Website-Betreiber.Links zum Thema Suchmaschinenoptimierung http://www.suchlexikon.de/ http://www.abakus-internet-marketing.de/tools/topword.html https://adwords.google.de/KeywordPlanner?defaultView=3 http://support.google.com/webmasters/bin/answer.py?hl=de&answer=35769 http://help.yahoo.com/kb/index?y=PROD_ACCT&page=content&loca- le=de_DE&id=SLN2245 http://advertise.bingads.microsoft.com/de-de/suchmaschinenwerbung/richtlinien- fuer-unzulaessigen-inhalt http://www.database-search.com/sys/pre-check.phpSuchmaschinen http://www.google.de/ http://de.yahoo.com/ http://www.fireball.de/ http://www.excite.de/ http://web.de/ http://www.lycos.de/ http://www.bing.com/Suchmaschinen-Datenbank http://www.suchmaschinen-datenbank.de/Metasuchmaschinen http://www.metager.de96 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587)Literaturverzeichnis BOnline-Enzyklopädien http://de.wikipedia.orgPreisvergleichsmaschinen http://www.geizkragen.de/ http://preissuchmaschine.de/ http://www.idealo.de/ http://www.guenstig.de/ http://www.billiger.de/Personensuchdienste http://www.facebook.de/ http://www.myspace.com/ http://www.stayfriends.de/ http://www.yasni.de/ http://www.xing.com/ http://www.123people.de/Bewertungsportale http://www.docinsider.de/ http://www.restaurant-kritik.de/ http://www.meinprof.de/ http://www.holidaycheck.de/ http://www.kununu.comSpezialsuchdienste http://www.immobilienscout24.de/ http://www.stepstone.de/ http://www.eventim.de/ http://www.autoscout24.de/WDS10H 97 © SGD, 16.11.16, Dorn, Hans-Peter (772587)B LiteraturverzeichnisMeta-Tag-Generatoren http://anybrowser.com/MetaTagGenerator.html http://www.abakus-internet-marketing.de/metatag/metatag2.phpLinks zum Thema Barrierefreiheit http://www.bitvtest.de/ http://www.bitvtest.de/selbstbewertung/ http://www.webforall.info http://juicystudio.com/services/colourcontrast.php#specifySonstiges http://www.webhits.de/ http://www.abkuerzungen.de http://www.dmoz.org/ http://de.selfhtml.org http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#schritt-fuer-schritt98 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587) CC. SachwortverzeichnisWDS10HA J AdWords ...... 73 JavaScript ...... 65 AIS ...... 12 AJAX ...... 65 K Anzeigen ...... 73 keyword stuffing ...... 73 Archie ...... 37 Keyword-Planer ...... 75 Klick-Verhalten ...... 55 B BIK-Projekt ...... 3 L BITV-Selbstbewertung ...... 3 Linkfarm ...... 73 BITV-Test ...... 3 Link-Popularität ...... 56 Boolescher Operator ...... 42 Browserweiche ...... 64 M Budget ...... 74 Meta-Angabe ...... 54 MetaGer ...... 47 C Metasuchmaschine ...... 47 Colour Contrast Analyser ...... 7 Meta-Tag ...... 54 Cookies ...... 63 CPC ...... 74 O Crawler ...... 39 OffPage-Optimierung ...... 35 Online-Lernplattform ...... 31 D OnPage-Optimierung ...... 35 Datenaufbereitung ...... 39 open directory project ...... 66 Datenbestand ...... 39 Datenerfassung ...... 39 P dmoz ...... 66 PageRank ...... 56 Pay-for-Performance ...... 73 E Personensuchmaschine ...... 50 Entwurfsphasen-Stylesheets ...... 17 Preis-pro-Klick ...... 74 Enzyklopädie ...... 49 Preisvergleichsmaschine ...... 49 Erfassung manuelle ...... 40 R Erweiterte Suche ...... 43 Robot ...... 39F S Flash-Datei ...... 65 SEO ...... 35 Sitemap ...... 24, 39 G Spezialsuchdienst ...... 52 Gestaltungsrichtlinie ...... 78 Spider ...... 39 Google Analytics ...... 68 Spidering Depth ...... 39 Gopher ...... 38 Spiegel-Site ...... 64WDS10H 99 © SGD, 16.11.16, Dorn, Hans-Peter (772587)Stil-Leitfaden ...... 78 Stilwiedergabe ...... 17 Styleguide ...... 78 Suchanfrage ...... 40 Suchbegriff ...... 42 Suchmaschinenoptimierung ...... 35T Term Vector ...... 56 To-do-Liste ...... 10, 68U URL ...... 54V Veronica ...... 38 Verzeichnis ...... 47W Web Accessibility Toolbar ...... 12 Web-Assoziator ...... 48 Webkatalog ...... 40, 47 Website-Duplikat ...... 64 Webverzeichnis ...... 40 WWW ...... 38Z Zielgruppe ...... 36100 WDS10H © SGD, 16.11.16, Dorn, Hans-Peter (772587) DD. Einsendeaufgabe Website-Optimierung Code: WDS10H-XX1-N01Name: Vorname: Fernlehrer/in:Postleitzahl und Ort: Straße: Datum:Studien- bzw. Vertrags-Nr.: Lehrgangs-Nr.: Note: 0116N01Unterschrift Fernlehrer/in: Bitte reichen Sie Ihre Lösungen über die Online-Lernplattform ein, oder schicken Sie uns diese per Post. Geben Sie bitte immer den Code zum Studienheft an (siehe oben rechts).1. Optimieren Sie die beiden bereits von Ihnen in den Einsendeaufgaben zum Studien- heft WDS09H erstellten und in die Website integrierten Produktunterseiten für „GoodHair“ und „Struwwelig“. Nutzen Sie hierzu die folgende To-do-/Stichwörter-Liste, die sich an den beiden To-do-Listen im Heft orientiert: • Sinnvolle Reihenfolge der Divs • HTML-Strukturelemente für Überschriften • Datentabellen richtig aufbauen • Sinnvolle Dokumenttitel • Anderssprachige Wörter auszeichnen • Navigation einheitlich • Inhalte gliedern • Meta-Angaben • Inhaltsduplikate • Adresszeile in der Fußleiste anpassen 2. Verlinken Sie die beiden Unterseiten in der Sitemap. Achten Sie bei allen drei Seiten auf validen Code und eine korrekte Darstellung der Seiten, die dem Gesamtlayout der Website entspricht! Die von Ihnen bearbeitete und verschickte Einsendeaufgabe enthält dementsprechend einen Link/eine URL zur kompletten Website oder alternativ die komplette, komprimierte Website inkl. der drei bearbeiteten Seiten. Lediglich die drei Dateien sind zur Überprüfung zu wenig!WDS10H 101 © SGD, 16.11.16, Dorn, Hans-Peter (772587)$ </div> </article> </div> </div> </div> <script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = '9e7a6ce4050e9cff875627f256d7a69c'; var endPage = 1; var totalPage = 108; var pfLoading = false; window.addEventListener('scroll', function () { if (pfLoading) return; var $now = $('.article-imgview .pf').eq(endPage - 1); if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) { pfLoading = true; endPage++; if (endPage > totalPage) return; var imgEle = new Image(); var imgsrc = "//data.docslib.org/img/9e7a6ce4050e9cff875627f256d7a69c-" + endPage + (endPage > 3 ? ".jpg" : ".webp"); imgEle.src = imgsrc; var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>'); $('.article-imgview').append($imgLoad); imgEle.addEventListener('load', function () { $imgLoad.find('img').attr('src', imgsrc); pfLoading = false }); if (endPage < 7) { adcall('pf' + endPage); } } }, { passive: true }); </script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> </html>

WDS10H Lernheft

-Anweisung erhalten. Dementsprechend würde die Überschrift im Hauptbereich (zurzeit noch „Hallo…“) eine

-Auszeichnung erhalten, die zweite Überschrift („Wir möchten Sie herzlich…“) eine

. Im Infobereich sollte die Überschrift ebenfalls die Zuordnung

-Tag im Kopf übernommen werden können/müssen und welche nicht. Außerdem spielen die anderen in der CSS-Datei definierten Stilangaben für

- Tag.StruwwelHaar Nun sieht der Name leider ganz anders aus als vorher, grau und fett und zu groß. Jetzt beginnt die Handarbeit! Zunächst wird eine CSS-Definition namens #kopf_name h1 für die Darstellung von

StruwwelHaar

festlegen, ebenfalls überprüft und ggf. übernommen.WDS10H 17 © SGD, 16.11.16, Dorn, Hans-Peter (772587)1 BarrierefreiheitUm zu erkennen, welche Angaben Veränderungen des

- Tag ebenfalls in den Kopf ein. Dazu markiert man bspw. in der Codeansicht den Namen „StruwwelHaar“ und klickt im Bedienfeld „Einfügen“ – Registerkarte „Text“ auf das Icon

. Auf diese Art wird um das markierte Wort herum das einleitende und schließende

-Tag eingefügt. Nun hat jede Seite den Namen „StruwwelHaar“ als

-Überschrift „Hallo…“ im Inhaltsbereich zu einer

-Überschrift. Die bisherigen

-Überschriften „Wir möchten Sie herzlich…“ im Inhaltsbereich und „Aktuelles“ im Infobereich werden zu

StruwwelHaar

Friseursalon StruwwelHaar stellt sich vor …

Herzlich willkommen auf unserer Website!

Neues aus dem Salon

StruwwelHaar

Produkte, die wir empfehlen und verwenden …

Nur das Beste für Ihr Haar!

Hersteller

StruwwelHaar

Unsere Leistungen und Preise …

Was kostet die Schönheit?

Aktionen

Angebot

StruwwelHaar

Unser Team stellt sich vor …

Gemeinsam möchten wir Sie verwöhnen!

StruwwelHaar

Unser aktuelles Event …

Haare schneiden nach dem Mondkalender!

Termine

StruwwelHaar

Der Kontakt zu uns …

Sie möchten gerne mit uns in Verbindung treten?

Was geschieht mit Ihren Angaben?

StruwwelHaar

Kontakt …

Ihre Mitteilung wurde an uns übermittelt!

Kontaktaufnahme

StruwwelHaar

Ein Impressum muss sein …

Geschäftsangaben des Friseursalon StruwwelHaar

Fakten

Die Sitemap unseres Webauftritts …

Hier finden Sie eine Auflistung aller Seiten!

Die Sitemap unseres Webauftritts …

Hier finden Sie eine Auflistung aller Seiten!

bis

- Tag.
StruwwelHaar
Nun sieht der Name leider ganz anders aus als vorher, grau und fett und zu groß. Jetzt beginnt die Handarbeit! Zunächst wird eine CSS-Definition namens #kopf_name h1 für die Darstellung von

festlegen, ebenfalls überprüft und ggf. übernommen.
WDS10H 17 © SGD, 16.11.16, Dorn, Hans-Peter (772587)
1 Barrierefreiheit
Um zu erkennen, welche Angaben Veränderungen des