OnPage SEO – Das perfekte SEO Layout

von Birger | Tags: , , ,

Auch wenn  Content und Verlinkung einer Seite vermutlich schon immer die wichtigsten Ranking Faktoren darstellen, so herrscht bei den meisten SEOs Einigkeit darüber, dass eine vernünftige OnPage Optimierung das Fundament für vernünftiges SEO ist. Angestachelt durch eine Diskussion, wie eine perfekt optimierte Seite aussehen sollte, habe ich ein Grundlayout erstellt, welches imo alle wichtigen Faktoren beinhaltet.

Der Code

In vielen Blogs wurde das Thema OnPage SEO schon ausgiebig behandelt, deshalb werde ich nicht allzu genau auf die einzelnen Elemente des Layouts eingehen, sondern zuerst direkt den entstandenen Quellcode präsentieren:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Keyword1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Keyword2 dolore magna aliquyam erat, sed" />
<meta name="keywords" content="Keyword1, Keyword2" />
<meta name="robots" content="index,follow,noodp,noydir" />
<meta name="Language" content="DE" />
<link rel="stylesheet" href="css/keyword1.css" type="text/css" media="screen" />
<title>Keyworddomain.de - Keyword1 ein paar Wörter Keyword2</title>
</head>
<body>
	<div id="main">
		<div id="header">
			<h1><a href="#" title="Keyworddomain">Keyworddomain.de</a></h1>
			<h2><i>Pagetitle</i></h2>
		</div>
		<div id="menu">
          <ul><li><a href="page1.htm" title="page1">PAGE1</a></li><li><a href="page2.htm" title="page2">PAGE2</a></li><li><a href="page3.htm" title="Page3">PAGE3</a></li></ul>
</div>
        <div id="content">
        	<h3>Keyword1</h3>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero Keyword1 eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et Keyword1 accusam et justo duo dolores et ea rebum. Stet Keyword1 clita kasd gubergren, no sea takimata sanctus est Lorem Keyword2 ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea Keyword2 rebum. Stet clita kasd gubergren, <strong>Keyword2</strong> no sea takimata sanctus est Lorem ipsum dolor sit amet Keyword1.</p>
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros Keyword1 et accumsan et iusto Keyword2 odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Keyword2.</p>
 
			<img class="img_right" src="img/keyword1.jpg" alt="keyword1" width="500" height="150" />   
			<h3>Keyword2</h3>
			<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut Keyword1 aliquip ex ea commodo consequat Keyword2. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat Keyword1, vel illum dolore Keyword2 eu feugiat nulla facilisis at vero Keyword1 eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi Keyword2.Nam liber tempor cum soluta nobis eleifend option congue <strong>Keyword1</strong> nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Keyword1, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Keyword2. Ut wisi enim ad minim veniam, quis nostrud exerci Keyword2 tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            <img src="img/keyword2.jpg" alt="keyword2" width="500" height="150" />
			<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu Keyword1 feugiat nulla facilisis. Keyword1 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet Keyword2. Lorem ipsum dolor sit amet, Keyword1 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata Keyword2 sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat keyword1, et nonumy sed tempor et et Keyword2 invidunt justo labore Stet clita ea et gubergren, kasd magna Keyword1 no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur.</p>
		</div>
		<div id="footer">
        	<h4>Sitemap</h4>
            	<ul>
            		<li><a href="#" title="Page1">Page1</a></li><li><a href="#" title="page2">Page2</a></li><li><a href="#" title="Page3">Page3</a></li>
            	</ul>
		</div>
	</div>
</body>
</html>

Wie man sieht, ist das Layout auf Keyword1 und Keyword2 optimiert. Meiner Erfahrung nach lassen sich mit der Optimierung auf 2 Keywords die besten Ergebnisse erzielen. Weiterhin wurde die Seite sehr simpel aufgebaut und die XHTML Spezifikationen wurden eingehalten, was die Suchmaschinen Bots freuen sollte und durch die h1-h4 Tags wird zusätzlich ein Fokus auf die Keywords gelegt. Viele SEOs sind weiterhin der Ansicht, dass sich eine angemessene Anzahl an Bildern positiv auf das Ranking auswirken können.

Das ganze Layout lässt sich mit CSS sehr leicht gestalten und auf jegliche Bedürfnisse anpassen.

Hier kann man das ganze in Action sehen mit einem sehr simplen Design, welches allein mit CSS erstellt wurde.

Insgesamt basiert das Ganze natürlich nur auf Spekulationen, Erfahrung und Meinungen verschiedener SEOs. Nach meiner Erfahrung erkennt Google mittlerweile ziemlich gut, wenn eine Seite sinnlos für ein Keyword optimiert wurde. Dennoch werde ich die Tage einen Versuch starten und in unserem Blog dokumentieren. Dabei werde ich zunächst eine Nische suchen, passende Keyworddomain reggen und dieses Layout aufsetzen. Mal schauen, wie sich das Ganze ohne OffPage Optimierung in den Rankings so macht.

Über Anmerkungen, Tipps, etc. in den Kommentaren würde ich mich sehr freuen.

Achso, das Layout steht zur freien Verfügung und vielleicht hat ja jemand Lust einen ähnlichen Test zu starten oder ein alternatives CSS Layout zu erstellen.

Update
Danke für die Kommentare! Ich habe die Sachen jetzt umgesetzt und hoffe nun dem “perfekten” Layout etwas näher zu kommen ;) .

Arndt von seocomplete.de hat sich sogar die Mühe gemacht ein eigenes Stylesheet zu erstellen, welches nun hier zu bewundern ist. Danke dafür!

Ich freue mich natürlich über jegliche weitere Anmerkungen.

20 Kommentare

15 Kommentare

  1. Posted April 24, 2010 at 1:47 pm | Permalink

    naja Sitemap in H4 – ich weiß ja nicht ;-)

    • Posted April 24, 2010 at 1:51 pm | Permalink

      Hehe, da habe ich auch drüber nachgedacht. Ist aber vielleicht sinnvoll, ist ja auch ne Überschrift, außerdem sind dann nicht nur Keywords in h Tags ;) . Wie gesagt, alles Spekulation… man wird sehen

  2. Posted April 25, 2010 at 12:59 pm | Permalink

    h2 als Zeile unter der Überschrift entspricht nicht der Idee, dass der Text mit hx gegliedert wird. Klar, kann man machen. Machen auch viele erfolgreiche Projekte. Aber perfekt ist es imho nicht, da zu perfekt auch eine semantisch sinnvolle Gliederung gehören sollten.

    Ansonsten fehlen mir noch:
    - Meta-Tag zur Sprache
    - width und height Werte der Bilder
    - Links zu den HTML/CSS-Validierern raus

    Sonst nicht schlecht!

  3. Posted April 25, 2010 at 1:01 pm | Permalink

    Nachtrag: Habe mir jetzt mal angeschaut wie es im Browser aussieht. Wenn man den Text der h2 mit der Überschrift der aktuellen Unterseite ersetzt würde das denke ich gut passen.

  4. Posted April 25, 2010 at 2:53 pm | Permalink

    So, hab‘ mir auch mal ein bisschen Spaß mit deinem HTML gemacht :-) . Mein css hat bestimmt einige Fehler oder könnte auch schlanker sein. Die Bilder sind meine eigenen, du kannst sie Nutzen/ veröffentlichen wofür du willst dasselbe gilt natürlich für das Stylesheet. Würde auch wenn es eigentlich nicht Notwendig ist noch meta-Robots hinzufügen und, wie Malte schon gesagt hat, noch das meta-Tag zur Sprache. DL-Link: http://rapidshare.com/files/379977759/SEO-Layout.rar.html

    • Posted April 26, 2010 at 1:43 pm | Permalink

      Sieht doch ganz schick aus, habs jetzt auch in dem Beitrag eingebaut und bei uns hochgeladen, hoffe das ist okay.

  5. Posted April 26, 2010 at 9:10 am | Permalink

    Wenn du schon einen Bereich als “Menu” definierst, sollten die darin enthaltenen Links auch in einer Liste aufgeführt werden und nicht nur einen Aneinanderreihung von Links ohne Strukturierung sein. Nicht zu vergessen wäre auch ein Bilduntertitel mit “keyword1″.

  6. Posted April 26, 2010 at 1:42 pm | Permalink

    Danke für die Kommentare, wie ihr seht habe ich das meiste jetzt umgesetzt. Mal sehen wie sich die Seite im Ranking schlägt :) .

  7. Posted April 26, 2010 at 2:13 pm | Permalink

    @Birger – schön wenn es dir gefällt ;)

  8. Posted April 27, 2010 at 12:30 pm | Permalink

    Hallo, ich würde noch den DIV id=”menu” in der Reihenfolge nach dem Contentbereich codieren und mit CSS wieder korrekt platzieren ;-)

  9. Posted Juli 16, 2010 at 2:18 am | Permalink

    Wirklch sehr informativ! Werde aufjedenfall wieder kommen. Danke fuer den Beitrag.

    Gruss
    Andres

  10. Posted Juli 23, 2010 at 10:01 am | Permalink

    @Malte: Der Meta-Tag zur Sprache ist doch da…? Oder wurde der nachgetragen…?

  11. Posted Januar 13, 2011 at 5:26 pm | Permalink

    Sicherlich ein guter Anfang, aber als perfektes SEO-Layout würde ich es nicht sehen. Vor allem die Platzierung der h2-Überschrift im Header halte ich für fraglich.

  12. Posted Februar 8, 2011 at 1:42 pm | Permalink

    Also ich finde das mein Vorredner nicht unbedingt recht hat, denn es muss jeder selber wissen ob er h2 einsetzt oder nicht, genauso ob man keywords i den metas angibt oder nicht

5 Trackbacks

  1. [...] This post was mentioned on Twitter by Silvio Guder, Netway Media. Netway Media said: OnPage SEO – Das perfekte SEO Layout http://bit.ly/bBpXkl [...]

  2. [...] OnPage Optimierung – Das perfekte SEO Layout | Netway Media Blog … [...]

  3. By uberVU - social comments on April 27, 2010 at 12:19 pm

    Social comments and analytics for this post…

    This post was mentioned on Twitter by nmwebdesign: OnPage SEO – Das perfekte SEO Layout http://bit.ly/bBpXkl

  4. [...] OnPage SEO – Das perfekte SEO Layout [...]

  5. [...] OnPage Optimierung – Das perfekte SEO Layout | Netway Media Blog … [...]

Hinterlasse ein Kommentar

Deine E-Mail wird niemals veröffentlicht oder geteilt. Erforderliche Felder sind mit einem * gekennzeichnet

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>