Common CSS errors that can affect SEO

What happens if a CSS file is not found?

With the style sheet language CSS (Cascading Style Sheets) you define – usually in interaction with HTML – the look of web pages, i.e. layout, colours and typography. Design information is often not directly integrated into each individual page, but linked as an external style sheet. This way, content and design can be neatly separated. When making changes to the design, you only need to modify the central CSS file.

But this also means that if a CSS file is not found, only the content of the web page is visible. This results in text blocks and images without a defined layout. To prevent this from happening, make sure that the CSS file is linked correctly and that it is located at the specified place. If you store it on your own server, there is less risk that it will suddenly become inaccessible.

What happens when a CSS file is redirected?

Redirects are used to redirect from one URL called from one browser to another. They can be useful, for example, when a website moves to a new domain or you restructure your website. In some cases, redirects can also prevent duplicate content.

When you redirect a CSS file, the same thing happens as with web page redirects. Browsers and search engines do not reach the destination directly but have to follow a redirect. The risk here is that if the redirect does not work, the web page will not appear in the intended design. Therefore, it is better to include the correct URL of the CSS file in the source code.

Can I load externally hosted CSS files?

Loading externally hosted CSS files is usually not a problem. Usually this is done via a link tag in the header of the page that points to the URL of the file.

<link rel="stylesheet" href="path-to-css-file">.

It is important that the URL specified is correct and that the file is in the specified location. If either of these is not the case, the same thing happens as when a CSS file is not found on your own server: The layout of the page is not displayed correctly. You can reduce the danger by storing CSS files only on your own server. In the meantime, various browsers also give you the option of checking how web pages look without CSS.

How many CSS files should I use?

You can use multiple CSS files for a web page by using another element for each stylesheet. However, in this case, there is a risk that similar rules will override each other. Also, too many CSS files can negatively affect the performance of a page.

It is better to optimise a CSS file by combining all definitions in one script. This way, only one file needs to be requested. In addition, it is worthwhile compressing the CSS file, for example deleting superfluous spaces. There are tools that can help you compress the files so you don’t have to do the work manually, including CSS Minifier or minifier.org.

Steve Paine
10.12.2021