I have the impression that webdesigners are in a fierce competition to create the most beautiful themes possible ! Some of them even go so far as to upset the order of the heading tags ; a fatal mistake for a website. Headings must indeed respect a certain rule. To prove it, I invite you to use a chrome extension for Hn (more precisely, to see the Hn headings) on the most performing sites in SEO.

What is headingmaps for?

If there are those who copy and paste all the text of a site on word, just to know what are the H1, H2, H3 ..., others are content to use a chrome extension for Hn. Indeed, Headings map helps you to detect and prioritize all the headings of a site, without you having to do all that long way.

How to use headingmaps?

You first install it on chrome. Then, an icon appears in the top bar. Choose the site you want to test, no matter which one, and click on this icon. You will see a sidebar on your left that lists all the headings of the site.

In my video, I used several sites as examples.

There is a YouTube video in which I describe this at the bottom of the article. Support me by subscribing to the YouTube channel "Happy Desk Design".

What is the point of using this chrome extension for Hn?

You can be inspired by what the big websites have done to structure their page. I have written another article on this subject, explaining why headings are important for Google and for visitors.

I show you a tip to create a website: to ensure its effectiveness, I advise you to take care of its structure before anything else (even before establishing the model). This step consists in fixing the headings.

One of the tools that can help you to do this on Webflow is the use of the style guide. If you are following my training about Webflow, you probably remember that I offered you one, for free.

However, for those who do not take the training, they can create their own style guide.

In this guide, you will have access to many things about headings:

• their hierarchy
• their size
• their typography
• etc.

Why do we need them? These guides save you time. You won't have to configure the typography, size, style... of the headings for each page, in order to make them conform.

Just change the style guide, and the rest follows.

Before making this guide, I use Figma first. It makes things easier. You don't have to use it too. Some web designers prefer other tools like Photoshop or whatever. In fact, it goes without saying.

All you need to do is to put together all the elements you need throughout the site. In addition to the headings (already formatted), the different logos that you will use frequently during the design of the site itself.

Conclusion
Determining the headings of different websites is not as easy as it sounds, especially if it is a page rich (very rich) in content. However, I understand very well your intense need to know the structure of one or several pages of a site you are interested in. In most cases, web designers use it to get inspiration before designing a website. That's why I highly recommend a chrome extension for Hn; it will make your task easier: Headingsmap.

YouTube : Chrome extension to see H1, H2 headings...

Come back to this page whenever you want. Did you find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to hello@happydesk.be