How is this usage of modal affecting SEO?

Question

I would like to know how my usage of modal in my web application affecting SEO. I will provide an actual example so that my question is clear.

My application has a list of items in the home page. In HTML, it looks like the following (e.g. https://remotebase.io/):

<h1>app name</h1>
<h2>tagline</h2>
<h3>item name</h3>
<h3>item name</h3>
...
<h3>item name</h3>

When a user clicks on an item, I open a modal to display full information of the item (e.g. https://remotebase.io/company/gitlab).

Now HTML looks like:

<h1>app name</h1>
<h2>tagline</h2>

<h2>Modal title</h2>
<h3>Modal subheading</h3>
<h3>Modal subheading</h3>
<h3>Modal subheading</h3>

<h3>item name</h3>
<h3>item name</h3>
...
<h3>item name</h3>

Notice that the detail page of an item has bunch of headings that are not even relevant to the item itself, because it is a modal.

To see if someone faced a similar problem, I looked into similar websites like Product Hunt. I noticed that when I go to the product's page directly, it doesn't show a modal (e.g. when I go directly to https://www.producthunt.com/tech/medium, it's a full page). But when I click a product from a home page, it displays a modal. Is this intentional?

How is this usage of modal affecting SEO, and what actions can I take to avoid the negative impacts?

Answer 1

It's often a common mistake for companies, brands and blogs to use a H1 as the site name, and H2 as the slogan repeated on every page throughout the entire site, Google and Bing ain't stupid and can work out the site name, and slogans without using header tags, the same way it works out the content in a footer.

A better approach would be to remove the site name and slogan from using the header tags completely, and reserving these for actual content.

This would look like:

<a href="/">
    <img alt="example" src="example.png">
    <span>WEBSITE NAME</span>
</a>
<span>WEBSITE SLOGAN</span>

If your concerned about not having a H1 or H2 on the front page then you could use the current setup, only on the front page and there-after using span, not header tags.

In regards of the modal itself, it seems pretty pointless... you might as well just style the page the way you have it now, without overlapping the menu. Simply remove the menu from those pages completely, as its considered unnecessary bloat code.

The modal pages you would be better of using something like this (without your hidden menu):

<div class="container" itemscope itemprop="organization" itemtype="http://schema.org/Organization">
    <header role="banner">
        <img src="company.png" alt="company" itemprop="logo">
        <h1 itemprop="name">COMPANY NAME</h1>
        <span itemprop="description">COMPANY SLOGAN</span>
        <a href="https://example.com/" target="_blank" itemprop="url">OUTBOUND</a>
        <nav>
            <ul>
                <li>Overview</li>
                <li>Example 1</li>
                <li>Example 2</li>
                <li>Example 3</li>
                <li>Example 4</li>
            </ul>
        </nav>
        <time class="updated" datetime="2016-03-21T13:14:55+00:00">March 21st, 2016</time>
    </header>
    <main role="content">
        <!-- actual page content here -->
    </main>
    <footer role="contentinfo">
        Site Name - 2016 All Rights Reserved
    </footer>
</div>