How to mark up your page for Insytful's readability checker
TL;DR [too long; didn't read] 🤯
- Good site structure makes your content more findable and user-friendly.
- Correct HTML markup creates accurate readability results.
- Readability impacts SEO and accessibility, too.
Making your webpages work better with Insytful's readability checker
If your goal is to improve time spent on page, comprehension of your content and overall user experience for your website, keep reading.
In this blog, we'll explain why structuring your web pages correctly matters, what readability is and how to improve readability performance with Insytful.
Why readability matters
Insytful checks your web content for readability to help you make it easy for your visitors to understand. We use a tool that looks at the main content of your page, such as articles, blog posts, and other important sections, and calculates a readability score.
But to do this properly, your page needs to be structured so that Insytful can determine what is and is not the main content.
It's not just for Insytful; there are other big benefits
Using proper HTML structure isn’t only helpful for Insytful's readability checks. It also:
- Improves SEO: Search engines like Google use your page structure to understand your content better and rank it more accurately.
- Boosts accessibility: Screen readers and assistive technologies rely on a clear structure to help users navigate your page.
- Enhances user experience (UX): A well-structured page is easier for all visitors to scan and navigate.
- Prepares for future tools: Proper HTML structure is a requirement for many modern tools (analytics, summarisers, AI assistants).
In short, good structure makes your site more findable, accessible, and user-friendly, which is the desire of every website owner.
How our readability checker works
We use Mozilla's Readability package. It looks for specific HTML tags to find your core content:
- It prioritises content inside
<article>and<section>tags. - It tries to ignore unrelated parts like headers, footers, sidebars, and promotional banners.
- If those helpful
<article>and<section>tags are missing, it uses its own logic to guess where your main content is, but this isn't always accurate. - It also considers the length of content, the number of internal heading/paragraph/section/etc tags. Also, further to the above point, having a readable and meaningful class name can help, so auto-generated "fzHsd4h" class names might not work best.
Good markup makes for accurate readability results, improved SEO and accessibility benefits.
Best practices for marking up your webpages
Do: Use <article> for main written content
If your page has a blog post, news item, guide, or similar content, wrap it in an <article> tag.
What good looks like (with the article tag):
<main>
<article>
<h1>5 Tips for Better Accessibility</h1>
<p>Making your website accessible is not only the right thing to do, but also good for business...</p>
</article>
</main>What bad looks like (no article tag):
<main>
<h1>5 Tips for Better Accessibility</h1>
<p>Making your website accessible is not only the right thing to do, but also good for business...</p>
</main>Without the <article> tag, it's harder for tools (and search engines) to identify your core content.
Do: Use <section> for key content blocks
If your page has different sections with important information, use <section> to group them.
What good looks like (using section):
<main>
<section>
<h2>Introduction</h2>
<p>Web accessibility ensures your site works for everyone...</p>
</section>
<section>
<h2>Common Issues</h2>
<p>Here are the top accessibility mistakes to avoid...</p>
</section>
</main>Do: Keep unrelated content out of <article> and <section>
Menus, ads, footers, or promotional content shouldn't go inside <article> and <section> tags.
What bad looks like:
<article>
<h1>Blog Post</h1>
<p>Welcome to our blog...</p>
<div class="promo-card">
<h2>Buy Our Product!</h2>
</div>
</article>An improved example:
<main>
<article>
<h1>Blog Post</h1>
<p>Welcome to our blog...</p>
</article>
<aside class="promo-card">
<h2>Buy Our Product!</h2>
</aside>
</main>Do: Use <main> to wrap the primary content
The <main> tag tells browsers, search engines, and tools like Insytful where the main content starts.
What good looks like (using the main tag):
<header>...</header>
<main>
<article>
<h1>Guide to SEO</h1>
<p>SEO helps people find your site...</p>
</article>
</main>
<footer>...</footer>Mark up checklist
Let's recap. If you want to enjoy better readability results, improve SEO and accessibility, use our checklist:
- Do use
<article>for standalone content pieces (blog posts, guides, news). - Do use
<section>to group related content within your main area. - Keep unrelated content (navs, footers, ads) outside these tags.
- Use a
<main>tag to wrap your core content.
Need a helping hand?
If you're unsure how to structure your pages or your readability results seem off, contact the Insytful team. We're always happy to help!