A roadmap to a usable business website
If only there was a definitive roadmap or checklist that covered every single thing your website should contain, nice thought right! While that would be great its obviously an unrealistic wish, as not all websites are created the same way, with the same functionality and purpose. So what would be needed for one may not be for another.
That said, there are still quite a few common elements we can tell you to check for and include, which are key to having a great functioning website that will help make it accessible to both users and search engines. While not all of these will effect a change to your Lighthouse score, they are all items that Lighthouse tests for. Plus they have a huge positive impact on the functionality and searchability of your web pages/website.
Canconical link
Canconical links are used to help search engines to identify and prioritise which is the preferred or original version of a webpage when you have:
Duplicate Content: multiple URLs display the same or similar content.
Content Syndication: your content is published on other websites, use a canonical tag to point to the original source.
Dynamic URLs: pages with tracking parameters or session IDs.
By adding canonical tags within the head of your webpage, will ensure better SEO performance and avoids potential penalties from having duplicate content.
<head>
<link rel="canconical" href="https://www.example.com/preferred-page-url/">
</head>
Robots.txt
A robots.txt is a text file added to your website that provides instructions to web crawlers commonly referred to as bots and also LLM's (Large Language Models - AI). Its primarily used to manage crawler traffic on your website and prevent overloading your server with requests. It does this by controlling the crawler traffic's access to your websites folders/files. It can also help prevent search engines from indexing specific pages or files. Or highlight the locations of them such as sitemap.xml.
Sitemap.xml
An XML sitemap is a file that lists all of your websites URLs. Its like a roadmap for search engines making it easier for them to discover, crawl and index your pages, ensuring no important pages are missed when they crawl your site. XML sitemaps are essential for improved search engine visibility and ranking so need to be properly created, submitted and maintained.
Meta title & description
Meta title and meta description are key html tags that must be added within the <head> section of each HTML page.
Meta Title - also know as the title tag is the clickable link that appears to users on a search engine results pages (SERPs), browser tabs and social media previews. It tells both search engines and users what the page is about so needs to be a clear and concise summary of what the page is about, its length should be between 35 - 60 characters, though too short and search engine bots may not see it as relevant, longer than 60 characters will get cut off with the chance of relevant content not being seen.
Meta Description - is a further descriptive summary of what the page is about, that appears below the meta title on search results and should help to draw users to click through to your page. It should be ideally between 120 - 160 characters in length.
They each play a vital role in the SEO and digital marketing of a page, but should always be written with users in mind first, be short enough to be visible but long enough to be informative with relevant content.
Headings order
HTML heading tags are used to define the structure and hierarchy of your webpage content. Heading tags range from <h1> most important, down to <h6> least importance, this hierarchy gives semantic meaning to your webpage content that helps users and search engines to understand how a page is organised and the importance of the content within a page. They also help with:
Accessibility - screen readers rely on them to help users navigate content.
Readability - Clear, concise headings allow visual readers to to scan and digest content easier.
SEO - search engines use headings to help understand page structure and relevance of content.
There are also some best practice rules for heading tags that you should follow:
<h1> - only use one main title per page.
logical hierarchy - you can use multiples of other heading tags within a page, but you can't miss a level out (e.g. you can't have a <h1> and then multiple <h3> on a page with no <h2>)
Include keywords naturally in headings, use words relevant to the content.
They help give semantic as well as visual meaning to a page by adding structure and hierarchy to your content.Discernible names
A discernible name (or label) is one that is both accessible and understandable to all your website users, especially those that rely on assistive technologies such as screen readers.
This concept should be applied to interactive elements such as links and buttons to clearly describe their purpose or destination. So instead of having a link that says "Click Here" or "learn More" you could write "Use our contact form" or "Read about discernible links". A well written link name can help users to understand the purpose of the link and also navigate your website easier, making it more accessible and usable to all.
image alt & size tags
HTML alt and size attributes are a essential part to any image element, as they help with its accessibility, performance and SEO.
Alt attributes - alt (short for alternative text) tag provides an image with a alternative text description to the visual image. This descriptive but concise text is then used by screen readers to describe the image to visually impaired users, search engines use it to help understand the content of the image, and when an image fails to load it provides visual users with a description of what should be there.
Size attributes - width="" and height="" tags are used to define the dimensions of an image in pixels before it loads in the browser. This helps browsers to allocate enough space for the image to load and fit properly within your design layout, which will also help to reduce any page Core layout shifts (CLS), plus improve your page speed score by preventing re-rendering and improving loading times.
Picture elements & fallback
A <picture> element allows you to specify multiple sources for an image, this is so you can serve different images to users based on screen size, resolution and device, or to provide image format fallback if a your preferred format isn't available to your user.
So if your website uses the <picture> element to provide image format fallback, how do you know if the fallback image source is working correctly if your browser provides you with the preferred format choice?
Testing picture elements
Luckily within Edge & Chrome browser DevTools there's a way to test this, as they allow you to temporarily disable the more modern formats such as Webp and AVIF. This then enables you to then manually check that your other image's work correctly, such as does the fallback image appear this might be as simple as a mistyped file source. You can also retest your webpage with lighthouse as it will audit the image that is being served.
To disable a file format you first need to open your browser devtools.
Then open the Command Palette by typing Ctrl + Shift + P
Now in the input window start to type (you may not need to finish the word) disable and then choose from the select box options that appear e.g Disable AVIF format.
After disabling you must refresh ↻ the page.
You will now have successfully removed your selected image format from working in your browser and can start to test the fallback image source.
To see what image is being served go to the Network tab of the devtools, under "Name" you will see a file list (if you can't see this column refresh your browser window).
In the next column you can see the status of the served image file 200 = okay, 404 = error (can't be found).
After testing you will need to re-enable the file format(s) you have disabled, to do this open the Command Palette again, but this time type enable select the option you want then refresh ↻ the page.
Next PageNext steps to a better website »
Further Resources
JWS Sprout of Wisdom tip - Business owners website Checklist.
JWS Sprout of Wisdom tip - Sitemaps for your users and for search engines
JWS Docs - Core Styling - headings
JasmineDesign's - ImgFunction Working With images.