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?

Not really. 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. 

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

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?

While the HTML to text ratio is not a ranking signal, there are many factors related to the ratio that show best SEO practices. That means this ratio may indirectly hurt your ranking. But this does not mean you can overlook it.

Here are some reasons why it a good idea to improve it:

• Google uses it to view the actual relevancy of a page. So, the higher the ratio of text to code, the better.
• The ratio can also help improve HTML heavy pages, for example, by removing unnecessary tags. HTML heavy pages have the potential to hurt loading speed and user experience.

Why text to HTML ratio matters

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.