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 normally written in HTML, and the content displayed is normally in text. The text to HTML ratio also commonly referred to as text to code or code to text is the amount of text on that page compared to the amount of HTML code needed to display it. 

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?

It is simple to calculate. You can calculate this ratio manually by looking at how much text is displayed on your page versus the HTML code (headings, links, JavaScript, images, etc.) displaying it. Alternatively, use free ratio checker tools to analyze your web pages. A reliable code checker will display results (page size, text size, code size, and code to text ratio) right away.  

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 overlook it. Below 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, the better.
  • The ratio can also help improve HTML heavy pages. For example, by helping remove unnecessary images tags. HTML heavy pages have the potential to hurt loading speed and user experience.

How to improve code to text ratio

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.

Better page load speed

The lesser the code the better when it comes to page load speed. Websites with lesser code loads fasters and 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. 

How to fix low HTML to text ratio

  • Validate your HTML code. You can use online tools to do this- it will take about one minute of your time. 
  • Check your website load speed. If your site is loading too slowly, that is a sign you need to review your code and remove unnecessary elements.
  • Include a lot of simple text on a page and remove any hidden text that is not visible to people.
  • Reduce the size of your page. It is best to keep it under 300kb. If bigger, try reducing it.
  • Consider exporting CSS to an external file and using it only for styling and formatting
  • Remove any unnecessary images
  • Resize your images
  • Avoid tables. Use tables in your layout only if necessary
  • Only use JavaScript and flash if required
  • Use internal linking to help users navigate your website and make sure your links pass link juice