Text to HTML Ratio

When optimizing your website, you may have been told to consider its text to HTML ratio. So, what does this ratio mean, and why does it matter? Keep reading to learn more!

What is text to HTML ratio?

Your web page is made up of HTML, and part of that is text. If you need a lot of HTML code to display a small amount of text, that means your text to HTML ratio is low.

Example: say you need 10.000 characters of HTML to display 200 characters on your user's screen, that means you have a 200 / 10.000 = 2% Text to HTML ratio. That's very low.

Contrary, if you need just 500 characters of HTML to display the same 200 characters, your text to HTML ratio is 200/500 = 40%. That's a lot better.

Does text to HTML ratio matter for SEO?

No. Redundant code could make your page slower, and that in turn might negatively affect your rankings. However, the effect of the amount of HTML on pagespeed is small. Google's John Mueller has stated on Reddit that it makes absolutely no sense at all for SEO. It was never a thing.

For most SEO projects, there are more important things to worry about than text to HTML ratio.

Although it doesn't matter for SEO, it may help you find slow pages, or pages with unnecessary code.

What is the right text to HTML ratio?

The ideal text to HTML ratio is somewhere from 25-70%. This ratio refers to the visible text as opposed to HTML elements, non-visible information, and images tags. This explains why you see sites with more visible text ranking higher on search results.

How is this ratio calculated?

You can calculate this ratio by looking at how much text is displayed on your page versus the HTML code (headings, links, JavaScript, images, etc.) displaying it.

How does Google use this metric?

Google does not use Text to HTML ratio for ranking. 

Why text to HTML ratio matters

Like we said, Text to HTML ratio does not matter for SEO. Yet, in some cases, it can be useful to compare the Text to HTML ratio across your pages:

Build for people

Web pages with a higher text to HTML tend to be more user-friendly. They are readable and appealing to the target audience rather than search engines.

Faster loading times

The lesser the code the better when it comes to page load speed. Websites with fewer lines of code load faster.  That contributes to better user experience. Don’t forget, page load speed is also a ranking factor.

Better user experience

Better user experience is a prime ranking factor today according to search engines like Google. Now considering higher text to code ratio indicates better UX, it makes sense to improve this ratio.

Better indexing of pages

A cleaner, compact code and higher ratio of plain content make it easier for search engines to crawl and index a website. Keep in mind that a better text to HTML ratio won't have a massive effect on your rankings. 

How to fix low HTML to text ratio

• Place any CSS and Javascript in separate files. Refrain from using inline CSS and Javascript whenever possible.
• Validate your HTML code. The W3 HTML Validator is a great place to start.
• Remove any redundant HTML that is not required to display the page.
• Spot any code that is commented out and remove it.

Using this tips, you should be able to improve your text to HTML ratio. Although that won't directly move your site to Google's top spot, it will make your site a bit faster and user friendly.