As a web designer what you should know in order to build a search engine friendly website, what points you need to cover and what tools you need to use.
First let’s all agree that we professional web designers do write good semantic markup and not the old fashion table based designs. This is something essential, why? Because search engines are just like people, they don’t like to read a lot of unnecessary markup and get board quickly that they might leave your website before they crawl it all. They also can’t determine which part of the markup is important and which is not such as lists, menu or titles.
That’s why you should make sure that you are inserting the right markup in the right place. I’m not saying that writing the semantic markup will boost up your traffic and put you at the top of the SERPs but it will make crawling and understanding of your website much easier.
Now how do we make the search engine spider while visiting our website knows the good pieces of that site? That’s very simple and we will come to it.
Header
Let’s start our journey; what you need to do first is to add the regular Meta data at the top of your HTML header, title tag followed by keywords tag, and finally the description tag – in this order; then you can attach JavaScript’s and CSS files. Why? Because search engines will read these pieces of information the first thing, so if they are at the top you will make their life much easier.
Please note that every page has its own unique Meta data, so don’t duplicate the Meta data and use it on every page of your website.
Footer, the power
Let’s tackle something else, let’s talk about the footer.
Footer, where you add the copyrights and some other links is a good place for another navigational element using your keywords listed in UL as you did with the navigation above.
This is not spamming and we are not stuffing the page with tones of unnecessary links, for some websites this could be very good especially if your website have long pages, so when users reach the end of the page (if they did scroll) they will find another navigational assistant.
Your , the gold mine
Now, let’s go to the next part of your exercise, it’s the body or body tag; the base of all the good information that search engines are crawling to find.
In the body of your XHTML make sure to start your markup with the menu or your navigation DIV and give it an ID call it navigation or menu or whatever you want to call it, by this the first thing search engine finds when it comes to the body is the navigation where usually your most important keywords are listed there.
Put these navigational elements in a list because that’s what they are; and each one of them are titled with a description of its function. By this; search engine can crawl your whole website (Make sure that your navigation is consistent and exist in every page of your website, this is purely usability issue).
Note: If you are using flash, images, or JavaScript’s navigation then you better stop that as they are unrecognized by search engines and not accessible or usable at the same time.
Now you have built your navigation with links of your most important keywords and told the search engine that these are important items (as they are listed at the top of your body tag and are built as links, and each has its title attribute). Isn’t that’s fun and simple?
Note: adding the navigation at the top of your body tag doesn’t mean that it will appear at the top of the page, with CSS you can control that and float it to the right or left on your page.
Now we’ve covered two of the website parts, lets’ now dive in the most important part of your page. The content part where all the good stuff could be found (assuming you are building a good website that can benefit the mankind).
Since this part of the website is totally different from website to another and from webpage and the other even in the same website, so I will give general recommendations.
First start your content area with breadcrumb, breadcrumb is something very important for every website, it tells the users where they are, and it’s a good place to add your keywords to it with descriptive title attributes.
Breadcrumbs are supposed to be at the top of the content area and, they are the first thing a search engine read when crawling this area.
Second add to your content area the most important keywords as heading for that part, use H1,H2,H3 for that. By this search engine spider will understand that you are pointing it to an important area of your website. The idea is to use the appropriate markup to present your content.
Note: it’s not recommended to stuff your page with keywords and links, so use them wise and carefully or it will turn on you. What is good for users is good for search engine spiders as well. Search engines are tools people use them to reach their goals.
As a web designer you can control the placement for each element inside that area and according to it’s impotence you can take it upper from the markup side.
Your recommendation for the layout is very important in this stage, that’s why you should have a strong understanding of the nature of every page in the website and every section.
Connectable
Try to make your pages reachable by two to three clicks and are connected to each other where I can reach the first page from the third one and vise versus. You also want to decrease the links to external pages, so avoid elements as much as you can that are pointing to other website (this is differ from website to another depending on their nature and objective).
While we are talking about links; put into your mind to limit your page links to 100 according to Google recommendations.
Always use title tag and link attributes for your images and links, this is very good place to add extra keywords (but don’t use this to spam the spiders).
File size is considerable
While building your page always remember light is good, so try to avoid 300 KB websites and try to limit your self with 30 to 40 KB with higher text to code ratio.
Rich Internet Application
Try to avoid adding your content that has your most important keywords inside flash, JavaScript’s, AJAX or images. Don’t hide that valuable content from the search engine spiders. Always remember that building a website is for professional and you are that one, your recommendations should be for the client and the user benefit.
Let’s sum it up
I think by this I’ve reached the end of the story on how should you as a professional web designer build your website, what are the good elements and how to structure your layout. You should know that there are a lot of elements that control website ranking, what we’ve discussed here was the web designer part of the equation and nothing more. Always depend on the standard instead of trying to work around the system.
My aim of this article is to highlight the web designer part for designing usable and in the same time search engine optimized pages.