1

In the structure of my upcoming website, there will be multiple level 2 headings inside the master header. An example can be seen below:

<header id="banner">
    <h1><a href="">My Website Name</a></h1>
    <nav>
        <h2>Main Navigation</h2>
        ......
    </nav>
    <article>
        <h2>Search</h2>
        ......
    </article>
    <article>
        <h2>Follow Us</h2>
        ......
    </article>
    <article>
        <h2>Extra Links</h2>
        ......
    </article>
</header>

<main>
    <article>
        <h2>Article Title Lorem Ipsum Dolor Sit Amet</h2>
        ......
    </article>
    ......

As we can see, there is one for the navigation block, one for the search form, one for social network hyperlinks, and one for extra links (ex: FAQ, Contact, etc).

From the perspective of visual design, those <h2>s will be hidden by using CSS. But from the perspective of structure, they need to be present in the HTML.

The problem is that, it seems to me that there are a bit too many <h2>s. Would it help improve SEO if I replace search form, social networks, and extra links' <h2>s with <div role="heading">s?

  • Reserve header tags for content. Using h1 tag for site name is not recommended. Instead, use the h1 tag for the page title and any following header tags to represent content hierarchy. Use a div tag for the rest. Learn to structure your templating using div tags. Cheers – closetnoc Dec 4 '17 at 15:50
  • @closetnoc Thanks. But this answer shows that Google prefers seeing <h1> be used for site name. – Ian Y. Dec 4 '17 at 16:30
  • Google doesn't care about the heading tags you use anymore. Google pays attention to how text looks to users. Googlebot now renders pages and weight the text on the page by how prominent it is for ranking purposes. The days of optimizing your HTML tags for search are over. – Stephen Ostermiller Dec 4 '17 at 17:22
  • 1
    @StephenOstermiller Yes and no. Header tags support the content blocks that follow. If you use header tags for content, your are creating semantic value for the content itself. As it was originally intended, the header tags should describe the content to follow and not for styling or trying to send branding signals. Yes rendering is a factor, however, the semantic analysis that is done on the content is open source last I looked and applies to the portion of the DOM that is the content. Therefore header tags are helpful for analysis and should be used as originally intended. – closetnoc Dec 4 '17 at 19:17
  • I realize the PDF makes one statement concerning using the site name for the header. That is for a single purpose and contravenes the special considerations given the h1 header in how a page is indexed. Yes. The h1 can be used for branding, however, only really helps for branded searches that I can see. That would be where a search query contains the brand name. With branding signals being what they are today, the advice of putting the site name in the h1 is not only old, but detrimental for search. Why? Because you have removed one of the most valuable content signals there is. – closetnoc Dec 4 '17 at 19:29
0

According to w3schools about HTML Headings:

"Search engines use the headings to index the structure and content of your web pages. Users skim your pages by its headings. It is important to use headings to show the document structure. headings should be used for main headings, followed by headings, then the less important , and so on."

You yourself have to decide what blocks of information for your website are important, which are less important and so on down. Pay attention to this documentation W3 about element header. You install blocks Search + Follow Us + Extra Link inside of semantic elements article. If these are separate articles, then it is more logical to install them in the main unit of the webpage main.

But you say that this is "one for the search form" + "one for social network hyperlinks" + "one for extra links (ex: FAQ, Contact, etc)". So these are not articles, but rather simple links. And it is hardly the second most important information on the web page (using the element H2). Probably these links can be placed in the footer of a web page. Or in some block below the web page.

Since these links are not important information, it is more logical to apply to them the element div. But you can also set these references in the semantic element of the section, but using for their designation the lowest element of H in comparison with already applied, eg H6, but not H2.

Read more: Headings ++ Headings ++ HTML/Usage/Headings/h1only ++ Headings: The H1, H2, H3, H4, H5, H6 elements.

  • 3
    Your first link goes to w3schools.com. They don’t make specifications / they have nothing to do with the W3C. – unor Dec 5 '17 at 9:40
  • @nikant25 Thanks. According to W3C, article element represents a self-contained content. It even says the element can be used for "interactive widget or gadget, or any other independent item of content." So I guess it's fine to use article for search form and social links. – Ian Y. Dec 5 '17 at 10:18
  • @Ian Y. According to W3 (sorry - it's again) w3schools.com/html/html5_semantic_elements.asp : "Semantic elements = elements with a meaning". It seems to me illogical in the article to install search form and social links. Read more en.wikipedia.org/wiki/Article_(publishing) – nikant25 Dec 5 '17 at 15:48
  • 2
    @nikant25 article element in HTML5 isn't the exact same thing as article in publishing. Please refer to W3C when it comes to the definition of article element. – Ian Y. Dec 6 '17 at 8:53
  • It should be noted that browser vendors have stated they use the specification published by WHATWG and not the W3C. The two specifications are not identical in all cases. The links, in this answer, are to W3Schools which is not, in any way, affiliated with the W3C. Such a link can cause confusion and needs the link wording changed. – Rob Jan 4 '18 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.