2

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?

2

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>
  • Your advice on <h1> tags is helpful. Regarding modal, it's unclear what 'menu' you are talking about. Did you mean I can remove the background (the list of items) because they are not related to the actual content (the item's detail in the modal)? I chose to overlay the modal on top of the list because when user exits, I don't have to re-render the list. But not sure if best practice in terms of SEO. – Sung Cho Jul 1 '16 at 13:38
  • I would get rid of the modal idea because normally a modal is associated with users revealing content without turning the page, e.g it calls content that is hidden, or via AJAX, since you use neither of this properties, its pointless. You might as well remove the modal and just use what I recommended above, there's no point in fetching, or rendering content that is not visible... I referring to all your code outside of <main> on company detail pages. For pages like filtering, the front page then the menu serves a purpose, because its visible. – Simon Hayter Jul 1 '16 at 14:52
  • I think ditching modal might be an idea worth trying. However it might make the app slower because when users go back to the main page, I will have to re-render the list. And users won't be able to browse through the items as quickly. So I see that the problem is a conflict between user behavior/experience and SEO. What is your view on this trade off, and have you seen any problems similar to mine? – Sung Cho Jul 2 '16 at 0:09

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.