Skip to main content

HTML5 Spielereien

Das HTML5 viel kann, ist bekannt. Aber jetzt kommen auch immer mehr interessante Demos und Anwendungsbeispiele die wirklich beeindruckend sind. Ich bin begeisterter Zuschauer der TechnikLOAD Folgen von t3n. Auch dieses Mal in der Ausgabe 75 haben Sie wieder sehr beeindruckende Beispiel Seiten gezeigt! Das Video findet Ihr weiter Unten im Artikel.

Die Seite HTML5Rocks.com ist eine Sammlung von Tutorials zum Thema HTML5. Dort könnt Ihr euch z.B. eigene Lieder komponieren, oder auch eine sehr schöne Grafik ansehen, bei der Ihr die Farben ändern könnt.

Ok, also die Grafik ist jetzt von der Technik her nicht wirklich schwer umzusetzen und es muss auch dabei nicht wirklich HTML5 benutzt werden, aber es zeigt, das das Web nun immer Kreativer wird und viel schöner wirkt. Aber das wirklich schöne an HTML5Rocks.com ist, das dort alles bis ins kleinste Detail erklärt wird. Wie was gemacht wurde. Mit Beispiel Code und vielen anderen Dingen. Die Erklärung wie das Demo funktioniert um eigene Lieder zu komponieren, findet ihr hier.

Die Seite selbst ist auf Englisch, aber zum durch stöbern und staunen ist die Sprache ja wirklich egal. Aber beachtet bitte: Ihr benötigt einen modernen Browser, Google Chrome ist hier eigentlich ein muss. Internet Explorer kann man wirklich vergessen und selbst der Firefox hat noch nicht alle Features umgesetzt.

Es dauert also noch eine kleine Ewigkeit bis man viele von diesen Features wirklich benutzen kann. Wenn man überlegt, das der Internet Explorer 6 erst seit mitte letzten Jahres als Tot deklariert wurde, wird einem klar, das solche Techniken erst in vielen Jahren im produktiven Webdesign umgesetzt werden können. Man kann schlechte eine Seite für eine Firma schreiben, die nur für eine geringe Anzahl von Besuchern richtig zu sehen ist.

Aber was ich auch schon häufiger eingesetzt habe, ist das ich die Chrome Besucher etwas belohnt habe. Mit einem kleinen Gimik oder einer Funktion die halt nur in neuen Browsern angezeigt wird, aber bei den alten Browsern nichts kaputt macht. Nun aber viel Spaß beim ansehen des Videos.

SEO Basic 4 – Backlinks und Suchmaschinen?

Nun zu einem noch ganz großem Thema, Backlinks. Was sind Backlinks? Ein „Backlink“ ist ein Link von einer anderen Seite zu eurer. Dort gibt es dann noch den Unterschied, ob es sich um einen Deeplink oder um einen „normalen“ Link handelt. Jetzt waren das wieder sehr viele Fachausdrücke, aber ohne Die können wir hier nicht weiter machen.

Also zur Begriffserklärung:

Backlink = Link von einer anderen Webseite (Domain) zu eurer Seite
Deeplink = Ein Backlink der nicht auf eure Startseite linkt, sonder zu einer bestimmten Unterseite

Warum sind eingehende Links so wichtig? Ganz einfach: der wichtigste Punkt ist natürlich auf anderen Webseiten wird über euch berichtet, und die Besucher der anderen Webseite sollten dann zu euch kommen und bei euch weiter lesen.

Somit bekommt Ihr zusätzliche Besucher. Viele Besucher findet Google und Co. sehr gut und Ranken euch damit auch besser. Aber auch ein anderer wichtiger Teil ist folgender: Als es Google noch nicht gab, ja diese Zeiten gab es wirklich! Ich habe sie noch miterlebt! Wurde bei den Suchmaschinen rein nach der Anzahl der Keywörter gelistet. Also hat die eine Seite fünf mal das Keywort stehen, wird diese vor den anderen Seiten angezeigt, die das Keywort nur ein oder zwei mal nannten.

Damit war die Suchmaschinenoptimierung ziemlich einfach. Die Nutzer dieser Suchmaschinen hatten es aber ziemlich schnell mit Seiten zu tun, die nichts anderes als das Keywort 100 oder 200 mal drauf stehen hatten, aber sonst keinen brauchbaren Inhalt. Google hatte damals erkannt, das dies nicht die Lösung sein kann und suchte nach einer Möglichkeit den Wert einer Webseite besser beurteilen zu können. Die beiden Erfinder von Google hatten erkannt, das Seiten die häufig verlinkt wurden anscheinend besser waren, als andere die weniger hatten.

Also haben sie einen Logarithmus entwickelt, um einen PageRank (Seitenwert) zu ermitteln um damit dann die Reihenfolge der Suchergebnisliste zu bestimmen. Somit ist klar, wieso wir Backlinks benötigen. Auch wenn heutzutage dies nicht mehr der ausschlaggebende Punkt ist. Aber dennoch sollten einige angelegt werden.

Es ist aber Grundsätzlich nicht mehr jeder Backlink gut für die Seite. Ich habe einen Artikel verfasst wo es darum geht wie man gute Backlinks bekommt. Es gilt auch hier, Klasse statt Masse! Auch um nicht nur den PageRank zu beeinflussen, sonder um ebend auch Besucher zu bekommen, was mittlerweile auch ein sehr wichtiger Punkt geworden ist.

SEO Basic 3 – Webtexte (Content) für die Suchmaschine anpassen

Die Webtexte, der Content ist das wichtigste auf der Webseite. Eine Webseite ohne Text ist so gut wie gar nicht möglich bei den Suchmaschinen in die Top-10 zu bekommen. Ohne Text und Content ist auch der User meist vollkommen verloren. Ok, es gibt Seiten, wie z.B. von Fotografen, dort sind viele Bilder und man kann kaum Text schreiben, aber auch hier sollte erst Recht dann einmal ein richtig guter Text geschrieben werden, damit überhaupt die Seite Besucher bekommt, und dann muss der verlorene Punkt durch andere SEO Maßnahmen ausgeglichen werden.

So, nun aber zurück zum Thema Text / Content. Der Text einer Webseite sollte mindestens 300 Zeichen enthalten. Obwohl das schon ziemlich gering ist. Ich empfehle grundsätzlich 2.000 Zeichen. Auch dann kann man die Keywörter sinnig einsetzen und evtl. auch ein zweites Keywort im gleichen Text noch unterbringen.

Ein Keywort sollte ungefähr eine Dichte von 1-3% haben. Diese Dichte kann man ganz einfach ausrechnen. Zählt die Keywörter im Text und multipliziert diese mit 100 danach dividiert durch die Anzahl aller Wörter: Anzahl Keywörter * 100 : Anzahl alle Wörter = Keywort Dichte.

Mehr als 3 Prozent sollten nicht genutzt werden, ich habe bislang schlechte Erfahrungen gemacht, bei höheren Werten. Wenn mehr Keywörter benötigt werden, können diese im „title“-Attribut von Bilder und Links gesetzt werden. Was durchaus sehr sinnig ist, dieses „title“-Attribut grundsätzlich zu nutzen.

Nun sollte Ihr Text noch einige Links enthalten. Einmal damit der Besucher auf der Seite verweilt und noch andere Texte liest, aber auch wichtig für die Suchmaschine. Die Suchmaschine verknüpft und gewichtet, durch diese Links, den Inhalt der Webseite mit anderen.

Auch wichtig ist es Links einzubauen, die auf externe Seiten verweisen. Auch hierdurch wird die Webseite bewertet. Zu viele sind natürlich wieder nicht gut. Aber 2 bis 3 externe Links sollten versucht werden einzubauen. Interne Links sollten nicht mehr als 10 gesetzt sein. Links im Text sind besser als Links die unter- oder oberhalb des Textes angezeigt werden.

Das wichtigste aber noch am Ende, bitte bitte schreibt den Text nicht in „Doktorsprache“, Texte sollten von jedem verstanden werden! Auch was sehr wichtig ist, bedenkt bei aller Mühe mit der Suchmaschinenoptimierung, der Text wird von Menschen gelesen und sollte nicht so geschrieben werden, das noch dieses oder jenes Keywort irgendwo rein gequetscht wird. Google und Co.

Erkennen immer besser ob ein Text „lesbar“ ist oder nicht, geschweige den, der Leser merkt es sofort und verlässt die Seite.

SEO Basic 2 – Wichtige Punkte die bei einer Webseite zu beachten sind

Es gibt beim erstellen einer Webseite einige wichtige Punkte die zu beachten sind, ansonsten bringt es so gut wie nichts den Text überhaupt zu schreiben.

Dazu gehören folgende ganz wichtige Faktoren, der Domainname, die URL bzw. der Seitenname, der Titel der Webseite und natürlich der Text (Content) der Seite. Ich habe schon so einige Anfragen erhalten, wieso den die Webseite nicht bei Google und Co. Auftaucht. Wenn man nach dem Keywort „XYZ“ sucht.

Ich habe mir die Seite dann angeschaut und mir ist gleich aufgefallen, dass das Keywort „XYZ“ nicht einmal irgendwo erwähnt wurde. Woher soll die Suchmaschine dann wissen, das diese Seite irgendwas mit dem Keywort „XYZ“ zu tun hat? Ich habe dazu auch einen anderen Artikel geschrieben, wie eine Suchmaschine arbeitet. Lest diesen Artikel durch, dann versteht ihr auch warum es wichtig ist, bestimmte angaben zu machen.

Der Domainname

Der Domainname, dass ist der Name eurer gesamten Webseite, also das was hier Fett markiert ist http://www.internet-seo-blog.de, dort sollte, wenn möglich, das wichtigste Keywort enthalten sein. Ich habe hier das Wort SEOgenutzt, auch wenn es nicht ganz passt, aber Suchmaschinenoptimierung war mir einfach zu lang.

Die URL bzw. der Seitenname

Ja, das ist der Teil, der hinter eurer Domain kommt. Also dieser hier http://www.internet-seo-blog.de/suchmaschinenoptimierung/seo_basics_teil_1.html hier habe ich einmal eine schön lange URL gefunden.

Dieser gesamte Pfad kann mit Keywörter für die Suchmaschine genutzt werden. Aber wie immer: nicht übertreiben! Zum Einen sollte der gesamte Pfad nicht länger als 254 Zeichen sein, und es bringt auch nichts 10 mal das gleiche Keywort dort hinein zu legen. Das wird dann alles eher als negativ bewertet. Auch sollten viele Unterverzeichnisse nicht genutzt werden. Z.B. /seo/suche/optimierung/google/seo_basics.html.

Umso tiefer der Pfad geht, umso unwichtiger wird der Text, so interpretieren die Suchmaschinen dies. Zum Ordnen von z.B. Artikeln zu einem Thema, sollte man diese in ein Verzeichnis legen, dann erkennt auch die Suchmaschine, das alles in diesem Verzeichnis um das Keywort dreht. So verbindet die Suchmaschine dann auch die Artikel miteinander.

Der Titel der Webseite

Ein Titel sollte jede Webseite bekommen, einmal wird diese in der Suchergebnisliste angezeigt und sollte somit sehr aussagekräftig für den Besucher sein, und auch die Suchmaschinen bewerten diesen Teil als sehr wichtig. Somit sollte das Keywort auch hier enthalten sein. In der Webseite gibt man dies mit dem HTML-Tag <title>…</title> an.

Der Text, der Webcontent

Auch hier sind viele Punkte sehr wichtig. Ich habe dazu einen eigenen Teil geschrieben, damit ich auf die einzelnen Punkte mehr eingehen kann und diese Übersicht hier nicht den Rahmen sprengt. „Webtexte (Content) für die Suchmaschine anpassen“-Heißt der Artikel.

Die Wichtigsten Punkte sollten hier in der Übersicht aber nicht vergessen werden: Der Webseitentext sollte mindestens 300 Zeichen haben, und das Keywort sollte hier so zwischen 3 und 5 mal angegeben werden. Je länger der Text umso häufiger kann das Keywort fallen. Bitte nicht vergessen: Auch Bilder gehören zum Content und können mit dem „title“ und „alt“ Attribut mit Keywörtern versehen werden.

Links sollten auch welche gesetzt werden, auch versehen mit den entsprechenden Keywörtern, wenn möglich.

SEO Basic 1 – Welche Angaben kann ich zusätzlich zu meiner Seite machen?

Auf jeder Seite die im Internet veröffentlicht wird, sollten angaben gemacht werden die der Suchmaschine helfen die Seite besser zu kategorisieren. Auch sollten wichtige Suchbegriffe (Keywords) in diesen sogenannten Meta-Tags einbezogen werden.

Nun ist das wichtige Wort schon gefallen „Meta-Tag“. Was ist ein Meta-Tag? Eine Webseite hat eine bestimmte „Sprache“ in der sie programmiert diese nennt man HTML. HTML hat sogenannte TAGs. Tags sind eigentlich nichts anderes als Befehle, um dem Browser zu sagen wie die Seite angezeigt werden soll.

Da gibt es zum Beispiel den Tag, der sagt dieser Text ist ein Absatz oder auch dieser Text ist ein Link usw. Aber es gibt auch Tags die nicht nur für den Browser sind, sondern für andere Besucher, wie den Suchmaschinen. Das sind Hauptsächlich die Meta-Tags. Davon gibt es mittlerweile sehr viele. Manche können gemacht werden, manche sollten unbedingt gemacht werden!

Meta-Tags werden immer nach diesem Schema geschrieben:

<meta name=“TAGNAME“ content=“WERT“ />

Ich liste hier einmal die wirklich wichtigen Meta-Tags auf

Suchbegriffe: 

Google verwendet keine Meta-Keywords mehr

Mit dem Meta-Tag „keywords“ geben Sie an, welche Begriffe diese Webseite ausmachen. Gedacht war es mal, diese Keywords als Index wie in einem Buch, meist im Anhang zu finden, genutzt wird. Dies sollten Sie so auch gebrauchen. Wörter oder Wortgruppen die diese Seite beschreiben sollten hier hin geschrieben werden.

Seitenbeschreibung:

<meta name="description" content="..." />

Eine kurze Zusammenfassung des Inhalts von der Seite, muss hier eingetragen werden. Auch hier sollten die Wörter und Wortgruppen vorkommen, die für die Suchmaschine wichtig sein sollen.

Aber folgendes ist zu beachten:
Die Beschreibung sollte natürlich klingen, aussagekräftig sein und nicht länger als 180 Zeichen. Dieser Text wird meistens unter dem Seitentitel angezeigt, wenn die Suchergebnisse bei Google und Co. angezeigt werden. Also mit anderen Worten, die Benutzer lesen diesen Text als erstes, noch bevor Sie Ihre Seite sehen!!!

Lokalität:

<meta name="geo.placename" content="Strasse Nr., PLZ Ort" />
<meta name="geo.position" content="53.000;10.000" />
<meta name="ICBM" content="53.000,10.000" />

Diese drei Meta-Tags sind für die geographische Position Ihrer Webseite wichtig. Warum sollte dies wichtig sein? Diese Meta-Tags sollten natürlich nur angegeben werden, wenn Sie ein Lokales Geschäft haben, oder regional Tätig sind (z.B. Handwerker). Bei einem Internationalen Konzern, oder einem Online-Shop sind diese Angaben, dann doch überflüssig. Die großen Suchmaschinen wie Google bevorzugen bei einer regionalen Suche die Webseiten, die dort auch wirklich ansässig sind. Zusätzlich kommen die immer beliebteren Kartendienste. Die nur durch diese Angabe, auch die Position auf Ihrer Karte anzeigen können.

Kategorisierung:

<meta name="page-topic" content="Dienstleistung" />

Die Angabe des page-topic Meta-Tag, ist die Kategorie in der die gesamte Webseite eingeordnet werden kann. Diese kann auch mit Komma getrennt, mehrere haben. Hier sollten sinnige Kategorien gesucht werden und nicht mit Keywörter gefüllt werden, wenn diese nicht passen.

Sprache:

<meta name="LANGUAGE" content="de" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Auch sehr wichtig sind diese angaben. Welche Sprache wird eigentlich auf dieser Webseite gesprochen? Genau hier gibt man Sie an. Der zweite Wert ist nicht ganz so einfach. Hier wird der CharSet angegeben. Was ist den ein CharSet? Tja, das wird jetzt sehr theoretisch. Aber das ist der Zeichensatz, der benutzt wird um die Buchstaben und Zahlen, Punkte und Ausrufezeichen etc. anzuzeigen. Es ist Ihnen vielleicht auch schon mal passiert, das Sie auf eine Webseite gekommen sind und alle Umlaute Ä,Ö,Ü und ß mit merkwürdigen Zeichen angezeigt wurden, oder ebend überhaupt nicht angezeigt werden. Genau das passiert wenn der charset nicht oder falsch angegeben wird. Was passiert ist auch klar, deutsche Texte mit umlauten erkennen die Suchmaschinen dann nicht und der Text wird fehlerhaft in den Index der Suchmaschine geschrieben. Sie werden dann also nicht mehr gefunden. Es gibt sehr viele verschiedene CharSets, aber die hier zu lande sind haupsächlich ISO-8859-1, ISO-8859-2, ISO-8859-15 und UTF-8. Ich persönlich empfehle immer die Seiten in UTF-8 zu schreiben. Einmal sind dort fast alle Zeichen enthalten auch chinesische und Arabische, sowie alle Europäischen. Und genau deswegen ist es so langsam der Standard im Web. Wenn UTF-8 angegeben wird müssen die HTML-Dateien natürlich auch in diesem Zeichensatz (CharSet) geschrieben sein. Dies ist in guten Editoren einstellbar, unter Windows wird grundsätzlich der ISO-Standard genommen. Microsoft braucht halt mit allem etwas länger.

Datum und Zeit:

<meta name="date" content="2001-12-15T08:49:37+02:00">

Dieser Meta-Tag ist nur dann wichtig wenn Sie z.B. News auf Ihrer Seite anbieten. Auf der Newsseite sollte dann immer das Datum angegeben werden, wann die Nachricht erstellt wurde. Auch für Blogs ist diese Angabe ein muss. Für andere Seiten vor allem Seiten die die Firma beschreiben oder z.B. die Seiten Impressum und Kontakt. Die sich eigentlich selten ändern, sollte diese Angabe nicht gemacht werden. Denn ein zu altes Datum sorgt dafür das die Suchmaschinen die Information auf der Seite als veraltet ansehen. Obwohl Sie eigentlich immer noch Zeitgemäß sind.

Wiederholter Besuch:

<meta name="revisit-after" content="7 days">
<meta name="revisit-after" content="3 month">

Hiermit wird angegeben, wann eine Suchmaschine die Seite erneut besuchen soll. Damit Aktualisierungen auch erkannt werden. Die großen Suchmaschinen haben ihre eigenen Algorithmen um zu erkennen wie häufig sich der Inhalt der Seite ändert und nehmen auf diese Angabe keine Rücksicht. Kleinere Suchmaschinen nutzen diese Angabe aber noch. Somit ist es nicht schlimm, wenn diese Angaben nicht gemacht werden, aber auch nicht, wenn sie fehlen. Wenn „revisit-after“ angegeben ist, dann aber kein Quatsch rein schreiben, wie „1 days“ oder „1 hour“. Auch hier sollten keine kleineren Werte als „7 days“ rein geschrieben werden.

Besitzer angaben:

<meta name="author" content="Niclas Schumacher" />
<meta name="company" content="Niclas Schumacher" />
<meta name="copyright" content="Niclas Schumacher" />
<meta name="publisher" content="Niclas Schumacher" />

Alle diese Angaben können gemacht werden, müssen aber nicht. Diese sollten eigentlich nur gemacht werden, wenn Sie sich vom Betreiber der Seite ändern. Also z.B. bei einem Gastartikel, sollte dann der richtige Autor drin stehen.

Kontaktmöglichkeiten:

<meta http-equiv="reply-to" content="IhreEMailAdresse">

Mit „reply-to“ kann man angeben, wie man per e-Mail erreichbar ist, wenn fragen zu dieser Seite existieren. Bitte nicht angeben, es gibt zahlreiche Crawler die im Internet nach e-Mail Adressen suchen, um diese dann mit SPAM zu füttern. Dieser Meta-Tag ist ein gefundenes Fressen!

Weitere Angaben:

<meta name="siteinfo" content="http://www.domain.de/robots.txt">
<meta name="audience" content="all">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

Diese vier Meta-Tags sind alle eigentlich unnötig, können aber angegeben werden. Im Ranking bei den Suchmaschinen bringen sie aber nichts. Die „robots.txt“ wird grundsätzlich in jeden Verzeichnis gesucht. Die „audience“ ist immer auf „all“, man möchte nun auch jeden Besucher die Seite zeigen, nicht nur „students“ (Studenten). Der Content-XYZ-Type wird eh bei jeder *.css oder *.js Datei mit angegeben. Wie gesagt, diese Meta-Tags sind nur hier der Vollständigkeit aufgeführt, sollten aber nicht benutzt werden. Außer es gibt einen triftigen Grund.