Balancing SEO and Design with Heading Tags
Using Bootstrap's .visually-hidden Helper Class for Better Web Design
In today’s post we are going to touch on the importance of Heading (H1,H2,H3.. etc) tag orders for SEO and best practice, but we are also going to introduce a method you can use to keep your website compliant, but not be restricted by the needs of having an H1 tag visible.
Ordering your tags
Heading tags play a vital role in SEO by helping search engines understand the structure and content of your webpage and crucial for compliance with web accessibility guidelines. A common beginners mistake I often see is people choosing a tag for its font size rather than its heading order. This can cause SEO issues for your website.
Thanks for reading Blocs Builder! Subscribe for free to receive new posts and support my work.
Maintain Hierarchy: Always maintain the hierarchy of heading tags. Start with H1 for the main title, then use H2 for subheadings, H3 for further subsections, and so on. Never skip levels between headings, for example, don't jump from H1 to H3 directly.
Single H1 Tag: As a best practice, use only one H1 tag per page. This should represent the main title or purpose of the page.
Avoid Overuse: While it's important to use headings for SEO, avoid overusing them. Too many headings can make your HTML structure messy and confusing, which can negatively impact both user experience and SEO.
Nested Headings: Ensure that headings are properly nested within sections and articles. This helps in maintaining the semantic structure of the webpage.
Use Heading Tags for Headings Only: Heading tags should only be used for headings. Avoid using them for styling text or other purposes. This can confuse screen readers and search engines.
Sometimes when using page builders we forget the the goal is to create a well-structured and semantic HTML document. Proper use of heading tags is crucial for this.
What if using an H1 doesn’t fit my design?
Great question, sometimes our design means using an H1 doesn’t work well, but we still need to have an H1 tag to keep our websites compliant. Fortunately there is a way to include the H1 tag and keep to true to our design intentions.
Case Study: Apple’s website
We can look at Apple’s website as an example in how to achieve this. Some pages on the Apple website do not visually have an H1 tag for design purposes. How ever a quick look into the markup of the website shows that there are H1 tags being used. Not only are these heading tags correctly placed in the flow of the website, they are visible to screen readers and and are SEO-friendly.
The screenshots below provide a glimpse of the current Apple product page (at the time of writing) which appears to lack a visible H1 heading. But delving into the markup, we can clearly spot an H1 heading with the text “Apple”. The accompanying CSS used by Apple to visually hide this heading is also displayed.
As users of Blocs Website Builder app we do not have to hand code this CSS, we already have access to a solution thanks to Bootstrap.
Bootstrap 5’s Solution: The .visually-hidden Helper Class
Bootstrap 5 offers a solution with its '.visually-hidden' helper class. This class allows elements to remain accessible to assistive technologies and search engines, even while they're hidden from user view.
Important Note: The '.visually-hidden' helper class is great for keeping your design clean while still including important SEO elements. But be careful not to overuse it. If you hide too much content, search engines might think you're trying to trick them, which could hurt your website's ranking. So, use '.visually-hidden' wisely!
We can add this class into our projects on an H1 heading and have it be hidden visually and compliantly.
The Problem using .visually-hidden in Blocs
When using this class .visually-hidden on the Blocs design canvas our element is instantly hidden. It achieves what we need it to do, but it makes it difficult as we design our website to keep track of what’s happening on our page.
The Solution, is easy!
We have made a special bric that assists us using .visually-hidden in Blocs, which we have called VH Helper.
VH Helper gives you the option to visually toggle the .visually-hidden class, making sure we keep the H1 tag correctly positioned in the flow of our document. VH Helper works only within the Blocs design canvas, and is not present in your exported websites.
By using strategies like the '.visually-hidden' class and a tool like VH Helper, you can maintain SEO compliance while focusing on the cosmetic design of your website. This balance is key to creating visually appealing sites that also perform well in search engine rankings.
Thanks for reading the Blocs Builder Substack! Subscribe for free to receive future posts.