HEY

Participate in the next Webflow Challenge!

Which Chrome extension to see Hn headings in 2020 N

Have you ever heard of a chrome extension for Hn? It will help you to be inspired by the structure of other high performance SEO and UX sites.

Updated on

21/7/2020

chrome extension for Hn
Photo by Lacie Slezak on Unsplash

I have the impression that webdesigners are in a fierce competition to create the most beautiful themes possible! Some of them even go as far as upsetting 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 best SEO performing websites.

chrome extension for Hn
Photo by Daniela Brehme on Unsplash

What are headingmaps for?

If there are those who copy and then paste all the text of a site on word, for the sole purpose of knowing which 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 go all that long way.

How to use headingmaps?

You put it on chrome first. Then an icon appears in the bar at the top. 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 took several sites as an example.

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

chrome extension for Hn
Photo by Rotekirsche20 on Unsplash

What's the point of using this chrome extension for Hn?

You will be able to draw inspiration from what the big websites have done to structure their page. I've written another article on this subject, explaining why headings are important for Google and for visitors.

I'll show you a tip for creating a website: to guarantee its efficiency, I advise you to take care of its structure before anything else (even before creating the mock-up). This step consists in fixing the headings.

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

However, for those who do not follow 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 it? These guides will save you time. Indeed, you won't need to configure the typography, sizes, styles... headings for each page, in order to make them conform.

All you have to do is change the style guide, and the rest is history.

chrome extension for Hn
Photo on Mary Fotinaki on Unsplash

Before drawing up this guide, I first use Figma. It makes things easier. You don't have to use it too. Some webdesigners prefer other tools like Photoshop or something else. Actually, that goes without saying.

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

Conclusion
Determining the headings of different websites is not as simple 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 more pages of a site that interests you. In most cases, webdesigners use it for inspiration, before designing a website. That's why I highly recommend a chrome extension for Hn; it will make your job easier: Headingsmap.

YouTube : Chrome extension to view H1, H2 headings

Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
Kevin Palombo, Manager of Happydesk.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training