2 edited tags
| link
    Tweeted twitter.com/StackWebmasters/status/749876254980055040
1
source | link

How is this usage of modal affecting SEO?

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?