--- title: "Design pages that users can navigate and search engines can index" description: "Use Core Web Vitals, information architecture, crawlable navigation, content patterns, and accessibility to design pages that serve users and rank." canonical: "https://scalewithsearch.com/articles/seo-for-ux-designers" date: "2026-03-20" modified: "2026-09-25" --- ## Site navigation - [Scale With Search](https://scalewithsearch.com/) - Real estate - Real estate - [Real estate](https://scalewithsearch.com/for/real-estate) - Work - Start here - [Send your brief](https://scalewithsearch.com/work#send-your-brief) - [Prepare your six-question brief](https://scalewithsearch.com/work#prepare-your-six-question-brief) - Build - [Site build, content library with SEO, signal desk](https://scalewithsearch.com/work) - For your business - Trades and home services - [Auto body and collision shops](https://scalewithsearch.com/for/auto-body-and-collision-shops) - [Foundation and home repair contractors](https://scalewithsearch.com/for/foundation-and-home-repair) - [Garage door and fencing contractors](https://scalewithsearch.com/for/garage-door-and-fencing-contractors) - [HVAC contractors](https://scalewithsearch.com/for/hvac-contractors) - [Janitorial and commercial cleaning companies](https://scalewithsearch.com/for/janitorial-and-commercial-cleaning) - [Locksmiths](https://scalewithsearch.com/for/locksmiths) - [Moving companies](https://scalewithsearch.com/for/moving-companies) - [Pest control companies](https://scalewithsearch.com/for/pest-control-companies) - [Plumbing and electrical contractors](https://scalewithsearch.com/for/plumbing-and-electrical-contractors) - [Restoration and water or fire damage companies](https://scalewithsearch.com/for/restoration-and-water-fire-damage) - [Roofing companies](https://scalewithsearch.com/for/roofing-companies) - [Towing companies](https://scalewithsearch.com/for/towing-companies) - [Tree services and landscaping companies](https://scalewithsearch.com/for/tree-services-and-landscaping) - [Solar installers](https://scalewithsearch.com/for/solar-installation) - [General contractors](https://scalewithsearch.com/for/general-contractors-and-construction) - [Paving, concrete, and flooring contractors](https://scalewithsearch.com/for/paving) - Practices and professional services - [Bookkeeping and tax practices](https://scalewithsearch.com/for/bookkeeping-and-tax-practices) - [Dental practices](https://scalewithsearch.com/for/dental-practices) - [Family and criminal defense law firms](https://scalewithsearch.com/for/family-and-criminal-defense-law-firms) - [Med spas and aesthetics practices](https://scalewithsearch.com/for/med-spas-and-aesthetics) - [Personal injury law firms](https://scalewithsearch.com/for/personal-injury-law-firms) - [Veterinary clinics](https://scalewithsearch.com/for/veterinary-clinics) - [Gyms and fitness studios](https://scalewithsearch.com/for/fitness) - [Therapy and outpatient health practices](https://scalewithsearch.com/for/therapy-and-outpatient-health) - [Medical billing companies](https://scalewithsearch.com/for/medical-billing) - [Insurance agencies](https://scalewithsearch.com/for/insurance-agencies) - [Financial advisors](https://scalewithsearch.com/for/financial-advisors) - [Property management companies](https://scalewithsearch.com/for/property-management) - [Recruiting and staffing agencies](https://scalewithsearch.com/for/recruiting-and-staffing) - [Architects and interior designers](https://scalewithsearch.com/for/architects-and-interior-designers) - [Logistics and supply chain companies](https://scalewithsearch.com/for/logistics-and-supply-chain) - Agencies, MSPs, and manufacturing - [IT and managed service providers](https://scalewithsearch.com/for/it-and-managed-service-providers) - [Machine shops and precision manufacturers](https://scalewithsearch.com/for/machine-shops-and-precision-manufacturing) - [Marketing agencies and freelancers](https://scalewithsearch.com/for/marketing-agencies-and-freelancers) - [SEO agencies and consultants](https://scalewithsearch.com/for/seo-agencies-and-consultants) - [Small manufacturers and fabricators](https://scalewithsearch.com/for/small-manufacturers-and-fabricators) - Restaurants, shops, studios, and nonprofits - [Restaurants and hospitality businesses](https://scalewithsearch.com/for/restaurants-and-hospitality) - [Retail stores and ecommerce sellers](https://scalewithsearch.com/for/retail-and-ecommerce) - [Photographers, event planners, and travel agents](https://scalewithsearch.com/for/photographers) - [Churches and nonprofits](https://scalewithsearch.com/for/churches-and-nonprofits) - [All industries](https://scalewithsearch.com/for/) - Learn - For your office - [Office job guides](https://scalewithsearch.com/guides/) - [Browser calculators](https://scalewithsearch.com/tools/) - Start here - [How it works](https://scalewithsearch.com/how-it-works) - [Free Starter Kit](https://scalewithsearch.com/kit/business-memory-starter-kit.zip) - [Synthetic specimen](https://scalewithsearch.com/specimen/working-session-specimen.zip) - Guides - [The Complete Guide to Business Memory for AI Agents](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [The Complete Small-Business Guide to AI Agent Governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [The Complete Guide to Leaving Vendor AI Memory](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - Articles by cluster - [Business memory](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [Agent governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [Migration and ownership](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - For machines - [llms.txt](https://scalewithsearch.com/llms.txt) - [llms-full.txt](https://scalewithsearch.com/llms-full.txt) - [Machine view](https://scalewithsearch.com/?view=machine) - Company - Evidence - [Proof](https://scalewithsearch.com/proof) - Company - [About](https://scalewithsearch.com/about) # Design pages that users can navigate and search engines can index. A UX designer ships a clean product page: one headline, a large image, and a buy button. The SEO team asks for 400 words of text, a keyword in the heading, and a crawlable menu. The designer sees clutter. The SEO team sees a page that nobody will find. Many designers meet SEO as a constraint. It arrives as requests for more text, keyword rules that bend natural copy, and technical requirements that conflict with the design. That adversarial relationship produces sites that serve neither users nor search engines well. The two disciplines share the same goals. Both help people find relevant information fast and remove friction on the way to a goal. This article shows where design choices decide search outcomes, and how to meet both needs in one design. ## Treat Core Web Vitals as UX metrics Core Web Vitals turn "good UX" into measurable targets, and they are also a Google ranking signal. There are three metrics: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). INP [replaced First Input Delay](https://web.dev/blog/inp-cwv-march-12) as the responsiveness metric in March 2024. | Metric | What the user feels | Target | |---|---|---| | LCP | How fast the main content appears | 2.5 seconds or less | | INP | How fast the page reacts to taps, clicks, and key presses, across the whole visit | 200 milliseconds or less | | CLS | Whether the layout jumps while the user reads or taps | 0.1 or less | Slow LCP makes a site feel unresponsive, and people leave before they engage. To improve it, take these steps: - serve images in WebP or AVIF; - preload hero images and fonts; - lazy-load images below the fold; - speed up server responses with caching and a CDN. Poor INP makes an interface feel broken. A user taps a button, nothing happens, and they tap again or give up. To improve it, take these steps: - split JavaScript and defer scripts that are not essential; - move heavy computation off the main thread into web workers; - apply progressive enhancement so basic functions work before JavaScript loads. Layout shifts cause accidental taps: the user aims for one element and the layout moves another one under the finger. To prevent them, take these steps: - set explicit dimensions on images and embeds; - use `font-display: swap` with fallback fonts sized to match; - do not insert content above existing elements; - hold the layout with skeleton screens during loading. ### Build performance into the design system Put Core Web Vitals rules into the component library. Give each component a size budget, a required loading state, and a pattern that prevents layout shift. A designer who uses compliant components produces a fast page by default. No optimization pass is needed after the design is done. Measure real users, not only lab tests. Real user monitoring (RUM) through Google Analytics 4, SpeedCurve, or Sentry records experience across real devices and networks. Lab throttling does not reproduce the patchy mobile connection a real user has on a train. The [Core Web Vitals developer guide](/articles/core-web-vitals-developer-guide) covers the measurement setup. ### Make the business case for speed Quantify the effect. Calculate the revenue from organic traffic, then model the effect of a faster page on conversion. Measure the conversion rate before and after each speed release, so the model rests on your own data. Show stakeholders the competitor sites that load faster than yours. Present speed as a ranking factor and a competitive requirement. ## Design information architecture for people and crawlers Information architecture decides how people move through a site and how search engines understand the relationships between pages. Keep the hierarchy shallow. Every important page should be within three clicks of the homepage. A page four or more clicks deep is harder to find and signals low importance to search engines. Reduce category nesting, cross-link related content, and feature important deep pages in navigation or on the homepage. Use mega menus for large sites. A mega menu shows the category hierarchy, subcategories, and featured content at once. Users see what exists without a click through each level. The links also spread ranking strength to important pages. Add breadcrumbs. A trail such as Home > Category > Subcategory > Page orients users and lets them move up a level. Add `BreadcrumbList` markup so the trail can appear in search results. Use the footer for pages that matter but do not fit the main navigation. Examples are location pages, service area pages, or a resource directory. Footer links are crawlable and do not clutter the primary interface. Study site search queries. They show what users expect to find but cannot. They show the words users use for things you name differently, and the categories that deserve more prominence. Site search data exposes the gap between the intended path and real behavior. ## Design for mobile first Google uses mobile-first indexing. The mobile version of a page decides its rankings, even for desktop searches. Mobile UX is search visibility, not only mobile satisfaction. [Mobile-first design for SEO](/articles/mobile-first-design-seo) covers the full checklist. Keep content the same on every device. If the mobile version drops information that desktop shows, Google indexes the smaller version. A responsive layout that changes arrangement but keeps the content avoids that loss. Size touch targets at least 44 by 44 pixels, with enough space between them to prevent mistaken taps. Small targets create errors and accessibility problems. Make text readable without zoom. Use at least 16 pixels for body text and a line height of at least 1.5 times the font size. Meet a contrast ratio of at least 4.5 to 1 for normal text. Use progressive disclosure to reduce load on small screens. Show the essential information first and put details in accordions, expandable sections, or "Read more" patterns. Google indexes content inside these patterns. Still, keep visible the information that tells a visitor they are on the right page. Avoid mobile-hostile elements. A pop-up that covers the content breaks Google's guidance on intrusive interstitials and blocks what the user came to read. Make every modal easy to dismiss. Keep fixed headers, footers, and floating calls to action small. ## Build navigation that crawlers can follow Navigation built for people can block crawlers when it depends on JavaScript or on patterns that search engines handle poorly. [Navigation design for SEO](/articles/navigation-design-seo) covers these patterns in more detail. Build navigation in semantic HTML: `