NAVIGATION
Search engines sind heutzutage wie Menschen: sie scannen eine Seite von oben nach unten.
Aber vielleicht sollte da ein Unterschied bestehen, denn eine Suchmaschine sieht nur den Code und ein Benutzer nur das, was der Code auf den Bildschirm bringt.
Mal ganz abgesehen vom Thema “barrierefreiheit” («–link)
Lass uns mal mit der Struktur des Codes beginnen und dem CSS
Seitencode- Struktur, nett zu lesen für Suchmaschinen, aber nicht für Dich ):
<div id="mypage"> <div id="myheader" class="clearfix"> <!-- whatever e.g. {HEADER}--> </div><!-- end myheader --> <div id="mycontent" class="clearfix"> <div id="mymaincontent"> <!-- whatever e.g. {CONTENT}--> </div> <div id="mysubcontent"> <!-- whatever e.g. {NAV_LIST_UL}, {LEFT} or {RIGHT}--> </div> <div id="mylocalnavigation"> <!-- whatever e.g. {NAV_LIST_UL}, {LEFT} or {RIGHT}--> </div> <div id="mymainnavigation"> <!-- whatever e.g. {DD_NAV_LIST_UL}--> </div> </div><!-- end mycontent --> <div id="myfooter" class="clearfix"> <!-- whatever e.g. {FOOTER}--> </div><!-- end myfooter --> </div><!-- end mypage -->
Du kannst ganz leicht erkennen, dass direkt nach dem Header der Inhalt beginnt {CONTENT}. Sehr nett für Suchmaschinen, weil die sich nicht erst durch den Code von Tabellen-Tags und anderen uninteressanten Stoff wühlen müssen, bevor sie an den Inhalt kommen.
Der Inhalt selber wird gefolgt von Haupt- und Unternavigation.
Das ist natürlich nur ein rudimentärer Schnipsel und kann in jede erdenkliche Richtung erweitert werden…. und mit Hilfe von etwas CSS schieben wir später alles an seinen Platz (denn die Benutzerin selber will ja auch gefüttert werden) ….
Wir zerren alles an seinen Platz (dieses Mal für Dich, die benutzerin (und nicht für die Suchmaschinen ):
div#mypage { width: 76em; margin: 0 auto; padding: 0; text-align: center; background: #f2f2f2; } div#myheader { margin: 0 0 0em 0; padding: 4em 2em; color: #fff; background: #999; text-align: left; } div#mycontent { position: relative; width: 72em; margin: 0 auto 2em auto; padding: 4em 0 0 0; text-align: left; } div#mymaincontent { float: left; width: 30em; display: inline; height: 12em; background: #f9f9f9; margin-right: -21em; margin-left: 21em; } div#mysubcontent { float: right; width: 19em; height: 2em; display: inline; background-color: #aaa; } div#mylocalnavigation { float: left; width: 19em; display: inline; height: 2em; background-color: #aaa; margin-left: -30em; } div#mymainnavigation { position: absolute; top: 1em; left: 0; width: 100%; text-align: left; height: 2em; background-color: #666; } div#myfooter { color: #fff; height: 2em; background-color: #222; } .clearfix:after { clear: both; height: 0; display: block; visibility: hidden; content: "."; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; }/* End hide from IE Mac */
Assuming that you are knowing how to set up an article (otherwise check it out over here) we now will start writing
Starting you article with the topic in mind. Write down all important keywords for this article. The most important one(s) you will use to “design” your article title and sub title. This was easy? Well…
Now write a brief summary of your article, catching the most important keywords again. But beware: they obviously should appear within your article's content later on too! Don't try to spam, it's useless and most of all, it's not necessary. Add a picture (or not, but for consistencies sake, do it the same way for all articles). If you make use of the system feature “article listng” you could set the check mark “hide summary” so it isn't visible at the top of your article. Hmmm… but…. wait….
We are writing for search engines and real people, aren't we? So better leave it visible (it's the default, anyway).
Why? Because people arriving at your site's page will scan the title, perhaps the subtitle and check your summary at first glance, before scanning down the left side of your document to check if you are telling the truth with your title and summary (often they will scan down first before reading the summary for confirmation.
So there another important part of setting up titles and text is coming in: the order of your wording! For scanning it is important to have your keywords first at hand, so try to place them at the beginning of your headings, titles and texts (well, not all o them , again the most important only).
What the heck has this to do with search engines by now? Well, they try to be human too:
They check your source code until hitting the first H1 tag (your impressive article title, stuffed with your key words, then go on scanning your summary where they can find the “all about”, checking for whether your key words are occurring within your article's text too. And off they are again….
Sometimes it would be nice for them to find some kind of conclusion at the end of all or some links to go to…. again it's just like with real people