Your Services Page Has Four Tabs — AI Search Only Ever Sees the First One
A Torrance plumbing company owner typed "who does drain cleaning near me" into ChatGPT last month, expecting to see his own business — he'd ranked it for years on Google, had 140+ reviews, and had just redone the site. ChatGPT named two competitors. Not his. He tried "water heater repair South Bay" next. There he was, first mentioned, correctly described, services and service area intact.
Same website. Same company. Same four services listed on the same page. One got cited. Three didn't exist as far as the AI was concerned.
The difference wasn't content quality, backlinks, or reviews. It was a UI decision his web developer made two years ago: the services page used an accordion. Water Heater Repair was the default open tab. Drain Cleaning, Repiping, and Emergency Plumbing were collapsed behind clicks that loaded their content via JavaScript. A human visitor clicks through in half a second without noticing. An AI crawler never clicks at all.
The Accordion Isn't a Design Choice — It's a Content Access Decision
Most trades websites group services into tabs or accordions because four walls of text looks cluttered and a designer wants the page to feel organized. It's a reasonable instinct for a human visitor scanning on a phone. The problem is what actually gets delivered when a crawler requests that page.
When the accordion is built so that only the active tab's content exists in the initial HTML — and the other three are fetched or rendered only after a click event fires — you've built a page with one visible service and three that require a browser action to exist. Googlebot can usually get past this, because Google runs a second pass with a headless version of Chrome that executes JavaScript, clicks aren't required because the content was likely already in the DOM (just display:none), and Google's renderer typically reads the full DOM regardless of visual state. That's why the plumber's Google ranking for drain cleaning was fine. Google saw all four tabs.
But Googlebot is not the only crawler reading that page anymore, and for the audience actively asking ChatGPT, Perplexity, and Google's AI Overviews who to call, it's increasingly not the one that matters most.
GPTBot, ClaudeBot, and PerplexityBot Don't Click, and Mostly Don't Render
OpenAI's GPTBot, Anthropic's ClaudeBot, and Perplexity's crawler are built to move fast across enormous volumes of pages. None of them run a full rendering pipeline the way Google's indexer does. They request the raw HTML response and read what's actually in that payload. If your four services exist in the DOM but are wrapped in a component that only populates on a click event handled by client-side JavaScript — and the server never sent that content down in the first response — these crawlers get one visible service and three empty containers.
This is why the failure is invisible to the business owner. You open the page in Chrome, click through all four tabs, everything's there, looks complete. Your developer tested it the same way. Nobody tested what the page looks like with JavaScript disabled, or what a raw curl request returns, because that was never part of anyone's QA process until AI-driven search made it one.
Run the test yourself: open Chrome DevTools, disable JavaScript, reload your services page. Whatever's missing is what GPTBot sees. For a lot of trades sites built on template themes or component-heavy React builds, what's missing is most of the page.
The deeper issue is architectural, not cosmetic. A site built with client-side rendering as the default — common on WordPress themes loaded with interactive page builders, and just as common on poorly structured custom React sites — treats the browser as the only consumer of content. That assumption held for fifteen years. It stopped holding the moment a meaningful share of local searches started routing through an AI answer instead of a results page.
What the Fixed Version Actually Looks Like
The fix isn't "remove the accordion." Collapsed UI is fine for the visitor. The fix is making sure every service's full text content exists in the HTML the server sends on the very first request, regardless of which tab is visually open. CSS can hide content from view (display:none, max-height:0, whatever the interaction pattern needs). What can't happen is the content only existing after a JavaScript event fires and a fetch call returns.
This is a server-side rendering problem, and it's exactly why Axesris builds on Next.js and Astro instead of client-rendered templates — the HTML sent to any crawler, human or bot, already contains the full page. There's no second wave of rendering required, no dependency on whether a given crawler executes JavaScript at all. A static or server-rendered page for a company working with home services clients across the South Bay means the drain cleaning paragraph is sitting in the same HTML response as the water heater paragraph, whether or not the visitor ever clicks the second tab.
Beyond the rendering fix, the structural layer matters just as much. Each service should carry its own heading (not a <div> styled to look like a heading — an actual <h2> or <h3>), its own paragraph of specific, extractable text, and ideally its own Service schema markup identifying what it is, who provides it, and where. AI answer engines are pattern-matching for clean, attributable chunks of text tied to an entity. A page where "Repiping" is a heading followed by 150 words of specific detail is a chunk an answer engine can lift and cite. A page where "Repiping" is a tab label with no content behind it until a click is a chunk that doesn't exist.
For plumbers specifically, this matters because the query pattern has shifted. Fewer people are typing "plumber Torrance" into Google and scanning ten blue links. More are asking a conversational question — "who handles emergency repiping in the South Bay" — directly to a model that answers in one paragraph with one or two names attached. If your repiping content is technically "on the page" but invisible to the crawler doing the asking, you've lost that citation before the conversation even reached the comparison stage.
The Test Nobody's Running Yet
Here's the uncomfortable part: this failure mode will get worse before most trades companies notice it, because the symptom looks identical to just having weaker content. A business owner sees ChatGPT recommend a competitor and assumes the competitor has better reviews, more backlinks, sharper copy. Sometimes that's true. Increasingly, it's a markup problem with a one-line explanation nobody checked: the content was there for the human, absent for the machine reading on the human's behalf.
Every trades company running four, six, or ten services through a collapsed UI should ask one question this week: does the raw HTML response for that page contain all of it, or just the one tab a visitor sees first? If you don't know the answer, that's the actual gap — not your reviews, not your backlink count, not your ad spend.
If your site was built years ago on a theme nobody's audited since, or you're not sure whether your developer rendered that page server-side or client-side, that's worth a direct conversation before you spend another dollar on content for services an AI crawler has never actually read. Axesris builds for exactly this — South Bay trades and service businesses that need their site read correctly by the engines their next customer is actually asking.