How to analyze a website?

For an accessible and easy-to-use website.

Accessibility is not only important when it comes to wheelchair ramps and toilet facilities. It is also important on the web that websites can be designed to be barrier-free.

This does not only apply to people with permanent disabilities (e.g. blindness, spasticity, visual impairments), but also to people with temporary disabilities such as plaster hands, bandaged fingers, blindfolded eyes, eye inflammation and cognitive impairments. Such groups of people with disabilities must be taken into account when implementing websites in different areas. Everyone should be able to use the website and all content should be accessible (as easily as possible). 

A detailed description can be found in the Content Accessibility Guidelines from the W3C. We have summarized the most important points here:

Semantic structure of the entire site

The website should be clearly and logically structured. This includes the sensible use of headings (H1 - H6) and the highlighting of specific content such as paragraphs, quotes and lists. Care should also be taken to ensure that the content in the HTML is in a logical order and is not placed in the correct position using CSS.

This point is particularly important for people who view the website via screen reader. However, a semantic structure of a website is also useful for SEO.

Design of the navigation

Navigations should be designed in such a way that the important elements are easy to use on all devices (desktop, smartphone, tablet).For example, navigation that appears on mouseover and you have to skillfully navigate to navigation points so that they do not disappear is not barrier-free.Navigation should also be operable using the keyboard, i.e. you should only be able to open and close the navigation and visit links by using the keyboard.

Operating the website with the keyboard

A mouse should not necessarily be required to view a website. It should be possible to navigate through the website and operate the menu using the keyboard (Tab, arrow keys, Enter). People with motor impairments are sometimes unable to use a mouse, but are able to operate individual keyboard keys.

Optimization for all devices

The website should work on different devices and screen resolutions. Mobile optimization is very important here so that the website can also be used by mobile users.

Optimization for dark mode and light mode

More and more people are using dark mode on their end devices (smartphone, tablet, notebook, desktop computer). You should make sure that the website also works in dark mode. You can store your own stylesheets for dark mode.

Contrast foreground and background

The font on the website should always be easy to read. Regardless of whether it is continuous text or a font on a button, the font should always stand out sufficiently from the background so that it is easy to read. Furthermore, people with a visual impairment, such as red-green vision loss, should be taken into consideration.

You can have your website checked for the right contrast on the following website: https://color.a11y.com/

Legible font

Care should be taken to use a legible font. A decorative or ornate font can be used for headings or certain areas, but a font that is as legible as possible should be used for the body text.

Legible font size

All clickable areas on the website (links, buttons, images, navigation elements) should be large enough to be easy to use on a smartphone. People with large hands and thicker fingers often find it difficult to click on links that are very small or have a small click area and are close to other links. The wrong links are then often clicked. Such input errors are also known as fat finger syndrome.

Good labeling of links

Links should be clearly recognizable as such and be visually distinct from the body text. For example, you can underline links or insert a small icon after the link to make it stand out from the other text. The link text should be meaningful, i.e. instead of a link text such as “Click here”, speaking text such as “Download info PDF” or “Read more about article XY” should be used.

Enlargement should be possible

The website should be able to be enlarged and reduced without any problems. This means on the one hand on the desktop with e.g. Ctrl+ and Ctrl- in the browser, on the other hand on the smartphone with Zoom. This helps people when text is too small to read or when they want to view images in more detail.

Labeling of images, buttons and forms

Blind people cannot see images, buttons and forms on the website. It is therefore all the more important that images have alt texts and that buttons and forms have sufficient labeling.

In the case of forms, care should also be taken to ensure that the labels on the form fields remain permanently visible and do not disappear as soon as the form field is clicked on or filled in. If the labels disappear when the form fields are filled in, it is no longer possible to carry out a final check - whether the value that should be in each field is actually there and whether the telephone number and address have not been mixed up.

Subtitles for videos

People with hearing impairments cannot hear the sound in videos, which is why videos should be subtitled if possible. People are not only hearing-impaired if they are deaf or hard of hearing, but also if they are on public transport, for example, and have deactivated the sound on their smartphone.

Avoid autostart of videos

If videos are integrated into the website, it should be avoided that they start automatically. If an autostart is a must, you should ensure that there is an option to stop the video. In some browsers and on some devices, the autostart function only works if the video is muted and does not emit any sound, which is a very sensible implementation.

Use animations with caution

Fast animations or flashing content can be a problem for people with epilepsy and in the worst case can lead to a seizure and should therefore be avoided as far as possible.

Tools

• Contrast checker: https://color.a11y.com/
• Website checker: https://wave.webaim.org/ 
• Website checker: https://pagespeed.web.dev/

So that users can find all the important content on the website.

The website should be roughly reviewed to ensure that the content is up-to-date, looks good and is clearly presented. Of course, you can also go into great depth here, which can be a lot of work depending on the size of the website.

The website content should always contain all the information you want to communicate to users. It is better to have less but high-quality content than too much content and a lot of gobbledygook. 

Furthermore, the content should be well structured and not consist of a sausage of SEO text. It may not matter to machines whether the text is in a sausage or not, but it does make a difference to the users of the website.

The content check should also check whether there are valid licenses for the images used and whether these have expired or images are used for which there was never a license. The same naturally applies to videos, texts and fonts.

Even if it is now often forgotten:
Website content should still be for readers and not for search engines.

Easy-to-read text is characterized by the following things:

• Comprehensible text, that is relevant and informative
• The text should be unique - never copy text from other media
• Suitable font size for desktop and mobile - headings and body text should be easy to read on all devices without having to zoom in
• Use subheadings
• Include bulleted lists instead of comma-separated text in a paragraph
• Don't make paragraphs too long
• Highlight and bold individual important words
• Use different content elements such as quotes or info boxes Insert images to break up the text boxes
• Include images to break up the text
• For long articles, insert a table of contents with a link to the individual points at the beginning
• Use the most important keywords sensibly - not too often and not too little. It should still be easy to read for the reader, the search engines should be able to read which words are important
• No spelling mistakes and correct grammar - it is best to run the text through a spell checker again before it goes online
• Internal links to other pages of the website or blog posts should be of great value to the search engines - but only where it makes sense and do not link every second word in the sentence, otherwise it can become confusing.

So that search engines display your website as high up as possible for the relevant search terms

Basically, SEO is divided into on-page SEO and off-page SEO. As this article is about website analysis, we will mainly focus on on-page SEO, i.e. search engine optimization, which can be carried out directly on the website through various optimizations.

Various tools can be used to subject the website to an SEO check, which simplify the analysis and provide a comprehensive overview.

robots.txt

Is there a robots.txt file in your root directory? The file gives bots that index your site instructions on what they should do. For example, which pages should be indexed or which pages should be excluded.

For a WordPress website, this could look like this, for example:

User-agent: *
Disallow: /wp-admin/
Disallow: /private/
Allow: /
Sitemap: www.my-website.com/sitemap.xml

sitemap.xml

The sitemap.xml is a list of all the pages on your website that you want to be indexed by a search engine. The structure is in an XML format. The file is usually created automatically by SEO plugins and can usually be accessed directly under /sitemap.xml, e.g. at www.my-website.com/sitemap.xml.

It is still important to store the sitemap in the Google Search Console and enter it in robots.txt. Especially if your sitemap has a name that differs from the standard sitemap.xml.

In TYPO3, for example, this is the case if the URL differs because the sitemap is set up with a page type that can be called up like this: www.syssy.net.
One solution here is to set up a route that points to the respective URL at sitemap.xml.

Google Search Console

One of the most important tools in SEO is the Google Search Console (GSC). If you have not yet connected your project to the GSC, you should do this first. The Google Search Console provides an overview of the pages of your website indexed by Google and shows problems with pages, if there are any.

You can also see which keywords you are represented with in Google Search and how many hits have been made via Google Search. The Google Search Console is therefore also an important tool for keyword analysis.

The tool is free and easy to use.

Bing Webmaster Tools

The same applies to Bing Webmaster Tools as to the Search Console. Even if there are probably fewer hits from here than from Google, the search engine should not be neglected, as search engines such as Ecosia 1 and DuckDuckGo 2 pull the search results from the Microsoft search engine Bing.

Use of an SEO tool

To get a complete overview, you should have your website analyzed by an SEO tool. Tools such as XOVI, Sistrix, Ahrefs or Screaming Frog analyze complete pages including subpages and list all problems that exist from an SEO perspective.

The following things are checked in such an analysis:

• Whether the page can be indexed at all
• Dead links are found, i.e. linked pages that no longer exist or cannot be accessed
• Pages that have no H1 or several H1 headings
• Pages with missing meta descriptions
• Pages with too little text
• Duplicates in the page titles
• Duplicates in the meta descriptions
• Files that are too large
• and much more ...

Google and bing the website

The website should also be googled or binged manually. There are some website hacks that only work if you come directly from the search engine, i.e. you click on the search result and are redirected to a completely foreign spam page. Some hacks also ensure that the search engines index the wrong content (links to dubious pages, dubious texts on certain topics).

You can also display all indexed pages on Google by entering the command “site:mydomain.com” in the Google search field. For example, entering “site:www.syssy.net” in the Google search field will list all pages of the SYSSY website that Google has in its index. This call gives you a rough overview of all indexed pages and which page titles and meta descriptions you are using. If no result is returned, you should first check the page to see whether the "robots" meta tag is set to "noindex" or whether crawling of the website is blocked by robots.txt.

If your website is still brand new, Google may not have indexed it yet. In this case, you can connect the page to the Google Search Console and initiate manual indexing there.

So that you know which keywords to include in your website.

The aim of keyword analysis is to find out which keywords can actually be used to find the website on search engines and how well the website can actually be found with the desired keywords.

Various tools can be used to find out the right data for the keyword analysis:

Google Search Console & Bing Webmaster Tools

In the Google Search Console, you can see which keywords have received clicks from Google and how many impressions a keyword has generated. Similar to the Google Search Console, the ranking keywords and their impressions and clicks are also visible in Bing Webmaster Tools.

For data to be visible here, the analysis tools must already be connected to the website. You can only see the data from the day of verification and cannot look into the past. This is a shame, but you have to accept it.

It is therefore best to connect the tools to Google Search Console and Bing Webmaster Tools immediately after the website goes live so that you have the data to hand later when you need it.

SEO tools

Using various tools such as XOVI, Sistrix, Ahrefs or Screaming Frog, you can start keyword analyses and see exactly which keywords you are currently ranking with. There is also the option of comparing competitors, which is a very exciting story. Furthermore, you can view the data years into the past without verification, which is very helpful and allows you to track the entire development of a website.

Googling and binging

To see for which or whether you rank for the most important keywords, it is worth using the search engine and searching for the keywords. You should use a “virgin” browser for such searches, which you do not normally use, so that you are not logged in to Google or Microsoft and have set as few cookies as possible so that the search results are not distorted. Alternatively, you can also use “Private mode”. Of course, the search results also vary according to location, which should also be taken into account.

If you enter the search terms in the search engine, you will quickly get an overview of the competition and paid ads. You should create a table for the most important search terms and note which competitor websites rank for the desired keyword and who places ads for it. You can then use SEO tools to find out the CPC (cost per click) and consider whether it makes sense to place ads as well.

So that you have an overview of hits and can see how often your site is visited and which individual pages are interesting.

If tracking such as Google Analytics or Matomo is already active on the website, you can use the tracking software to evaluate website traffic. If there is no tracking, you should consider integrating one. Without tracking, you really have no idea what is happening on your website.

We are fans of Matomo because it is an open source product and easy to integrate - via a WordPress plugin or directly via your own installation on the server, which is really quick and easy to set up. If you already have a web space where you can set up a database and subdomain, you can have Matomo up and running within 30 minutes. You can run it under your own subdomain, e.g. analytics.mywebsite.com. Matomo can also be operated without cookies, which makes it GDPR-compliant and does not require a cookie banner.

If you do not want to integrate a tracking script at all or have not yet had one, you still have the option of hoping for server-side tracking provided by the hoster. Many hosting products have awstats running in the background, which is a software for analyzing log files. You can also read out some things here, although not nearly as detailed as with a tracking tool.

Important questions that should be answered in this analysis:

How do users come to these pages?

• Do they come via a search engine (which one?) or from social media platforms?
• Is the site well linked externally and do the website visitors perhaps come via other websites?

Which subpages are visited the most?

• Are the pages visited the important pages that I want to direct users to?

How long do users stay on the website and how high is the bounce rate?

• Are events such as dwell time or scroll depth tracked at all?
• What are users doing on the website?

What devices and browsers are users using?

• Is my website optimized for the type of device that is used the most?
• Does the website work well in the most used browser?

How many conversions are taking place?

• Are there any conversion goals at all?
• If yes: Are the conversions tracked?
• If no: Why are there none? What is the goal of the website?