Montag, 2. Dezember 2013

Tag 11: Basteln einer Webseite in HTML und on-page Optimierung

Advent, Advent, die erste eigene HTML Seite steht...

Heute geht es um den Aufbau unserer ersten kleinen Webseite in HTML und deren on-page Optimierung.

Wir starten mit einer Keywordanalyse im Keyword-Planer (unter "Tools & Analysis) von Google Adwords, geben unser Keyword bei Ideen für Keywords ein, filtern dann noch nach durchschnittlichen Suchanfragen pro Monat, geben 500 ein (10 Anfragen wären zu wenig) und starten die Abfrage.

Die Konkurrenz bei der Eingabe unseres Keywords "Grafikdesign" und "Graphikdesign" ist ziemlich hoch, wir wollen uns vom Markt abheben, die Rede ist von Alleinstehungsthema, disrupted patterns.

Wir lernen, dass die Startseite einer Webseite nicht unbedingt von Interesse ist, sondern vielmehr die Unterseiten. Wir müssen unsere Leistungs- und Kontaktseite in den Vordergrund stellen. Daher sollten wir eine oder mehrer Landing Pages in unser Gesamtkonstrukt einbauen. Bildlich hat uns Ralf dies mit dem Einfüllen bei einer Champagnerpyramide erklärt.

eHow Deutschland
Meine Webseite mit den vielen Unterseiten sollte mit möglichst viel Vertrauen gefüllt werden. Dies sollte ich nicht nur von oben machen, wie bei der Champagnerpyramide und warten bis alle Gläser gefüllt sind. Ich will auch nicht alle Gläser, bzw. Seiten gleich mit Vertrauen füllen. Ich möchte vielleicht nur eine Seite in der Mitte hervorheben.

Ich sollte mir daher überlegen, welche Seite ich besonders pushen möchte und diese Seite (auch landing page) mit 2 bis 3 Wörtern optimieren.





Als nächstes gehen wir die Konkurrenzanalyse an und schalten dazu unsere Sonne von SEOquake an. Dort schauen wir unsere Konkurrenz an, und sondieren, wie sie indexiert ist und wie hoch die Keyword density ist.

Für diese zwei Punkte, also die Keywordanalyse und die Konkurrenzanalyse sollten wir die meiste Zeit aufwenden, bevor wir unsere Webseite programmieren.

Jetzt dürfen wir auch Hand anlegen und praktisch mit HTML arbeiten. Unsere Tools sind ein Texteditor und die Online Web Tutorials von w3schools. Und zum Checken unserer HTML Fehler haben wir noch einen validator.w3.org, in dem wir unsere File uploaden können und nach Fehlern suchen können.

Wir kopieren zuerst den Basic HTML Kontainer für die Grundstruktur einer Webseite in unseren Texteditor.
Beispiel der Grundstruktur einer Mini-Webseite:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>  
</body>
</html>


Beim Abspeichern im Editor beachten, dass der Dateiname filename.html genannt wird, der Dateityp alle Dateien ist und die Codierung UTF 8 (was auch immer das ist) angegeben wird. Abspeichern im Desktop.

Dann mit der rechten Maustaste im Desktop bei öffnen mit das Standardprogramm auswählen, den Editor/notepad aus windows raussuchen und Datei öffnen.

Bei unserer Webseite-Programmierung beachten wir folgendes:
  • Wichtig ist der header 1: Jede Unterseite sollte einen h1 haben.
  • Topf der Webseite ist <body> mit seinem entsprechenden end-tag </body>.
  • Eine strukturierte Seite ist bei der Suchmaschine sehr wichtig: Domain (möglichst mit dem Keyword vorne), titletag und head!
  • Metadaten gelten für das gesamte Dokument. 
  • Gesucht werden die Metatags in der "Lupe" bei w3schools.
  • Je mehr Fehler, desto langsamer lädt die Seite. 
  • Wichtig ist der description  metatag: 2 Sätze. Dies ist der Werbeslogan im organischen Teil der SERP bei Google, daher die Keywords immer sehr weit vorne hinschreiben.
  • Den metatag content hat Google ignoriert (Wink mit dem Zaunpfahl),  da dieser tag missbraucht wurde. Es wurden unter content keywörter eingegeben, die mit dem Inhalt der Seite nichts zu tun hatten, aber öfter aufgerufen wurden (Beispiel Modelleisenbahn mit keyword Erotik) <meta name="keywords" content="Keyword, naheliegendes Keyword, ergänzendes Keyword">
  • Metatag robots content index, nofollow: indexiert die Seite, lässt aber kein Vertrauen abfliessen. Nofollow kann man beim Impressum angeben. Bei Angabe noindex wird die Seite von Google gar nicht indexiert.
  • Umlaute sind in UTF8 enthalten. <meta charset="UTF-8">
  • Wink mit dem Zaunpfahl: Für eine onpage Optimierung sollten alle meta robots content auf noindex, nofollow stehen. Aussage ist falsch. 
  • Ist meine Webseite allerdings noch eine Bausstelle, sollte der tag auf noindex stehen. <meta name="robots" content="Index, nofollow"> 
  • Gibt es keine Angaben, dann steht das für den crawler auf index, follow. Crawler kommt in regelmässigen Abständen vorbei, wenn täglich in den Blog geschrieben wird. Wird der Blog nicht mehr aktualisiert, kommt der crawler auch nicht mehr oft vorbei.
  • Google bewertet den internen und externen linkjuice. Wenn die Seite neu ist, lieber keinen linkjuice haben. <a href="http://wenda-it-web.de" title="Keyword zu diesem Link" rel"nofollow" target=_blank">Keyword im Ankertext</a
  • Die Angabe rel"nofollow" gebe ich für den externen Link an, wenn ich nicht will, dass die externe Seite (hier ist das "wenda-it") mein Vertrauen bekommt. 
  • target=_blank: öffnet link in einer neuen Seite. Ist empfehlenswert bei Marketer allerdings verpönt bei bloggern. 
  • Faustregel: 300 Wörter Text in einer Webseite mit einer Handvoll externer/interner Links (=5 :-). 
  • Strukturelle Elemente heben wichtige Keywords/Inhalte hervor. Crawler von Google finden das spitze. zum Beispiel <b>, <ul>, <ol>, <table>
  • Bilder sollten auch einen title tag haben (sieht man beim Überfahren der Maus auf dem Bild=tooltip). 
  • Ist das Bild kaputt, wird aus dem alt Attribut gelesen (Blinde)
  • Bei on-page Optimierung gebe ich möglichst allen tags die Keywords mit. !!!!!!
  •  Spider Simulator liest div Container aus, URL angeben und man sieht den Text. Über SEOquake kann man auch die Keyword density sehen (original.txt).
Unsere erste Codierung steht:
 
<!DOCTYPE html>
<html>
 <head> 
 <title>Keyword mit in den Titel schreiben</title>
  
 <meta name="description" content="Keyword - hier steht beschreibender Text zum Thema Keyword.">
 <meta name="keywords" content="Keyword, naheliegendes Keyword, und ergänzendes Keyword">
 <meta charset="UTF-8">
 <meta name="robots" content="NOINDEX,NOFOLLOW">
 
 </head>

 <body>
<!-- <div> Keyword, das wir symbolisch vor einem Menü auslesen lassen würde. Keyword für Universal Search. </div> -->
<!-- Hier steht ein Kommentar, so dass ich mir Anmerkungen machen kann -->
  
  <h1>Keyword - Das gibts ja nicht!</h1>
  <p>Auch hier steht unser Keyword im Text</p>
  <h2>Keyword - Das gibts ja nicht!</h2>
  <p>Auch hier steht unser Keyword im Text</p>
  <h3>Keyword - Das gibts ja nicht!</h3>
  <p>Auch hier steht unser Keyword im Text</p>
  <h4>Keyword - Das gibts ja nicht!</h4>
  <p>Auch hier steht unser Keyword im Text</p>
  
<!-- Hier geht es nun um die Verlinkungen --> 

<a href="http://wenda-it-web.de" title="Keyword zu diesem Link" rel"nofollow" target=_blank">Keyword im Ankertext</a>

<!-- Es geht weiter mit strukturellen Elementen -->

 <p>Hier steht ein Text mit einem <b>hervorgehobenen Keyword</b></p>
 
<ol>
<li>Erster Punkt mit Keyword</li>
<li>Erster Punkt mit Keyword</li>
</ol>

<ul>
<li>Erster Punkt mit Keyword</li>
<li>Erster Punkt mit Keyword</li>
</ul>

<table border="1">
<tr> 
<th>Erste Überschrift mit Keyword</th>
<th>Zweite Überschrift mit Keyword</th>

</tr>
 <tr>
  <td>Erste Spalte mit Keyword Infos</td>
  <td>Zweite Spalte mal ohne Keywords</td>
 </tr>

<tr>
  <td>Erste Spalte mit Keyword Infos</td>
  <td>Zweite Spalte mal ohne Keywords</td>
 </tr>
</table>
<p>
</p>

<img src="keyword-chili.jpg" title="Bild mit Chili" alt="Ein Bild mit Chili" height="50" />

 </body>
</html>

 





















Keine Kommentare:

Kommentar veröffentlichen