As I recently redesigned and coded this site, I realized the importance of a site structure. It’s the very essence of accessibility. The need to generate a working site structure should occur as part of the planning of a site, but is made possible during the coding.
I will present some basics of the idea, then follow with a working example and explanation for each step.
Why bother with a clear site structure?
It helps two groups of people — you and your visitors.
Categorizing every piece of content will make the developer code as efficiently as possible. With a good site structure, you will be able to code more quickly and expand or change any code in a more organized fashion. (By code I mean the client-side as well as the server-side coding).
The visitors see the visual placements of links and images and determine where to click (or when to leave). Having a perfect site structure will help your visitors find the things they need fast, without becoming annoyed at the poor presentation of perhaps excellent content.
So what is there to be done about structure?
Sitemaps, permanent links, and server-side coding.
1. A sitemap
Here’s a perfect example of a sitemap to start off with. This could have been a draft made up during the planning process.
Great sitemap. Now you’ve replicated the navigation. A sitemap is way more than just a list of sections for the site. It’s an abstract composition of the structure of the site. Although not every site needs a sitemap (especially if the site has a really clear structure), it needs a clear and exemplified outline. With the sitemap, the designer/developer can easily make the site without thinking about what kind of content site needs at the same time.
The designer will soon realize this, when the question “what should I put here?” comes to mind. This is a sign of insufficient planning. But it’s never too late. Let’s add some details. A lot more.
Basically, the goal is to have an item for every physical page that the visitor can view. In other words, the sitemap represents the structure of your site from the visitor’s perspective.
2. Determine the permanent links structure
Nowadays not all pages are handcoded each time. Many websites are powered by publishing engines, such as WordPress, MovableType, Mambo, etc. Many of these dynamic scripts support permanent links — the fake url that your visitor sees. An example would be the url of this page, as it’s dynamically generated and processed.
Choosing the permanent link structure is a crucial step in developing a website:
- Search Engine Optimization — search engines value keywords in your urls heavily, which in turn determines the importance of your content. Having related words such as the title, date, category helps.
- Site Management — managing a site with permanent links rather than
index.php?section=articles&article=3is a lot easier and comforting. - Permanency — Permanent links are for the sole purpose of this. If you ever want to switch to another dynamic engine that uses a different
index.cfm?area=4&item=25, you can still maintain the same structure, and the search engines and visitor’s bookmarks will not break.
This is the exact sitemap structure finished earlier:
So the “Archive by Month” page would be accessed with the url http://band.com/archive/month/. And similarly the actual archive of a certain month could be http://band.com/archive/2006/02/.
Tips when considering the permanent links:
- For each “virtual folder” (the characters between two /), the name should have as few words as possible the higher it’s in the hierchy. For example,
http://band.com/the-archive-of-the-blog/is ugly and messy. - If the page is part of a regularly updated section, include at least the year and month (and day if updates are frequent) of update. Many sites have structures such as
http://domain.com/my-special-post/and cause confusion for visitors and search engines. - Use dash (-) instead of underscore (_) when separating words. Dashes usually count for whitespace (for search engines) and look coherent when in a link (underscore in a link with underline looks like a space).
Here is a great resource on a standard for site organization, as pointed out by jinesh.
3. Coding the server-side of the site
Many people still code their own management systems with a server side language, due to its flexibility and originality. When writing code from scratch, try to write “modules” that represent each section of the site.
For data, updated content should be stored in a database in its own table for that section. Static content can be stored in a database, or it can be stored in one or more editable files.
The actual scripts themselves, whether object oriented or not, should be divided into sections according to the sitemap as well. Since each section is independent of the other, the scripts can have different classes or functions for each section. But be sure to make global functions accessible to other functions — try not to rewrite any code that does the same thing. Simply try to add a parameter to the function.
Of course the code can still have different kind of methods for displaying text. Be it the factory method or production method, the structure of the structure of the site should be the same. No that’s not a typo, the structure of the structure is the organization in your code. It should be as clear to you as it is to a visitor.
If, on the other hand, you are using a premade publishing engine, take advantage of its capabilities in organizing the data. Most of these offer permanent links structure — make sure that is done according to your plan.
There are definitely many deficits in a program that prevent you from achieving the ideal structure. Workarounds! I know that in my redesigning of the site, I hit many road blocks. But I solved every one of them with an alternative method (specifically in WordPress, using Pages).
Overall, the golden rule is to have a clear and humanly understandable structure for you and your visitors. Good luck!
good guide. but how to you build the site it self with css. i love to do stuff by hand. and have yet to see a good css and php guide that will help you make a php/css/html based website menu/guide/CMS without a backend like mysql.
[…] Inclui vários Gráficos read more | digg story […]
Thanks for the guide.
I use a CMS called supersite for an open source project i manage, zoopframework.com. It accomplishes the above for both pages and blog entries. It also handles this sort of url structure for the forum. It has allowed us to spend more time focused on development and less time spent on maintaining a seo capable website.
Actually, if SEO is your guide, you should consider keeping all of your files in the root directory. It will increase pagerank dispersion and sub-page optimization.
Consider a naming scheme such as the following
home
about.html
about-contact-us.html
about-history.html
band.html
band-releases.html
band-albums.html
etc.
This naming structure is as useful to organization as folders, but will improve spidering.
good article.
Does anyone know how to do rewrites for IIS ? most howtos are for Apache.
Russ would that be because pages in the root folder have higher page rank? If that’s the case, you are right, having static pages in the root folder would help with the SEO.
@Russ Jones
“Actually, if SEO is your guide, you should consider keeping all of your files in the root directory. It will increase pagerank dispersion and sub-page optimization.”
Nonsense. A lot of so called SEO advice is just myths and this one is a fine example.
In an URL there is no such thing as a directory. Furthermore, there is no penalty for an extra element in a path, that would be silly. Remember, a search engine wants to give visitors a good result, and to a visitor it doesn’t matter if it’s /band/releases.html or /band-releases.html.
Why do you think http://johnbokma.com/ works as it does? Try firefox rss in Google, for example.
I go with the author of this article, and recommend the former.
@Oliver Zheng: no, page rank has nothing to do with being in a root folder. Russ Jones is wrong. I know some people think that for each / your PageRank drops one digit, which is plain stupid, and IIRC based on people misreading an article that tried to explain PageRank. Sadly myths like this keep going around and around.
Hey I love your website can you send me the theme for it… I won’t post it on sites im gona use it for my self personal journal thank you and please let me have it I love it
This inspired me. Im currently rebuilding a random site from scratch, for the sole purpose of practice, and to learn something new. I will have to impliment what I learned from your article. Deffinetly bookmarking your site. :D And I love the design.
Really cool resource
I agree!
Nice.
i agree with john, you should definitely be using directories to sort your content. infact, directory names are handy to stuff in a few more keywords ;)
here’s a good article on a standard for site organization-
http://www.theobvious.com/archive/1998/11/02.html
Nice article but how do you make the required url without sprinkling files and directories all over the place? I find if you’re running the content from a database it makes sense to use one page as the master template. To have the url path to describe the content means either duplicating your main page or writing apache aliases at the required location! Is this how you do it?
Thanks
Great to see that you guys enjoyed it.
Toby, rewriting the apache aliases would be the way to do it.
jinesh, that’s a great link. I’ll include it in the article.
@Toby
“Nice article but how do you make the required url without sprinkling files and directories all over the place?”
You can make your site dynamically and make it appear statically to googlebot and friends. Disadvantage of this is that when something goes wrong, there is no site. A good but more difficult solution is to have a program update pages when they are newer, on the fly.
Regarding this blog, I see that links are nofollow by default. If you have a blog, I think it’s better to check for spam yourself, and don’t make outgoing links nofollow. If a link is on topic, the anchor text adds to the overall value of your page. Nofollow seems a “cool” way to fight spam, but IMSHO it’s the wrong way, since it might harm your site, and if everybody uses it, it will harm more then do good, since links are still used to measure value by SEs.
Also, people do click on links, and there is no way nofollow prevents this, and hence the spamming keeps going on and on. It all goes automatically, and the major spammers don’t care if you nofollow or not. They don’t even bother to check, since via SEs one can find blogs by the dozen in a very short time.
I never thought about it that way.
The original intent of
rel='nofollow'was so spam links do not get picked up by the crawlers, so the blog becomes less relevant to spam.But I see your point, and it probably works better your way if the comments are kept clean. I got rid of the nofollow.
[…] The Perfect Site Structure — mtsix [Oliver Zheng] (tags: organization design) […]
Thanks, a good overview, as for the seo discussion, I believe that the url folders are used in keyword relevance, and especially file names, so /music/index.html is good but music/music.html would be better…
@Oliver: Sadly people keep spamming blogs. I get now and then attacks via zombie networks. At the moment I don’t accept messages that are too short if they include a URL, which works quite well for the time being.
@music and media man: Technically there is no such thing as a URL folder. What you mean are parts of the path, and indeed you can map your filesystem structure onto URL paths. But it’s not needed.
As for keywords, /music/music.html might be regarded as keyword stuffing. Furthermore, I doubt if there is a real difference between /music-music.html or /music/music.html. It’s not that hard to regard both as similar in software.
Final note on /music/index.html: don’t use index.html in your links, use /music/ instead (or other relative/absolute constructions). Between your site and the browser caching might occur, and a cache doesn’t know that music/ and music/index.html point to the same file (the webserver does handle this), and hence two copies of the same page might be cached.
Great article. I have blogged it on thewebdesignblog.com
Very interesting read, especially the comments!
[…] Make the Perfect Structure for a Site […]
Great article!
@John Bokma: Actually google does use the file name and ranks it extremely highly, so music.html will rank better than just /music/. I’m pretty sure google treats URL and the filename as related but not the same thing. I don’t believe /music/music.html could be considered keyword spamming and is in keeping with the site structure presented, although a more descriptive filename would be better (music-green-cold-potatoes)?
I agree that the filename is verry important on google ranking but content is twice as important.
One question for you site organization gurus: what’s the best way to organize a multilingual site ? I’m talking about a site with mostly static content that has to support English and French, for example.
Do you use two identical sitemap structures, one for each language ? Do you use one structure with multiple files in each (e.g.)? e.g. /music/music_en.html and /music/music_fr.html ?
Any tips would be appreciated
Since the content is the same, but in different languages (hence, different presentation), a subdomain or root folder would be good. For example, en.domain.com/content/ (fr.domain.com/content/) and domain.com/en/content/ (domain.com/fr/content/) would seem the most logical.
[…] Check It Out […]
Good article.
I have made a page
http://www.seodata.com/reBlogger%20Website-based%20Aggregator/rp-38-t8_SEO_best_practices.aspx
containing a combined list of SEO “perfect page” and interlinking and so on.
If you don’t want to write your own perfect SEO website, then just download and install reBlogger
http://www.seodata.com
it gets ranking right out of the box.
Try it. Enjoy!
[…] Here is a great resource on a standard for site organization, as pointed out by jinesh. […]
Really good and helpful article - thanks!
Hi all!
This article is very nice. Good information about site structure. Thanks for that one, helped me a lot for planning a new project.
Cu
sa va a teue hassan
sa va ateuete
I think that the higher up in the directory tree the better…
[…] http://mtsix.com/articles/2006/02/the-perfect-site-structure.html […]
I use open source CMS, try ff.
Hello,
It’s funny how easy it is to do much of what you mention in this article with Drupal CMS.
We have their content management system running on nearly a half dozen sites sites right now and simple modules do most of the categorization and structure for us.
For instance, we use several contributed Php snippets for heirarchy categorization, one module for the sitemap (or categories for the site(s)), and several more contributed modules for simply presenting users with easy, clean URL pages that are easily spidered and easy for users to understand.
I would recommend Drupal to almost any client for its categorization capabilities alone.
Very useful, thanks a lot!
i need help i need to write about a site and was wondering if u can help me.
http://www.nmpft.org.uk/baf/2006/home.asp
need to kno wat i can write about the site
The Site Structure (organization of content)
Navigation Methods (labelling, affordances)
Layout (hierarchy, clarity of design)
Colour (hierarchy, focus, contrast)
Content (legibility, formatting, media, typography)
jst a little on wat to write to get me going
This clarifies some things that I didn’t previously understand and even dispels conflicting information that I took for granted.
what is site structure and what is the importance of site structure.
Tanx.
Great and useful article.
[…] The Perfect Site Structure  MTsix [Oliver Zheng] […]
Hey, just wanted to say great post and that I referenced it in my Internet Marketing Blog post about sitemaps
Hi, actually I used this guide to test in my newest website. Thanks for this great guide.
Great Stuff. Especially for someone like me who is not as much into technical things. I am looking forward to visiting your site regularly from now on.
This article is old but good because most of my sites I construct like that.
Interesting - I will give it a test in one of my new web projects. Thanks for the info.
Thanks, a good overview, as for the seo discussion
You should also make router shorter which means put all articles in root folder, no use of .html. :) Just my opinion.
[…] SEO Site Structure […]