Skip to main content

Home/ Vivid Design Consultants/ H1 Tags Importance in Web Designing
lokeshkola

H1 Tags Importance in Web Designing - 1 views

started by lokeshkola on 23 Apr 17
  • lokeshkola
     

    How to use Multiple h1 Tags in Single page


    The "official rollout" of HTML 5 in last month of 2015 ignited renewed interests in an old SEO debate: whether or not using multiple H1 tags on a single page is bad for SEO. Depending on the school of thought, some designers debated the true use case. Likewise, some SEOs had a similar debate. We know H1 tags have value, to which some SEOs try desperately to insert several H1 tags on a page (usually with target keywords). I've seen H1 tags in breadcrumb trails, hidden behind wordless graphics, and pushed to the margin with CSS. But other SEOs, who worry about being seen as spammy, go with the "one H1 per page" rule of thumb. When one of our clients recently asked this question, we found ourselves reevaluating and realigning our multiple H1 best practices. We had to establish where we stand on the answer.


    A little background on HTML 5 for all you non-techies out there: Since 1997, HTML 4 was the go-to way for developers to code and build sites. In fact, many of the sites in existence now are built in HTML 4. Whether you've made the switch to HTML 5 or are still using HTML 4, using multiple H1 tags is OK as long as there's a logical reason and you're not abusing them - this old-but-relevant video from Matt Cutts.


    The Implementation Of  H1 Tags


    We (SEOs, writers, and developers alike) always say H1 tags should be likened to newspaper headlines. Because of this, it makes sense that Google would use them as signals or contextual clues. Ultimately they help search engines better understand what the page, article, or piece of content is about.


    SEOs then put their spin on this fact. The old-school way of "optimizing" HTML header tags and H1 tags for better rankings was to stuff them full of keywords and place a whole bunch of them on one page. Google was certainly aware of this tactic. What followed was the tactical portion of the SEO industry performing experiments on the value of H1 tags always with convoluted, inconclusive results. For as long as I can remember, there have been contradicting articles proclaiming the H1 has no power, to only the first H1 matters, to all H1s have a huge impact. In many camps, the eventual general reaction was akin to, "Google is on to us - only use one H1 tag and make sure it's keyword rich." I would argue that's where half the SEO industry is today.


    But does that make sense from a semantic and design perspective? Aren't there situations where a page might aggregate several topics (despite some SEOs' recommendations), where a few H1 tags are apt? Thanks to HTML 5 standards finally being agreed upon, using multiple H1 tags on a single URL is now accepted as semantically correct - as long as they are used the right way and not as a spammy trick. Simply put, there are new usage rules. The following is how H1 tags can be used:



    • An H1 should always be in the first document section (usually the logo or header area)

    • H1 tags can be used for dividing content sections (traditionally where most considered an H2)

    • H2 tags continue to work to detail an outline to support the H1 section label


    Here's our opinion from an SEO perspective - as Google grows its comprehension past simple keywords, encouraging us to always write for humans along the way, we're going to recommend using H1 tags as needed for users. Then, only working in keywords when it makes sense. We are no longer of the "one H1 tag only" mentality, and see no reason against recommending the HTML 5 usage rules. Besides, it feels like an appropriate match to Google's desires post-Hummingbird.


    Here is an example of how a page coded in HTML 4 may look:



    <div><-This is the start of the article
    <h1>Learning SEO</h1>   <-This is the title of the article, typically the primary topic
    <h2>About SEO</h2>   <-This is the start of a specific part of the article
    <p>paragraph<p>
    <p>paragraph<p>
    <p>paragraph<p>
    <p>paragraph<p>
    <h2>Why learn SEO</h2>   <-This is the start of another specific part of the article
    <p>paragraph<p>
    <p>paragraph<p>
    <p>paragraph<p>
    <p>paragraph<p>
    </div>  <-This is the end of the article



     


    Now, this is the same article created with HTML 5:


    <div>
    <header><h1>Learning SEO</h1>  <-This is the title of the entire article, and also represents the first content section.
    </header>  <-Note how the title is separated from the rest of the article
    <article>  <-Note the "article" div, a new addition for sectioning content.
    <h1> About SEO</h1>   <-This is the start of a specific part of the article. Note these are now H1s.
    <p>paragraph<p>
    <p>paragraph<p>
    <p>paragraph<p>
    <p>paragraph<p>
    </article>
    <article>  <-Note how each section with different content is held within it's own article div.
    <h1> Why learn SEO</h1>   <-This is the start of another specific part of the article. Note these are now H1s.
    <p>paragraph<p>
    <p>paragraph<p>
    <p>paragraph<p>
    <p>paragraph<p>
    </article>
    </div>  <-This is the end of the article.

     


    So what do these two examples show? In an oversimplified nutshell, the reason why it's OK to use multiple H1 tags in HTML 5 is because of elements such as the <article> and <header> tags. These HTML tags tell browsers and search engines that they should treat those sections as separate articles.


    Since Google has begun favoring sites with longer-form, more holistic content (as evidenced by Hummingbird), as well as shown significant growth in its semantic understanding ability, having multiple H1s on a single page may continue to become more commonplace and could actually be beneficial in helping both users and search spiders better digest the content on each page. It's a safe assumption to think Google will get onboard with HTML5 regarding H1 tags - if they haven't already.


    TL;DR


    Our conclusion was, while it's still fine to stick with just one H1 per page, it's OK to use multiple H1s on a page as long as A) the H1s are not being overused to the point of spamming, and B) the H1s fit contextually within the structure of the page.

To Top

Start a New Topic » « Back to the Vivid Design Consultants group