search

somewebmedia / hc-offcanvas-nav

JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes.
https://somewebmedia.github.io/hc-offcanvas-nav/
MIT License
336 stars 82 forks source link

Use div instead of h2 in nav-title to meet the SEO requirement that h1 should always be the first header #69

Closed JosephLucas closed 3 years ago

JosephLucas commented 3 years ago

Hi,

Thanks for developing this lovely library ! It is very useful.

While using it I realized that it adds some questionable h2 elements. What's the reasoning here ? How to ensure that these h2 meet SEO requirements ? SEO requires that h2 (if any) should be after a h1. Currently, it seems that h2s introduced by the library may be placed before the h1 of the initial html file.

In fact, it seems that these h2s are not necessary : the html content of the page will already contain h1, h2, ... And the user of the library may want to be the only one to choose where to write h1, h2, ... elements.

Please find a PR suggestion where I have replaced -- in js and scss files -- all h2, h3, ... with a simple div.

somewebmedia commented 3 years ago

SEO requires that h2 (if any) should be after a h1.

Can you please provide some reliable source for this statement?

<nav> is a semantic (sectioning) element, and it can contain headings to organise the content inside it. Unless it's strictly prohibited using sectioning elements with organised headings inside it to go before h1, I don't see a problem with it.

JosephLucas commented 3 years ago

You are right, having h2 before h1 does not seem to be such an issue for SEO.

Though I get this validation error with dareboost

The main title of the page must be the first stated title Facilitate the work of screen readers by indicating your main title (<h1>) before any other title. We recommend you to keep a coherent hierarchy among your titles (h1, then h2, then h3, etc). The following titles are located before your first <h1>, you should reorder them:

<h2 id="hc-nav-1-nav-title" class="nav-title">Menu</h2>

<h2 class="level-title">Documentation</h2>

somewebmedia commented 3 years ago

Well the question is are they considering categorising your content. Check this W3 page about headings. In the second example you'll see main heading after navigation.

JosephLucas commented 3 years ago

It's clear enough now, thanks. On stackoverflow I just saw several times that h2 before h1 is ok in fact. It seems that many people are misled about this : in an e-marketing lesson I was told that h2 before h1 is not good for SEO.

somewebmedia commented 3 years ago

SEO improved over the years. Now for example you can have multiple H1 on the page inside sectioning elements, and it will be fine.