16. Designing the first web page

Writing for the web is not the same as normal writing because you need to optimize keyword use. If you look at some of my web pages they do not read quite as well as I would like them to. They lack a bit of fluency, are not quite grammatically correct at times, and maybe somewhat repetitive, occasionally. I do know this. It was done deliberately. You will perhaps have to do the same or similar.

This apparently little bit sloppy approach may even carry over into this book so used am I to web writing these days please forgive my errant ways.

Many, probably a majority of all websites use tables to create their structure although my preferred way these days is to use CSS wherever I can to reduce the number of tables inside a website design. Consider using CSS despite the learning curve involved. It will save you days of work later. Believe me it makes it a LOT easier to change your site later

The rest of this chapter assumes you wont take my advice and you will use tables like nearly everybody else. Use the tabular approach even if you have a very simple text only type web page just make the table to have 1 or 2 rows and or 1 or 2 columns. It might just make your life easier later when you become a bit more qualified. See later my warning about putting everything into one large table however.

There are two parts to any web page.

Without knowing this you will have difficulty getting top spots on SERPs

Most people think only of the visible parts of a web page; understandably so.

Because I knew nothing at all about web design or HTML (and I mean almost nothing at all) my failure to recognize this early in my website creation days cost me weeks of work and lots of confusion.

The two parts are:

1. Visual or visible structure what you see on your published web page

2. Invisible structure what the search engines see and you dont (unless you know about it)

Think of every visual part of the web page you do as having the following structure:

A smallish surheading

A large main text heading (lets call it H1 and definitely call it H1 if you use CSS)

A second introductory type of paragraph (lets call it H2)

Interactive components (e.g. newsletter subscription)

The main body text.

The links area(s)

Images and their location

Repetitive content (very important to bear this in mind)

16.1 VISIBLE WEB DESIGN

The simplest approach to web page design is to use tables and place text, images, links etc in cells of the tables. In this way it is possible to create attractive layouts, with lots of white space and also make it possible to place images easily as well as to align objects. It allows color application, text font variation and so on.

Do not use frames. Search engines are confused by frames.

16.2 A SIMPLE LAYOUT OF WEB PAGES

Almost all websites or web pages involve the extensive use of tables for layout purposes. Tables really are extremely useful. However:

TWO WARNINGS WHEN WORKING WITH TABLES

1. Never put everything on your web page in one large table. If you do the visitor will see nothing on screen until the complete table has been loaded. This is obviously bad news in a situation where you have an impatient visitor click through to your site. These days this means nearly everybody.

Knowing this you can now help yourself and your visitor by including at least the headings and maybe more outside of the table in this way your visitor has something to look at and read while the rest of the page loads.

You will not normally come across this information anywhere. It is assumed it is known and of course it is NOT widely known. It cost me a lot of extra work when I realized the mistake I had made initially.

A number of smaller tables are better than a single big table for the same reason.

2. When a search engine spider comes across a table it reads the content in the top left cell and then the next one to the right until it has finished reading the first row. If you do use a table at the top of your page then do not place your links in the first cell on the first row unless you want these to be read first by the spider.

You have almost certainly seen during searches that the text beneath the TITLE says link1, link 2, link 3 etc. This is not what the designer expected the searcher to see. It happened because this information was placed into the top left hand cell.

Let me try to explain this important step and at the same time show you a bit of HTML and how it instructs the appearance of a web page. This 4-celled table in the picture below was first constructed

Below is the HTML generated by Front Page to create the table.

Remember Front Page is a WYSIWYG editor meaning it creates the HTML for you. You just tell Front Page to create a 4-celled table using a basic menu similar to MS Word, its as simple as that.

Now lets place some text in the table as below and just assume the word LINKS represented the actual links you might want to include on your actual web page .

Take a look at the corresponding HTML

Notice the first text is the word LINKS and this comes before your KEYWORDS. Notice the next entry after KEYWORDS is the content of the left hand cell on the second row . STORY.

In practice you possibly want a search engine to see the KEYWORDS before it sees the LINKS.

To make sure that your KEYWORDS are seen first by the spider and that there is no interference form the LINKS complete the table as below.

Now take a look at the HTML for this design layout

The first text any spider will see is LINKS exactly as you intended.

Of course you can make the table more attractive by merging the top cells as follows:

and the HTML

Of course you could place your heading containing important keywords before the table as follows:

and the HTML for this layout is

The conclusion is that it is good practice to place your heading containing important keywords before a table and leave the first cell of a table empty to force the spider to read important text before it reads links. This sounds simple and it is but you will be hard pressed to find this important information anywhere.

Before and above my main heading I tend these days to place a surheading which is something I learned from Michael Fortins book. A surheading goes just above the main heading. We will discuss this later, for the time being take note of this.

I also tend these days to place internal site links right at the top of the page in a shared border area. These links always contain my important keywords.

The best place to show links is at the top of a page or down the left hand side based upon surveys of web surfers.

16.3 AN ACTUAL SIMPLE WEB PAGE LAYOUT POSSIBILITY

TOP OF PAGE

link1 | link2 | link3 | link 4 | Consider using this space for important links which is to benefit of visitor. I might even use bold font

Are you looking to increase your sales 200% per day? this is a surheading and I use normal body text font size.

Outside of table I place this main Page Heading and definitely include my keyword at least once. I use largest font text youll see on the page and style as H1

And underneath I place this sub heading and definitely include my keyword at least once. I use second largest font on my site for text in this sub heading and style as H2

I construct a smaller table with possibly a picture in one cell and text in another adjacent to this picture.

Now I start main table as described below

If every page of your website had this structure it would be fine and it would also be very easy to repeat it on different pages. Web page layout really needs to be simple.

The following screen shot shows what the bottom of any web page might look like:

This section of links (in blue) and the red copyright is repeated on virtually every single web page relating to this project. They are links essentially to more important web pages.

I often dont use stop words (and, if, but, to, etc) and I ensure I use keyword phrases.

Imagine doing this for 100 web pages or even more and then having to do it again because a link was broken, or a better way of linking was found or maybe better words were available and believe me this happens a lot.

If there was not an easy way to make changes like this most people would find an excuse to leave it until tomorrow know what I mean?

Think of the possible errors that could creep in and the boredom even using copy and paste. Front Page makes it very easy using what it calls shared borders or dynamic web templates. This is one important reason why SEOs use Front Page.

If you are a serious web designer/SEO or even an amateur version then do consider Front Page from the beginning not later. Web page layout like these takes minutes and the second and third a fraction of the time of the first page. Web design is a lot about repetition so you need a tool that makes repetition simple BUT accurate and makes correction easy.

Web design time is the actual writing of the words NOT the layout.

My choice of Front Page was based on luck not advice.

16.4 INVISIBLE WEB DESIGN

I am not referring to one of the common search engine spam tricks keywords are repeated time and again converted to white text and placed on a white background Humans cannot see and at one stage neither could search engines but they found out. Consider tricks like this a serious infringement of Googles business ethics never mind your own. Dont even think about it.

By invisible web design I refer to that bit of HTML you do need to get to grips with. Forgive me here but I can only explain what I mean using Front Page as the example. I am sure similar commands or instructions are to be found in other programs.

Essentially all web pages are made up of Head and Body. Body eventually becomes seen on a website screen for all to marvel at.

Head is not seen by the casual visitor but is always looked at by search engines and good web designers/Seoers.

Take a look at this HTML coming up just below here. First let me explain how I got it and where it came from and then you can try it yourself.

I went to Google search, typed good cheddar cheese (no inverted commas) and clicked on the SERP in number 1 position. This site happened to be this shown below.

Below is the Google return for the search I did. The TITLE was Cheddar Cheese Debate as you can see below. Google always puts the TITLE of a website first in large blue letters and underlines it because it is a web link allowing the searcher to go to the site.

We have discussed this before but you will notice the TITLE does NOT appear on the actual visible web page. The apparent title of the page is more accurately the Heading. Not Your Childhood Cheddar is not the site TITLE as far as a search engine is concerned. The TITLE is Cheddar Cheese Debate as you will see below.

So where did Google get this information from? It got it from the invisible web HTML in the HEAD section. Confirm this by looking below.

You view this HTML by right clicking anywhere on the web page. Then select view source and there it is ready for copying and examining in the greatest detail if you want.

Note the two sections Head and Body. All web pages have Head and Body. Head is important to Seoers and search engines and especially website owners.

Do you know the TITLE of your own web pages? You should because your important keyword must be in the TITLE to stand any real chance of being found on a Google SERP for most keywords.

<TITLE> in the Head section is where every search engine finds the web page title.

This is why you need to understand a little bit of HTML so you can find out about anyones title and a few other important things.

You no doubt noticed that the body contained the text that appeared on the actual website.

This site is a great example of no flash, no pictures nothing but text. But it got number 1 page 1 on Google out of 86,400.

Remember this page forever, recall it whenever you are tempted to add that one extra picture to your web page a good page does not need to be full of pretty pictures to succeed.

This page re-emphasizes the importance of content.

16.5 DO YOU KNOW WHAT META TAGS ARE?

Meta tags are part of the web page HTML that remains invisible to the casual searcher and was placed in the HTML to be able to be read by search engine spiders.

The two most commonly discussed are keywords meta tag and description meta tag.

KEYWORD META TAG

In the early days of search engines this was an important way of telling the engine what the web page was about but it quickly became abused since it was possible to place words into this tag just for ranking purposes.

Take a look at almost any site and take note of the very many keywords stuffed into this tag. No web page can possibly be about all those keywords! Here is an example .

Google and most other international search engines now seem to ignore this meta tag for ranking purposes (but beware maybe not for ever). I include this meta tag as a matter of routine.

Inktomi (now owned by Yahoo) and MSN as well these days does consider keyword tags.

DESCRIPTION META TAG

Take a look at any SERP from Google. Here is an example of a description tag from one of my sites.

The informational text below the Title link on SERPs used to come from the meta description tag. Google generally has stopped using this tag because once more it was becoming abused. Instead of looking at the description tag for this information Google now returns one or more snippets of text from the body reasonably close to an occurrence of the query word/phrase used to return the SERP.

It has been reported recently that Google is using this particular tag again. Other major search engines do use the tag. I include it as a matter of routine and always ensure it contains my keyword, towards the start of the sentence.

Neither of these tags is typed onto a web page so you need to know how to include the HTML or use the wizard that comes with software like Front Page.

ROBOTS META TAG

A special tag is called the robots tag and is used to prevent search engine spiders indexing a particular page or site. There are legitimate uses for this tag (imagine a price list posted for special purposes and you do not want the whole world to see it) but it is also one used a lot by spammers.