Professionelle Suchmaschinenoptimierung - I

Transkript

1 Professionelle Suchmaschinenoptimierung - I Ziel: Sensibilisierung im Umgang mit Suchmaschinen-Optimierung Themen: 1. Suchdienste und Eintragsmöglichkeiten 2. Richtlinien und Gesetze 3. Aktuelle Technologien 4. Grundlagen Website-Aufbau 5. Offpage-Optimierung ITIB IT in Berlin Christiane Müller contact@itib.de Veranstaltungsort: IHK Cottbus Datum: 25. November 2008

2 Suchdienste und Eintragsmöglichkeiten (1) Suchmaschinen Benutzeroberfläche zur Eingabe der Suchworte automatische Sammeln und Auswerten von Webseiten Folie: 2

3 Suchdienste und Eintragsmöglichkeiten (2) Webkataloge thematisch geordnete Linklisten hierarchisch in einzelne Rubriken gegliedert Folie: 3

4 Suchdienste und Eintragsmöglichkeiten (3) Metasuchmaschinen integrieren die Suche verschiedener Anbieterseiten Zentrales Problem: Gewichtung der Verweise Suchmaschinen-Verflechtung Folie: 4

5 Suchdienste und Eintragsmöglichkeiten (4) Überprüfung der Indizierung site: host: url.host: Abfrage konkreter Webseiten allinurl: url: url.all: link: Folie: 5

6 Barrierefreies Webdesign Dimensionen der Barrierefreiheit Standardkonformität Zugänglichkeit (Accessibility) Gebrauchstauglichkeit (Usability) traditionelle Barrieren abbauen Tabellen-/Frame-basierte Layouts ablösen semantisch fehlerhaften Code korrigieren Inhalt und Layout trennen Standards und Richtlinien umsetzen nutzerorientierte Gestaltung anstreben medienneutrales Publizieren ermöglichen Verständlichkeit Design greifende r e b ü m r o f platt ftssichere n u k u z d n u nstreben a g n u ll e t s Dar Nutzergruppen und Nutzungskontexte berücksichtigen Navigation, Ori entierung und Nutzerfüh rung bedenken spekte inhaltliche A umsetzen Struktur durch Layout verstärken Folie: 6

7 Richtlinien und Gesetze 1999: Web Content Accessibility Guidelines (WCAG) Empfehlungen des World Wide Web Consortium (W3C) 14 Richtlinien mit 65 Checkpunkten verteilt auf drei Prioritätsstufen siehe : Barrierefreie Informationstechnik-Verordnung (BITV) barrierefreies Gestalten von Webseiten für öffentliche Institutionen gesetzlich vorgeschrieben siehe Folie: 7

8 Barrieren, Ursachen und Anforderungen Folie: 8

9 Aktuelle Technologien W3C-Technologien Zugänglichkeitsaspekte offener, auf Industrie-Konsens basierender Prozess Betrachten oder Navigieren mit Standard-Benutzeragenten keine Plugins oder eigenständigen Anwendungen erforderlich Wohlgeformte und valide Dokumente nach syntaktischen Regeln aufgebaut alle Elemente korrekt ineinander geschachtelt abschließendes Element oder explizite Endmarkierung ausschließlich die anwendungsspezifisch definierten Elemente und Markierungen der Dokumenttypdefinition Folie: 9

10 Extensible Hypertext Markup Language (1) vom W3C entwickelte Spezifikation Neuformulierung der Hypertext Markup Language (HTML)Sprachregeln in der Extensible Markup Language (XML) Trennung von Inhalt und Layout überholte HTML-Elemente entfernt (center, s, u, blink, font) Dokumentenaufbau: Kopfzeilen + Dokumentenkörper: Definition und Deklaration Kopfbereich: Metadaten und Dokumentenrelationen Textkörper: sichtbarer Inhalt Folie: 10

11 Extensible Hypertext Markup Language (2) XML-Version Zeichensatz <?xml version="1.0" encoding="utf-8"?> Wurzelelement Dokumenttypdefinition <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Dokumenten- " körper <html xmlns=" lang="de" xml:lang="de"> <head> Kopf-... bereich XML-Namensraum Dokumentensprache </head> <body> Text-... körper </body> </html> Folie: 11

12 Extensible Hypertext Markup Language (3) Elemente für alle Inhalte des Textkörpers korrekte Verschachtelungen von Elementen Kleinbuchstaben für Elemente, Attribute und Attributwerte Attributwerte immer in Anführungszeichen Elemente, die kein Abschlusselement beinhalten, durch einen Schrägstrich / beenden <p>das ist ein <strong>verschachtelter Absatz</strong>.</p> <p>und jetzt folgt ein Bild:<br /> <img src="..." height="..." width="..." /></p> Folie: 12

13 Cascading Style Sheets (1) Formatierung und Layout Extrahieren aller PräsentationsInformationen aus dem Inhalt Zeichenabstände Textausrichtung Objektpositionen Schriftcharakteristiken Farbeigenschaften unterschiedliche Layouts für unterschiedliche Ausgabemedien Folie: 13

14 Cascading Style Sheets (2) p.banner {display: none;} <p class="banner"> <img src="it.gif" width="114" height="46" alt="it-infothek-logo" /> Bachelor-Thesis<br /> Testseite Formatvorlagen<br /> Christiane Müller </p> <h1>barrierefreie Gestaltung von Internetseiten</h1> <h2>einleitung</h2> <h3>barrierefreiheit</h3> <p>textabsatz.</p> <h3>zielstellung</h3> <p>textabsatz.</p> Folie: 14

15 Browser-Plugins zur Validierung Mozilla Plugin: Web Developer Toolbar Simulieren verschiedener Bildschirmauflösungen Ausgabe einer Webseite bei abgeschalteten Formatzuweisungen explizite Anzeige bestimmter Elemente (z.b. Überschriften, Listen) Download: Mozilla Plugin: HTML-Validator überprüft Syntax Download: Folie: 15

16 Funktionen einer Website Seitendesign zum Überfliegen Standardfunktionen: Startseite, Inhaltsseiten, Kontakt/Impressum Navigationsbereiche: Utilities Home-Button Startseiten-Verweis Site-Kennung Logo, Slogan Sektionen Hilfsnavigation Kontakt, Suche, Hilfe, Sitemap, Impressum primäre Navigation Hauptnavigation sekundäre Navigation Unternavigation Navigationshilfen Seitentitel Firmenname und Seitenüberschrift Navigationspfad BrotkrumenPfad mit Navigationsebenen Sitemap Inhaltsverzeichnis mit Verweisen Index alphabetische Stichwortlisten mit Verweisen Suche Eingabefeld für site- oder seiten-interne Suche Hilfe kontextbasierte Hilfeseiten FAQ Fragen und Antworten Folie: 16

17 Die Startseite Gesamtzusammenhang der Website vermitteln Logo und Slogan hervorheben Unternehmen charakterisieren, Wertangebot vermitteln Achtung: Kopfbereich oftmals für Bannerwerbung genutzt Navigation kann sich von der globalen Navigation der restlichen Webseiten unterscheiden Ordnung, Wortwahl und Gruppierung beibehalten Erläuterung hinzufügen oder Unternavigatoren auflisten Schlüsselwörter in Text einbeziehen Pop-Ups vermeiden Folie: 17

18 Schlüsselwort-Analyse Ranking-Kriterien: Wortnähe, -dichte ranking-check.de : Webseite in Top-Listenpositionen? metager.de/asso.html : erzeugt Synonyme logsta.de : Position-Check, Keyword-Analyse (Keyword-Häufigkeit, -Dichte) Dateigröße, Wortanzahl, Seitentitel, Frames oder Umleitungen Metadaten (Autor, Zeichensatz, Sprache, Beschreibung, Keywords) Anzahl interner und externer Links, Page-Rank Folie: 18

19 Schreiben für das Web sach- und bedürfnisgerechte Vermittlung der Inhalte Teaser bei längeren Fließtexten Text wird nur von 16% aller Nutzer vollständig gelesen Bildschirm-Lesegeschwindigkeit ist um 25-30% geringer verschiedene Sinne parallel ansprechen Text, (interne und externe) Verweise, Downloads Grafiken, Photos, Videos, Tondokumente, Animationen Serifenlose Schriften wie Arial, Verdana und Tahoma Flattersatz (linksbündig) mit 26 bis 70 Zeichen pro Zeile relative Schriftgrößen verwenden, nicht kleiner als 3.2 mm Folie: 19

20 Farbwahrnehmung Farben kommunizieren, setzen Kontraste, wecken Vorstellungen, beeinflussen Stimmungen Kontrast, Helligkeit und Sättigung Abzuraten ist von Mustern und Bildern im Hintergrund Komplementärfarben sind schwer fokussierbar PositivDarstellung: schwarze Schrift auf weißem Hintergrund NegativDarstellung: weiße Schrift auf schwarzem Hintergrund Komplementärfarben: blaue Schrift auf rotem Hintergrund Komplementärfarben: rote Schrift auf blauem Hintergrund Folie: 20

21 Farbwirkung psychologische, symbolische und kulturelle Wirkung automatische und unterbewusste Reaktionen und Assoziationen Zuschreibung der Farbe zu bestimmten Begriffen unterschiedliche Lebensweisen Rot: Liebe und Hass Dynamik und Aktivität Gefahr und Warnung Grün: Natur und das Leben Ruhe und Geborgenheit Untreue Blau: Treue, Sympathie sowie Harmonie Lüge Folie: 21

22 Farbklang Kombination verschiedener Farben Rot Blau Gold Attraktivität, Mut, Leistung Grün Rot höchste Vitalität: das pflanzliche Leben - das animalische Leben Gold Rot Grün Glück: Reichtum Liebe Gesundheit Grün Gelb Blau Rosa Wachstum und Frühling Blau Weiß Wahrheit, das Gute, Klugheit, geistigetugenden, Wissenschaft, Konzentration und Sport Blau Grün Weiß Erholung: positive Erholung aktive Freizeitgestaltung Ruhe und wenig Aufregung Folie: 22

23 Farben als Gestaltungsmedium im Web (1) Blau als Gestaltungsmedium bei der Allianz (Stand ) Folie: 23

24 Farben als Gestaltungsmedium im Web (2) Gelb als Gestaltungsmedium bei Lipton (Stand ) Folie: 24

25 Farben als Gestaltungsmedium im Web (3) Weiß als Gestaltungsmedium bei Tiffany (Stand ) Folie: 25

26 Farben als Gestaltungsmedium im Web (4) Schwarz als Gestaltungsmedium bei Afri-Cola (Stand ) Folie: 26

27 Validierung einer Website Gebrauchstauglichkeit-Tests mit potentiellen Nutzern Tests mit verschieden veranlagten Menschen Fachhintergrund, Erfahrung, Denkstruktur, Wahrnehmungsmuster Online/Offline-Tools Kontrastanalyse Positionierung bei Suchmaschinen, Analyse von Schlüsselwörtern Validierung der Technologien Strukturierung und Formatierung mit W3C-Validatoren überprüfen Barrierefreiheit während der Entwicklung mit Browser-Plugins prüfen Folie: 27

28 Inhalte publizieren Aufwand ist zielgruppenabhängig 100%-ige Barrierefreiheit aufgrund unterschiedlicher Ein- und Beschränkungen schwer erreichbar Erstellungs- bzw. Aktualisierungsdatum angeben Schlüsselwörter in Domain-, Verzeichnis-, Dateinamen verwenden Banner-Werbung Beziehungsmanagement mit Diskussionsforum Banner webgerechte Aufbereitung von informativen Inhalten Software, Treiber, Produktbroschüren, Newsletter Folie: 28

29 Portable Document Format (1) weit verbreitet, da Layout-treue Übermittlung tagged PDF Datei-Optimierung selbst erklärende Dokumententitel klare Strukturierung durch Überschriften und Absätze ergänzende Bildbeschreibungen Exportfunktionen bisher mangelhaft Umsetzung: Adobe Acrobat Professional Folie: 29

30 Portable Document Format (2) Bildschirmfotos verschiedener tagged PDF-Funktionen in Adobe Acrobat 8 Pro Folie: 30

31 Newsletter (1) kostengünstige Alternative zu Print-News temporäre Newsletter (Messen, größere Veranstaltungen) Hinweis auf Inhalt, Erscheinungsabstand und Mehrwert einzige Pflichtangabe sollte die -Adresse sein Double-opt-in-Verfahren zur Sicherheit beider Seiten als Text- versenden Qualität der Informationen ist von besonderer Bedeutung knappe Formulierungen erleichtern die Lesbarkeit integrierte Werbung deutlich absetzen Folie: 31

32 Newsletter (2) Die barrierefreie Website - ITIB-Newsletter vom Ausgabe 5 contact@itib.de Kopf In der heutigen Ausgabe steht "Die barrierefreie Website" im Vordergrund. Außerdem erfahren Sie Konzepte zur barrierefreien Website 2. Design-Aspekte 3. Usability-Aspekte 4. Marketing-Aspekte Hauptteil aktuelle Nachrichten... Neuigkeiten auf der Website... Kurioses und Lustiges... Fuß         Sie erhalten diesen Newsletter, weil Sie ihn unter bestellt  haben. Wenn Sie ihn nicht mehr beziehen wollen, schicken Sie uns bitte eine leere Mail mit dem Betreff "Newsletter abbestellen" oder gehen Sie auf folgenden Link: Standardangaben wie Name und Postanschrift des Herausgebers zur Kontaktaufnahme weiterhin ein -Verweis oder Verweis auf die Website  Folie: 32

33 Newsfeeds (1) Really Simple Syndication (RSS) XML-Dateien, die abonniert und unter einer einheitlichen Benutzeroberfläche gesammelt werden können Abo ist anonym, keine -Adressangabe notwendig nur URL der Bezugsquelle angeben Sage: Plugin für Mozilla und Firefox (links) Mozilla Thunderbird: -Client mit RSS-Konto (rechts) NewsBee: separater Client für Microsoft Windows (mittig unten) Folie: 33

34 Newsfeeds (2) <?xml version="1.0" encoding="iso "?> <rss version="2.0"> <channel> <title>'die barrierefreie Website'-News</title> <link> <description>'die barrierefreie Website'-Newsfeed, ein Service von Christiane Müller, ITIB - IT in Berlin. Barrierefreies Webdesign - Usability, Design und Marketingaspekte.</description> <language>de</language> <pubdate>sun, 11 Nov :00: </pubDate> <lastbuilddate>sun, 11 Nov :00: </lastBuildDate> <managingeditor>rss@die-barrierefreie-website.de (Christiane Müller)</managingEditor> <webmaster>contact@die-barrierefreie-website.de (Christiane Müller)</webMaster> <item>... </item> </channel> </rss>            Folie: 34

35 Newsfeeds (3) <item> <title>'die barrierefreie Website' geht online</title> <description> : Das Projekt 'Die barrierefreie Website' geht online! Ziel dieser Website ist es, sowohl Unternehmen als auch Webdesigner für das Thema Barrierefreiheit zu sensibilisieren und dabei unterschiedliche Aspekte aufzuzeigen - von Usability über Design bis hin zum Marketing.</description> <pubdate>sun, 11 Nov :00: </pubDate> <link> /news/die-barrierefreie-website-geht-online.html</link> <guid> /news/die-barrierefreie-website-geht-online.html</guid> </item>        Weitere Angaben möglich z.b. Zeitangabe, wann keine Aktualisierung erfolgen soll skiphours, skipdays <hour>0</hour>,<hour>1</hour> für zwischen 0 und 1 Uhr Folie: 35

36 Status-Codes (1) Fehlerabfrage in.htaccess-datei (Apache-Webserver) neue Website-Struktur geänderte Verzeichnis- und Dateinamen gelöschte Dateien Individualisierte Fehlerseiten häufigste Fehlermeldung: Status Code Seite nicht gefunden redirect 301 /alter-ordner/alte-datei.html redirect 302 /ordner/datei.html ErrorDocument 401/code401.html  ErrorDocument 404/code404.html  ErrorDocument 500/code500.html  Folie: 36

37 Status-Codes (2)!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="de" lang="de"> <head> <title>barrierefreiheit: Fehlerseite bei Status Code 404</title> [... Metadaten, Dokumenten-Relationen...] </head> <body> <p><strong>seite nicht gefunden (Fehler 404)</strong><br /> Leider gibt es die von Ihnen angeforderte Seite nicht. Vielleicht ist die Adresse der Seite nicht richtig geschrieben oder eine Suchmaschine hat Sie zu einer veralteten Seite geschickt.</p> <p>versuchen Sie Folgendes:</p> <ul> <li><a href="sitemap.html">zur Sitemap</a></li> <li><a href="index.html">zur Startseite</a></li> </ul> <p>falls Sie dennoch Probleme haben sollten, schreiben Sie uns: <a </body> </html> Individualisierter textueller Hinweis Verweis auf Inhaltsverzeichnis und Startseite Möglichkeit zum Mail-Kontakt Folie: 37

38 Status-Codes (3) Zugriffsbeschränkung in robots.txt Verzeichnisse und Dateien von Indizierung ausschließen temporär: noch nicht fertig gestellte Webseiten konstant: Verzeichnisse mit Skript-Dateien Datei immer anlegen sonst unbeantwortete Anfragen im Webserver-Logfile keine Restriktionen: leere Datei anlegen User-agent: * Disallow: /scripts/ Disallow: /relaunch/ Disallow: /betriebsausflug/weihnachten2006.html Folie: 38

39 Logfile-Analyse Auswerten des Nutzer-Verhaltens Open Source-Projekt Webalizer Anfragen pro Tag und Monat Herkunftsland der Besucher Seitenbesuche Herkunft der Besucher (Referrer) Suchbegriffe Bildschirmfotos verschiedener Webalizer-Ausgaben zu Folie: 39

40 Projektvorstellung Die barrierefreie Website: Usability, Design und Marketingaspekte Ziel dieser Website ist es, sowohl Unternehmen als auch Webdesigner für das Thema Barrierefreiheit zu sensibilisieren und dabei unterschiedliche Aspekte aufzuzeigen. Barrierefreies Webdesign - von Usability über Design bis hin zum Marketing. Folie: 40