How to Get Your Website Structure Right

Getting your website structure just right is a task you need to get right.

If not you will suffer consequences ranging from poor SEO, increased bounce rates, decreased conversions and poor user experience. This is simply the result of bad web design.

This blog post will inform you on how to get your website structure just right. You will then be on the road to having increased SEO, less bounce rates, more conversions and improved user experience.

Resources

The Complete Website Checklist

The Complete Website Checklist

download now download now

Firstly we will talk about getting your website structure right on the design side of things, then we will talk about getting the structure right on the development (using your website design to inform your website structure) side of things.

Design Process

Evaluating the goals of the website

Your website must have a set of goals. Some types of websites include marketing, sales, customer support, IT and HR.

Marketing websites should drive traffic, engage potential customers, generate those leads that you really really want and even re-engage with your existing (loyal) customers.

Sales websites should do the above but also includes closing those sales.

Customer support websites should allow you to improve customer satisfaction.

HR websites should be good at attracting and recruiting new employees and also support current employees.

IT websites should integrate with other IT systems whilst meeting security, performance and scalability needs/requirements.

These are just some of the types of websites that are available, as you can see from here, each website type has a different set of goals in order to achieve what the main purpose of the website is for – sales (should close sales), HR (should attract new employees).

Once the primary goals of your website have been identified, the next step in the process is to define the user journey.

Discussing the User Journey

The user journey is the path the user may take to reach their goal. Their goal should be what your website’s primary goal is.

If your user’s intention is to buy a product, your website should be effective at closing sales.

Your website needs to meet your user’s intentions. To do this, you need to plan out the user journey.

This step entails understanding who is going to be using your website, map out the easiest journey, make sure your website can meet the user’s needs.

Before implementing the user journey on your website, you need to split each journey two categories. Awareness and consideration.

Awareness is the time your user finds you and your products. The discovery part.

Consideration is the part where your user is deciding if they want to buy the product/service. This is where a lot of touch points happen (a touch point is a time a customer comes into contact with your brand before, during and after they purchase your product/service).

If you’d like to know more about touch points, checkout our post on touch points. For this part, you need to make sure your users are highly engaged.

Acquisition is the conversion. The customer has made their decision and finally purchased your product/service. There are more steps after this, such as reconversion. (link/future post)

To create your user’s journey, you need to identify each step the user will take to achieve their desired actions. This is done by completing a user profile.

One example could be completing a user profile for shoppers (buyers who will be buying off your e-commerce site), from here you will be able to identify each step taken through the buying process.

A nice little example of a user journey for an e-commerce site could be:

User’s expectations:

• • The user thinks of something to buy
  • Expects to find a website with their desired product
  • Expects to add their products to the shopping cart
  • Expects to make a simple payment

Expects to receive notifications, tracking and finally their product.

Your website (mapping out the journey):

• Home (awareness)
• Category (awareness) – easy to find product
• Product (awareness)
• Add to cart (consideration)
• Checkout (consideration) – eas checkout process
• Conversion (acquisition) – your website is effective at meeting the user’s needs

There are many other examples, but this is enough to provide an idea of what this step entails.

Highlight key Calls to Action

If you have completed a user profile and have a good user journey plan in place, you should be able to highlight all the key call to actions.

Depending on your website’s goals, your website will have different call to actions, some examples include:

• E-commerce – CTAs should be buy, add to cart, order, shop now
• Newsletter – CTAs should be download, subscribe
• Request more information – fill out this form, find out how

Not only does your website needs to have the correct call to actions, but they also need to be in the correct places. For example, your add to cart button needs to be in a clear and obvious place where your user would expect it to be.

Having call to actions in the wrong place have the potential to frustrate your user’s and they will simply not carry out your their goals (your website goals).

Create Site Map / Hierarchy

Now that your website goals, journey and call to actions have been discovered, the next step is to create a site map.

Creating a site map is a good way to start to organise all the information that is to be put on your website. Once this has been planned out, your site map will become your site’s navigation and URL structure during development.

To help with this process, it is important to:

• Make a logical hierarchy
• Improves crawling (we will get to later)
• Have between two and seven categories
• If you start to become flooded in categories it is time to reorganise your site’s information
• Have a good balance of subcategories (within each category)

This can keep top-level categories between the perfect number.

Create Website Wireframes

A wireframe is a simple two-colour layout (black and white) that outlines the size, placement of page elements, site features/sections, conversion areas, editable areas and navigation.

The main focus here is to get down the site’s structure, like the HTML (structure) with no CSS (presentation/styling).

This makes it super easy to see how the website is made up and what each page is intended to do.

It is like the blueprint of a building, from where you can really start building the real thing.

In short, wireframes:

• Display the site’s architecture visually
• Clarifies any features
• Makes sure each webpage is usable
• Identifies updateable areas

Identifies any flaws in the design (prevents strenuous rework down the development line).

If you get the wireframing just right, you can confidently move onto the next step. Create the hi-res mockup.

If you are in the process of having a website designed, you need to make sure you have all the correct website features. This is a separate topic to this post, but we happen to have a post on just this called 50 must have website features for any business.

Create hi-res visual of design

Once you have your website’s structure nailed down in the wireframe, you can begin to add style, colour, shape and finally flesh out the unique design of all the components of your website.

Completing a hi-fidelity mockup of your website will make sure the structure works with the styling.

If something does not work, that section can easily be reworked in the wireframe, or the styling can be completely changed, with ease.

Having a wireframe and mockup will allow your client to see how their website could look and function through a visual perspective. This is simply better than explaining it to them.

We have discussed the importance of wire framing and hi-res mockups to get your website structure to where it needs to be. But, you simply need to have a good design if you want your well structured website to be effective.

Development Process (using your website design to inform your website structure)

Website Handover

A website handover meeting usually entails the designer handing over their design to the developer (the one coding out your website).

Giving the developer the design is all well and good, but they need to know how each element works, what pages are for what, and where all the internal links link up to and what assets are for what.

For example, the designer can discuss with the developer how the primary navigation works on desktop, tablet and mobile. This may seem obvious from looking at the design, but a feature such as a drop-down menu can be difficult if not explained properly.

This is because the designer will want smooth animation effects to work in a particular way. This simply cannot be seen from a static mockup. Unless a prototype has been developed, but this can drastically eat into project time.

In short:

• It gives your developer a design to work from.
• It allows the designer to compare the developed website against their design, making sure everything is correct.

Website Hierarchy

URL Structure that follows the hierarchy (permalinks)

Getting the website hierarchy correct during development is essential in order for your website to take your user’s through their journey.

Having incorrect links will lead users to the wrong place and may end up frustrating the user and having the incorrect hierarchy will confuse the user.

All links throughout the site from the primary navigation (parent and child links) as well as links from blog posts and call to actions need to go to the correct place.

For example, each individual blog post must take the user to the correct single page for that specific blog post. The contact call to action must go to the contact page (if that is the hierarchy of the website).

Not only this but the “hierarchy” of the permalink must match the hierarchy from the design. To make this simple if your website’s hierarchy from the design stage is:

yoursite.com/blog/blog-single

When you go to the blog single page, it must follow the same hierarchy structure, this means you need a parent blog page that houses all the individual blog posts.

This needs to be corrected as it lets the user know where they are currently on the site. This can be made even more obvious through the use of breadcrumbs (we will get to this soon).

On a final note, having the correct URL structure also affects SEO. We will get to this soon.

Semantic HTML

The first your developer will be doing is writing HTML to create the structure of the website.

You could compare this to the designer creating the wireframe – the structure with no styling, but in this case, the structure is the HTML with no CSS (styling).

To make sure your website complies with regulations, HTML needs to be well written. A simple example to make sense of this, is, providing labels for forms – labels aren’t always visible, but are important for accessibility software such as screen readers, as they read these labels.

Other semantic HTML includes paragraphs and headings.

Putting content in these tags allow the developer to identify what content is what (what’s a heading and what’s a paragraph), allows the web browser to render the elements at the appropriate sizes (heading text is generally larger than paragraph text) and allows search engines to pick up important headings and paragraph text.

Simply put, having heading tags means much more than having a simple span tag to style the text.

Meta Tags

As well as having semantic HTML, HTML meta tags must also be implemented.
A meta tag provides data about the HTML document (webpage) and is used by search engines, social media platforms and your browser.

For simplicity and clarification, we will use a social media example.

People like sharing content on social media, and if they see something they like on your website’s blog/post, they will probably want to share it on their social media platform.

When they share posts on social media, take Twitter as an example, it generally shows up with a nice large image with a bit of introductory text below it.

This is achieved using what is known as Twitter Cards. A Twitter card allows you to attach photos, videos and media experiences to Tweets.

Twitter cards are created using HTML meta tags, so it’s important that your developer implements the correct tags for your website’s needs (determined in the early stages – website goals and user journey).

SEO (development)

SEO URLs

First things first, let’s talk about the URL structure as it’s fresh in our minds.

If your site has a good hierarchy and your site’s URLs follow this hierarchy, you will have well-formatted site links listed on Google. The links that are shown on Google SERPs (search engine result page) are your site’s main page along with several internal links.

This is a major advantage because they increase the usability of your site’s navigation, show user’s the most relevant information, increase click-through rate and shorten the conversion funnel.

If your site has a poor hierarchy or the site’s URLs do not follow the hierarchy, this will reflect on Google’s SERPs, either the wrong links will be present, or they simply won’t show at all.

SEO Better Crawling

A good site structure also means better crawling. Google’s web crawler Googlebot will crawl your website’s structure and index the content which shows your website on Google.

The better your website’s structure, the easier it is for Googlebot to crawl your site.

This is because according to Google, their site crawler may not discover everything on your website.

There may be pages that are not discovered or if URLs are not discoverable, Googlebot will not find them.

As long as your site has a good structure, it will have a better chance of discovering all the important content.

SEO Keywords

Keywords are words used throughout your website content that makes it possible for people to find your site on search engines.

For this to work, you need to know how people are searching for a product or service (your product/service). From here you include the keywords they use in your site.

The Most Optimal Site Structure

Now that we have talked about your site structure at a base level (wireframes, Hierarchy and URLs), let’s talk about your site structure on a higher level.

This includes what to have on your homepage (the content that will include site URLs) and categories (the elements of your site that will change the structure of the permalinks) as well as the individual pages that make up the rest of your site.

In short, you need a home page that displays the most important information that you want your users to see, then categories that will house the inner pages.

So let’s get to it.

Homepage

Your homepage should act as the main navigation “hub” for your user’s.
You do this by adding relevant URLs to the content of the homepage that link to other sections of your site.

These are what is known as internal linking. This is because they link to other sections of your site.

This can be achieved by using call to actions, and by adding links into the content of the text.

If done right, your visitors will end up going to the pages they need to go to (the pages that you also want your visitors going to).

One thing to keep in mind, do not include too many links on your homepage – just the relevant, most important ones

Simply put, your homepage should have sections that allow easy access to other areas of the website.

This could be smaller sections or snippets that make up other inner pages. One example could be three featured products listed on your homepage that link to the single product pages.

Inner Pages and Categories

To keep your inner pages (blog posts, products) organised, you need to include categories on your website. These categories will hold relevant blog posts or products.

For example, if you have a shopping website and have an inner page to list ski boots, you would have a category for ski boots and the URL structure would look something like this:

yoursite.com/shop/ski-boots/ski-boot
If you take away the category, you would just have:

yoursite.com/shop/ski-boot

This means if you have many other products such as hats, snowboards and accessories, these are all going to fall right below shop with no organisation.

What this means is your users and Google will struggle to understand the content of your website making it harder to navigate and list on Google’s SERPs.

However, if you have a well-planned structure from the beginning, organising content should be a breeze.

Taxonomies and Tags

On top of having categories to organise your content, you need to have taxonomies and tags.

Taxonomies are used to group relevant content together.

Tags are used to label something about the content (could label all the specific topics within the category).

To make the difference between categories (taxonomies) and tags clear – categories are like the table of contents of your website and tags are like the index.

Let’s list out what this could look like:

Categories:

• Blog
• Web Design
• Web Development
• Digital Marketing

Tags:

• Website design
• Website development
• SEO
• Blogging
• Branding
• Business
• Logo design
• E-Commerce
• Blog site

If you are writing about a web design article, you could include website design, e-commerce, blog site and branding tags as these can all relate to the content of the web design post.

If you have good tags in place, you can allow the user to click through the tags to take them to other posts that also include website design, e-commerce, blog site and branding.

Navigation

It is all well and good having a good website structure and well-built homepage. However, you need to have clear top-level navigation that can easily be discovered/seen.

This consists of your top-bar (menu) and breadcrumbs (for large sites).

Menu

Your menu is the most common way your users will navigate your site. It simply shows them what’s on your website and helps them understand the structure of your website.

For example, if the top level pages are visible at all times such as the homepage, about page, blog page, services page and contact page. You would have the lower level (inner pages or child pages) links as child links.

This will generally take the form of a drop-down menu, where you hover over a link and more links are revealed.

An example of using this type of navigation could be the services page. You would have services listed on the navigation and any sub-services listed under this navigation.

So if you provide IT services, you could list IT services. Then under this, you could have cloud solutions, security and communications.

As you can see, this if you have structured your site well, it will also show in the navigation.

Breadcrumbs

Breadcrumbs are handy for larger sites. It makes your site’s structure/navigation even clearer.

Not only do they show the structure of your site, but they change depending on where you are currently on the site.

This means breadcrumbs show your visitors where they currently are on your site.

Take a shopping website for an example. If your user was currently on the single product page, the breadcrumbs would reflect this as:

Yoursite.com – shop – ski-boots – ski-boot

From here they can click either ski-boots, shop or yoursite.com to go back to where they where. This saves them from having to use the menu in the top bar to navigate back to the shop page if that’s where they want to go back to again.

Contextual Internal Linking

We all know by now your site’s structure is made up of URLs/permalinks, linking content together and grouping content up together (categories and tags).

And it is all well and good having links on your homepage that link to other areas of your website as well as tags that link to relevant content.

We have touched on including links within the content of your text (that link to other pages of your site). These are the links that are the contextual links.

To make these links contextual, the page you link to needs to be relevant to someone who is reading the current page.

Landing Pages

Landing pages are the first pages your visitors see when visiting your website. They are relevant to the term they have just searched on Google.

There are different types of landing pages. However, two important ones include cornerstone pages and product landing pages.

These are both pages that you want your visitors to land on once they have searched for a term.

For landing pages to work, you need to know what your audience is looking for. You do this by looking at search intent.

We have built an e-commerce site called MyDome for a security product, the site is designed to sell their products.

When you land on their home page you are greeted with a large hero section with short and to the point description about what the product does. This is effective at grabbing the visitor’s attention.

However, there can be  fine line between a home page and a landing page.

Search Intent

Search intent needs to be in mind when setting up your site structure. It’s all about what you imagine people are looking for when they are on Google.

You can do this by asking yourself what is expected to be found? Are the visitors looking for a question or definition? Are they comparing products? Are they wanting to buy something straight away?

For this to work you need to know your audience. But you will (hopefully) know this from when you complete the user profile and journey.

From here you can really make the landing page unique based on what your visitors expect to find. This means your landing page must fit the search intent of your visitors.

Once you have discovered the search intent, you can pick the correct landing page type and create it.

Cornerstone articles

Cornerstone articles contain the most important information on your website. The main focus of these pages is to provide information, not sell.

A cornerstone article could bring everything about a broad subject together on one landing page.

Product landing pages

Product landing pages are designed to sell products. They need to be really focused on not contain too much information.

This means the product landing page should not contain a fill complete article. It just needs to contain enough information to convince your visitors to buy your product/service.

From this, it should be quite clear what type of landing page you need.

• If you are providing information and not selling, choose a cornerstone article
• If you are selling choose a product landing page

Conclusion

Getting the structure of your website just right is absolutely paramount. If you think you need help with getting a website set up and running, we offer web design services and we can seriously help you.

For a final quick list here are the points we have covered:

Design:

• Evaluating the goals of your website
• Discussing the user journey
• Highlight key calls to action
• Create site map/hierarchy
• Create website wireframes
• Crate hi-res visual of design

Development (using your website design to inform your website structure):

• Website handover
• Website hierarchy
• Semantic HTML
• Meta tags
• SEO
• The most optimal site structure
• Navigation
• Contextual internal linking
• Landing pages