SEO & Conditional Rendering QOL Upgrade

[dougwithseismic]

👋

Right now any content that's conditionally rendered is going to bring little to no SEO value - That content is never going to be rendered by a crawler - Not great for discoverability and even worse for accessibility (screen readers etc).

A few examples where using Headless will hurt:

• Using Disclosures for FAQs, your answer content won't be rendered.
• Navigation links on Popups can't be found and crawled if they're not rendered.
• Only content in the first tab will be picked up.

Can I suggest we have an option that renders all content but hides it behind a CSS class that hides it so that crawlers and screen readers? We're already passing an open prop with most components so it wouldn't be a far jump to say className={open ? 'visible' : ''} or something similar.

We'd also have to be pretty careful about how we decide to hide elements - According to Google (cite needed), display: none also devalues content SEO wise. There are a few other ways around it including moving elements offscreen, (see below) but we could leave this up to our own discretion.

What do you think?

.visuallyhidden { 
   position: absolute; 
   overflow: hidden; 
   clip: rect(1px 1px 1px 1px); 
   height: 1px;
   width: 1px;
}

[unimprobable]

I also would love this feature. I am trying to use Transition on some page elements to appear on scroll but realized they conditionally render instead of become visible. This would definitely affect my SEO.

Edit: #870 mentions passing unmount={false} in the Transition element, and this works to keep the components in the DOM with hidden prop and inline style display: none.

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

As @unimprobable mentioned, you can pass unmount={false} to almost any component so that it gets rendered in the DOM but hidden instead of unmounting / mounting.

[Intaria]

Right now this "hint" break my styles pretty well - if i add headlessui component (which add this 1px invisible button) inside container with classes like "flex flex-col space-y-[10px]", first element will be this hidden button, but not first visible tag == unwanted margins

[RobinMalfait]

Please open an issue with a reproduction repo / CodeSandbox attached.

[Intaria]

#1491