HTML5 page structure best practices for Blogger and WordPress SEO

w3c released the draft of HTML5 with some new tags Semantic, these are very helpful in blogger and WordPress SEO.

What is HTML? stand for Hypertext Markup Language is used for developing web pages.

Earlier in the previous version of HTML, we can use only some semantic on a webpage but HTML5 provides us more freedom to define our webpage. It also helps in generating traffic by SEO and also because of its User Interface.

HTML5 page structure SEO best practices
HTML5 page structure SEO best practices

New Very important Semantic introduced in HTML5, and discussed in this article.

  • <header>
  • <main>
  • <article>
  • <figure>
  • <figcaption>
  • <aside>
  • <footer>
  • <mark>
  • <nav>
  • <section>

You can use these tag as

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Your Page title here</title>
    <meta name="description"content="description of Your page" />
    <!--Open Graph Elements of Your Page-->
</head>
<body>
    <header>
        Put your nav, logo elements here
    </header>
    <main>
        <article>
    your article here
        </article>
    </main>
    <aside>
     Sidebar here or, Put your content related to article
    </aside>
    <footer>
footer details here
    </footer>
</body>
</html>

1. <main> use and instruction a benefit for SEO.

Understanding <main> tag: <main> tag in a page can be used for Search Engine Targeting to the main content of the page. It should not contain the part that available in all pages like <aside> <footer>. as these tags remain the same almost all over the pages.

Please keep this in mind that <main> tag can’t be a child of <header>, <nav>  <article>, <aside> or <footer> tag. If you do, then this would be wrong practice.

<main>
        <article>
            <h1>Heading of Content 1</h1>
            <p>Hi you're Sweet.</p>
        </article>
        <article>
            <h1>Heading of Content 2</h1>
            <p>Hi you're Sweet.</p>
    
        </article>
    
        <article>
            <h1>Heading of Content 3</h1>
            <p>Hi you're Sweet.</p>
    
        </article>
    
        <article>
            <h1>Heading of Content 4</h1>
            <p>Hi you're Sweet.</p>
    
        </article>
    </main>

2. Use of <article> tag in HTML5

<article> tag can be used to specify the main article of the doc. If you use <article> tag under the <main> tag then it will make more sense for Search Engine to Optimize your webpage.

You can also use <article> tag in <aside> tag under a snippet of sidebar articles but it is not recommended as of now for Search Engine Optimisation. You are suggested to use only one article tag. Inside article tag you can use <header> and <footer> tags too. Example:-

<article>
    <section>
        <header>
            <h1>Article main heading here</h1>
        </header>
    </section>
    <section>
        <h2>Sub Heading here</h2>
        <p>Hi, How are you</p>
    </section>
    <section>
        <p>Hi, How are you</p>
    </section>
    <footer>
        <section>
            Comment, Social widget, related posts
        </section>
    </footer>
</article>

3. Use of <header> tag in a post

<header> tag can be used in a post to highlight data that means it tells the search engine about the main heading of the document. You can use more than one <header> tag but we recommend you to use only one <header> tag that also under <main><article> tag.

<article>
    <header>
        <h1>main heading of the article</h1>
        <h3>sub heading of defining article .</h3>
        <p>article description here</p>
    </header>
    <p>Complete article here</p>
</article>

4. a tag for Sidebar and related content: <aside> its use and benefit as per SEO.

<aside> tag can be used under <article> tag for related content and outside <article> tag if used as sidebar. i.e. sidebar link to other articles of the webpage but they may or may not related to on-page content.

<article>
    <header>
        <h1>main heading of the article</h1>
        <h3>sub heading of defining article .</h3>
        <p>article description here</p>
    </header>
    <aside>
        <h3>Post You may Like</h3>
        <p>related article link here</p>
    </aside>
    <p>Complete article here</p>
</article>

and also can be used as

<main>
    <article>
    </article>
</main>
<!--for sidebar-->
<aside>
<!--Sidebar Content here-->
</aside>

5. Use of <footer> tag in a webpage

<footer> tag contain footer section of a webpage. It usually contains copyright, about the author, sitemap, contact info, etc.

<footer>
    <section>
            <p>Article by: Siddharth Singh</p>
    </section>
    <section>
            <p>Contact information: 
<a href="mailto:someone@example.com">someone@example.com</a>.</p>
    </section>
<section>
    CopyRight: 2017-2020; All Rights Reserved
</section>
</footer>

6. <section> element tag, uses and best practice

<section> tag can be used to display block section of the webpage. section element may contain <main>, <article> <header>, <footer> and also <section> element itself.

<section>
    <header>
        <nav></nav>
    </header>
</section>
<section>
    <main>
            <section>
        <article>
            <section>
                <header></header>
            </section>
            <section>
                <p></p>
            </section>
        </article>
            </section>
    </main>
    <aside>
        <section>

        </section>
        <section>
            
        </section>
    </aside>
    <footer>
        <section>
            
        </section>
    </footer>
</section>

And Also

<section>
    <header>
        <nav></nav>
    </header>
</section>
<section>
    <main>
            <section>
        <article>
            <section>
                <header></header>
            </section>
            <section>
                <p></p>
            </section>
        </article>
            </section>
    </main>
</section>
<section>
    <aside>
        <section>

        </section>
        <section>
            
        </section>
    </aside>
</section>
<footer>
    <section>
            
    </section>
</footer>

All Semantics discussed above are very important in terms of SEO. Now let’s discuss some other semantics

7. <figure> and <figcaption> HTML5 semantics

<figure> element mark the picture inside the article or document. figure element can be defined using a subtag <figcaption> that is a caption of a picture inserted in the article.

<article>
    <header>
       <h1> main heading of the article</h1>
    </header>
<h2>Sub heading of the article</h2>
<figure>
    <img src="/picture" alt="text to display if image not load" class="test">
    <figcaption>About the image</figcaption>
</figure>
</article>

8. <mark> and <nav>

<mark> tag can be used to highlight text inside the article.

and <nav> tag contains navigation links of the page. Please keep this mind that <nav> element doesn’t contain external element i.e. links of other websites, social links, etc.

So the final version of HTML5 can look like this.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <header>
        <nav>
            navigation elements here
        </nav>
    </header>
    <main>
        <article>
            <header>
                <h1>main heading of the document</h1>
            </header>
            <aside>related content here</aside>
            <figure>
                <img src="/picture.svg" alt="alternate text" class="test">
                <figcaption>about the image here</figcaption>
            </figure>
            <section>your article goes here</section>
            <footer>comment section and share buttons</footer>
        </article>
    </main>
    <aside>
        <section>
sidebar here
        </section>
    </aside>
    <footer>
        <section>
footer detailes, credits, copyright, contact info.
        </section>
    </footer>
</body>
</html>

or it can also be as

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <header>
        <nav>
            navigation elements here
        </nav>
    </header>
    <main>
        <article>
            <header>
                <h1>main heading of the document</h1>
                <h2>sub heading of the document</h2>
            </header>
            <section>
            <aside>related content here</aside>
            </section>
            <figure>
                <img src="/picture.svg" alt="alternate text" class="test">
                <figcaption>about the image here</figcaption>
            </figure>
            <section>your article goes here</section>
        </article>
    </main>
    <aside>
        <section>
sidebar here
        </section>
    </aside>
    <footer>
        <section>
footer detailes, credits, copyright, contact info.
        </section>
    </footer>
</body>
</html>

By making these changes we can increase our Organic web page result, gain CTR. and enhance the user experience.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.