How Headings Improve Your Website’s Accessibility and SEO
When it comes to making a therapist website, you want it to be inclusive and reach the people you serve best.
Luckily, you don’t have to make any tradeoffs here because when you take action to improve your site’s accessibility*, you will also improve your SEO!
*Not sure what “accessibility” is? Or SEO for that matter? No worries! We cover it in today’s video or keep scrolling if you’d rather read.
Headings are more important than you think for SEO, accessibility, and creating a positive user experience for all your visitors!
There are 4 types of headings in Squarespace:
Heading One (H1)
Heading Two (H2)
Heading Three (H3)
Heading Four (H4)
Heading sizes function like a roadmap for your content, guiding readers through your site. This is particularly important for people who use screen readers.
How Screen Readers Work
Screen readers are software applications that convert text into speech for users who have low vision or blindness. They read the content of a web page out loud, giving priority to certain elements (like headings) based on their importance.
The Role of Headings in Screen Readers
Headings are one of the first things a screen reader identifies on a page. They act as signposts, informing the user about the structure and content of the page.
Screen readers interpret heading levels (H1, H2, etc.) as indicators of what is important on a page.
Users can have the screen reader skip from one heading to the next, which provides a way to quickly skim the page.
If the headings are out of order or all the same size, it can confuse the screen reader and as a result, your website visitor.
How to Make Sure Your Headings Are in Order
When I’m thinking of how to order my headings on a website, I try to put myself back into school and think about how I would outline a report or paper:
Heading 1 (H1): This should be the title or main subject of your page. There should only be one H1 per page! More than one it’s not only bad for accessibility but it will hurt your SEO.
Heading 2 (H2): Use this for major sections that directly support the main topic. For example, on a page about therapy, H2s might include "My Style", "Our Process", or "Issues you might be facing".
Heading 3 (H3), Heading 4 (H4), etc.: Use these for sub-sections within your H2 sections. For example, under "Our Process", you might have an H3 for "Schedule a Consult" and another for "First Visit". If "First Visit" has multiple steps, those could be broken down into H4 sections.
How to easily check that you have the right heading structure on your website (this is the tool I use on my own site)!
SEOSpace is the only SEO tool made just for Squarespace and it will scan your pages for you and tell you if your headings are set up in the right way!
It makes it so simple (and this is just one of the many essential things it can check for you)!
Now is a good time for a reminder that no one gets this 100% perfect–not even accessibility experts.
What matters is that you continue to make improvements, you keep learning and strive to do better over time.
Please do not panic or stress if you are realizing you haven’t hit all these marks perfectly!
How do headings help SEO?
Headings tell Google (and other search engines) what your page is about and help it rank higher for search terms that a person uses to find your website (aka “keywords”).
It’s important to include your main keywords in your H1 (and remember, you should only have one of those per page). You also want to include your main keyword (or a variation of it) in an H2.
But mostly importantly, just focus on the quality of the information and an organized flow. If you are stuffing keywords into places just to have them there a) it makes a bad user experience and the person might bounce and b) Google gets more sophisticated all the time, and can sometimes tell if you’re “stuffing” keywords and it works against you.
How do headings help user experience?
Headings break up “walls of text” which helps them engage with your content. If a user comes to a website and sees a big brick of small text, they are more likely to leave your site.
Headings allow them to skim the page and find the content they are looking for.
And remember, people online only read about 10% of what you write–it’s mostly the headings that they are paying attention to!
Tips for blending design and accessibility in Squarespace
In Squarespace, you can customize the size of your headings however you’d like!
Your headings do not have to be in cascading order of size visually (the screen reader is picking up only how they are assigned (H1, H2, H3, etc), not how they look).
Sometimes you might want your H1 to be smaller.
For example, in our free website template for therapists, we set our H1 to be smaller so that you can include your keywords in the H1, and then use your H2 for a headline that is more compelling. Here’s what that looks like:
Additionally, you can use the “scale text” button in your text editing bar to increase the size, without having to change the assignment of the heading size.
For example:
Here’s our normal heading three.
And here’s our heading 3 using “scale text”
Just make sure when you use “scale text” you check how it looks on mobile. Sometimes if you put too much text, it can look tiny on mobile, defeating the purpose!
We hope this was a useful overview for understanding how having a clear and consistent heading structure not only helps your site feel organized and improves your SEO but also makes your content more accessible to all visitors.
Disclaimer
