SEO/SUMA equitable conception

Search engines are like humans nowadays: they are scanning a page from the top to the bottom.
But there may have to be differences in what a search engine should see and what the user gets displayed on screen.
Not to mention the accessibility theme («–link)

We are starting off with the structure of the code and the css

Page code structure, nice to read for search engines (not for you ):

<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 -->

As you easily can see, there is some header with a logo for example and then immediately after that the content will start. Very nice for a search engine as it doesn't need to dig through a lot of table tags or stuff of lesser interest.
The content itself then is followed by the local navigation and the main navigation.
This is a snippet only and by far it isn't complete either , but we can exend this one to almost any size and/or direction…. and with the help of some CSS we pull everything in place later (because the user herself has to be fed too ….

Pulling everything into place (this time for you, the user (and not the search engines ):

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 */

I have to admit that it is really very basic

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