Onpage-Optimierung mit CSS und Javascript
Die fortschreitende Entwicklung der Programmiersprachen wie etwa CSS und Javascript ermöglichen dem Webmaster auch neue Varianten der Onpage-Optimierung für die eigene Webseite zu nutzen. Nachfolgend werden einige dieser Möglichkeiten anhand von zwei fertigen Scripten vorgestellt.
Alle Scripte und Codeschnipsel haben eins gemeinsam, sie ermöglichen bei richtigem Einsatz eine bessere Onpage-Optimierung der Webseite und können zusätzlich dem Besucher einen neuen Nutzen bieten.
Variante 1: Tabber Scripte
Tabs dürften seit dem Firefox vielen Webmastern bekannt sein. Solche Tabs können auch mittels einer Kombination aus CSS und Javascript auf der eigenen Webseite eingesetzt werden.
In dem Fall der Web-Tabs werden unterschiedliche Fenster mit Inhalten auf der Webseite hinterlegt. Da in jedem dieser Tabs andere Inhalte stehen, kann damit eine größere Anzahl an Texten auf einer einzelnen Seite des Projektes eingebaut werden, ohne das diese betreffende Seite endlos durch den Besucher nach unten gescrollt werden muss.
Beispielspiel eines eingesetzten Tab-Scriptes
Durch den Einsatz dieser Tabs (Reiter) kann der Webmaster noch mehr themenrelevante Texte auf einer Webseite unterbringen oder darin verschiedene Funktionen einbauen. So kann dies z.B. bei Onlineshops wie der Shopsoftware XT-Commerce dazu verwendet werden, das im ersten Tab die Beschreibung des Produktes steht, in dem zweiten Tab z.B. weitere Bilder und in dem dritten Tab können Kundenbewertungen zu finden sein. Ohne den Einsatz von Tabs müsste der Besucher lange scrollen um das Ende der Seite und damit die einzelnen Informationen zu erreichen.
Ein Blick in den Quelltext der Webseiten die Tabber-Scripte verwenden zeigt das der komplette Javascript-Code in den Head-Bereich einer Webseite eingebaut wird und der Textbereich nur mittels CSS formatiert ist. Somit haben Suchmaschinen wie google keine Probleme mit der Indizierung der einzelnen Tabs.
Ein sehr gutes Tabber-Script kann auf der Webseite barelyfitz.com kostenlos herunter geladen werden.
Variante 2: Ajax Collapse Scripte
Ähnlich den Tabs funktionieren collapse-Scripte. In Kombination von CSS und Javascript lassen sich damit innovative Anwendungen erstellen, wie eben collapse und expand Scripte.
Sind diese Scripte auf der Webseite eingebaut, dann muss der Besucher erst auf einen Link klicken um den dahinter liegenden Inhalt lesen zu können.
collapse Script normal
collapse Script nach Klick darauf
Diese Scripte eignen sich hervorragend für den Einsatz auf FAQ-Seiten um dem Besucher in einer übersichtlichen Art und Weise Informationen bieten zu können.
Auch hier verrät ein Blick in den Quelltext das Javascript in den Head-Bereich ausgelagert wird und im Textbereich nur mittels CSS formatiert wird. Somit können diese Scripte auch sehr gut für eine Optimierung der eigenen Webseite genutzt werden.
Als Empfehlung für collapse-Script kann die Webseite dhtmlgoodies.com dienen und das dort angebotene Script darf kostenlos genutzt werden.
Fazit
Wie man bereits aus diesen beiden einfachen Scripten erkennen kann sind die Möglichkeiten, die aus der Kombination von CSS und Javascript dem Webmaster geboten werden, sehr vielfältig. So sind auf einigen Webseiten Tooltipps zu finden, bei denen durch ein Maushover über z.B. einem Fragezeichen ein Infotext eingeblendet wird, die ebenfalls eine Möglichkeit der OnPage-Optimierung darstellen.
An Richtlinien halten
Wenn diese Scripte auf der eigenen Webseite eingesetzt werden, dann könnten einige auf die Idee kommen diese so zu verändern das die neuen Inhalte nur für Suchmaschinen zu finden sind und der Besucher diese gar nicht findet. Diese Vorgehensweise verstößt jedoch gegen die Richtlinien der Suchmaschinen, allen voran von google. Wenn andere Webmaster dies bei einem Besuch der Webseite und einem Blick in den Quelltext bemerken sollten, dann können diese die Webseite z.B. bei google für eine manuelle Kontrolle melden. Im Schlimmsten Fall müsste der betreffende Webmaster mit einen Rauswurf aus dem Index der Suchmaschinen rechnen, daher sollte dieser Weg nicht weiter verfolgt werden.
Aktueller Tipp
