Using display: none VS a SPA approach, when it comes to SEO and performance

soup_sam

Say I have a component like, // first approach (SPA) const Component = () => { const [show, toggle] = React.useReducer(show => !show, false) return ( <div> {show && <div>content1</div>} {!show && <div>content2</div>} </div> ) } And say I decide to rewrite it as, // second approach (toggling 'display' attribute) const Component = () => { const [show, toggle] = React.useReducer(show => !show, false) return ( <div> <div style={!show ? { display:...

Originally asked by legoMyEgo on Stack Exchange (webmasters) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

From an SEO perspective: I believe using a div with display: none does not pose a major problem for Google. Google has confirmed that content hidden behind UX elements like tabs or accordions (which often use display: none or similar properties) is now fully valued and indexed. However, consider that using display: none to hide content was historically a technique for Black Hat practices like keyword stuffing. Therefore, the key is to use it carefully and only when it improves the user experience.

Full answer by Amin Hashemy: https://webmasters.stackexchange.com/a/148330 (CC BY-SA 4.0).

Need it done for your business? UphillTech.