Bad UI/UX that harms SEO

1. Why UX and SEO are the same thing

For a long time, SEO and UX were considered separate disciplines with different metrics. SEO focused on rankings and link profiles; UX looked at conversions and time on page. Then Google started explicitly stating that user behaviour influences rankings.

«We want pages that show poor UX to receive a lower rank.»

— Gary Illyes, Google Search Relations, 2021

Today the connection is direct: if users leave quickly, can't find what they came for, or struggle to interact with a page — search engines notice. Low engagement → loss of positions → even less traffic. Let's look at specific UI decisions that trigger this cycle.

2. Infinite scroll and pagination

Infinite scroll is a UX solution that works great in social networks, but it destroys SEO in online stores and blogs. The problem is that content loaded dynamically on scroll often simply doesn't get indexed.

When Googlebot crawls a category page, it doesn't scroll down and doesn't wait for XHR requests. If your products only appear after scrolling, the bot sees only the first 20–30 items. Everything else is invisible to indexing.

Another problem is the "loss" of link equity. If a product is on page 5 of pagination, that's one thing. But if it has no individual URL at all and is only accessible via JS rendering, there's no way to link to it — and PageRank never reaches it.

3. Content inside sliders and tabs

Tabs and sliders are popular ways to pack a lot of information into a compact interface. The problem arises when SEO-critical content is hidden in an inactive tab on first render.

Historically, Google treated hidden content cautiously and could reduce its weight. The situation has since changed: Google officially confirmed it indexes content from hidden tabs — provided the page renders correctly. But "provided" are the key words.

Likelihood of indexation depending on content placement method (estimate based on Semrush/Ahrefs data).

If a tab is implemented via a JavaScript API request on click — some users will never see that content, and Googlebot may not wait for the render to complete. If the tab is hidden via display:none in CSS and all content is present in the DOM — the chances of indexation are much higher.

4. JavaScript-only navigation without fallback

Single Page Applications (SPAs) are convenient for users, but create serious challenges for crawlers. If the entire site navigation is implemented via history.pushState() without server-side rendering, a classic problem emerges: Googlebot sees an empty <div id="root"> instead of content.

Google can render JavaScript — but does so in a queue, sometimes with a delay of days. Other search engines (Bing, Yandex, DuckDuckGo) render JS significantly worse or not at all. If you want traffic beyond Google — a pure client-side rendering approach without SSR/SSG is a direct threat to indexation.

Even worse — menus that render only on the client side. This means the crawler can't "walk" through internal links and discover deep pages. The result: poor crawl budget, incomplete indexation, loss of link equity.

5. Pop-ups and interstitials

In 2017 Google introduced a penalty for intrusive interstitials on mobile devices. This means: if a pop-up covers the main content immediately after arriving from search — rankings drop.

What falls under the penalty:

• Subscription pop-ups appearing immediately on page load;
• Banners that take up a significant portion of the screen before the user has scrolled to any content;
• Interstitial pages before the main content ("confirm your age", "select your region").

6. Full-screen page preloaders

A full-screen preloader is an animation or overlay that covers all page content until loading is complete. From the designer's perspective it looks like a "polished launch". From usability and Googlebot's perspective — it looks like an interstitial to either wait out or ignore.

The critical question is how the preloader is implemented technically. That determines whether there's an SEO risk.

The most dangerous scenario is a preloader in HTML with position: fixed and z-index: 9999 that hides the entire page content. Googlebot receives the page, sees an overlay with a spinner animation and minimal text, while the actual content is either behind the overlay or not yet loaded at all.

A separate case is preloaders that use visibility: hidden or opacity: 0 on the <body> tag. Technically the content is in the DOM and Google can see it. But if the JS script that removes the hidden state fails or errors out — users get a white screen, which guarantees terrible behavioural metrics and indirectly harms SEO.

7. Missing mobile adaptation

Since 2019 Google has used Mobile-First Indexing: the mobile version of a page serves as the basis for indexing and ranking. If the desktop site contains detailed product descriptions while the mobile version has trimmed content or an entirely different layout, what gets indexed is what the bot sees on mobile.

Typical UX mistakes that harm mobile SEO:

1. UI elements too small to tap — Google lowers the page score for small buttons (recommended minimum: 48×48 CSS pixels).
2. Horizontal scroll — content overflows the screen; search engines treat this as a poor experience.
3. Mobile version shows less content — texts, headings, descriptions are trimmed "for compactness" and won't be indexed.
4. Different URLs for desktop and mobile without correct canonical and alternate tags — this creates a duplicate content problem.

8. Unreadable typography and low contrast

This seems like a purely aesthetic problem — but it directly affects behavioural metrics. If text is hard to read, users leave. When users leave — bounce rate climbs and time on page drops. Search engines factor in these signals.

Specific problems that Google notices:

The WCAG 2.1 standard requires a contrast ratio of at least 4.5:1 for normal text. This isn't just an accessibility question — it's a question of user retention.

9. Lazy loading without SSR

Lazy loading images is good practice for performance. But when lazy loading is applied to text content or implemented via JavaScript without server-side rendering — an SEO problem emerges.

A situation we see in real projects: a "product description" component loads via JS only when it enters the viewport. Googlebot crawls the page without scrolling, and the description — with all its keywords — never makes it into the index.

For images, use the native loading="lazy" attribute — both browsers and search engines understand it correctly. Avoid JavaScript-based lazy loading for images above the fold — this also negatively impacts LCP (Largest Contentful Paint).

10. Core Web Vitals as the bridge between UX and SEO

Since May 2021, Core Web Vitals have been an official Google ranking factor. These are three metrics, each a direct consequence of UX decisions:

1. LCP (Largest Contentful Paint) — time to render the largest element. Suffers from oversized unoptimised hero images, fonts without font-display: swap, and render-blocking CSS files.
2. INP (Interaction to Next Paint) — responsiveness to interaction. Suffers from heavy JavaScript event handlers, synchronous XHR on the main thread, and animations using top/left instead of transform.
3. CLS (Cumulative Layout Shift) — visual stability. Suffers from images without width/height attributes, dynamically injected banners, and fonts that swap out the system font after loading.

Classic design decisions that destroy CWV:

• Hero slider with 5 images at 2 MB each — LCP shoots past 6 seconds;
• Dynamic ad banner in the header appearing after 2 seconds — guaranteed high CLS;
• Complex hover animations using CSS box-shadow and filter — overloads the GPU, breaks INP;
• Custom fonts without size attributes — system and custom fonts have different dimensions, causing content to jump on load.

11. Checklist: what to audit right now

Use this list as a starting point for a UI/UX audit from an SEO perspective:

Conclusion

UI/UX and SEO are not competing disciplines. Problems arise when design decisions are made in a vacuum, without understanding how search crawlers interact with a page. A slider with beautiful animations, an in-your-face subscription pop-up, content in hidden API-loaded tabs — all of it can look modern while simultaneously being invisible to indexation.

The good news: most of the problems described here are solved at the design stage, if a technical SEO specialist is included in the process. Even better — when developers and designers understand the basic principles of crawling and rendering.