#  SEO Friendly Tabs with details/summary 

 

  ![SEO Tabs with details/summary](https://cdn.richeyweb.com/images/articles/seo-tabs-with-details-summary/seo-tabs-example.webp)    We love Bootstrap, but its tab implementation has been quietly hurting SEO for years. Here's a modern, pure-CSS solution that [search engines](/blog/development/generator-tag-claim-your-joomla-sites "Generator Tag: Claim Your Joomla Sites") actually understand. What we needed was SEO friendly tabs, so we made some.

At RicheyWeb Development, we've been loyal Bootstrap users for years. Its grid system revolutionized responsive design, its components accelerated our development workflow, and its documentation made onboarding new developers a breeze. But there's one Bootstrap component we've gradually fallen out of love with: tabs.

## The Bootstrap SEO Tab Problem

Bootstrap's tab component is elegant, functional, and widely used. Unfortunately, it's also been a persistent thorn in the side of SEO professionals. The core issue lies in how Bootstrap implements tab functionality: through JavaScript-driven content toggling that relies on dynamic DOM manipulation.

When Bootstrap tabs switch between content panels, they're not simply hiding and showing existing HTML elements. Depending on the implementation, the content may be dynamically loaded, rendered only when activated, or hidden in ways that search engine crawlers struggle to properly index and weight.

### What Google Says vs. What Actually Happens

Google's official stance has evolved over the years. In a [2015 statement on Stack Overflow](https://www.seroundtable.com/google-content-hidden-dynamic-20653.html "Google: We Won't Index Dynamic Content Behind Tabs"), Google's Gary Illyes clarified that [Google](/white-hat-seo/curated-backlinks "Curated Backlinks") "won't see the content behind tabs iff the content under the tab is dynamically generated (i.e. not just hidden)." This is precisely how many Bootstrap tab implementations work.

While Google has since stated that [content hidden behind tabs is indexed](https://www.searchenginejournal.com/googles-mueller-on-myth-of-hidden-tab-content/358724/ "Google's Mueller on Indexing of Hidden Tab Content") when it exists in the HTML, real-world testing tells a different story. [SEO professionals consistently find](https://www.oneupweb.com/blog/seo-for-accordion-content/ "Your Guide to Accordions, Tabs, Hidden Content, Collapsible Content and SEO") that pages with visible content outrank pages where the same content is hidden behind tabs or accordions.

**The Reality Check:** Multiple industry studies have shown that removing tab-hidden content and making it visible by default resulted in immediate ranking improvements. Even Google-indexed content receives less weight when hidden behind JavaScript-dependent UI elements.

### The AI Crawler Problem

Beyond traditional search engines, there's a new challenge: [AI crawlers](/white-hat-seo/markdown-alternates-experiment-ai-friendly-web-content "Markdown Alternates Experiment: AI-Friendly Web Content") powering large language models. As [recent research indicates](https://www.oneupweb.com/blog/seo-for-accordion-content/ "Your Guide to Accordions, Tabs, Hidden Content, Collapsible Content and SEO"), LLMs like GPT-4 and DeepSeek cannot access content rendered by JavaScript. If you're prioritizing visibility in AI-powered search results and citations (the emerging field of "generative engine optimization"), content hidden in Bootstrap tabs is essentially invisible.

## Enter Pure CSS Tabs with `<details>`

The solution comes from an elegant CSS Tricks article: [Pure CSS Tabs with `<details>`, Grid and Subgrid](https://css-tricks.com/pure-css-tabs-with-details-grid-and-subgrid/ "Pure CSS Tabs with <details>, Grid and Subgrid"). This approach leverages native HTML elements and modern CSS features to create a tab interface that's both beautiful and SEO-friendly.

### A Small Example

  Tab 1 Title---

Tab 1 Content

   Tab 2 Title---

Tab 2 Content

   Tab 3 Title---

Tab 3 Content

  

### How It Works

The implementation uses the HTML `<details>` element, which provides native accordion functionality. When multiple `<details>` elements share the same `name` attribute, they become mutually exclusive—opening one automatically closes the others. Combined with CSS Grid and the new `::details-content` pseudo-element (baseline 2025), we can create a tab interface that requires zero JavaScript.

Here's the basic HTML structure:

 ```
<div class="detail-tabs"><br></br>    <details name="alpha" open><br></br>        <summary>Tab 1 Title</summary><br></br>        <div>Tab 1 Content</div><br></br>    </details><br></br>    <details name="alpha"><br></br>        <summary>Tab 2 Title</summary><br></br>        <div>Tab 2 Content</div><br></br>    </details><br></br>    <details name="alpha"><br></br>        <summary>Tab 3 Title</summary><br></br>        <div>Tab 3 Content</div><br></br>    </details><br></br></div>```
<span class="token tag"></span>

```
```

And the core CSS:

 ```
<span class="hljs-selector-class">.detail-tabs</span> { 
  <span class="hljs-attribute">display</span>: grid; 
  <span class="hljs-attribute">grid-template-columns</span>: <span class="hljs-built_in">repeat</span>(3, minmax(calc(33.33% - 2rem), <span class="hljs-number">1</span>fr)); 
  <span class="hljs-attribute">grid-template-rows</span>: auto <span class="hljs-number">1</span>fr; 
  <span class="hljs-attribute">column-gap</span>: <span class="hljs-number">1rem</span>;
}

<span class="hljs-selector-class">.detail-tabs</span> <span class="hljs-selector-tag">details</span> { 
  <span class="hljs-attribute">display</span>: grid;
  <span class="hljs-attribute">grid-template-columns</span>: subgrid;
  <span class="hljs-attribute">grid-template-rows</span>: subgrid;
  <span class="hljs-attribute">grid-column</span>: <span class="hljs-number">1</span>/-<span class="hljs-number">1</span>;
  <span class="hljs-attribute">grid-row</span>: <span class="hljs-number">1</span>/span <span class="hljs-number">3</span>;
}<br></br><br></br>
```.detail-tabs > details[open] > div {<br></br>  position: relative;<br></br>  z-index: auto;<br></br>}```


<span class="hljs-selector-class">.detail-tabs</span> <span class="hljs-selector-tag">details</span><span class="hljs-selector-pseudo">::details-content</span> { 
  <span class="hljs-attribute">grid-row</span>: <span class="hljs-number">2</span>;
  <span class="hljs-attribute">grid-column</span>: <span class="hljs-number">1</span> / -<span class="hljs-number">1</span>;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">1rem</span>; 
}

<span class="hljs-selector-class">.detail-tabs</span> <span class="hljs-selector-tag">details</span><span class="hljs-selector-pseudo">:not(</span><span class="hljs-selector-attr">[open]</span>)<span class="hljs-selector-pseudo">::details-content</span> { 
  <span class="hljs-attribute">display</span>: none; 
}

<span class="hljs-selector-class">.detail-tabs</span> <span class="hljs-selector-tag">details</span><span class="hljs-selector-attr">[open]</span> <span class="hljs-selector-tag">summary</span> { 
  <span class="hljs-attribute">font-weight</span>: bold; 
}

<span class="hljs-selector-class">.detail-tabs</span> <span class="hljs-selector-tag">summary</span> { 
  <span class="hljs-attribute">z-index</span>: <span class="hljs-number">1</span>; 
  <span class="hljs-attribute">grid-row</span>: <span class="hljs-number">1</span>; 
  <span class="hljs-attribute">grid-column</span>: <span class="hljs-built_in">var</span>(--n) / span <span class="hljs-number">1</span>;
  <span class="hljs-attribute">display</span>: grid; 
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">1rem</span>;<br></br>  border-bottom: 2px solid var(--tab-color, dodgerblue);
  <span class="hljs-attribute">cursor</span>: pointer;
}<br></br><br></br>.detail-tabs[open] summary {<br></br>  border-bottom: 2px solid var(--tab-open-color, darkred);<br></br>}
```

 ```

```

### The SEO Advantages

This approach delivers three critical SEO benefits that Bootstrap tabs simply cannot match:

1. **All content is in the DOM from the start.** Search engines can crawl and index every tab's content in a single page load, without executing JavaScript or simulating user interactions.
2. **Semantic HTML structure.** The `<details>` and `<summary>` elements clearly communicate content hierarchy to search engines, providing valuable context about what's a heading versus body content.
3. **No JavaScript dependency for crawlers.** Even search engines with limited JavaScript support can fully access and understand the content, ensuring maximum visibility.
 
**Future-Proof Indexing:** This approach ensures visibility not just in traditional search engines, but also in AI-powered tools and LLM citations—a growing factor in modern SEO strategy.

## Making It Flexible with JavaScript

The pure CSS implementation works beautifully, but it has one limitation: the grid columns are hardcoded for a specific number of tabs. To make this truly reusable, we developed a small JavaScript class that automatically detects tab groups and applies the correct CSS variables.

 ```
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DetailTabs</span> </span>{
  <span class="hljs-keyword">constructor</span>(options = {}) {
    <span class="hljs-keyword">this</span>.gapSize = options.gapSize || <span class="hljs-number">1</span>; <span class="hljs-comment">// rem</span>
    <span class="hljs-keyword">this</span>.requireOpen = options.requireOpen !== <span class="hljs-literal">false</span>;
    <span class="hljs-keyword">this</span>.init();
  }

  init() {
    <span class="hljs-keyword">const</span> namedDetails = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'.detail-tabs details[name]'</span>);
    <span class="hljs-keyword">const</span> groups = <span class="hljs-keyword">this</span>.groupByName(namedDetails);

    <span class="hljs-built_in">Object</span>.entries(groups).forEach(<span class="hljs-function">(<span class="hljs-params">[name, details]</span>) =></span> {
      <span class="hljs-keyword">this</span>.processGroup(name, details);
      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.requireOpen) {
        <span class="hljs-keyword">this</span>.enforceOpenState(details);
      }
    });
  }

  groupByName(details) {
    <span class="hljs-keyword">const</span> groups = {};
    details.forEach(<span class="hljs-function"><span class="hljs-params">detail</span> =></span> {
      <span class="hljs-keyword">const</span> name = detail.getAttribute(<span class="hljs-string">'name'</span>);
      <span class="hljs-keyword">if</span> (!groups[name]) {
        groups[name] = [];
      }
      groups[name].push(detail);
    });
    <span class="hljs-keyword">return</span> groups;
  }

  processGroup(name, details) {
    <span class="hljs-keyword">const</span> count = details.length;
    <span class="hljs-keyword">const</span> totalGapRem = (count - <span class="hljs-number">1</span>) * <span class="hljs-keyword">this</span>.gapSize;
    <span class="hljs-keyword">const</span> tabGroup = details[<span class="hljs-number">0</span>].closest(<span class="hljs-string">'.detail-tabs'</span>);

    <span class="hljs-keyword">if</span> (tabGroup) {
      tabGroup.style.setProperty(<span class="hljs-string">'--tab-count'</span>, count);
      tabGroup.style.setProperty(<span class="hljs-string">'--total-gap'</span>, <span class="hljs-string">`<span class="hljs-subst">${totalGapRem}</span>rem`</span>);
    }

    details.forEach(<span class="hljs-function">(<span class="hljs-params">detail, index</span>) =></span> {
      detail.style.setProperty(<span class="hljs-string">'--n'</span>, index + <span class="hljs-number">1</span>);
    });
  }

  enforceOpenState(details) {
    <span class="hljs-keyword">const</span> hasOpen = details.some(<span class="hljs-function"><span class="hljs-params">d</span> =></span> d.open);
    <span class="hljs-keyword">if</span> (!hasOpen && details.length > <span class="hljs-number">0</span>) {
      details[<span class="hljs-number">0</span>].open = <span class="hljs-literal">true</span>;
    }

    details.forEach(<span class="hljs-function"><span class="hljs-params">detail</span> =></span> {
      detail.addEventListener(<span class="hljs-string">'toggle'</span>, () => {
        <span class="hljs-keyword">if</span> (!detail.open) {
          <span class="hljs-keyword">const</span> anyOpen = details.some(<span class="hljs-function"><span class="hljs-params">d</span> =></span> d.open);
          <span class="hljs-keyword">if</span> (!anyOpen) {
            setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
              detail.open = <span class="hljs-literal">true</span>;
            }, <span class="hljs-number">0</span>);
          }
        }
      });
    });
  }
}

<span class="hljs-comment">// Initialize</span>
<span class="hljs-keyword">new</span> DetailTabs();

```

The updated CSS uses CSS variables for flexibility:

 ```
<span class="hljs-selector-class">.detail-tabs</span> { 
  <span class="hljs-attribute">display</span>: grid; 
  <span class="hljs-attribute">grid-template-columns</span>: <span class="hljs-built_in">repeat</span>(
    var(--tab-count, 3), 
    <span class="hljs-built_in">minmax</span>(calc((100% - var(--total-gap, 2rem)) / <span class="hljs-built_in">var</span>(--tab-count, 3)), <span class="hljs-number">1</span>fr)
  ); 
  <span class="hljs-attribute">grid-template-rows</span>: auto <span class="hljs-number">1</span>fr; 
  <span class="hljs-attribute">column-gap</span>: <span class="hljs-number">1rem</span>;
}

```

This enhancement maintains all the SEO benefits of the pure CSS approach while adding:

- **Dynamic tab counting** - Works with any number of tabs (2, 3, 4, or more)
- **Automatic positioning** - The `--n` variable is set programmatically
- **Correct gap calculations** - Ensures proper spacing regardless of tab count
- **Optional "always open" behavior** - Prevents all tabs from being closed
- **Multiple tab groups** - Support for multiple independent tab sets on the same page
 
## When to Use This Approach

This pure CSS tab solution is ideal when:

- SEO is a priority and you want to ensure all content is fully indexed and weighted
- You're building content-heavy pages where tabbed organization improves [UX](/blog/development/how-a-bug-report-made-hashcash-smarter "How a Bug Report Made HashCash Smarter")
- You want visibility in both traditional search engines and AI-powered tools
- Performance and accessibility are critical requirements
- You prefer semantic HTML over JavaScript-heavy solutions
 
## The Bottom Line

We're not abandoning Bootstrap—it remains a valuable tool in our development toolkit. But for tabbed content where SEO matters, this pure CSS approach using `<details>` elements offers a superior solution. It's faster, more accessible, and actually works the way search engines (and AI crawlers) need it to work.

The web is moving toward native solutions that embrace semantic HTML and progressive enhancement. This tab implementation is a perfect example of that evolution: leveraging modern CSS features to create better experiences for both users and search engines. It's important enough for us to come up with a solution and re-code all of our tabs to be SEO tabs - maybe it's worth your time to investigate as well.



- [      email ](mailto:?subject=SEO+Friendly+Tabs+with+details%2Fsummary&body=https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Fseo-tabs-with-details-summary)
- [      facebook ](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Fseo-tabs-with-details-summary)
- [      x-twitter ](https://twitter.com/intent/tweet?text=SEO+Friendly+Tabs+with+details%2Fsummary%3A+https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Fseo-tabs-with-details-summary)
- [      linkedin ](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Fseo-tabs-with-details-summary&title=SEO+Friendly+Tabs+with+details%2Fsummary&summary=We+love+Bootstrap%2C+but+its+tab+implementation+has...)
- [      pinterest ](http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.richeyweb.com%2Fblog%2Fdevelopment%2Fseo-tabs-with-details-summary&media=https%3A%2F%2Fcdn.joomla.org%2Fimages%2Fjoomla-org-og.jpg&description=SEO+Friendly+Tabs+with+details%2Fsummary)
 


 

   [  Previous article: I Rebuilt My Bundler Plugin Because Your Joomla Site is Embarrassingly Slow   I Rebuilt My Bundler Plugin Because Your Joomla Site is Embarrassingly Slow ](/blog/development/i-rebuilt-my-bundler-plugin-because-your-joomla-site-is-embarrassingly-slow) [  Next article: HashCash: Free, Privacy-First CAPTCHA for Joomla in 2026  HashCash: Free, Privacy-First CAPTCHA for Joomla in 2026  ](/blog/development/hashcash-free-privacy-first-captcha-for-joomla-in-2026)  

##### We Value Your Privacy

 

We use cookies to enhance your experience and for traffic analysis. By continuing to visit this site you agree to our use of cookies.

[Privacy Policy](/privacy-policy)

 Details 

###### Google Tag Manager Items

- Ad Storage
- Ad User Data
- Ad Personalization
- Analytics Storage
- Functionality Storage
- Personalization Storage
- Security Storage
 
 

 

 

 

 

 Decline Accept
```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.richeyweb.com/#organization","name":"RicheyWeb","url":"https://www.richeyweb.com/","logo":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/logo/richeyweb.svg","contentUrl":"https://www.richeyweb.com/images/logo/richeyweb.svg","width":{"@type":"QuantitativeValue","value":38,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":38,"unitCode":"PX"},"@id":"https://www.richeyweb.com/#logo"},"image":{"@id":"https://www.richeyweb.com/#logo"},"sameAs":["https://x.com/ComRicheyweb","https://www.facebook.com/RicheyWebDev/","https://www.youtube.com/channel/UCxnVG8BwOvQRO7hVqNX7T2g","https://community.joomla.org/service-providers-directory/listings/115:richeyweb.html"],"description":"RicheyWeb is a custom software developer specializing in Joomla extensions.","ContactPoint":[{"@type":"ContactPoint","url":"https://www.richeyweb.com/contact-us","telephone":"903-873-8460","contactType":"Owner/Administrator","areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"availableLanguage":"en"},{"@type":"ContactPoint","url":"https://www.richeyweb.com/bugs","telephone":"903-873-8460","contactType":"Technical Support","areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"availableLanguage":"en"}],"knowsAbout":["Computer programming",{"@type":"Thing","name":"Computer programming","sameAs":["https://en.wikipedia.org/wiki/Computer_programming","https://www.wikidata.org/wiki/Q80006","https://g.co/kg/m/01mf_"]},"PHP",{"@type":"Thing","name":"PHP","sameAs":["https://en.wikipedia.org/wiki/PHP","https://www.wikidata.org/wiki/Q59","https://g.co/kg/m/060kv"]},"JavaScript",{"@type":"Thing","name":"JavaScript","sameAs":["https://en.wikipedia.org/wiki/JavaScript","https://www.wikidata.org/wiki/Q2005","https://g.co/kg/m/02p97"]},"arduino","Computer forensics",{"@type":"Thing","name":"Computer forensics","sameAs":["https://en.wikipedia.org/wiki/Computer_forensics","https://www.wikidata.org/wiki/Q878553","https://g.co/kg/m/02wxbd"]},"White hat",{"@type":"Thing","name":"White hat","sameAs":["https://en.wikipedia.org/wiki/White_hat_(computer_security)","https://www.wikidata.org/wiki/Q7995625","https://g.co/kg/m/03ns_5"]},"Search engine optimization",{"@type":"Thing","name":"Search engine optimization","sameAs":["https://en.wikipedia.org/wiki/Search_engine_optimization","https://www.wikidata.org/wiki/Q180711","https://g.co/kg/m/019qb_"]},"Search engine marketing",{"@type":"Thing","name":"Search engine marketing","sameAs":["https://en.wikipedia.org/wiki/Search_engine_marketing","https://www.wikidata.org/wiki/Q846132","https://g.co/kg/m/06mw8r"]},"Digital marketing",{"@type":"Thing","name":"Digital marketing","sameAs":["https://en.wikipedia.org/wiki/Digital_marketing","https://www.wikidata.org/wiki/Q1323528","https://g.co/kg/g/122hcnps"]},"Web hosting service",{"@type":"Thing","name":"Web hosting service","sameAs":["https://en.wikipedia.org/wiki/Web_hosting_service","https://www.wikidata.org/wiki/Q5892272","https://g.co/kg/m/014pz4"]},"Email hosting service",{"@type":"Thing","name":"Email hosting service","sameAs":["https://en.wikipedia.org/wiki/Email_hosting_service","https://www.wikidata.org/wiki/Q5368818","https://g.co/kg/m/09w60m"]},"Internet hosting service",{"@type":"Thing","name":"Internet hosting service","sameAs":["https://en.wikipedia.org/wiki/Internet_hosting_service","https://www.wikidata.org/wiki/Q1210425","https://g.co/kg/m/09w5yw"]},"Virtual hosting",{"@type":"Thing","name":"Virtual hosting","sameAs":["https://en.wikipedia.org/wiki/Virtual_hosting","https://www.wikidata.org/wiki/Q588365","https://g.co/kg/m/024mvh"]},"Web performance",{"@type":"Thing","name":"Web performance","sameAs":["https://en.wikipedia.org/wiki/Web_performance","https://www.wikidata.org/wiki/Q7978612","https://g.co/kg/m/0gfj3f1"]},"Web content management system",{"@type":"Thing","name":"Web content management system","sameAs":["https://en.wikipedia.org/wiki/Web_content_management_system","https://www.wikidata.org/wiki/Q45211","https://g.co/kg/m/0615s2"]},"Content management system",{"@type":"Thing","name":"Content management system","sameAs":["https://en.wikipedia.org/wiki/Content_management_system","https://www.wikidata.org/wiki/Q131093","https://g.co/kg/m/0k23c"]},"General Data Protection Regulation",{"@type":"Thing","name":"General Data Protection Regulation","sameAs":["https://en.wikipedia.org/wiki/General_Data_Protection_Regulation","https://www.wikidata.org/wiki/Q1172506","https://g.co/kg/m/0pk_7xs"]},"SERP",{"@type":"Thing","name":"SERP","sameAs":["https://en.wikipedia.org/wiki/SERP","https://www.wikidata.org/wiki/Q2205811","https://g.co/kg/g/11c5szp7kc"]},"Artificial intelligence",{"@type":"Thing","name":"Artificial intelligence","sameAs":["https://en.wikipedia.org/wiki/Artificial_intelligence","https://www.wikidata.org/wiki/Q11660","https://g.co/kg/m/0mkz"]},"Prompt engineering",{"@type":"Thing","name":"Prompt engineering","sameAs":["https://en.wikipedia.org/wiki/Prompt_engineering","https://www.wikidata.org/wiki/Q108941486","https://g.co/kg/g/11p6kpgt_n"]},"E-learning",{"@type":"Thing","name":"E-learning","sameAs":["https://en.wikipedia.org/wiki/E-learning_(theory)","https://www.wikidata.org/wiki/Q182250","https://g.co/kg/g/122czm1f"]},"Sharable Content Object Reference Model",{"@type":"Thing","name":"Sharable Content Object Reference Model","sameAs":["https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model","https://www.wikidata.org/wiki/Q827811","https://g.co/kg/m/06_40"]},"Experience API",{"@type":"Thing","name":"Experience API","sameAs":["https://en.wikipedia.org/wiki/Experience_API","https://www.wikidata.org/wiki/Q7807728","https://g.co/kg/g/1yw9ktxr8"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]},"Nginx",{"@type":"Thing","name":"Nginx","sameAs":["https://en.wikipedia.org/wiki/Nginx","https://www.wikidata.org/wiki/Q306144","https://g.co/kg/m/02qft91"]},"MySQL",{"@type":"Thing","name":"MySQL","sameAs":["https://en.wikipedia.org/wiki/MySQL","https://www.wikidata.org/wiki/Q850","https://g.co/kg/m/04y3k"]}],"areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"memberOf":["Mensa International",{"@type":"Organization","name":"Mensa International","sameAs":["https://en.wikipedia.org/wiki/Mensa_International","https://www.wikidata.org/wiki/Q184194","https://g.co/kg/m/0140pf"]},"National Rifle Association",{"@type":"Organization","name":"National Rifle Association","sameAs":["https://en.wikipedia.org/wiki/National_Rifle_Association","https://www.wikidata.org/wiki/Q863259","https://g.co/kg/m/0j6f9"]},"CompTIA",{"@type":"Organization","name":"CompTIA","sameAs":["https://en.wikipedia.org/wiki/CompTIA","https://www.wikidata.org/wiki/Q597534","https://g.co/kg/m/040shq"]},"ISFCE LLC",{"@type":"Organization","name":"ISFCE LLC","sameAs":["https://isfce.com","https://g.co/kg/g/11wxm5r0rg"]}],"hasCredential":[{"@type":"EducationalOccupationalCredential","name":"Joomla 3 Certified Administrator","credentialCategory":"Certification","description":"Administrator Exam is the first available Joomla! certification exam","recognizedBy":{"@type":"Organization","name":"Open Source Matters, Inc.","sameAs":["https://en.wikipedia.org/wiki/Open_Source_Matters,_Inc.","https://g.co/kg/g/11f00wvjhz"]},"url":"https://certification.joomla.org/certified-user-directory/michael-richey","about":["Content management system",{"@type":"Thing","name":"Content management system","sameAs":["https://en.wikipedia.org/wiki/Content_management_system","https://www.wikidata.org/wiki/Q131093","https://g.co/kg/m/0k23c"]},"Web content management system",{"@type":"Thing","name":"Web content management system","sameAs":["https://en.wikipedia.org/wiki/Web_content_management_system","https://www.wikidata.org/wiki/Q45211","https://g.co/kg/m/0615s2"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]}],"educationalLevel":"expert","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/contact/badge.webp","contentUrl":"https://www.richeyweb.com/images/contact/badge.webp","width":{"@type":"QuantitativeValue","value":300,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":86,"unitCode":"PX"},"caption":"Joomla 3 Certified Administrator"}},{"@type":"EducationalOccupationalCredential","name":"Certified Computer Examiner","credentialCategory":"Certification","description":"Internationally recognized computer forensics certifiecation","recognizedBy":{"@type":"Organization","name":"ISFCE LLC","sameAs":["https://en.wikipedia.org/wiki/ISFCE_LLC","https://g.co/kg/g/11wxm5r0rg"]},"url":"https://isfce.com/","about":["Digital forensics",{"@type":"Thing","name":"Digital forensics","sameAs":["https://en.wikipedia.org/wiki/Digital_forensics","https://www.wikidata.org/wiki/Q3246940","https://g.co/kg/m/0cnxzfx"]},"Computer forensics",{"@type":"Thing","name":"Computer forensics","sameAs":["https://en.wikipedia.org/wiki/Computer_forensics","https://www.wikidata.org/wiki/Q878553","https://g.co/kg/m/02wxbd"]},"Mobile device forensics",{"@type":"Thing","name":"Mobile device forensics","sameAs":["https://en.wikipedia.org/wiki/Mobile_device_forensics","https://www.wikidata.org/wiki/Q6887097","https://g.co/kg/m/06zp3tp"]},"Network forensics",{"@type":"Thing","name":"Network forensics","sameAs":["https://en.wikipedia.org/wiki/Network_forensics","https://www.wikidata.org/wiki/Q7001032","https://g.co/kg/m/05pb280"]},"Database forensics",{"@type":"Thing","name":"Database forensics","sameAs":["https://en.wikipedia.org/wiki/Database_forensics","https://www.wikidata.org/wiki/Q5227405","https://g.co/kg/m/0cgqsy"]}],"educationalLevel":"expert","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/contact/isfce-cce.webp","contentUrl":"https://www.richeyweb.com/images/contact/isfce-cce.webp","width":{"@type":"QuantitativeValue","value":150,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":150,"unitCode":"PX"},"caption":"Certified Computer Examiner"}}],"hasOfferCatalog":{"@type":"OfferCatalog","name":"Web Services","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","name":"Hosting"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Search Engine Optimization"}}]}},{"@type":"WebSite","@id":"https://www.richeyweb.com/#website","url":"https://www.richeyweb.com/","name":"RicheyWeb","publisher":{"@id":"https://www.richeyweb.com/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.richeyweb.com/search?q={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string","valueMaxLength":256,"valueMinLength":2,"valuePattern":"^[A-Za-z0-9\\s]+$"}},"creator":{"@id":"https://www.richeyweb.com/#organization"},"copyrightHolder":{"@id":"https://www.richeyweb.com/#organization"}},{"@type":"WebPage","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#webpage","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary","name":"SEO Friendly Tabs with details/summary","description":"Discover SEO-friendly tabs with a pure CSS solution that outperforms Bootstrap for search engines and AI crawlers. Learn more!","isPartOf":{"@id":"https://www.richeyweb.com/#website"},"about":{"@id":"https://www.richeyweb.com/#organization"},"inLanguage":"en-GB"},{"@type":"Article","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/seo-tabs-with-details-summary/seo-tabs-example.webp","contentUrl":"https://www.richeyweb.com/images/articles/seo-tabs-with-details-summary/seo-tabs-example.webp","width":{"@type":"QuantitativeValue","value":1280,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":720,"unitCode":"PX"},"caption":"SEO Tabs with details/summary","representativeOfPage":true},"headline":"SEO Friendly Tabs with details/summary","description":"Discover SEO-friendly tabs with a pure CSS solution that outperforms Bootstrap for search engines and AI crawlers. Learn more!","author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"},"datePublished":"2026-01-12T00:00:00+00:00","dateModified":"2026-03-30T00:00:00+00:00","about":["Search engine optimization",{"@type":"Thing","name":"Search engine optimization","sameAs":["https://en.wikipedia.org/wiki/Search_engine_optimization","https://www.wikidata.org/wiki/Q180711","https://g.co/kg/m/019qb_"]},"Bootstrap",{"@type":"Thing","name":"Bootstrap","sameAs":["https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)","https://g.co/kg/m/0j671ln"]},"CSS",{"@type":"Thing","name":"CSS","sameAs":["https://en.wikipedia.org/wiki/CSS","https://www.wikidata.org/wiki/Q46441","https://g.co/kg/m/015tjh"]},"Front-end web development",{"@type":"Thing","name":"Front-end web development","sameAs":["https://en.wikipedia.org/wiki/Front-end_web_development","https://www.wikidata.org/wiki/Q4130556","https://g.co/kg/m/010gqt_p"]},"Web accessibility",{"@type":"Thing","name":"Web accessibility","sameAs":["https://en.wikipedia.org/wiki/Web_accessibility","https://www.wikidata.org/wiki/Q808932","https://g.co/kg/m/04g28m"]}],"mentions":["Mobile-First Indexing","Core Web Vitals","Google",{"@type":"Thing","name":"Google","sameAs":["https://en.wikipedia.org/wiki/Google","https://www.wikidata.org/wiki/Q95","https://g.co/kg/m/045c7b"]},"JavaScript",{"@type":"Thing","name":"JavaScript","sameAs":["https://en.wikipedia.org/wiki/JavaScript","https://www.wikidata.org/wiki/Q2005","https://g.co/kg/m/02p97"]},"HTML",{"@type":"Thing","name":"HTML","sameAs":["https://en.wikipedia.org/wiki/HTML","https://www.wikidata.org/wiki/Q8811","https://g.co/kg/m/03g20"]},"CSS grid layout",{"@type":"Thing","name":"CSS grid layout","sameAs":["https://en.wikipedia.org/wiki/CSS_grid_layout","https://www.wikidata.org/wiki/Q42320210","https://g.co/kg/g/11fzd1fjbc"]},"Googlebot",{"@type":"Thing","name":"Googlebot","sameAs":["https://en.wikipedia.org/wiki/Googlebot","https://www.wikidata.org/wiki/Q1425771","https://g.co/kg/m/01rm55"]},"Web crawler",{"@type":"Thing","name":"Web crawler","sameAs":["https://en.wikipedia.org/wiki/Web_crawler","https://www.wikidata.org/wiki/Q45842","https://g.co/kg/m/08220"]},"GPT-4",{"@type":"Thing","name":"GPT-4","sameAs":["https://en.wikipedia.org/wiki/GPT-4","https://www.wikidata.org/wiki/Q116709136","https://g.co/kg/g/11k9g_m6cg"]},"Large language model",{"@type":"Thing","name":"Large language model","sameAs":["https://en.wikipedia.org/wiki/Large_language_model","https://www.wikidata.org/wiki/Q115305900","https://g.co/kg/g/11kc9956b3"]},"Semantic HTML",{"@type":"Thing","name":"Semantic HTML","sameAs":["https://en.wikipedia.org/wiki/Semantic_HTML","https://www.wikidata.org/wiki/Q1189978","https://g.co/kg/m/080fdhf"]},"Progressive enhancement",{"@type":"Thing","name":"Progressive enhancement","sameAs":["https://en.wikipedia.org/wiki/Progressive_enhancement","https://www.wikidata.org/wiki/Q1527899","https://g.co/kg/m/094c57"]},"Document Object Model",{"@type":"Thing","name":"Document Object Model","sameAs":["https://en.wikipedia.org/wiki/Document_Object_Model","https://www.wikidata.org/wiki/Q2093","https://g.co/kg/m/02f7z"]},"Responsive web design",{"@type":"Thing","name":"Responsive web design","sameAs":["https://en.wikipedia.org/wiki/Responsive_web_design","https://www.wikidata.org/wiki/Q420295","https://g.co/kg/m/0h_98b8"]},{"@type":"Article","@id":"https://www.richeyweb.com/blog/development/generator-tag-claim-your-joomla-sites#article","url":"https://www.richeyweb.com/blog/development/generator-tag-claim-your-joomla-sites","name":"Generator Tag: Claim Your Joomla Sites","headline":"Generator Tag: Claim Your Joomla Sites","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/generator-tag-claim-your-joomla-sites/generator-tag.webp","contentUrl":"https://www.richeyweb.com/images/articles/generator-tag-claim-your-joomla-sites/generator-tag.webp","width":{"@type":"QuantitativeValue","value":1274,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":716,"unitCode":"PX"},"caption":"Generator Tag: Claim Your Joomla Sites"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}},{"@type":"Article","@id":"https://www.richeyweb.com/white-hat-seo/curated-backlinks#article","url":"https://www.richeyweb.com/white-hat-seo/curated-backlinks","name":"Curated Backlinks","headline":"Curated Backlinks","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/seo/curated-backlinks/curated-backlinks-v2.webp","contentUrl":"https://www.richeyweb.com/images/articles/seo/curated-backlinks/curated-backlinks-v2.webp","width":{"@type":"QuantitativeValue","value":1024,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":576,"unitCode":"PX"},"caption":"Curated Backlinks"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}},{"@type":"Article","@id":"https://www.richeyweb.com/white-hat-seo/markdown-alternates-experiment-ai-friendly-web-content#article","url":"https://www.richeyweb.com/white-hat-seo/markdown-alternates-experiment-ai-friendly-web-content","name":"Markdown Alternates Experiment: AI-Friendly Web Content","headline":"Markdown Alternates Experiment: AI-Friendly Web Content","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/articles/jooma-article-index-in-a-module-position-720p.webp","contentUrl":"https://www.richeyweb.com/images/articles/jooma-article-index-in-a-module-position-720p.webp","width":{"@type":"QuantitativeValue","value":1280,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":720,"unitCode":"PX"},"caption":"Markdown Alternates Experiment: AI-Friendly Web Content"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}},{"@type":"Article","@id":"https://www.richeyweb.com/blog/development/how-a-bug-report-made-hashcash-smarter#article","url":"https://www.richeyweb.com/blog/development/how-a-bug-report-made-hashcash-smarter","name":"How a Bug Report Made HashCash Smarter","headline":"How a Bug Report Made HashCash Smarter","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/how-a-bug-report-made-hashcash-smarter/double-lock.webp","contentUrl":"https://www.richeyweb.com/images/how-a-bug-report-made-hashcash-smarter/double-lock.webp","width":{"@type":"QuantitativeValue","value":1280,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":720,"unitCode":"PX"},"caption":"How a Bug Report Made HashCash Smarter"},"author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"}}],"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#article","isPartOf":{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#webpage"},"publisher":{"@id":"https://www.richeyweb.com/#organization"},"citation":[{"@type":"CreativeWork","@id":"https://www.seroundtable.com/google-content-hidden-dynamic-20653.html#creativework","url":"https://www.seroundtable.com/google-content-hidden-dynamic-20653.html"},{"@type":"CreativeWork","@id":"https://www.searchenginejournal.com/googles-mueller-on-myth-of-hidden-tab-content/358724/#creativework","url":"https://www.searchenginejournal.com/googles-mueller-on-myth-of-hidden-tab-content/358724/"},{"@type":"CreativeWork","@id":"https://www.oneupweb.com/blog/seo-for-accordion-content/#creativework","url":"https://www.oneupweb.com/blog/seo-for-accordion-content/"},{"@type":"CreativeWork","@id":"https://css-tricks.com/pure-css-tabs-with-details-grid-and-subgrid/#creativework","url":"https://css-tricks.com/pure-css-tabs-with-details-grid-and-subgrid/"}],"keywords":"SEO tabs, Bootstrap, tab implementation, pure-CSS solution, search engines, JavaScript-driven content toggling, dynamic DOM manipulation, Google, AI crawlers, Pure CSS Tabs, HTML element, CSS Grid, Subgrid, details-content pseudo-element, Semantic HTML structure, JavaScript dependency, Future-Proof Indexing, Dynamic tab counting, Automatic positioning, Gap calculations, SEO priority, Content-heavy pages, UX, Traditional search engines, AI-powered tools, Performance and accessibility, Semantic HTML, Progressive enhancement","articleSection":"Development","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary","hasPart":[{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-the-bootstrap-seo-tab-problem_2_1"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-what-google-says-vs-what-actually-happens_3_2"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-the-ai-crawler-problem_3_3"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-enter-pure-css-tabs-with-details_2_4"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-a-small-example_3_5"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-how-it-works_3_6"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-the-seo-advantages_3_7"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-making-it-flexible-with-javascript_2_8"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-when-to-use-this-approach_2_9"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-the-bottom-line_2_10"},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#faqpage"}]},{"@type":"FAQPage","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#faqpage","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary","isPartOf":{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#article"},"mainEntityOfPage":{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#webpage"},"mainEntity":[{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-0","name":"Does Google index content hidden behind Bootstrap tabs?\r\n","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-0","text":"Google can index content that exists in the HTML source code, even if it's hidden behind tabs. However, multiple SEO studies have shown that Google appears to assign less ranking weight to content hidden in tabs compared to content that's immediately visible when a page loads. The issue is particularly pronounced with Bootstrap's JavaScript-driven tabs, where content may be dynamically generated rather than simply hidden.","citation":{"@type":"CreativeWork","url":"https://www.oneupweb.com/blog/seo-for-accordion-content/","name":"Your Guide to Accordions, Tabs, Hidden Content, Collapsible Content and SEO"}}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-1","name":"What is the main SEO problem with Bootstrap tabs?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-1","text":"Bootstrap tabs often rely on JavaScript to dynamically generate or display content when a tab is clicked. Google's Gary Illyes confirmed in 2015 that Google won't see content behind tabs if the content is dynamically generated rather than just hidden in the HTML. Even when the content is indexed, real-world SEO testing shows that pages with visible content consistently outrank pages where identical content is hidden behind tabs.","citation":{"@type":"CreativeWork","url":"https://www.seroundtable.com/google-content-hidden-dynamic-20653.html","name":"Google: We Won't Index Dynamic Content Behind Tabs"}}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-2","name":"Can AI crawlers like GPT-4 access content in Bootstrap tabs?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-2","text":"No. Large language models like GPT-4 and DeepSeek cannot access content that's rendered by JavaScript. Since Bootstrap tabs typically use JavaScript to show and hide content, this content is essentially invisible to AI crawlers. This is becoming increasingly important as \"generative engine optimization\" (GEO) emerges as a complement to traditional SEO.","citation":{"@type":"CreativeWork","url":"https://www.oneupweb.com/blog/seo-for-accordion-content/","name":"Your Guide to Accordions, Tabs, Hidden Content, Collapsible Content and SEO"}}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-3","name":"What is the ::details-content pseudo-element?\r\n","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-3","text":"The ::details-content pseudo-element is a CSS feature that became baseline in 2025. It allows developers to directly target and style the content portion of a  element (the part that's not the ). This makes it possible to create sophisticated tab layouts using native HTML elements and pure CSS, without requiring JavaScript or custom wrapper divs.","citation":{"@type":"CreativeWork","url":"https://github.com/web-platform-dx/web-features/blob/main/features/details-content.yml","name":"web-features/details-content.yml"}}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-4","name":"How does the pure CSS tab solution work?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-4","text":"The solution uses HTML  elements with matching name attributes to create mutually exclusive panels (opening one closes the others). CSS Grid and the ::details-content pseudo-element position the summaries as tabs in a row and display the active content below. All content exists in the HTML from page load, making it fully accessible to search engines and AI crawlers without requiring JavaScript execution.","citation":{"@type":"CreativeWork","url":"https://css-tricks.com/pure-css-tabs-with-details-grid-and-subgrid/","name":"Pure CSS Tabs with  Details , Grid and Subgrid"}}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-5","name":"Will using tabbed content hurt my SEO rankings?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-5","text":"It depends on the implementation. Tabs that use JavaScript to dynamically load content can hurt SEO because search engines may not see that content. Even tabs where content is in the HTML but hidden may receive less ranking weight than visible content. The pure CSS approach using  elements avoids these issues because all content is present in the HTML and uses semantic elements that clearly communicate structure to search engines.","citation":{"@type":"CreativeWork","url":"https://www.marion.com/collapsible-content-seo-tabbed-accordion-click-to-expand/","name":"Collapsible Content SEO - Click to Expand, Tabs, & Accordions"}}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-6","name":"What browsers support the ::details-content pseudo-element?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-6","text":"The ::details-content pseudo-element is supported in Chrome 131+, Safari 18.4+, Firefox 143+, and Opera 116+. As of January 2026, browser support is widespread with current versions being Chrome 146, Safari 26.3, Firefox 149, and Opera 125.  It is Baseline 2025."}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-7","name":"Why use JavaScript if this is a pure CSS solution?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-7","text":"The JavaScript enhancement is optional and doesn't affect SEO. The pure CSS solution works perfectly but requires hardcoding the number of tabs in the CSS. The JavaScript class automatically calculates the correct grid columns and spacing for any number of tabs, making the solution more flexible and reusable. Importantly, all content remains in the HTML regardless of whether JavaScript runs."}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-8","name":"Does the name attribute on details elements work in all browsers?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-8","text":"The name attribute for details elements creates mutually exclusive groups (accordion behavior) and has been supported since Chrome 131, Safari 18.4, Firefox 143, and Opera 116. This is relatively recent but has good support in modern browsers as of 2026."}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-9","name":"Should I replace all my Bootstrap tabs with this CSS solution?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-9","text":"Not necessarily. Bootstrap remains a valuable framework for many use cases. However, for content-heavy pages where SEO is a priority, this pure CSS approach offers significant advantages. Consider replacing Bootstrap tabs when you need better search engine visibility, faster page loads, improved accessibility, or when you want to ensure AI crawlers can access your content."}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-10","name":"What is mobile-first indexing and how does it relate to tabbed content?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-10","text":"Mobile-first indexing means Google primarily uses the mobile version of a page for indexing and ranking. Google has stated that content hidden in tabs for better mobile UX should have full weight under mobile-first indexing. However, this applies to content that's simply hidden in the HTML, not content that's dynamically generated by JavaScript when tabs are clicked.","citation":{"@type":"CreativeWork","url":"https://www.searchenginejournal.com/googles-mueller-on-myth-of-hidden-tab-content/358724/","name":"Google's Mueller on Indexing of Hidden Tab Content"}}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-11","name":"How do I ensure my tabbed content is accessible?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-11","text":"Using native HTML details elements provides built-in accessibility features including keyboard navigation and screen reader support. The elements are semantic and well-understood by assistive technologies. In contrast, custom JavaScript tab implementations often require additional ARIA attributes and careful keyboard handling to achieve the same level of accessibility."}},{"@type":"Question","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#question-12","name":"What are the performance benefits of pure CSS tabs?","acceptedAnswer":{"@type":"Answer","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#answer-12","text":"Pure CSS tabs eliminate JavaScript execution, reducing page load time and improving Core Web Vitals scores. There's no DOM manipulation overhead, no event listeners to attach, and no external JavaScript library to download. This results in faster initial render, better mobile performance, and improved user experience metrics that Google considers for ranking.","citation":{"@type":"CreativeWork","url":"https://prerender.io/blog/hidden-content-that-hurts-seo/","name":"7 Hidden Content Types That Hurt Your SEO and AEO Visibility"}}}]},{"@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex","@type":"ItemList","name":"SEO Friendly Tabs with details/summary","numberOfItems":10,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-the-bootstrap-seo-tab-problem_2_1","name":"The Bootstrap SEO Tab Problem","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-the-bootstrap-seo-tab-problem_2_1"}},{"@type":"ListItem","position":2,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-what-google-says-vs-what-actually-happens_3_2","name":"What Google Says vs. What Actually Happens","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-what-google-says-vs-what-actually-happens_3_2"}},{"@type":"ListItem","position":3,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-the-ai-crawler-problem_3_3","name":"The AI Crawler Problem","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-the-ai-crawler-problem_3_3"}},{"@type":"ListItem","position":4,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-enter-pure-css-tabs-with-details_2_4","name":"Enter Pure CSS Tabs with <details>","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-enter-pure-css-tabs-with-details_2_4"}},{"@type":"ListItem","position":5,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-a-small-example_3_5","name":"A Small Example","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-a-small-example_3_5"}},{"@type":"ListItem","position":6,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-how-it-works_3_6","name":"How It Works","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-how-it-works_3_6"}},{"@type":"ListItem","position":7,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-the-seo-advantages_3_7","name":"The SEO Advantages","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-the-seo-advantages_3_7"}},{"@type":"ListItem","position":8,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-making-it-flexible-with-javascript_2_8","name":"Making It Flexible with JavaScript","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-making-it-flexible-with-javascript_2_8"}},{"@type":"ListItem","position":9,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-when-to-use-this-approach_2_9","name":"When to Use This Approach","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-when-to-use-this-approach_2_9"}},{"@type":"ListItem","position":10,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#articleindex-toc-the-bottom-line_2_10","name":"The Bottom Line","url":"https://www.richeyweb.com/blog/development/seo-tabs-with-details-summary#toc-the-bottom-line_2_10"}}]}]}
```