A well-designed and optimised website is the cornerstone of a successful online presence. From improving search engine rankings to providing a user-friendly experience, it's essential to ensure that your website meets a certain standard of quality. The Essential Website Audit Checklist provides a comprehensive overview of the key elements every website should have, including vital metadata, accessibility considerations, SEO optimisations, and best practices for overall structure and usability. This guide will help ensure that your website is up to par and ready to engage and convert visitors.
Ensure all pages have appropriate titles as they are an important factor helping both visitors and search engines understand what the page is about.
Make sure to limit your titles to no more than 65 characters as anything longer will be truncated by search engines.
A description meta tag will show below the title when your page is listed in search engine results pages (SERPs). It should be a brief summary of the content providing context to potential visitors, influencing whether they decide to click through to the page.
The description should be limited to no more than 155 characters as due to limited space a search engine will truncate anything longer.
An accurate canonical URL tells search engines which is the definitive page if there are duplicates. Pages can easily be duplicated as they are case-sensitive and a page with a trailing slash counts as a different page to one without.
Let search engines know what language your site is in by declaring a language code as an attribute on your html tag. For instance
<html lang=”en”> would be for English. You can find the specific codes you need as they are standardised and known as an ISO 639-1 classification. You can get more specific as
<en-GB> would be British English.
A small detail, but the favicon appears next to the title in your browser tab and bookmarks. Another good opportunity for visual recognition.
A sitemap.xml file gives a structured blueprint of your entire site for search engine web crawlers to ensure everything is found. They’re not required, especially if all your pages are linked internally. However it can help your SEO to include one, particularly as you can indicate each page’s priority, probable change frequency, last modification date and other fields.
Robots.txt is a file that can be used to indicate to search engine web crawlers which parts of your website you’d like to be indexed in their results or ignored. It’s important to remember it’s only counted as a suggestion and shouldn’t be used as the only method to hide pages that you don’t want visible to the public.
Ensure your site is encrypted and secure with an SSL/TLS certificate. It is important for protecting the security and privacy of user data, establishing trust and credibility with users, and helping to ensure that users are communicating with the intended website. Web browsers will warn visitors if your site doesn’t use encryption, and search engines favour sites that are secure.
URLs help people understand the content of a page and it’s important to be clear and descriptive. Compare these examples:
The latter is preferable as it’s human-readable and gives you a quick insight into what is likely to be on that page.
When choosing a URL structure, ensure it is consistent throughout your site. Also make sure you choose whether your URLs will have trailing slashes or not and don’t mix and match.
Accessibility refers to the practice of designing and developing websites in a way that makes them usable to people with visual, auditory, motor, and cognitive disabilities, ensuring everyone can access and use the content and functionality of your site.
A good semantic HTML structure is the foundation for accessibility because it provides context and meaning to the content of a webpage. Screen readers and other assistive technologies use this structure to convey the purpose of the content to visually impaired users, helping them to understand and interact with the page more effectively. Using semantic elements, such as headings, lists, and links, instead of generic elements, such as divs and spans, allows assistive technologies to provide a more meaningful experience for users with disabilities, leading to a more inclusive web experience for all users.
All images should have an alt attribute with text describing what it contains and is a vital must-have on your site. Screen reader software will read out this text for those with visual impairments and other accessibility needs.
All colour contrasts between elements should meet minimum standards to ensure that those with visual impairments can easily perceive and read elements on a page.
A hidden skip to content button that’s only visible to those keyboard-navigating through your site can help people using screen readers. When selected this will scroll the page down to the start of the main content on that page.
Keep your focus states visible. Many sites hide the default focus state as they deem it to be unsightly, but it’s very important to keep it so users who need to keyboard-navigate through your site are able to see what they are currently focused on. You can style it to look better but be careful that it is clearly visible and has enough contrast with the colour scheme across your entire site.
Also remember to include focus states in your CSS that mirror hover states for interactive elements like buttons.
For example, if you have multiple navigation elements on a page (e.g. a main
<nav> in the header and a different footer
<nav>), a different aria-label attribute for each can help differentiate them for screen reader users.
However, the use of aria attributes should be considered very carefully as many semantic HTML elements have built-in accessible functionality if they are used in the appropriate context. "No ARIA is better than bad ARIA" as misuse can cause more problems than it solves.
Responsive web design is an approach that allows a website to adapt its layout and content to the screen size, resolution, and orientation of the device being used to view it. The goal is to create a single website that provides an optimised experience for users on desktop computers, laptops, tablets, and smartphones.
The web is a fluid medium and luckily there are lots of strategies you can employ with a bit of forethought and previous experience to ensure the best possible result.
Modern CSS allows you to set up a website with fluid typography, adapting the size of your text based on the viewport size of your visitor to help aid readability across devices.
Particularly for large screen sizes it can be hugely beneficial to limit the maximum widths of certain elements. For instance, I like to limit the max-width of paragraphs to 65 characters which will improve the readability of text since it will not result in ridiculous lines that span the full size of a large screen.
The line height of text is another make-or-break factor in text legibility with a little extra space between the lines usually allowing better readability. It depends on your font choice, but paragraphs usually benefit from a line-height setting around the 1.3 to 1.5 range. Conversely, with large font size headings, it’s often best to reduce the line-height to something like 1.1 for a better looking design.
Make use of semantic HTML markup (e.g.
<nav> for navigation). Use
<button> tags etc. where appropriate rather than endless
<div>’s. This will help with accessibility and search engine optimisation.
Each page should only have one main heading, otherwise known as a h1. The rest of your content on the page should be grouped for easy readability and semantic structure using the hierarchy of sub-headings, starting from h2 down to h6.
Ensure that all images have widths and heights set to avoid layout shifts in the page as elements are loaded.
Optimise image file sizes before using them on your site, and use the appropriate file type, with for example JPG being good for photos and SVG being great for icons and graphics.
Serve images at the appropriate width and height to avoid discrepancies between their original dimensions and how they appear on the page, reducing bandwidth waste. This can be achieved dynamically - depending on what technology your site is built on - in conjunction with serving images in an optimised format such as WebP.
Using a Content Delivery Network (CDN) for images is beneficial as it reduces the load time of images by serving them from multiple geographically dispersed servers. This reduces the distance that the data has to travel, leading to faster load times.
Add the lazy loading attribute to images that you know will be “below the fold”, or in other words, images that you know users will have to scroll to see. The browser will defer loading them until they are needed, helping with the initial page load time.
OpenGraph is a set of meta tags that provide information about a website's content to social media platforms, improving how the page appears when shared and increasing visibility and credibility.
Core Web Vitals are a set of performance metrics defined by Google that measure the loading speed, interactivity, and visual stability of a website. These metrics are crucial to an effective website as they directly impact the user experience. Poor performance on Core Web Vitals can lead to higher bounce rates, lower conversion rates, and a negative impact on search engine rankings. By monitoring and improving these metrics, website owners can ensure that their website delivers a better overall user experience.
Users can measure Core Web Vitals using various tools provided by Google, such as PageSpeed Insights and Lighthouse, which analyses a website and provides a detailed report, along with suggestions for improvement.
Your main navigation should collapse down into a mobile-friendly navigation menu on smaller screen sizes. This is essential for providing a better user experience, improving accessibility, enhancing SEO, and increasing user engagement.
Forms should be designed with a clear and simple layout using easily-readable fonts.
Every form input should have a corresponding label that is clear and accurately reflects what information is requested. If a user clicks on a label it should shift focus to the input so that a user can start typing or interacting with it.
Forms should be optimised for mobile devices and responsive to all screen sizes and orientations.
If there are problems, forms should provide clear error messages for any validation errors and should highlight the incorrect fields to help users correct them.
Every form should be designed with accessibility in mind, using clear and descriptive labels, proper use of HTML elements, and keyboard-friendly navigation.
Ensure the secure transmission of sensitive information, using SSL encryption and other security measures as necessary.
Provide users with feedback on their progress, particularly on multi-stage forms using elements such as progress bars or status messages, to let them know what's happening during the submission process.
Only request the essential information needed, and avoid asking for unnecessary information that might deter users from completing the form.
A hero section is a prominent area at the top of a web page (usually the homepage) that serves as the main focal point for users when they arrive on a website. It is often the first impression that a user has, so it is important to design it in a way that is engaging and effectively communicates the key messages of the site.
The main heading should be concise and clearly communicate the purpose of the website in an attention grabbing way. What does your business or organisation offer and what can it do for the visitor? It is the first thing that anyone will see and establishes the tone and direction you wish to convey.
A subheading can expand on what services, products or mission your company or organisation offers. Like the main headline, the best strategy is often to show what you can do for your visitors and potentially how you can transform some aspect of their lives.
There should be a singular call to action button in the hero section. Something that grabs their attention and gives a visitor a next step. Most websites would benefit from pitching this call to action in a specific way and from the perspective of the visitor. So for example, rather than a generic button that says ‘Find out more’, try something like ‘Book my free consultation’ (if that’s relevant). That’s a clear next action for a potential client to take and offers a low-risk incentive.
The use of background images or video in the hero can be incredibly effective at delivering your initial message. Be careful to select high-quality photos or videos and ensure any text is readable and conforms to accessibility standards. One way to do this is by using a linear gradient that goes from a solid colour to transparent, providing a solid background for text to be positioned upon.