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.
Meta
Title
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.
Description
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.
Canonical
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.
HTML Lang
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.
Favicon
A small detail, but the favicon appears next to the title in your browser tab and bookmarks. Another good opportunity for visual recognition.
Search engine crawlers
Sitemap
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
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.
Security
Https
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
Friendly
URLs help people understand the content of a page and it’s important to be clear and descriptive. Compare these examples:
- website.com/?p=4096
- website.com/projects/an-example
The latter is preferable as it’s human-readable and gives you a quick insight into what is likely to be on that page.
Standardise
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
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.
HTML structure
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.
Alt text for images
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.
Colour contrast
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.
Skip to content
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.
Focus states
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.
ARIA attributes
ARIA (Accessible Rich Internet Applications) attributes supplement native HTML elements to make web applications - particularly those built using Javascript - more accessible to users with disabilities.
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 Design
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.
Typography
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.
Sensible limits
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.
Markup
Structure
Make use of semantic HTML markup (e.g. <nav> for navigation). Use <header>, <main>, <section>, <footer>, <button> tags etc. where appropriate rather than endless <div>’s. This will help with accessibility and search engine optimisation.
Headings
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.
Images
Widths and heights
Ensure that all images have widths and heights set to avoid layout shifts in the page as elements are loaded.
Optimise
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.
Content Delivery Network
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.
Lazy loading
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.
Social sharing
Opengraph
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.
Performance
Core Web Vitals
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.
Navigation
Simplify
Be sure to simplify your main navigation to the core pages of your site. If you have other pages like a Frequently Asked Questions (FAQs) or Privacy Policy these can be placed in the footer of your site. Try to avoid drop-down menus if at all possible, but if you do require them make sure they’re clearly designed and easily usable, including with keyboard-navigation.
Mobile
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
Simple design
Forms should be designed with a clear and simple layout using easily-readable fonts.
Labels
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.
Mobile-friendly
Forms should be optimised for mobile devices and responsive to all screen sizes and orientations.
Error handling
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.
Accessibility
Every form should be designed with accessibility in mind, using clear and descriptive labels, proper use of HTML elements, and keyboard-friendly navigation.
Progressive enhancement
Forms should degrade gracefully and continue to function even if JavaScript is disabled.
Data protection
Ensure the secure transmission of sensitive information, using SSL encryption and other security measures as necessary.
User feedback
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.
Short and to the point
Only request the essential information needed, and avoid asking for unnecessary information that might deter users from completing the form.
Hero section
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.
Headline
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.
Subheading
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.
Call to action
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.
Background image or video
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.