Success Story: SEO Activities (in Arbeit)

Web 1.0 to Web 2.0 Migration

Im Zuge einer Web 1.0 nach Web 2.0 Website Migration bin ich auf die Frage gestossen:
Wie verhält sich das Google Ranking auf die Umstellung einer Website?
Dazu musste ich zunächst einmal die Parameter ermitteln, die sich auf das Google Ranking auswirken.

Einer der Rahmenbedingungen ist: die URL der Web Seite bleibt vor und nach der Migration gleich

In diesem Zusammenhang bin ich auf eine Diplomarbeit zum Thema SEO (Search Engine Optimization) und Web 1.0 nach Web 2.0 Migration einer Website gestossen:

Diplom: Migration Web1.0 nach-Web2.0 SEO von Neuffer PDF Document

Eine weitere gute Quelle ist: http://seo-tutorial.seoadministrator.com/#224

Einige der wesentlichen Punkte, die sich positiv auf das SEO und somit auf das Google Ranking einer Website auswirken sind:

Link auf MetaTagsMeta Tags: Keywords, Description, TitleErledigt
Link auf LinksDie Anzahl von Verknüpfungen von und zu einer WebsiteWeiterhin in Arbeit
Link auf WikipediaBegriffs Definitionen Links auf eg de.wikipedia.orgWeiterhin in Arbeit
Link auf ODPDMOZ (Open Directory Project Eintrag)
auch: Webwiki
Weiterhin in Arbeit
Link auf RSSRSS feedsErledigt
Link auf KategorisierungStrukturierung nach KategorienWeiterhin in Arbeit
Link auf ShareAddToAny Skript "Share" Schaltflaeche, soziale LesezeichenverwaltungErledigt
Link auf flickrflickr Bilder Index
Link auf slideshareslideshare Dokument Archiv und Index
Link auf picasawebpicasaweb.google.com Bilder Index + Geotagging
Link auf AltQueriesAlt Queries auswerten, in neue Seiten mit implementierenWeiterhin in Arbeit
Link auf WeiterleitungenUngültige Hyperlinks vermeiden, sollte sicherheitshalber für jede geänderte URL eine Weiterleitung eingerichtet werden.Erledigt
Link auf CSS-menuCSS MenüErledigt
Link auf URLnamenBeschreibende Namen für jede einzelne Webseite URLWeiterhin in Arbeit


Auf weitere Optimierungsmöglichkeiten bin ich durch die SEOquake Diagnosis (ein Browser Plugin) gestossen:
Headings: H1 H2 H3 ...Headings: H1, H2, H3 und mehr ...Erledigt
Using Dublin CodeUsing Dublin Metadata CodeTodo
Language Codecontents language in the HTML codeTodo
Sitemap einbindenSitemap einbindenErledigt


Eine Reihe dieser Massnahmen habe ich für die eigene Website umgesetzt. Zuletzt die Umsetzung zu einem CSS Menü

SEO Massnahmen im Einzelnen

Meta Tags: Keywords, Description, Title

Einen nicht unerheblichen Teil im Google Ranking liefern die Meta Tags im Header einer Website.
Dazu gehört zunächst einmal der Titel:

Titel: <TITLE>title text</TITLE>
Umso beschreibender der Titeltext ist, umso eher lässt sich bereits der Inhalt einer Seite sich aus dem Titel herauslesen und somit für jemanden der eine bestimmte Seite sucht sich eindeutiger bestimmen, ob möglicherweise die Seite eine Relevanz für das gesuchte Thema besitzt.

Ebenso verhält es sich mit der Beschreibung einer Seite:

Description: <META name="Description" content="description text">
Sinnvoll ist ein Abstract, eine Kurzbeschreibung des Inhalts der Seite (bis 250 Zeichen, Optimal: 70-160), der auch für die Kurzbeschreibung bei der Darstellung des Suchergebnisses herangezogen wird. Umso knapper, aber präziser die Beschreibung geliefert wird, umso wahrscheinlicher ist es, das Besucher den Link auswählen und auf ihre Website kommen. Fehlt dagegen die Description vollkommen, werden möglicherweise nur Header Informationen, oder das Kopfmenü ihrer Website als Beschreibung indiziert, die dann letztlich für jede Seite gleich aussehen.

Keywords: <META name="Keywords" content="keywords list">
Da durch Angabe beliebiger Keywords in der Vergangenheit Missbrauch betrieben wurde, spielt die Gewichtung und das Google Ranking heute nur keine oder zumindest nur noch eine untergeordnete Rolle. Siehe dazu auch den Artikel von Christopher Heng "Why Don't You Use the Keywords Meta Tag on Your Website?" (thesitewizard.com). Dennoch sollte man die Keyword Liste nicht völlig ausser Acht lassen da zumindest noch einige der Suchseiten Anbieter dieses Feature unterstützen.

Da die Keyword Liste die subjektive Zusammenstellung des Verfassers wiederspiegelt die einem Suchenden bei der Zuordnung der Relevanz eines Artikels behilflich ist, die Suche nach Einzelworten in der Masse der Ergebnisse bei einer Google Suche untergehen, empfiehlt es sich hier Suchbegriffe aus mehreren Worten unterzubringen, mitunter auch in unterschiedlichen Kombinationen.

Zumindest das Browser Plugin SEOquake Diagnosis meckert das Fehlen von Keywords an. Spätestens für den Dublin Metadata Code werden die Keywords für das Subject erneut benötigt.

 Beispiel:
 SEO Aktivitäten, SEO Optimierung, Optimierung SEO, Website Optimierung, Optimierung Website
 

Die Anzahl von Verknüpfungen von und zu einer Website

Stellen sie sich einmal vor, Sie suchen einen Arzt oder eine neue Bank und sie fragen ihre Freundin oder ihren Freund. Beide würden ihnen eine Empfehlung geben. Soziales Netzwerk Kontakte (im Kleinen) Diese Empfehlung spiegelt das Vertrauen wieder was sie in ihre Freundin oder Freund setzen.

Genauso verhält es sich mit Link Empfehlungen im Internet. Umso mehr Empfehlungen sie mit ihrer Website abgeben, umso mehr werden sie wahrgenommen. Umso mehr Empfehlungen von anderen erhalten, umso vertrauenswürdiger erscheint ihre Website.

Soziales Netzwerk Kontakte mit vielen Verknüpfungen Wenn dann eine Seite von ihrer Website in einem hochkarätigem Artikel als Referenz genannt wird, brauchen Sie sich um Besucher auf ihrer Website keine Sorgen mehr machen.

Das Ranking von Websites basiert auf diesem Netzwerk von Empfehlungen. Umso mehr hochwertige Empfehlungen auf ihre Website verlinken, um so höher steigt ihre Website im Google Ranking. Umso qualifizierter eine Website ist, umso höher ist auch die Wichtung der Empfehlung.

Von einem auf den nächsten Tag werden sie sicherlich nicht ihr Google Ranking erhöhen können, aber mit der Zeit, wenn sie an den Link Empfehlungen dran arbeiten, werden sie mit ihrer Website merklich im Google Ranking steigen.

Begriffs Definitionen Links auf eg de.wikipedia.org

Es gibt ziemlich einfache unterstützende Massnahmen wie man Links auf andere Websites setzen kann und damit einmal Unterstützung für eine andere Website initiiert. Hier eignet sich für Begriffserklärungen vor allem auf Wikipedia zu verweisen. Wikipedia selbst steht auf einem hohen Ranking, geniesst hohes Vertrauen in der Community und kann auch zur Lesbarkeit der eigenen Website beitragen.

Beispiel anhand eines Eintrags im kommenden Abschnitt:
Für das Thema <a title="FidoNet - Wikipedia, the free encyclopedia"
   href="http://en.wikipedia.org/wiki/Fidonet">Fidonet</a> gibt es ...
Wie auch schon das Beispiel am Anfang dieser Seite wo es einen Link zur Begriffserklärung SEO gibt.

DMOZ (Open Directory Project Eintrag)

Eines der Internet Portale, das Links redaktionell aufbereitet und Kategorisiert (siehe auch den Abschnitt Kategorisierung) ist das Open Directory Project DMOZ.ORG das seit 1998 eine Sammlung von redaktionell überprüften Websites auflistet.

Für das Thema Fidonet gibt es beispielsweise die Kategorie: Computers - Bulletin Board Systems - Fidonet:
http://www.dmoz.org/Computers/Bulletin_Board_Systems/Fidonet/

DMOZ a.k.a. The Open Directory Project (ODP) liefert Antworten zu den Fragen rund um DMOZ aka ODP wie: Weitere Infos zum DMOZ Projekt können in der Wikipedia Open Directory Project - Wikipedia nachgeschlagen werden -und-
Über den Nutzen von DMOZ für SEO liefert der nachfolgende Beitrag Der Nutzen eines DMOZ-Eintrags für die Suchmaschinen-Optimierung weitere Informationen.

Nun hat aber Google die Unterstützung für ODP aufgekündigt. Siehe auch den Bericht bei Heise: Google schliesst seine Labs (vom 21. Juli 2011).
"Zugleich machte Google seinen Webkatalog Google Verzeichnis stillschweigend dicht.
Dieser bereits vor elf Jahren als Konkurrenz zum Yahoo-Katalog gestartete Dienst wertete
Daten aus Netscapes dmoz-Verzeichnis mit einem Ranking innerhalb der Rubriken auf."

Webwiki (Portal Eintrag)

Neben DMOZ gibt es viele weitere Portale auf denen man seinen Internet Auftritt bekannt geben kann. Je nach Spezialisierung gibt es unterschiedliche Portale, Blogs und Register in denen man einen Eintrag zu seiner Website aufnehmen lassen kann oder wo man einfach einen entsprechenden Link mit zusätzlichen Beschreibungen hinterlegen kann. Zu einem dieser Portale zählt auch Webwiki zu dem man nachdem man seinen Eintrag auf dem Portal hinterlegt hat einen Link erhält, den man auf seine Website einbinden kann. Damit erfolgt ein Austausch nach dem Win-Win Prinzip. Einmal unterstützt man somit durch sein Vertrauen das entsprechende Link Portal, zum anderen erhält man im Gegenzug einen Linkverweis auf seine eigene Seite.

Bewertungen zu ambrosia60.goip.de ... ist ein solcher Link Button. Besucher der eigenen Seite können auf die Portalseite wechseln um dort eine Bewertung der Website vorzunehmen. Webwiki Button
Weitere Website oder auch Webring Portale:
http://www.webring.com/ webring.com

RSS feeds

RSS oder Atom Feeds erleichtern es Benutzern der Website auf dem Laufenden zu bleiben. Aber auch Indizierer profitieren von dem Push Verfahren über aktuelle Änderungen und Neuigkeiten auf der Website informiert zu bleiben.

Damit wartet man nicht erst ab bis beispielsweise Google das nächste mal die eigene Website besucht, sondern man gibt Änderungen direkt Google bekannt. Das funktioniert dann ähnlich zu Twitter oder Google+ wo Nachrichten nicht erst darauf warten abgeholt zu werden, sondern sie werden auf das eigene Gerät gebracht.

Damit kehrt man die sonst übliche "passive Rolle" in eine "aktive Rolle" um. Pushing statt Polling. Statt abwarten das die User zu einem kommen, die Neuigkeiten direkt an die interessierten Nutzer weiter verbreiten.

Die simpelste Form ist es wohl manuell den Feed zu "füttern" indem man die neuesten Nachrichten auch gleich in die entsprechende RSS Datei schreibt.
CMS Systeme können selbsttätig aus dem neuesten Beitrag einen RSS Eintrag vornehmen.
Jetzt noch einen Link auf der eigenen Website für den RSS Feed hinterlegen, und schon kann jeder interessierte Benutzer an Neuigkeiten von der Website an den Feed anbinden.

Eine ausführliche Bastelanleitung für das manuelle Einbinden eines RSS 2.0 Feeds findet sich unter: How to use RSS to promote a website (scriptol.com)
Wer noch mehr über die RSS Specs wissen möchte ist bei RSS 2.0 Specification (RSS 2.0 at Harvard Law) gut aufgehoben.

Da das RSS 2.0 XML Format kein Hexenwerk ist, kann das zur Not auch zu Fuss erstellt werden und bedarf keiner komplizierten Scripte:
<?xml version="1.0"?>
<rss version="2.0">
  <channel>      (Channel description section)
    <title>your RSS newsfeed title</title>
    <link>URL of your website</link>
    <description>describe your newsfeed, what is the topic of your news?</description>
    <lastBuildDate>Sat, 05 Oct 2012 23:54:01 GMT</lastBuildDate>   (optional)
    
    <item>       (News items each separated by item begin, item end)
      <title>title of first news</title>
      <link>URL link to the full article</link>
      <description>abstract of your article</description>
      <language>de-de</language>                         (optional parameter)
      <pubDate>Tue, 02 Oct 2012 00:00:01 GMT</pubDate>   (optional parameter)
      <category>Website News</category>                  (optional parameter)
      <source url="reference to source of your news article">
         description of your source</source>                   (optional parameter)
    </item>       (each item separated by item begin, item end)

  </channel>
</rss>

Ein RSS.XML File selbst zu erstellen sollte keine Schwierigkeit bereiten. Ob dieses RSS.XML auch wirklich für einen RSS Feed taugt kann man unter www.feedvalidator.org online überprüfen.

Nachdem ich nach Abonnieren des Links keine Nachricht erhielt liess ich den Feed überprüfen und erhielt nachfolgende Fehlermeldungen:
Undefined named entity: &uuml;
  das Navigationsmen&uuml; ver&auml;ndert.

Undefined item element: language
  <language>de-de</language>

item should contain a guid element
  </item>
  
Missing atom:link with rel="self"
  </channel>
Jeder Fehlernachricht ist ein Hilfelink mit einer ausführlichen Beschreibung über den Fehler angehängt einschliesslich eines Hinweises wie der Fehler zu fixen ist.

Man kann den Test solange wiederholen bis sämtliche Fehler behoben sind und am Ende zu dem gewünschtem Link führen:
[Valid RSS]

Webserver Vorraussetzungen RSS Feeds zu servicen

Selbst wenn die XML Datei korrekt ist, kann es immer noch sein, das der Webserver bei der Auslieferung des RSS Feeds in die Suppe "spuckt".
Dann wird es sicherlich an einer fehlenden AddType Deklaration liegen. Abhängig von der gewählten Dateiendung bedarf es eines Eintrags in der Webserver Config (hier am Beispiel für Apache httpd.conf)
   AddType application/rss+xml;qs=0.8 .rss

Eine weitere hervorragende und hilfreiche Anleitung für das Einbinden eines RSS Feeds in die eigene Website gibt es unter:
corz.org.. how to feed rss.. a hands-on guide to creating rss newsfeeds with php

Strukturierung nach Kategorien

Besteht die eigene Website nicht nur aus einer einzelnen Seite, werden zudem unterschiedliche Themengebiete auf der eigenen Website behandelt, kommt man nicht umhin die Themen nach Kategorien zu sortieren
(siehe auch Abschnitt zuvor RSS Channel:Item:Category Parameter).

Zum leichteren Auffinden der relevanten Seiten kann man neben der Website eigenen Struktur Seiten übergreifend Kategorien oder Tags definieren. Das können auch Begriffe aus der Keyword Liste sein.

Damit erleichtert man nicht nur dem Besucher der eigenen Website das Auffinden von relevanten Beiträgen sondern auch das Indizieren von Seiten durch Google & Co.

Werden Themenübergreifend Seiten erstellt, können Suchbegriffe wenn sie zuvor kategorisiert wurden in Kombination mit dem Suchbegriff besser gefunden werden.

Nun hängt es davon ab, ob sie ein CMS System verwenden oder noch Plain-Old-School Style Web 1.0 Editierung von Hand betreiben. CMS Systeme haben in der Regel eine eingebaute Kategorisierungs Funktion. Oftmals wird das auch Tagging genannt. Damit ordnen sie ihrem Artikel bestimmte Suchbegriffe zu, so das ein möglicher Besucher ihre Seite besser und schneller finden kann. In Wiki Systemen wird diese Funktion oftmals durch simple Querverweise unterstützt; Beispiel: [Category:SEO]. So lassen sich Seiten zu bestimmten Suchbegriffen auch auflisten und besser wiederfinden. Was zu Fuss funktioniert hilft auch den Webcrawlern und Indizierern wie Google & Co.

AddToAny Skript "Share" Schaltflaeche, soziale Lesezeichenverwaltung

Jeder kennt die sozialen Netzwerke Buttons Facebook+, Twitter+ oder Google+. Für Leute die sich mit dem Thema Datenschutz befassen ist das ein Graus da bei diesen Links bereits beim Besuch einer Website Daten an die entsprechenden Dienste gesendet werden. Es sei denn, die Seite verwendet das von Heise angebotene 2-Klick Verfahren, das es jedem User freilässt die Funktionen zu aktivieren, bedingt zu aktivieren oder abgeschaltet zu lassen:
2 Klicks für mehr Datenschutz | c't
Diese Lösung ist Java Script basiert und verwendet die jquery Library. Zudem liefert der Link Hintergrundinformationen für jeden einzelnen Benutzer alsauch für den Entwickler der diese Lösung auch auf seiner Website einbinden möchte.

IE Benutzer können unter Umständen die Fehlermeldung
"Error: 'JSON' is undefined"
erhalten. Normalerweise sollte das nur IE Versionen < 8 betreffen, aber manchmal kann es auch IE8 Benutzer treffen. Nun lässt sich im Einzelnen nicht jedem Fehler einzeln nachzugehen.
json-is-undefined-error-in-javascript-in-internet-explorer Fehlermeldung bei Stackoverflow.com liefert eine mögliche Lösung:
 "... but I had a similar problem and i solved it including JSON 2 to my application:"
 
https://github.com/douglascrockford/JSON-js
 "Other browsers natively implements JSON but IE < 8 (also IE 8 compatibility mode)
  does not, that's why you need to include it."
 
Durch Vorschalten der JSON2 Library von Douglas Crockford verschwindet die Fehlermeldung:
 Aktivierung der Erweiterung durch Einbinden vor die Heise Script Zeilen:
   <script type="text/javascript" src="/json2.js"></script>
   <script type="text/javascript" src="/jquery.js"></script>
   <script type="text/javascript" src="/jquery.socialshareprivacy.js"></script>
 
Diese Lösung befreit den Webseitenbetreiber aber nicht davon entsprechende Hinweise in der Datenschutzerklärung zur Webseite zu liefern.

flickr Bilder Index

slideshare Dokument Archiv und Index

picasaweb.google.com Bilder Index + Geotagging

Alt Queries auswerten, in neue Seiten mit implementieren

Bei der SEO Analyse sind die Google Webmaster Tools ein unverzichtbares Tool. Hier können die aufgerufenen Seiten einen nützlichen Überblick verschaffen, welche Seiten überhaupt "wahrgenommen" werden, wie gut die mit anderen Websites verlinkt sind, wie oft die Seite nach Keywords getrennt aufgerufen wird. Dies liefert den unverzichtbaren Input wenn man seine Website SEO gemäss gestalten möchte.

Mitunter erhält man auch ein überraschendes Ergebnis wie Indexer die eigene Website sehen.

Beispiel:
Eines der Hauptthemen bei meiner eigenen Website ist das Thema "Fidonet". Mit Hilfe der Google Webmaster Tools bin ich aber darauf gestossen, das dieser Begriff auf Rang 11 der Keywords meiner Site steht. Stattdessen steht ein Begriff wie "size" auf Platz 1 der auf der Website gefundenen Keywords.

Nun, das lässt sich recht einfach erklären. Dadurch das die Website eine Fidonet typische Filebase enthält, die auch mitindiziert wird, bei dem Filelisting jede Datei mit den Begriffen "size", "zip" (die allermeisten Files sind mit ZIP gepackt), "time", und "date" an Meta-Informationen bespickt sind, wird bei ca. 12000 Files sehr schnell klar, das 12000 x "size", "time" und "date" dies die meistbenutzten Keywords auf dieser Site sind, was mich dann dazu brachte, das Design der Filebase Darstellung im Web zu überarbeiten und die Begriffe "size", "time" und "date" zu vermeiden.

Bislang haben sich die Korrekturen nach einer Woche der Änderungen noch nicht auf das Analyseergebnis ausgewirkt, aber ich bin guter Dinge, das es mit der Zeit (ich schätze so ca. 4 Wochen wird das brauchen) eine Anpassung geben wird.

Nun, bei einer Migration der Website geben die aufgerufenen Seiten einen guten Überblick auf welche der Seiten ein Hauptaugenmerk gerichtet werden sollte, damit die zukünftigen Aufrufe nach einer Migration nicht ins Leere laufen. Dazu aber mehr im nächsten Abschnitt.

Ungültige Hyperlinks vermeiden

Wie im vorherigen Abschnitt bereits aufgezeigt, lässt sich mit Hilfe der Google Webmaster Tools hervorragend eine Liste der Webseiten erstellen, die eine Relevanz, nicht nur für die Keywords, sondern auch für die Website im besonderen haben. Mit dieser Liste kann nun nach einer Migration versucht werden, die jeweiligen Seiten die sich nach einer Migration verschoben haben per Permanent Redirects (URL redirects) für den Suchenden, sowie für die Indexer die neue Lokation zu definieren. Durch den HTML Permanent Redirect (HTTP 301) erhält der Aufrufer eine Rückmeldung, das sich die Seite verschoben hat und das der alte Link nicht mehr gültig ist und durch den neuen Link ausgetauscht werden sollte. Damit erreicht man, das nach einiger Zeit die Links auf den alten Link mit der Zeit sich verringern bzw. ganz verschwinden. Wie lange ein Permanent Redirect aufrecht erhalten werden sollte lässt sich nur sehr schwer abschätzen, da dies auch von der Anzahl der Verlinkungen (Verweis von anderen Seiten), der Beliebtheit einer Seite (gespeicherte Favoriten) und vielem anderen mehr abhängt. Jedenfalls ist das ein längerfristiger Prozess. Dadurch das die Seite "aktiv" behandelt wird, wird einem HTML 404 (Seite nicht gefunden) vorgebeugt. Die Verlinkungen als solche bleiben erhalten.

Das ganze wirkt sich dann vorteilhaft auf das SEO aus, da weiterhin die Webseite "erreicht" werden kann, zumindest führt die Weiterleitung zu dem gesuchten Inhalt.

Für den Webserver Apache können recht einfach permanente Redirects in die Apache Config eingetragen werden (Aktivierung des mod_alias des Apache HTTP Servers vorrausgesetzt). Somit müssen die ursprünglichen Seiten nicht mehr weiter gepflegt werden.

Alternative Methoden sind ein .htaccess Eintrag oder eine HTML Seite, die weiterhin unter dem alten Link vorhanden ist mit einem url rewrite Befehl zu versehen.

Beispiel für einen Permanent Redirect Eintrag in der Apache Config:
Redirect permanent /PRO_WI/nntp1.htm http://ambrosia60.goip.de/structs/nntp1.htm

CSS Menü

Das Thema CSS Menü ermöglicht quasi eine Sitemap auf jeder Webseite anbieten zu können, was sich dann bei der Indizierung vorteilhaft auswirkt.

Suche auf Google liefert u.a. CSS Menu Maker. Eine interaktive Website bei der man sich sein passendes CSS Menü aussuchen kann, egal ob vertikale oder horizontale Menüs, Drop Down, Flyout, Tabbed oder CSS3 Menüs. Nach der Basis Vorauswahl kann man weiter aus üblicherweise 9 verschiedenen Formen und Styles auswählen.
Anschliessend kann man sich das Menü weiter Customizen indem man die Hauptmenü- und Submenüpunkte definiert. So erhält man schon nach kurzer Zeit den zugehörigen HTML und CSS Codeschnipsel den man dann in seinen Website Code einbinden kann.

Üblicherweise nutzt man für die Navigation ein Include File das sich dann auf jeder Webseite einbinden lässt.

HTML Beispiel Code

<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='products.htm'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='product1.htm'><span>Product 1</span></a>
            <ul>
               <li><a href='produkt1subclass1.htm'><span>Sub1 Product1</span></a></li>
            </ul>
         </li>
         <li><a href='product2.htm'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='about.htm'><span>About</span></a></li>
   <li><a href='contact.htm'><span>Contact</span></a></li>
</ul>
</div>
CSS Beispiel Code
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid;
     border-radius:5px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left;
     display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative;
     padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif;
     text-align:center; text-decoration:none;
     text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute;
     border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute;
     top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f;
     padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto;
     position:absolute; top:38px; padding:10px 0; background:#3f3f3f;
     border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0;
     margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative;
     margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif;
     color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c;
     background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%);
     background:-webkit-gradient(linear, left top, left bottom,
     color-stop(0%,#3e698c), color-stop(100%,#30576e));
     background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%);
     background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%);
     background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%);
     background:linear-gradient(top,  #3e698c 0%,#30576e 100%);
     filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c',
     endColorstr='#30576e',GradientType=0 ); }
#cssmenu{border-color:#1b313d;}
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#6696bd;}
#cssmenu > ul > li > a:hover{background:#436f93;}
Das so erstellte CSS Menü kann man Speichern oder Downloaden (Zip gepackt).

Mit Hilfe des CSS Menüs lassen sich nun weit wesentlich mehr Seiten in ein Menü einbinden, so das auch Unter- Unterseiten ins Menü gepackt werden können. Beim Indexing erhalten somit diese Seiten eine höhere Priorität, da diese Seiten als Links am Anfang der HTML Seite aufgeführt sind. Unter- Unterseiten würden normalerweise erst auf einer weiteren Seite als potenzieller weiterer Link auftauchen, was die Seite beim Indexing erst im, dritten oder vierten Index Durchlauf crawlen würde.

Belässt man die Links auf den Seiten, erhalten die gelinkten Seiten dadurch eine zweifache Linkung, was die Relevanz erhöht.

Wie sich die Einbindung des CSS Menüs positiv auswirkt kann man leicht bei der Sitemap Erstellung mit dem Online Tool XML Sitemaps Generator auf www.xml-sitemaps.com überprüfen. Wenn man vor der Umstellung auf ein CSS Menü bereits einen Sitemap Erstellungs Durchlauf durchgeführt hat, lässt sich so der Unterschied am besten prüfen. Ein Schalter sollte unbedingt gesetzt werden: Priorität automatisch ermitteln lassen.

Links aus dem CSS Menü werden üblicherweise mit Priorität 0.64 gesetzt. Seiten, die im zweiten Durchgang aufgespürt werden erhalten noch die Priorität 0.51 (Standard). Seiten im dritten Durchlauf erscheinen nur noch mit Priorität 0.41. Die Priorität ist ein Indikator für die Wichtigkeit der Seite auf der Website sowie für eine mögliche Relevanz.

IE Fix

Bei der Überprüfung der Menüsteuerung mit Internet Explorer 8 ist mir allerdings aufgefallen, das die Submenüs nicht geöffnet werden, was mich zur Suche nach einem entsprechendem Fix veranlasste:
Internet Explorer css menu fix - HTMLHelp Forums lieferte zwar nette Hinweise, führte aber nicht zum gewünschtem Ziel.
IE5 and IE6 CSS Hover Selector Fix | Devin R. Olsen Web Developer liefert zwar die Info die notwendig ist den Fehler zu fixen, aber erst ...
Pure CSS menus lieferte eine ausführliche Beschreibung und HTML und CSS Codeschnipsel, die ich in das vorhandene CSS Menü einbauen konnte um somit den Fehler entgültig zu fixen.

Das Grundprinzip besteht darin die Hover Action Anweisung im CSS, dargestellt durch > für IE zu fixen. Dazu bedarf es im wesentlichen des nachfolgenden zusaetzlichen Codeschnipsels:
<!--[if gt IE 5.0]><![if lt IE 7]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
ul.makeMenu li {  /* the behaviour to mimic the li:hover rules in IE 5+ */
  behavior: url( IEmen.htc );
}
ul.makeMenu ul {  /* copy of above declaration without the > selector,
     except left position is wrong */
  display: none; position: absolute; top: 2px; left: 78px;
}
</style>
<![endif]><![endif]-->
Weiterhin wird die zusätzliche Datei IEmen.htc benötigt. Das "behaviour" File IEmen.htc ist wie folgt definiert:
<attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
  //change the colour
  element.className += (element.className?' ':'') + 'CSStoHighlight';
  //change display of child
  for( var x = 0; element.childNodes[x]; x++ ){
    if( element.childNodes[x].tagName == 'UL' ) {
       element.childNodes[x].className += (element.childNodes[x].className?' ':'')
       + 'CSStoShow'; }
    if( element.childNodes[x].tagName == 'A' ) {
       element.childNodes[x].className += (element.childNodes[x].className?' ':'')
       + 'CSStoHighLink'; }
  }
}

function rollOff() {
  //change the colour
  element.className = element.className.replace(/ ?CSStoHighlight$/,'');
  //change display of child
  for( var x = 0; element.childNodes[x]; x++ ){
    if( element.childNodes[x].tagName == 'UL' ) {
       element.childNodes[x].className = element.childNodes[x].
       className.replace(/ ?CSStoShow$/,''); }
    if( element.childNodes[x].tagName == 'A' ) {
       element.childNodes[x].className = element.childNodes[x].
       className.replace(/ ?CSStoHighLink$/,''); }
  }
}
</script>
Neben den CSS Menu Fixes wollte ich der Frage nachgehen: Wie häufig wird überhaupt noch IE6 eingesetzt?
Da ich auf der Website BBclone www.bbclone.de im Einsatz habe hatte ich mal wieder einen Blick auf die Statistik geworfen (in dem Zusammenhang auf die neueste Version upgedatet).
      Explorer   2010    32.61%
      Firefox    1822    29.56%
      Opera       957    15.53%
      Safari      954    15.48%
      Netscape     72     1.17%
Die Statistik liefert aber leider nur einen groben Überblick über die unterschiedlichen Browser. Das ist also auch noch nicht das, was ich mir erhofft habe. In der Detail Anzeige werden Browser inklusive der Browser Revision ausgegeben. Dort tauchen auch IE 6.0 Einträge auf! Um die browser.php Analyze anzupassen wenigstens für IE und FF die unterschiedlichen Versionen unterscheiden zu können bin ich dann auf die Seite UserAgentString.com - List of User Agent Strings gestossen. Für IE habe ich nun erst einmal eine Anpassung vorgenommen.
Aus eigener Erfahrung weiss ich aber, das gerade in grossen Firmen immer noch Rechner mit IE 6.0 im grossen Stil im Einsatz sind und sicherlich auch noch eine Weile so bleiben wird, bis sämtliche Rechner auf denen noch die alte Browser Version läuft durch neue Rechner mit einem Nachfolge Betriebssystem verteilt sind. In grossen Firmen kommen insbesondere Intranet Anwendungen eine besondere Bedeutung zu. Bevor ein Browser Update Rollout durchgeführt wird müssen erst sämtlichen Intranet Anwendungen geprüft und ggf. angepasst werden, bevor ein globales Rollout durchgeführt wird.

BBclone Browser Statistik Reset: 2012-10-16 01:00
Nach rund 18 Stunden gibt es einen ersten Trend:
   Firefox6        8 	 32.00%
   Chrome          3 	 12.00%
   Explorer8       3 	 12.00%
   Explorer9       2 	 8.00%
   Explorer7       2 	 8.00%
   Firefox5        2 	 8.00%
   Firefox16       1 	 4.00%
   Explorer6       1 	 4.00%
   Mozilla         1 	 4.00%
   Iceweasel       1 	 4.00%
   Firefox14       1 	 4.00%
   
In Summe:
Firefox          :    48.00%
Internet Explorer:    32.00%
Chrome           :    12.00%

Total FF+IE      :    80.00%
Total FF+IE+Cr   :    92.00%
... mal schauen ob sich das noch verschiebt ....

BBclone Browser Statistik: 2012-10-21 03:00
Overall Statistik Firefox Firefox Explorer Explorer Summe
BrowserAnzahlProzent VersionAnzahlProzent VersionAnzahlProzent BrowserAnzahlProzent
Firefox6 Firefox66120.40% Firefox6 Firefox66120.40% Explorer6 Explorer63110.37% Firefox Firefox11337.8%
Chrome Chrome5518.39% Firefox16 Firefox16144.68% Explorer7 Explorer7217.02% Explorer Explorer6421.4%
Opera Opera4414.72% Firefox5 Firefox582.68% Explorer8 Explorer882.68% Chrome Chrome5518.39%
Explorer6 Explorer63110.37% Firefox13 Firefox1372.34% Explorer9 Explorer920.67% Opera Opera4414.72%
Explorer7 Explorer7217.02% Firefox3.6 Firefox3.651.67% Explorer5 Explorer520.67% Safari Safari62.01%
Firefox16 Firefox16144.68% Firefox12 Firefox1241.34% Total6421,4% Mozilla Mozilla41.34%
Firefox5 Firefox582.68% Firefox14 Firefox1441.34%   Iceweasel Iceweasel31.00%
Explorer8 Explorer882.68% Firefox10 Firefox1041.34%   Total299100%
Firefox13 Firefox1372.34% Firefox4 Firefox431.00%    
Safari Safari62.01% Firefox9 Firefox931.00%    
Firefox3.6 Firefox3.651.67% Total11337,8%    
Firefox12 Firefox1241.34%      
Firefox14 Firefox1441.34%      
Mozilla Mozilla41.34%      
Firefox10 Firefox1041.34%      
Firefox4 Firefox431.00%      
Firefox9 Firefox931.00%      
Iceweasel Iceweasel31.00%      
Explorer9 Explorer920.67%      
Explorer5 Explorer520.67%      
Total299100%      

Es fällt schon massiv auf, das eine nicht unerhebliche Anzahl an IE6 und IE5 Browsern noch unterwegs sind, ganz der Erwartungen zum Trotz. Mit ca. 11% liegt IE6 noch vor allen anderen IE Revisionen (!!!). Auch wenn der Wunsch der Gedanke ist IE5 und IE6 endlich aus der Welt zu schaffen - die Statistik liefert ganz andere Zahlen :-P

BBclone Browser Statistik: 2012-11-04 21:00
Overall Statistik Firefox Firefox Explorer Explorer Summe
BrowserAnzahlProzent VersionAnzahlProzent VersionAnzahlProzent BrowserAnzahlProzent
Chrome Chrome19418.74% Firefox6 Firefox616015.46% Explorer6 Explorer612211.79% Firefox Firefox36935.66%
Opera Opera17817.20% Firefox16 Firefox16464.44% Explorer7 Explorer7535.12% Explorer Explorer22021.26%
Firefox6 Firefox616015.46% Firefox13 Firefox13363.48% Explorer8 Explorer8282.71% Chrome Chrome19418.74%
Explorer6 Explorer612211.79% Firefox5 Firefox5252.42% Explorer Explorer171.64% Opera Opera17817.20%
Explorer7 Explorer7535.12% Firefox10 Firefox10181.74% Total22021.26% Safari Safari212.03%
Firefox16 Firefox16464.44% Firefox14 Firefox14161.55%   Other Other60.58%
Firefox13 Firefox13363.48% Firefox9 Firefox9141.35%   Total988100%
Explorer8 Explorer8282.71% Firefox3.6 Firefox3.6141.35%    
Firefox5 Firefox5252.42% Firefox12 Firefox12121.16%    
Safari Safari212.03% Firefox4 Firefox4111.06%    
Firefox10 Firefox10181.74% Firefox15 Firefox15100.97%    
Explorer Explorer171.64% Firefox8 Firefox870.68%    
Firefox14 Firefox14161.55% Total36935.66%    
Firefox9 Firefox9141.35%      
Firefox3.6 Firefox3.6141.35%      
Firefox12 Firefox12121.16%      
Firefox4 Firefox4111.06%      
Firefox15 Firefox15100.97%      
Firefox8 Firefox870.68%      
Other Other60.58%      
Total988100%      

Important: The behaviour fix that makes this menu work in IE 5-6 is deprecated and is no longer supported (meaning that I will not help you to get it working with your pages). It was only written to fill the gap while waiting for Internet Explorer to support CSS 2 selectors and :hover on non-links. That has now happened in IE 7. Although this fix can make it work in IE 5-6 as well, that is counter productive for the future of the Web. IE 6 is a major problem to Web developers (IE 7 is a problem as well, but for now, let's overlook that, since it does at least implement the required parts well enough for this menu), and the sooner it stops being used, the better.

Instead of using this hack, users of IE 6 should be encouraged to upgrade to IE 7. Users who cannot upgrade to IE 7 (because IE 7 is not being released for most Windows operating systems) should use a better browser, such as Opera or Firefox. They have been abandoned by Microsoft.

Credits:

This menu was inspired by (and the basic technique taken from) Eric Meyer's Pure CSS Menus. The idea of using DHTML behaviours and conditional comments was inspired by Brother Cake's CSS / DHTML Hybrid Navigation Bar. Brother Cake's page also shows another way to do this. Instead of using DHTML behaviours, he uses regular JavaScript. Although this does make the scripting significantly more complex, this still retains the advantages of CSS menus, but also extends support to Internet Explorer on Mac and ICEbrowser, as long as JavaScript is enabled. I fully support this idea, but I have not yet written my own version of the required script.

Beschreibende Namen für jede einzelne Webseite URL

CMS Systeme können es meist automatisch. Web 1.0 Seiten sind oftmals kryptisch benannt. Der Name einer HTML Seite hat auch einen Einfluss über die Relevanz zu einem Thema:
Nehmen wir mal das Beispiel Küchengeräte. Ich erstelle eine Seite zu einem Herd. Taucht der Erfahrungsbericht auf einer Seite mit dem Namen 01.html auf sagt der Name der HTML Seite noch nichts über deren Inhalt aus. Benenne ich die Seite nun aber um in Erfahrungsbericht-Herd-XYZ.html (wobei XYZ die Firma und die Typbezeichnung des Herdes ist) sind alleine im Namen der HTML Seite 3 Suchbegriffe definiert. Erfahrungsbericht, Herd, XYZ.

Mit diesen zusätzlichen Angaben liefert die Seite zusätzliche Stichworte, wonach eine Seite durchsucht werden kann, steigt also an Relevanz umso genauer und detailierter der Seitenname benannt ist.

Daher gilt für CMS Systeme eine mögliche Alias Namen Erstellung zu aktivieren oder bei der Benennung von HTML Seiten auf einer Web 1.0 Website mit Bedacht zu werke zu gehen.

Migration von URL Namen einer HTML Web 1.0 Site

Die Empfehlung lautet prinzipiell:
1. Neuerstellung von Seiten mit "sprechenden" Namen
2. Alte Seite ausser Dienst stellen (einfaches Umbenennen in Schritt 1)
3. Ein permanentes Redirect 301 für die Seite im Webserver (eg. Apache) setzen (siehe auch Weiterleitungen)
4. Links auf der eigenen Website zu den alten Namen auf die neuen Namen korrigieren

Headings: H1, H2, H3 und mehr ...

Bei der Benutzung der SEOquake Diagnosis Browser Plugin für Mozilla Firefox, Google Chrome, Opera Toolbar bin ich auf den Abschnitt Headings gestossen:

Your page implements HTML headings (<H1> through <H3>) and only one <H1> heading is used.
You can include keywords in your headings.
The initial heading (<H1>) should include your best keywords.
Using only one <H1> heading per page will strengthen your SEO.

Wenn man sich einmal Bücher anschaut, so haben die einen Buchtitel (das entspricht dem <H1>) und weitere <H2> Sektionen das mit der Unterteilung des Buches in Kapitel zu vergleichen ist.

Möchte man bei einem wissenschaftlichen Werk sich einen Überblick verschaffen welche Themen in dem Buch behandelt sind, so schaut man unwillkürlich in die Inhaltsübersicht mit der Aufteilung der verschiedenen Kapitel und entsprechenden Unterteilungen. Möchte man nun zu einem speziellen Bereich nähere Informationen einholen, so erlaubt einem die Kapiteleinteilung und Unterteilung schnell die richtigen Seiten im Buch zu finden.

Nichts anders ist das bei Webseiten. Mit einer strukturierten Einteilung einer Webseite können die "wichtigen" Merkmale des Inhalts schnell extrahiert werden. Das macht sich auch Google & Co zunutze, indem die Headings ausgewertet und indiziert werden.

Diese Webseite die Sie gerade lesen beschäftigt sich mit dem Thema SEO im Allgemeinen und mit den Eckpunkten im Einzelnen. Ein Abstract dieser Seite könnte wie die Übersicht dieser Seite am Anfang aussehen, in dem sämtliche Abschnitte der Seite kurz beschrieben sind. Möchte man sich zum Thema Headings bzw. Subject heading weiter informieren. So liefert der Abschnitt Headings die entsprechenden Informationen.

Dublin Code Usage

The Dublin Core Metadata Initiative, or "DCMI"
dublincoregenerator.com - a better dublin core generator

contents language in the HTML code

Unterstützend sollte die Sprache angegeben werden in der die Seite verfasst ist.
Ein Header Meta Tag reicht nicht aus:
 Falsch:
   <meta name="content-language" content="de">

 Richtig:
   <html lang="de">
Weitere Infos auf www.w3schools.com

Sitemap einbinden

Neben einem CSS Menü gibt es eine weitere Möglichkeit als Benutzer der Website sich eine Übersicht über sämtliche Seiten zu verschaffen (sofern die Möglichkeit aktiviert wurde), mit Hilfe einer Sitemap. Das ist quasi die Landkarte, eine Übersichtsseite der Website, wo welche Seiten zu finden sind.

Neben der Usability der Website für Benutzer können sie mit einer Sitemap auch den Crawling Prozess von Google & Co verbessern, indem sie eine Datei anlegen, die sämtliche Links sämtlicher Seiten mit dazugehörigen Informationen bereitstellen.

Die Sitemap müssen sie nicht von Hand erstellen, dafür gibt es Tools, zum Beispiel wie der Free Online Sitemap Generator:
Create your Google Sitemap Online - XML Sitemaps Generator

Sie geben die URL ihrer Website an, definieren noch ein paar weitere Parameter wie:
  1. Change Frequency - Wie oft soll Google & Co diese Seite erneut überprüfen.
    Standard: None (keine weitere Überprüfung).
    Hier sollten sie den Wert zu Anfang auf "Weekly" setzen. Später können sie die Einstellung noch weiter Finetunen.
  2. Last Modification - Zeitstempel der letzten Änderung einer einzelnen Seite
    Standard: Use server's response
    Diese Einstellung definiert das Datum der letzten Änderung einer Seite. Meine Empfehlung: Use server's response
  3. Priority - Welche Wichtigkeit hat diese Seite im Verhältniss zu den anderen Seiten auf der eigenen Website?
    Standard: None (ausgeschaltet)
    Um zu verschiedenen SEO Massnahmen eine bessere Rückkopplung zu erhalten, sollten sie diese Einstellung auf "Automatically Calculated Priority" setzen.
Tipp "Priority": Wenn man vor der Umstellung auf ein CSS Menü bereits einen Sitemap Erstellungs Durchlauf durchgeführt hat, lässt sich so der Unterschied Vorher - Nachher am besten überprüfen.

Mit dem Online Tool erhalten sie mehrere Versionen der ermittelten Sitemap. Einmal im HTML Format zum direkten Einbinden in ihre Website zur Anzeige für ihre Besucher. Dann verschiedene Sitemap Formate für unterschiedliche Provider. Für Google empfiehlt sich das Sitemap.Xml Format.

Prioritäten Einstellung

Links aus dem CSS Menü werden üblicherweise mit Priorität 0.64 gesetzt. Seiten, die im zweiten Durchgang aufgespürt werden erhalten noch die Priorität 0.51 (Standard). Seiten im dritten Durchlauf erscheinen nur noch mit Priorität 0.41. Die Priorität ist ein Indikator für die Wichtigkeit der Seite auf der Website sowie für eine mögliche Relevanz.

Sitemap auf Google einbinden

Anhang

A.1 SEO Tools


© 2003-2024 by Ulrich Schroeter   06103