Netway Media » CSS http://www.netway-media.com Agentur für Webdesign und SEO Fri, 27 Jan 2012 18:16:57 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 OnPage SEO – Das perfekte SEO Layout http://www.netway-media.com/blog/2010/04/onpage-seo-das-perfekte-seo-layout/ http://www.netway-media.com/blog/2010/04/onpage-seo-das-perfekte-seo-layout/#comments Sat, 24 Apr 2010 11:13:10 +0000 Birger http://www.netway-media.com/blog/?p=244 mehr lesen →]]> 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.

]]> http://www.netway-media.com/blog/2010/04/onpage-seo-das-perfekte-seo-layout/feed/ 20 CSS Zen Garden – Was CSS alles kann… http://www.netway-media.com/blog/2009/10/css-zen-garden-was-css-alles-kann/ http://www.netway-media.com/blog/2009/10/css-zen-garden-was-css-alles-kann/#comments Mon, 05 Oct 2009 20:59:01 +0000 Birger http://www.netway-media.com/blog/?p=99 mehr lesen →]]> Heute mal ein ganz kurzer Beitrag. 2001 wurde von Dave Shea das Projekt CSS Zen Garden ins Leben gerufen. Ziel der Seite ist es, zu demonstrieren, was mit CSS alles möglich ist. Jeder kann eine eigene CSS Datei bereitstellen, der HTML Teil der Seite bleibt immer gleich. Die Seite leistet mir schon lange gute Dienste um sich inspirieren zu lassen:

http://www.csszengarden.com

Leider wurde die Seite schon seit Längerem nicht mehr upgedatet, aber ein Blick lohnt sich allemal. Ich habe mich auch mal daran versucht, hier das Ergebnis:

Rainbow

So, jetzt viel Spass im CSS Garten ;) .

]]> http://www.netway-media.com/blog/2009/10/css-zen-garden-was-css-alles-kann/feed/ 0 Automatisch in CSS Verzeichnisse http://www.netway-media.com/blog/2009/09/automatisch-in-css-verzeichnisse/ http://www.netway-media.com/blog/2009/09/automatisch-in-css-verzeichnisse/#comments Tue, 29 Sep 2009 22:07:52 +0000 Birger http://www.netway-media.com/blog/?p=94 mehr lesen →]]> Mittlerweile gibt es ja massig CSS Directories, die zum Einen sehr praktisch sind um sich inspirieren zu lassen und zum Anderen natürlich auch um seine eigenen Sites bewerten zu lassen. Ich habe die Erfahrung gemacht, dass viele dieser Verzeichnisse auch tatsächlich Traffic generieren (auf jeden Fall mehr als die meisten üblichen Verzeichnis). Eine nette Liste ausgewählter, guter CSS Directories findet sich z.B. bei stonesouptech oder Tweeaks.

Erst vor Kurzem bin ich auf einen neuen kostenlosen Dienst gestoßen, der einem das Eintragen erleichtert:

http://csssubmiter.com/

Sobald man das Formular ausgefüllt hat, öffnen sich die Verzeichnisse in einem Frame mit automatisch ausgefüllten Daten. Man muss also nur noch bestätigen und ab und zu einen Captcha eingeben. Die Liste an Directories ist lang und die meisten wichtigen sind dabei. Insgesamt sehr praktisch und zeitsparend!

]]> http://www.netway-media.com/blog/2009/09/automatisch-in-css-verzeichnisse/feed/ 1 Templates verbreiten / veröffentlichen http://www.netway-media.com/blog/2009/09/templates-verbreiten-veroffentlichen/ http://www.netway-media.com/blog/2009/09/templates-verbreiten-veroffentlichen/#comments Fri, 25 Sep 2009 09:23:18 +0000 Birger http://www.netway-media.com/blog/?p=83 mehr lesen →]]> Eine gute Methode um Backlinks zu generieren besteht ja bekanntlich darin, Templates zu erstellen. Ich finde, dass dies eine sehr faire Methode ist, da man den Leuten seine Arbeit kostenlos zur Verfügung stellt. Ich selber nutze diese Methode, wie ihr in meinem letzten Post sehen könnt. Nur mit einer Veröffentlichung in seinem Blog nutzt man noch lange nicht das volle Potential der Templates aus.

Es gibt viele Portale, welche es ermöglichen seine Templates hochzuladen und so zu verbreiten.  Drweb.de hat hier eine sehr vollständige Liste an Seiten, welche kostenlose Templates anbieten veröffentlicht. Ich bin diese durchgegange, um zu sehen, welche dieser Seiten auch einen Upload erlauben. Nun habe ich folgende Liste an Seiten, auf denen ich meine Templates veröffentliche:

  1. http://www.csstemplates.net/
  2. http://www.oswd.org/
  3. http://www.free-css.com/
  4. http://themebot.com/
  5. http://www.opendesigns.org/
  6. http://www.fresheezy.com/
  7. http://templates4net.com/
  8. http://css4free.com/
  9. http://freecss.info/
  10. http://www.webmaster-elite.de

Es sei noch gesagt, dass es hierbei um HTML / CSS Tamplates geht und nicht um WordPress Templates.

So falls ich eine Seite vergessen habe, einfach als Kommentar posten, dann füge ich sie hinzu.

]]> http://www.netway-media.com/blog/2009/09/templates-verbreiten-veroffentlichen/feed/ 4 Kostenloses CSS Design http://www.netway-media.com/blog/2009/09/kostenloses-css-design/ http://www.netway-media.com/blog/2009/09/kostenloses-css-design/#comments Tue, 22 Sep 2009 15:16:34 +0000 Birger http://www.netway-media.com/blog/?p=72 mehr lesen →]]> Heute stell ich euch eine komplette Webdesign Vorlage kostenlos zur Verfügung. Das Design nutzt nur valides CSS und XHTML. Ihr könnt es verwenden, wie immer es euch beliebt. Allerdings wäre ich sehr dankbar wenn der Link im Footerbereich erhalten bleibt :) .

Farblich ist das Design in Orange gehalten und es lässt sich für alle möglichen Zwecke leicht anpassen.

Hier kann man das ganze in Action sehen.

Und hier gibt’s das ganze als ZIP zum Download (inkl. Bilder, index.html, style.css).

Mit der Zeit werde ich weitere veröffentlichen. Ich bin gerade noch dabei zu erforschen, wie man solche Vorlagen am Besten in den Umlauf bringt, darüber werde ich auch noch berichten.

So, viel Spaß mit dem Design!

]]> http://www.netway-media.com/blog/2009/09/kostenloses-css-design/feed/ 0