Code Best Practices for SEO

Most tools used to audit a site don’t audit every attribute of the site. That being said, at the end of the day the most important part of SEO is to leave no stone unturned and to capitalize on every opportunity and insight available to ensure your site code is up to par, as solid site code is a critical element of solid SEO.

There are a few ways to see if site code is hindering your site’s SEO potential.

Solid HTML

The first site code investigation method is to use HTML validator:  https://validator.w3.org/

This tool allows you to analyze the code on your site and see where you can improve it. In other words, it checks the markup validity, highlighting any errors in feeds, CSS styles, Mobile friendly content, broken code or links.

When you put your site URL into the W3 validator tool, you will be presented with a list of errors and warnings. See figure below:

Figure 31.1 – W3 Validator Tools Snapshot Example – https://validator.w3.org/

Most of the information in this list can be sent to the programmer or developer managing the site. He or she should take the lead on fixing these issues as any changes made without good knowledge of the programming language, the backend, the environment, etc. can have negative impacts on SEO, user experience and more.

 

Why is fixing these issues important?

Search engine bots and browsers view your site in the same way. They go through the backend of your code and analyze the code and text on the site.

As a search engine bot goes through your site, if it finds a lot of errors it will take that as a sign of an ill structured and unmaintained page or overall site. They’re looking for something useful and accessible. Ill structured and unmaintained don’t fit that bill.

Also, these errors can cause a lot of site loading delays or may cause a web page to render improperly. This will cause a bad user experience which is one of the most valued factors when it comes to rankings on SERPs by search engines.

 

SEO Code to Text Ratio

Another important factor that we have to pay attention to when it comes to SEO and code is the code-to-text ratio.

Although it isn’t as important as it was a few years ago, code to text ratio is a good best practice to keep an eye on.

In the past, SEO “experts” tended to add a lot of code to their site vs. actual visual text as a method of tricking search engines. As those engines got smarter, they started looking at this ratio to ensure that whatever was shown to search engines and bots in the code was reflected in the on-page text visible to users. That “expert trick” quickly became useless and most people stopped doing it.

Today, when a search engine or bot encounters a poor code to text ratio, it’s usually an indicator of one of two things:

• Whoever is maintaining the site is trying to pull one over on the search engines by showing them one thing and visitors something else.
• The page is not well maintained and has a lot of leftover or messy code that is not serving any purpose.

Neither of these things scream useful or accessible. So, as much as you might hear talk about this ratio not having a direct impact on site ranking, it definitely does have an indirect impact.  The most common indirect impact is loading delays due to that messy code. Loading delays = poor user experience = unhappy search engines.

Also, this ratio can be an indicator that we have thin content on the page, meaning there is not enough content to provide any real value. Based on SEMrush research from 2018, the number one pages on Google have 45% more content than the number 20 pages on Google SERPs. A healthy code-to-text ratio does matter.  https://www.semrush.com/

 

How do we check a web page’s code-to-text ratio?

To test the code-to-text ratio, check out this tool: https://smallseotools.com/code-to-text-ratio-checker/

This is a great tool by Small SEO Tools that allows you to get the percentage of code vs text you have on a page.

What do these percentages mean?

If the percentage is below 20%, such as the example above, you will need to make some changes.

If the percentage is above 20%, you are in the safe zone. That said, as a best practice, the more text you can add while keeping a page engaging, the better your chances of ranking well.

How can we fix the issue?

What if your ratio is below 20%? What should you be doing? There are 2 ways to fix this.

• Add more content to your site or page. The more text you add, the higher your ratio. Just remember the golden rule of creating for the user first, not the search engines.
• Clean up your code and remove anything that is not being used or is unnecessary.

The View Page Source Approach

For me, this is a favourite. Nothing beats looking at the actual code yourself and understanding the process of how the site loads.

To see the code of your page, all you have to do is right click, then click “view page source”.

When you see the code, it might be overwhelming at first. But, if you know what you’re looking for, you should be fine.

For me, I always look for unnecessary JavaScript.

Here’s what to do:

Go to Google Speed Text/Google Page Insights

If you see that there are notifications with regards to JavaScript, that is usually an opportunity to clean up some code.

For example, if you go to a site and see JavaScript code for a Facebook pixel, more for a LinkedIn Pixel, more for Google Analytics, then Crazy Egg, Google Search Console, Bing Ads, Bing Web Master Tools…

Instead of leaving all this code floating like that, I recommend creating a GTM account and adding all the tags in there, while only installing the GTM tag on the site. This way, you have code for just one tag instead of several. Depending on the number of tags on a site or page, this can potentially have a significant impact on the code-to-text ratio.

To learn more on SEO, check out The SEO WAY.