The Anatomy of a Perfect Web Page

“The Anatomy of a Perfect Web Page” (updated for 2014 edition) is designed to give you an overview, introduction and in depth references for all the elements which make up the complete web page. (On a side note, here’s a guide we wrote incase you want to learn how to make any of those elements more interesting)

As Web Design, User Experience, Search Engine Optimisation, Conversion Rate Optimisation and many other traditionally individual disciplines become more and more unified it’s important, regardless of your specific role, to be aware of how all the elements on a page contribute to your site’s success and their relationship with one another.

Each section is short and easy to understand. We’ve linked to dozens of high quality and comprehensive resources on other sites where you can learn about each element in much more depth.

We hope you enjoy it.

Update: Many people asked what we used to create the page diagrams. We used Balsamiq which we also use to rapidly create wireframes when we’re building websites for clients.

Hit Reach offer a full Website Review Service which includes an assessment your site’s usability, a technical SEO audit, keyword research, competitor analysis and much more… To order find out more click here.

The Perfect Web Page
01 - Design & Content

Your design needs to, quickly and efficiently, communicate what your website is about and demonstrate how it can add value to the user. Design is as much about responding to user needs as it is about visual appeal. Design and content should work hand in hand, such that the design maximises the impact of the content. You can create more engaging content by selecting the content medium that best communicates your message. As such, copy, text and images can all be used cohesively to create a very effective content-rich page.

1 - Headline


Your headline is arguably the most important piece of copy on your page. In terms of user navigation, it needs to describe the content featured on the page, so that the user knows what to expect and is reassured that they are in the right place. This consideration should tie in with the SEO perspective – that search engines understand what your page is about, so including your primary keyword is considered best practice.

If this is a product page, for example, it is perfectly reasonable to simply use the product name. With more social content such as blog posts, you need to also consider how ‘click-worthy’ your headline is, since you are typically relying on click-throughs not only from the SERPs but also from social networks such as Twitter.

Recommended Further Reading

2 – Navigation

web navigation

Information Architecture (IA) is the organising and labelling of your website content to support usability and findability. You want to enable your users to find what they are looking for, whilst also funnelling them into the areas you want them to go. Navigation is fundamental to IA, and should be determined during the research and planning phase.

Fundamentally, your navigation must make it as easy as possible for your users to complete their immediate goals. What task are they trying to accomplish? What problem are they trying to solve? You want to determine how to communicate with your users and show them how to complete their goals, in the most natural way possible.

On large sites, you will need to categorise your pages in one way or another, by placing them in logically relevant groups. There is no ‘correct’ way to do this, but some options you may consider:

  • Type (E.g. ‘Beds’)
  • Intended use case (E.g. ‘Sleep’)
  • Contextual setting (E.g. ‘Bedrooms’)

Recommended Further Reading

3 – Copy

Copy Writing

Writing for the web is writing for both users and robots at the same time. In terms of SEO, your copy must be unique, and you should use your keywords and synonyms wherever it feels natural – certainly don’t be afraid to use them.

Your copy should be clear and descriptive, focused on benefits over features and speak with the potential user in mind. Further, you want your copy to be memorable, so write with cognitive ease in mind – avoid the use of jargon and stick to phrases people can easily understand (and may realistically search for).

Using familiar language reduces cognitive strain, making your copy both more believable and more persuasive.

Recommended Further Reading

4 – Readability


There is no point creating highly memorable content if no one reads it in the first place, and you can further reduce cognitive strain by making your content easily digestible. Typically users will scan your content and pick out the parts which are most relevant to them, and you can help them identify these parts by making your copy more ‘scannable’.

Make sure your font type and size are legible, and that your line height is comfortable to read. Use white space to break up blocks of text with paragraphs and sub-heading, and pick out your most important phrases in bold or present them as a list of bullet points.

Recommended Further Reading

5 – Web Fonts

DesignContent Webfonts


Until relatively recently, web designers were restricted to a limited range of fonts to use as text on a website. More creative fonts had to be embedded in images (or flash), so any copy they represented was either uncrawlable or described using an alt tag.

Webfonts allow designers and developers to make use of much more creative fonts, whilst still utilising live, crawlable text. Typography is a subject in itself, and web designers have been using bold and creative fonts to attract user attention for years – webfonts just make the process SEO friendly.

You often have to pay a license for the use of webfonts from providers like,MyFonts, Typekit and Font Deck. There are some free services though like Google Fonts.

Recommended Further Reading

6 – Images


There is significant research to suggest that images are much more memorable than text, and many online shoppers will browse by looking at images alone. For product pages, use crisp, clear images and make your image space as large as possible. Also consider including a larger version or zoom function.

Make your default image your most relevant image (e.g. best selling colour option) and include lots of additional images to cover different colour options, products in/out of context and group shots. If you’re reseller, you can add unique value by doing your own photography or demonstrating a unique value proposition, which will set you apart from your competitors’ stock images.

Note: If you do not own the images outright, you must either obtain the rights to use the images or use images already licensed for commercial use (via Creative Commons or similar).

Recommended Further Reading

7 – Trust Signals

Trust Signals

In order for people to buy from you, they must first trust you. In addition to great design, content and UX, you can help build user trust through incorporating trust signals, such as customer testimonials. Most trust signals aim to convince the user that the website is run by real people, is large enough to handle their business, and is trusted by other like-minded users.

Other common trust signals include

  • User reviews – in particular, video reviews, as they are more difficult to fake
  • Live chat – reaffirms to the user that real people operate the site
  • Q & A – user questions that are answered by staff or other users, demonstrating that other users are interested/have purchased the product also
  • Local phone number (in addition to a non-geographic number)
  • Social media share counts (if significant) – social proof
  • Listing a physical address (and encouraging visitors)
  • Client lists/logos
  • SSL or credit card logos
  • Transparent Terms & Conditions pages
  • Industry association logos or accreditations
  • Social media accounts – their very existence implies that you are investing in your site

Recommended Further Reading

8 – Breadcrumbs

Breadcrumbs markup

Breadcrumbs are an important factor for website usability, as they confirm to the user where they are, often their browsing journey so far and it also allows users to quickly jump back to higher level categories – no matter which page they initially land on. Breadcrumbs are also useful for SEO as they enable search engines to determine your site structure more easily.

Utilising microdata markup allows the breadcrumb data to display within the SERPs – rather than an ugly URL, it simply displays your domain name and breadcrumb link. This is another nice trust signal that could help increase CTR.

Recommended Further Reading

9 – Video


Video can be used on product pages to communicate features and benefits often much more effectively than text or images, and many companies report a significant increase to conversion rates after embedding product videos. Video content also increases the richness of the page, improving user experience and acting as an additional trust signal.

Customer video reviews offer a neat way of combining user-generated video content with a very strong trust signal (particularly if they are showing off the product). Additionally, you can transcribe your videos very cheaply, using services likeSpeechpad, which provides unique, natural, highly relevant text content that you don’t need to create yourself.

By setting up your video hosting correctly and using the correct markup, video rich snippets can display in the SERPs, which statistically improves CTR and allows you to ‘steal’ clicks from better ranked websites.

Recommended Further Reading

10 – Footer

DesignContent Footer

As part of your site wide template, users expect to find certain information in your footer, such as company page links (E.g. About Us, Contact Us), links to ‘other’ pages (E.g. Blog), T & C links and social account links.

There is an argument that users who have scrolled all the way to the bottom of your page are highly engaged, so you can optimise your footer with additional CTAs, such as a newsletter sign up form.

You could also reward a users intrigue and make your pages more interesting with a unique, quirky or humorous footer design.

Recommended Further Reading

A call to action, or CTA, is typically a banner, button, or some type of graphic or text which is designed to trigger a user to interact with it and be taken down a conversion funnel. CTAs typically strive to convert a user into a lead or customer. The success of the CTA can be measured using conversion rates which are simply calculated by the number times the CTA was seen over the amount of interactions it received. Estimating the effectiveness of a CTA is normally done using A/B testing where two variants of the webpage are presented to a number of users and the version with the highest conversion rate becomes the winner, and subsequently the basis for the next test.

1 – Main Call to Action

call to action

Your main Call To Action (CTA) on your page is the one action you want users to take above all others, such as ‘Get Quote’, ‘Download’ or ‘Add to Basket’. Often this is repeated on many pages on your website (E.g. a quote request form on thousands of product pages) so a small change in its effectiveness can constitute a significant overall impact.

As such, this button represents your biggest opportunity to improve conversions through Conversion Rate Optimisation (CRO), which involves iteratively testing, measuring and improving elements of your site.

Although each individual website is different, there has been a significant amount of research done that can inform your page design from the outset:

Recommended Further Reading

2 – Social Sharing Buttons

social sharing buttons

Many types of online content is designed to be shared, with the hope of attracting potential customers, further shares and incoming links. Social sharing buttons remind the user to share, and make the sharing process as easy as possible. Setting your code up to pull through the company/author profile link can help you gain additional mentions and followers.

One of the main benefits of social share buttons is the ‘count’ feature, allowing you to take advantage of a psychological phenomenon known as ‘social proof’ – which affects a person’s behavior so that they conform to the actions of others. In this situation it could be summed up as ‘if it has lots of shares, it must be good.’ Importantly, the inverse is also true, so consider not using the count feature until you are actually getting shares.

Some would argue that social shares on product pages distract from the main CTA on the page (the conversion) and should be built into thank you or confirmation pages. The counter argument is that the act of sharing makes the user more invested in the product, and actually more likely to buy/convert.

Recommended Further Reading

3 – Secondary CTAs

secondary ctas

There are many situations when a user may not be in a ‘convertible’ position, as they are at an early stage of the buying funnel, such as the research stage. For example, B2B purchasing decisions are often made by committee, and as such it is not only the original user that you need to influence. Offering your information in a transferable format, such as a PDF, and allowing the user to download or email it, makes this process significantly easier.

Email sign up forms are another common secondary CTA, which are great as they tell you that the user is engaged and allow you to capture their email address for potential reconversion.

Although they won’t achieve a primary conversion, these secondary actions can help ensure your brand or product remains front of mind, and could assist a primary conversion further down the line.

Recommended Further Reading

4 – Cross-selling & Upselling

cross selling

Cross-selling is the act of selling complimentary products or services, in addition to the main sale. Amazon have led the way in the ecommerce space, using their overwhelming amount of customer data to create highly effective cross-selling CTAs.

Upselling is an attempt to persuade prospects to purchase products or services that secure a higher margin or value than the initial line of enquiry. This is often achieved by hooking the user initially on a ‘basic’ product, then also highlighting the comparative benefits of the ‘premium’ version.

Some examples of cross-selling and upselling include:

  • Good-better-best options
  • Recently viewed products
  • People who bought this also bought…
  • Frequently bought together
  • Additional service only £x extra
  • See others in this category/brand

Recommended Further Reading

If you hope to attract traffic from the search engines, optimising the on-site elements is crucial. Where design and content are about communicating meanings to users, SEO is about communicating with robots. On-site SEO is about organising your content so that search engines know where to find it and what it’s about, whilst maintaining a flow of authority across your site.

1 – Site Architecture


Site architecture can make or break your on-site SEO efforts, but fortunately, a good experience for users is very similar to best practice for Googlebot.

The terms you use for your navigation should reflect the language that your visitors use, which should in turn align with your keyword research. Similarly, your site should be organised into thematic ‘silos’ based on semantic relevancy.

Typically, you want to aim for a flat site structure that utilises silos and cross-silo contextual linking, with no more than 3 clicks to the deepest level of the structure. This ensures that link juice is passed down, up and across the site, whilst ensuring high indexation rates for even the deepest buried pages.

Recommended Further Reading

2 – URL Structure

URL Structure

Keyword-rich URLs are still considered to be a ranking factor, and although you should not keyword stuff, it does make sense to include your target keywords in your page URLs.

Whilst search engines can now crawl and index most dynamic URLs, they are very rarely user-friendly, and since most CMS platforms can handle URL rewrites very comfortably, it is considered good practice to employ URLs like this:


There are no significant SEO benefits to either, so it normally comes down to personal preference, although the latter can be more user-friendly in particularly large sites.

Most importantly, poor URL setup can cause serious syntax or duplication issues.

Recommended Further Reading

3 – Title Tag

Meta Title

Your Title Tag is very important for SEO, in terms of keyword relevance, CTR and uniqueness. Most CMS platforms can auto-generate your titles for your, based on database entries such as product names or attributes. Typical examples of this include:

Primary Keyword – Secondary Keyword – Brand
Primary Keyword – Brand – Secondary Keyword
Primary Keyword – Value Proposition – Brand
Primary Keyword – Unique Selling Point – Brand

Your Title Tag should be 70 characters or less, and each page title should be unique – at least for every page you wish to rank.

Recommended Further Reading

4 – Meta Description

Meta Descriptions

The META description is considered to have no impact on rankings, so it should mainly be considered in terms of CTR and social shares. The META description, which should be no more than 155 characters, is what display on the SERPs underneath the page title. It is also used as the default description copy for Facebook or Google+ shares.

Your META descriptions should compel your users to click, by using relevant, engaging copy, highlighting benefits and using active, imperative language. As per the META title, you should be able to configure your CMS to auto-generate unique descriptions for each page if you need to scale the process.

Recommended Further Reading

5 – Header Tags

Header Tags

Although H1 tags are thought to carry negligible SEO value these days, it makes sense to optimise your header tags as it is so straightforward to do. Use one H1 tag per page, to include your primary keyword, and use secondary keywords or synonyms in H2/H3/H4 tags.

Recommended Further Reading

6 – Contextual Links

Contextual linking should be considered part of your core internal linking structure, as they allow you to pass PageRank to deep pages and cross-silo. Contextual links should be semantically relevant and beneficial to the user, and can also be used to upsell or cross-sell products.

Recommended Further Reading

7 – Alt Tags

Alt Tags

Alt tags are used for basic image optimisation, and allow you to tell search engines what your image represents in crawlable text. Search engines don’t ‘know’ what an image represents, so we use alt tags (or attributes) to specify the ‘alternative’ text, which describes the image. Without alt tags, the search engines can’t assign a meaning or value to an image, so they remain an important aspect of on-site SEO.

Recommended Further Reading

8 – Video Hosting & Sitemap

video hosting

Using video on-site can have a significant CRO impact, and they can also be used to increase SERP click-throughs via the use of rich snippets. Video rich snippets show a small video thumbnail within the search result, which draws the searcher’s eye and encourages clicks. However, you can’t achieve video snippets simply by hosting your video on YouTube and embedding a player in your site.

Instead, you need to become the canonical source for the video – either by self-hosting your videos or using a third party solution like Wistia or Vimeo Pro. Hosting on YouTube or Vimeo Pro will simply allow their versions to outrank your page, or steal the video snippet. Support your video content with markup and by submitting a video sitemap, which tells the search engines all the information you want associated with your video, such as the video title, description and thumbnail image.

Recommended Further Reading

9 – Sitemap


XML sitemaps are used entirely to aid page indexation in search engines, and allow site owners to specify the URLs they would prefer to be indexed first. Simply put, an XML sitemap is a list of URLs in a machine-readable format, that convey additional information about a URL through the use of tags. A typical entry looks like:


Although the search engines will crawl and index your site even if you don’t have one, sitemaps allow you to tell them how and what you want them to crawl.

Recommended Further Reading

Marking up your data gives the search engines additional information to help them understand the meaning of your content. Using markup can enable you to achieve rich snippets in the SERPs, which in turn often lead to increased CTR. Once you’ve added markup to your page, you can test how Google would interpret it using their structured data testing tool.

1 – Authorship Markup

Authorship Markup

Authorship markup can be implemented on your site or blog by implementing the rel=author tag, and linking this to your Google+ profile.

Authorship markup is one of the most interesting developments in the last couple of years. Firstly, Authorship markup enables you to achieve an author rich snippet in the SERPs (a picture of the author’s face), which are demonstrably effective in increasing CTR. Secondly, they allow you to associate the author to the content, which could prove to be extremely significant further down the line if AuthorRank kicks in.

The purpose of Google+, in addition to being a social layer to their services, is to be Google’s identity program. Their verification system allows them to confidently assign certain content to certain authors, so that they can use external signals such as links, shares and +1s to build up a profile for each author. Ultimately, this would allow them to assign each user an authority level (or rank) for a given topic. Authoritative users could then potentially impact organic search results through their content, links and shares.

Recommended Further Reading

2 –

Schema is an initiative jointly launched by the search engines to support a common set of schemas, providing a framework for structured markup on the web. These schemas can be used in conjunction with Microdata to describe data points on your website, giving the search engines a better understanding of what your content is and how it fits together.

Using such markup can have significant benefits both now and in the future (ultimately, structured data helps inform the development of the semantic web). For example, it allows you to identify a product, and then a set of reviews associated with that product, with a rating for each review and an average rating of all the reviews. This information can then be displayed in the SERPs as a product review rich snippet:

rich snippet

Similarly, your video content can be marked up to produce video rich snippets:

video rich snippet

For most content pages, there is something you can mark up that could give you a rich snippet. You can mark up movies to include director and actor details, recipes to include nutritional information, authors to include job titles and events to include location details. Utilising markup can transform your SERPs listing and offer you a significant competitive advantage.

Recommended Further Reading

3 – Breadcrumbs (markup)

breadcrumb markup

The search engines recognise that breadcrumb navigation is beneficial to the user, and support it with breadcrumb snippets in the SERPs. Not only does this look cleaner, but it enables you to present additional (clickable) links to other pages on your website.


For this example, in addition to the actual search result, Tripadvisor have got two additional clickable links that a user could select. To implement breadcrumb markup you can use the vocabulary, or simply try Patrick Sexton’s easy-to-use generator below.

Recommended Further Reading

4 – Rel=canonical


Accepted SEO best practice is to simply avoid duplicate content, however in some circumstances duplications do come about, such as content that can be categorised in several different ways. In such instances, rel=canonical is used to differentiate between the duplicates, by assigning one version of the page as the authority version.

From a set of duplicate pages, you must determine which one you prefer to be considered the canonical version of the page, and by using the rel=canonical tag you make this preference known to Google, so that they may only index and serve the canonical version of the page.

The markup is very straightforward, you simply add a <link> element in the <head> section of all non-canonical pages. So on a non-canonical page such as, you would reference the canonical version of the page like this:

<link rel="canonical" href=""/>

CMS platforms can often cause duplication issues by creating many category pages with near-identical content, however most modern systems will allow you to specify canonical URLs directly in the back-end.

Recommended Further Reading

5 – Open Graph Protocol

Open Graph Protocol

Whilst not affecting SEO as such, the Open Graph Protocol (a Facebook initiative originally) allows you to control how your content is displayed when it is shared.

Just as you can use META tags to tell the search engines which Title and Description you want them to use, you can use Open Graph tags to inform Facebook, Google+ and Twitter how you wish your content to be presented when shared. They allow you to specify things like the title, description and image (a custom thumbnail, for instance). You can also include personal information such as your locality, your contact details or the Page that corresponds to the website.

twitter cards

Twitter Cards allow you to enhance the expanded tweets that Twitter creates for your site when someone shares a page. Twitter Cards are basically a set of meta-tags that specify your sharing data, but a lot of the tags fall back on Open Graph data anyway.

Recommended Further Reading

Clean, well optimised code is not just important for your users but it’s also a ranking factor in Google. Fast load times improve user experience and therefore Google care about it. If your site is quick, light and responsive, you will be making both your users and the search engines happy. There’s lots of ways you can increase your site speed, most of which can be handled for you by modules and plugins, and it’s very easy to test and measure the results.

1 – Load Times

page speed load times

Site speed has been a ranking factor in Google since September 2010.

There are numerous tools you can use to measure the speed of the pages on your site including Web Page Test and Google also have their own PageSpeed tool which you can run online or install as a Chrome or Firefox plugin.

It can be an involved process depending on your technical expertise and the amount of control you have over your website but there’s some quick wins that most webmasters can achieve.

For example, if you’re on an Apache server, you can apply Google’s ‘modpagespeed’ module which “speeds up your site and reduces page load time” and “automatically applies web performance best practices to pages, and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow”.

You can cut down on wait times & latency by avoiding server redirects, and delivering assets to your site through a Content Delivery Network (CDN). There are many CDN providers around such as Max CDN, Akamai and Amazon CloudFront. Cloudflare also has a free option –

Minifying (removing unnecessary white space and formatting) HTML and CSS files is also standard practice and if you run a WordPress site you’ll find plugins like W3 Total Cache which will manage the whole process for you.

Other best practice includes optimising images (see below), turning on any server-side caching your platform offers, implementing client side caching and using server side compression if possible.

You should also get your developers to look for bottlenecks in database queries if you’re on an e-commerce platform as they are very common

Recommended Further Reading

2 – Image Compression

Image Compression

As mentioned above, you can improve page load time by optimising your images.

It’s important to ensure that your imagery looks as good as it can to maintain the quality of your site, whilst keeping the images at as low a file size as possible to reduce load times and maximise the user experience.

Here you should be considering how many images you are serving, the size (both visual size and file size), whether you could be utilising sprites, if the images are being scaled on the fly, if they’ve all been compressed properly and contain only the essential metadata.

Recommended Further Reading

3 – Responsive Design

Responsive Web Design

Responsive design allows you to automatically adapt the structure of your content depending on the size of the screen that it is being viewed on.

This allows people who are using all sorts of devices from iPhones to giant PC monitors to view the same content in a method that is appropriate for their device. Large screens can be shown additional content, such as more products on the page, whilst smaller screens can be shown reduced, ‘essential’ content.

Responsive design negates the need for a specific mobile version of a website by using “media queries” to target styles to certain screen sizes.

Also consider using mobile first design to improve your experience for mobile users.

Making your site responsive, rather than creating a second mobile version of the site, is what Google recommends.

Recommended Further Reading

4 – HTML5

html5 css3

HyperText Markup Language (HTML) is the main markup language used for creating webpages, and HTML5 is simply the fifth (and latest) revision of the HTML standard. As with structured data markup such as, many elements have been introduced in HTML5 to enrich the semantic content of documents. HTML5 is also good for mobile.

From an SEO perspective, HTML5 offers a favourable alternative to the likes of Flash, with features to allow videos, animation and interactivity to be rendered within the page. Importantly, HTML5 offers full CSS3 support.

Note: Although all the major browsers do support features of HTML5, none of them yet offer full support and it is not yet the official standard. When implementing elements in HTML5, cross-browser testing is essential.

Recommended Further Reading

5 – CSS3


CSS is what controls how your website looks. With CSS3 the number of options that web designers have at their call has expanded massively.

CSS3 has brought the much needed abilities to do simple things such as rounded corners, gradients and drop shadows without the need for overly complicated hacks or hundreds of different images.

As well as the simple things CSS3 also includes advanced new layout methods such as columns and flexbox as well as native animations, transitions and transforms.

All of these new features combine to allow for far more advanced styling than was previously available while actually improving performance over older methods.

Recommended Further Reading