Von vielen Webdesignern gefürchtet, scheint SEO oft Kopfschmerzen zu sein, die den Programmierern oder Marketing-Analysten überlassen werden. Es gibt jedoch keinen Grund, an der Seitenlinie zu stehen. In diesem kurzen Lernprogramm erstellen wir eine einfache HTML-Vorlage, während wir einige bewährte Vorgehensweisen festlegen, die die SEO Ihrer Website direkt beeinflussen können gehen.

---

Einführung

SEO oder Suchmaschinenoptimierung ist die Art und Weise, in der Sie Ihre Website so einrichten, dass sie von Suchmaschinen höher eingestuft wird und Einfluss darauf hat, wie Informationen in Suchergebnissen angezeigt werden. Die Zeiten, in denen Google Adwords gekauft wurde, waren die beste Methode, um ganz oben in einer Suchanfrage zu erscheinen, zumal viele Inserenten für die Suchergebnisse nicht relevant sind. Adwords werden sich wieder erholen, aber es gibt Möglichkeiten, Ihre heutige Suchmaschine zu beeinflussen.

Zunächst einmal müssen wir verstehen, dass Suchmaschinen-Crawler, insbesondere der Google-Spider, die Quelle Ihrer Seite durchlesen und Annahmen entsprechend dem Inhalt und dem Markup treffen. Die logische HTML-Hierarchie ist für die Bestimmung der Wichtigkeit von Inhalten von entscheidender Bedeutung, aber das Aufsehen im Internet zeigt uns, dass Google damit beginnt, seine Ergebnisse auf Ihre soziale Präsenz und Ihre Seite zu stützen. Das ist richtig, du kannst Facebook und Twitter als einfache Spielwerkzeuge vergessen, sie könnten helfen, deine Website zu gestalten oder zu brechen.

Springende Spinne von Rundstedt B. Rovillos, auf Flickr

---

Schritt 1: Grundlegende HTML-Struktur

Beginnen wir mit einem grundlegenden HTML-Markup:

Diese Struktur folgt festgelegten Standards, damit Browser wissen, was Sie von Ihrer Seite machen sollen. Oben in unserem Code stellen wir fest, um welche Art von Dokument es sich handelt und in welcher Sprache es geschrieben wird. Zwischen unseren Tags informieren wir den Browser, dass wir den Standard-Zeichensatz utf-8 verwenden. Wir haben dann den Titel unserer Site und wir haben eine bedingte Anweisung zum Laden von HTML5-Shiv hinzugefügt, die Kompatibilitätsprobleme mit IE 9 ausgleicht Tags legen natürlich fest, wo der Inhalt unserer Seite erscheinen soll.

Einfach und unkompliziert richtig? Aber in Wahrheit haben wir wichtige Informationen bereits ausgelassen.

---

Schritt 2: Hinzufügen von Meta-Tags

Gehen wir zum Anfang unseres Codes zurück und fügen Sie gleich nach der Eröffnung die folgende Codezeile ein Etikett:

Diese Zeile zeigt Suchmaschinen an, was in den Suchergebnissen direkt unter Ihrem Seitentitel angezeigt werden soll. In diesem Fall werden die Ergebnisse bei Google möglicherweise als solche dargestellt:

Hinweis: Ein Punkt, der sehr wichtig ist und oft übersehen wird, ist, dass Sie beide anpassen sollten Titel und Meta-Tags von jeder Seite innerhalb Ihrer Website speziell auf den Inhalt jeder Seite. Für den Titel kann es so einfach sein wie .

Der Code in unserem Tags sehen jetzt wie folgt aus:

Hinweis: Informationen dazu, warum wir es versäumt haben, Meta-Keywords einzubeziehen, finden Sie in den Kommentaren der Diskussion.

---

Schritt 3: Verlinkung zu unserem CSS und JS

In fast allen Webseiten sind Links zu CSS-Dateien und Javascript-Code oder -Bibliotheken enthalten. Wenn wir den Kodierungsvorschlägen von Google folgen, sollten wir versuchen, unsere externen Abfragen (HTTP-Anfragen) auf ein Minimum zu beschränken. Versuchen Sie daher, CSS- und Javascript-Assets möglichst auf eine Datei zu beschränken. Lassen Sie uns generische Anforderungen für unsere externen Dateien zu unserer Vorlage hinzufügen.

Zuerst verlinken wir auf unser externes Stylesheet, indem Sie den folgenden Code unmittelbar vor dem hinzufügen Schlusstag:

Als Nächstes machen wir dasselbe für unsere Javascript-Datei, indem wir die folgende Zeile hinzufügen:

Wir fügen das Javascript am Ende unserer Seite ein, kurz vor dem schließendes Tag, damit unser Code wie folgt endet:

Warum haben wir die Javascript-Abfrage am Ende der Seite hinzugefügt? Zwei Gründe:

• Dadurch kann der Seiteninhalt direkt geladen werden, anstatt auf die Verarbeitung von Javascript zu warten.
• Es hilft auch Suchmaschinen beim Lesen Ihres Seiteninhalts. Warum? Wenn wir logisch denken, beginnt der Crawler oben auf der Seite und läuft Ihren Code herunter. Wenn das Javascript am oberen Rand der Seite hinzugefügt wird, durchsucht die Suchmaschine das Javascript, bevor Sie den Inhalt Ihrer Seite erreichen. Es liegt nahe, dass wir möchten, dass die Suchmaschine direkt zu unseren Inhalten wechselt, um eine effektivere Indexierung zu erreichen. Jedes referenzierte Javascript, sowohl extern als auch intern, sollte am Ende Ihrer Seite hinzugefügt werden.

Eine weitere Regel, die Sie beachten sollten: Wenn Sie mehr als eine CSS- oder Javascript-Datei haben, befolgen Sie immer die Hierarchie-Regeln und legen Sie die wichtigste Datei an die erste Stelle. Fügen Sie den Rest nacheinander hinzu. Schließlich können Sie keine unglaubliche Javascript-Funktion verwenden, die die jQuery-Bibliothek verwendet, wenn Sie die jQuery-Bibliothek nicht zuerst aufrufen.

---

Schritt 4: Fertigstellen unserer Vorlage

Wir sind fast fertig mit unserer Vorlage, könnten aber auch etwas hinzufügen. Mit der Einführung von HTML5 ist die SEO-freundliche Gestaltung Ihrer Website wesentlich einfacher geworden. Die richtige Semantik gibt Suchmaschinen sehr genaue Anweisungen, was zu finden ist und wo sie zu finden sind. Fügen wir einige allgemeine Elemente hinzu, die wir wahrscheinlich auf den meisten von uns entwickelten Websites verwenden werden.

Direkt unter dem tag und vor dem Tag, fügen wir die folgenden Codezeilen hinzu:

  
Webseiten-Name
   
 
 
Artikelkopfzeile
 
Ein einfacher Text, der uns helfen soll
 Weiterlesen?  
 
  

Unser Code sollte nun wie folgt aussehen:

            
Webseiten-Name
   
 
 
Artikelkopfzeile
 
Ein einfacher Text, der uns helfen soll
 Weiterlesen?  
 
     

Wo wir früher div-Container verwendet hätten, haben wir jetzt mehr beschreibende Markups implementiert. Das ,