Donnerstag, 22. August 2013

Verbindung zu HTML und SEO

HTML Grundkurs -Online Marketing

Die Verbindung zwischen HTML und SEO

Die Programmiersprache spielt in der Hinsicht eine wichtige Rolle: Je moderner die Gestaltung und Programierung einer Website, desto erfolgreicher das Ranking und die Beliebtheit.

Die erste Unterscheidung die getroffen wird ist, was nutze ich eine "Deklarationssprache" und/oder "Programmiersprache":
  • Deklarationssprache werden Struktur und Design festgelegt
  • Programmiersprachen (wie z. B. PHP, Javascript, AJAX - asynchrones Javascript) bauen auf  Objekte, die manipuliert werden können
  • Bei HTML 5 und CSS 3 verschwimmt diese Trennung, denn dann sind in HTML auch Animationen möglich (ein paar Demos).

 

Text-Editoren helfen bei der Erstellung einer HTML-Datei


Tag-Struktur von HTML-Dateien
Die erste Unterteilung findet zwischen <head> und <body> statt.
  • Im Head-Tag werden alle Meta bzw. Hintergrundinformationen aufgelistet, die für den Crawler wichtig sind. Es werden z.B. der Verweis auf CSS Dateien, oder der Titel der Seite <titel> oder die Meta-Description (Der Titel und die Description sind für die Gestaltung des Snippets in der SERP wichtig) oder die Meta-Keywords (letzteres wird nur noch von Bing und Yahoo! ausgelesen und da auch nur in der Summe auf sechs Keywords begrenzt werden. Mehr lesen die Suchmaschinen ohnehin nicht aus.) etc.
  • Im Body-Tag werden alle sichtbaren Informationen, die für den Crawler und den User wichtig sind eingearbeitet. Content ist King! Je höher der Prozentsatz der eingesetzten Keywords am gesamten Text im Content und auf der ganzen Website, desto relevanter ist die Seite und wird von Google entsprechend bewertet. Weiterhin wichtig ist die interne und externe  Verlinkung der eigenen Seite auf möglichst qualitativ hochwertigen Seiten.
Wichtig ist, dass alle HTML-Tags, die geöffnet werden auch wieder geschlossen werden: z.B. </head>
Beispiel: Sekretariat24.com


Keyword-Density
Optimal ist eine Keyword-Dichte (Keyword-Density von 2-6%). Das Ziel ist allerdings schwer zu erreichen, da sonst der Text schnell unleserlich wird. Der Alt-Text und der Summary-Text können aber helfen, das Ergebnis zu verbessern. Überprüfen kann man das Ergebnis mittels SEO-Quake (Menüpunkt "Keyword density" im SEO-Quake-Firefox-Add-on. Dort findet man neben der Keyword density auch die Spalte "Found in". Hier sollte bei den wichtigsten Keywords immer "T" und "D" stehen als Abkürzung für "in Sitetitle enthalten" und "in Meta Description enthalten").


Im Head & Body haben wir noch viele weitere Möglichkeiten Informationen und Keyword hervorzuheben:
  • titel-Tag: Wie mein Dokument heißt und im Reiter benannt wird. In verbindung mit einem Favicon, lässt sich optisch ein Brandwirkung erzielen.
  • h1-h6-Überschriften: Wichtig ist, den Body-Bereich ordentlich und SEO-wirksam zu strukturieren. Überschriften können in der Rangordnung h1 bis h6 definiert werden, wobei h1 die Hauptüberschrift darstellt, h6 die niedrigste Hierarchiestufe. Dies zeigt sich auch in der HTML-Darstellung.
  • alt-Tag und Bild-Title: Weiterhin für die SEO-Optimierung wichtig, bei eingefügten Bildern einen alt-Text für alle die Browser einzufügen, die das Bild nicht darstellen können und dem Bild einen Titel zu geben. Sowohl der alt-Text als auch der Titel sollten aus SEO-Gründen die wichtigsten Keywords enthalten.  
  • strong-Tag: hebt wichtige Wort hervor. Damit kann ich Keywords betonen und über CSS die Gestaltung bestimmen. 
  • li-Tag: Alles was in einer Liste steht wird als wichtig erkannt. Hier kann ich meine Keyword sehr gut einbinden.
  • Summary-Tag bei Tabellen: Einen ähnlichen Trick kann man auch bei Tabellen einsetzen. Hier ist es anstelle des alt-Tags der Summary-Tag zu verwenden, der Keywords enthalten kann.
  • Canonicial-Tag: Wird verwendet, wenn mehrere Domains oder Kombinationen einer Adresse laufen, um der Suchmaschine mitzuteilen, welches die Hauptdomain ist. Oder man setzt eine sog. 301 htaccess-Site fest.
Es gibt die Möglichkeiten Kommentarzeilen einzufügen, die nicht vom Browser ausgelesen werden können- sog. auskommentierte div-Tags, die von den Suchmaschinen gelesen werden können, aber nicht vom User relveant sind (Wichtig bei einem hart umgekämpften Markt). Spezielle Programme ermöglichen dann das auslessen oder blockieren dieser Kommentare.

HTML lernen

Beispiel

<head> = Tag-head wird geöffnet und mit / geschlossen </head>
 Beispiel HTML Code:

<html>

<head>
    <title> Keyword 65 Zeichen</title>
    <meta name="description" content="Um das Snippet zu gestalten 150 Zeichen" />
    <meta name="keywords" content="bis zu 6 Keywords/>
</head>

<body>

    <h1> Keywords in der (wichtigsten) Überschrift </h1>
    <h2> Diese Überschrif darf mehrmals auf einer Seite vorkommen </h2>

    <p> Text<img src="Keyword.jpg" alt="Alternativer Text mit Keywords" title="Titel des Bildes mit Keywords" width="100" height="100" /></p>

    <table border="1" summary="Hier relevante Keywords einbauen">
        <tr>
            <td> Eine erste Spalte </td>
            <td> Eine zweite Spalte </td>
        </tr>
        <tr>
            <td> Inhalt Spalte 1 </td>
            <td> Inhalt Spalte 2 </td>
        </tr>
    </table>

    <!-- Schreib ein Kommentar rein, wird nicht von Browser ausgelesen, aber von den Suchmaschinen -->

</body>

</html>



Add-Ons:  
Firebug - um sich HTML/CSS/Scribts etc. von Seiten anzuschauen 

Nachlagewerk: SELFHTML / Das World Wide Web Consortium (kurz W3C) das Gremium zur Standardisierung des WWW - W3C-Validator / W3C


W3C/WHATWG offizielle Standardsprache HTML/XML / Entwicklung HTML5 (z.B. Schnittstelle für Video Integration) - Evolutonäre Entwicklung: individuelle Browser-Anpassung, um neue Implementierungen darstellen zu können.
Google Crome (liest das Surfverhalten des Users - AdBlock plus, SRWare iron) 


Domain-check: Denic 
Favicon-Generator: 16 x 16 oder 32 x 32 Pixel ICO-Grafik

Keine Kommentare:

Kommentar veröffentlichen