Text To HTML Ratio Explained

Have you been working hard to get your SEO to 100% perfection? From cleaning up metadata descriptions, imagery, alt text, duplicate text, keywords, etc. The list can go ON!

Then right when you think everything it’s squared away, you see your website is still not at 100% and several errors described as Text to  HTML Ratio.

Well, we are here to help and break that down, so you can check that off your SEO to-do list.

What Is Text To HTML Ratio?

Let’s start with HTML. HTML is code. There is the frontend of a website (the part you see and users interact with) and there is the backend. HTML is code that can be found on the backend of your website, used to structure where the content can be text, but also images and other forms of media.

The Text to HTML Ratio is the percentage, assessing the total amount of text/ copy to the overall size of the web page. Text to HTML Ratio is also called the Text to Code Ratio Code to Text Ratio.

Why Does This Matter? Why Do I Need To Fix This?

A good Text to HTML Ratio is essential.

It allows browsers to determine if a website’s page is “bloated” aka if there is excessive code, which leads to a decrease in page loading speeds, and page speeds are a BIG ranking factor for Google Search. Slow speeds equal lower SERP rankings, and if your competitor has a faster speed, the search engine will rank them better than your website, and we do not want that.

We know the attention span of the average person today on digital devices is not that long now. You have seconds to grab their attention. Slow page speeds can lead to high bounce rates on the website, lack of conversions and an unpleasant user experience.

So How Do I Fix The Text To HTML Ratio?

There are two routes that can be taken:

1. Decrease the code and/ or work with clean code, to de-bloat the page.

2. Add more text/ copy to the page.

Start by calculating the Text to HTML ratio.

There are tools like SiteGuru that can take the work out of having to calculate, but if you must, divide the size of the text on the page by the total size of the entire web page, then multiply that number by 100 to convert them into a percentage.

Text to HTML ratio = (Text Size / Total Web Page Size) * 100

So What’s A Good Ratio?

The goal is to balance the HTML code and text on that page, to get a high numbered result. Between 25% to 70% is ideal. Try to keep the size of the HTML code >300KB. None of this blog would matter if the code written was clean. So it is better to have clean code, but there are some situations where massive websites have been built over time and it is too late to start from scratch with clean code. We suggest using CSS to structure elements and avoid using tables.

If you have to rock with the code you have, try to condense it if possible, but then add as much text needed to balance the ratio and get to that 25% to 70% pocket. That means adding more copy to that web page.

Conclusion

Text to HTML Ratio affects the SEO health of a website. We have provided ways for you to find out what that ratio is, and how to fix it, including just having clean good code, condensing the code and adding text to the page to get a good ratio. We hope this has been of some help to you.

Feel free to explore more of our blogs for web and design-related topics.

Cheers!