Issues with H Tags in Tabs

Assume you place a Tab element on a Form.

The Default is 3 Tabs.

Within each Tab

  • add a different H2 tag

Publish / Export the site.

Use whatever tool you want to analyze the page.

I used Screaming Frog. I have a couple others I need to test.

How many H2’s are you detecting ?

The default Tabs component outputs incredibly clean and effective code:

<div class="w-tab-content">
  <div class="w-tab-pane" data-w-tab="Tab 1">
    <h2>This is the first H2.</h2>
  </div>
  <div class="w-tab-pane" data-w-tab="Tab 2">
    <h2>This is the second H2.</h2>
  </div>
  <div class="w-tab-pane" data-w-tab="Tab 3">
    <h2>This is the third H2.</h2>

Unless you have specific settings preventing search engines from crawling this content, the H2s should be detected just fine.

Browseo, for instance, detects all three H2s in the published site:

Are you experiencing something different? If you share the published site or a snippet of the code for your Tabs component, we can take a closer look. :+1:

ok thanks. Another app I use says multiple H2’s as well.

Screaming Frog is only reporting 1 ???

Not sure why. Same site / same code / different app.

Screaming Frog has always been reliable.

1 Like

How are Webflow tabs rendered ?

When I use something like BrowseSEO

  • it shows multiple H2’s.

Screaming Frog has the ability to check JS / not check JS.

When I do not check JS… I get 1 H2.

With JS check enabled… I get 8 H2’s… (which is how many I have)

Screaming Frog says

Miscounting the number of H2s is usually down to invalid HTML throwing the parser off or content rendered in JavaScript which would need to have JS crawling enabled.

I validate the html.

Is WF using JS to render the tab ?

@webflow @cyberdave @Waldo @samliew

Like McGuire has mentioned, this has nothing to do with JS as the HTML already outputs the h2’s. Bring it up with the tool’s developer.

This topic was automatically closed after 60 days. New replies are no longer allowed.