Web design and technical SEO
Website design mistakes that hurt SEO: a checklist for service sites
Written by the Top SEO Experts Team
Reviewed by Akshay VRLast updated 18 min read
Quick answer
The website design mistakes that hurt SEO most are structural. They include menus without real links, text locked in images, and content that loads only after a click. Heavy hero media, layouts that jump, intrusive popups, template titles, and redesigns that change URLs without redirects hurt too.
Key takeaway Most are easy to find in under an hour. A homepage can look finished and still be nearly invisible.
The photos are sharp, the animation is smooth, and the owner loves it. Then Search Console shows service pages that Google barely discovered, because the menu was a script and the copy was a picture.
What follows are the mistakes we look for first. For each you get what goes wrong, how to check it and what we’d do about it. Every rule carries its source, and anything that is our opinion says so.
How do you tell a design problem from a content problem?
Test whether Google can reach and read the page before judging its quality. Do the text, links and images appear in the rendered HTML?
Does the page load reasonably on a phone? If so, the problem is probably content or competition, not design.
Which three checks come first?
Run these three checks, in this order:
- Inspect a key URL in Search Console’s URL Inspection tool and read the rendered HTML.
- Open the Core Web Vitals report and the Page indexing report.
- Load the page on a real phone, on mobile data, and try to call.
Google’s documentation backs the order. Its JavaScript guide, accessed 22 Oct 2026, says Google can only see content that is visible in the rendered HTML. If the rendered view is missing something, nothing downstream matters yet.
For the broader question of how design relates to rankings, see our post on whether website design affects SEO.
The checklist at a glance
Thirteen mistakes, how to check each, and whether the rule comes from Google or from us. “Documented” means we read it in Google’s documentation on 22 Oct 2026. Details for each follow the table.
| # | Mistake | How to check | Status |
|---|---|---|---|
| 1 | Menu or buttons that are not real links | View rendered HTML; crawl for links | Documented |
| 2 | Text baked into images | Try selecting the text | Documented (rendered HTML) |
| 3 | Meaningful images set as CSS backgrounds | Inspect element | Documented |
| 4 | Content that needs a click or scroll to load | URL Inspection, rendered HTML | Documented |
| 5 | A thinner mobile version | Compare mobile and desktop | Documented |
| 6 | Oversized hero image or video | PageSpeed Insights, field report | Documented metric, our view on cause |
| 7 | Lazy-loading the first screen | Inspect hero image markup | Documented |
| 8 | No reserved space for images and embeds | Watch the page load | Our view |
| 9 | Third-party widgets that stall taps | Core Web Vitals report | Documented metric, our view on cause |
| 10 | Full-screen popups on arrival | Load on a phone | Documented as a question |
| 11 | Template titles and unclear H1s | Crawl titles and H1s | Documented |
| 12 | Weak URLs, fragments, soft 404s | Crawl, then inspect | Documented |
| 13 | Redesign without a redirect map | Compare old and new URL lists | Documented |
Which mistakes stop Google from finding or reading pages?
Mistakes 1 to 5 block discovery or indexing, and they cost the most. A page Google can’t read can’t rank for anything, however fast or stylish it is, so fix these before anything else on the list.
1. Navigation that is not made of links
Google’s link documentation, accessed 22 Oct 2026, says it can generally crawl a link only if it is an <a> element with an href attribute. It lists <span href> and <a onclick> patterns as not recommended.
The usual cause is a custom menu, or a “button” that navigates with a script. To check, open the rendered HTML and search for your service names. If they aren’t inside real anchors, the markup needs fixing.
The same page asks for descriptive anchor text and warns against empty links. An icon link with no text or alt text tells nobody where it goes. Our internal linking guide covers the wider link plan.
2. Text baked into images
A banner that says “24-hour emergency plumbing” as part of a graphic gives Google nothing to read. Because Google indexes what is visible in the rendered HTML, text inside an image is not part of the page text.
Our test is quick. Drag a cursor across the words, and if nothing highlights, count them as missing. Rebuild the headline as real text styled with CSS, and keep the image as decoration with alt text that describes it.
Quick check Drag a cursor across your main headline. If nothing highlights, count those words as missing.
3. Meaningful images set as CSS backgrounds
Google’s image guidance, accessed 22 Oct 2026, says it does not index CSS images and recommends <img> elements with a src attribute. Alt text, it adds, is the most important attribute for image metadata.
Decorative backgrounds are fine as CSS. The mistake is parking a team photo or a finished-job photo in the background layer because it was easier to style. Move those to <img> tags with useful alt text and descriptive file names.
4. Content that waits for a click or scroll
Google’s lazy-loading documentation says content should load whenever it is visible in the viewport, and not depend on user actions such as scrolling or clicking. Its mobile-first guidance says not to lazy-load primary content upon user interaction, because Google does not load content that requires swiping, clicking or typing.
This catches “load more” buttons, tabs that fetch their text on click, and review or FAQ widgets that inject copy later. Check with URL Inspection: if the text isn’t in the rendered HTML, it isn’t indexable.
Watch out Google does not load content that needs swiping, clicking or typing. Keep the copy in the HTML when the page first loads.
Accordions are different. Google’s spam policies say accordions, tabs, sliders and tooltips do not violate its policies. Separately, Google’s lazy-loading guidance says content should not depend on user actions such as clicking to load.
5. A mobile version with less in it
Google says it uses the mobile version of a site for indexing and ranking. Its mobile-first indexing documentation asks that the mobile site contain the same content as desktop. It asks for the same image URLs, alt text and robots meta tags too.
Mobile pages get trimmed to fit small screens, and copy is the first thing to go. Put the two versions side by side.
Service descriptions, FAQs, process steps and links should all survive. If the call button vanishes on phones, you have a revenue problem before you have an SEO one.
Which mistakes slow the page or make it jump?
Mistakes 6 to 9 hurt loading, stability and responsiveness. Google’s Core Web Vitals documentation says to strive for these targets:
| Metric | Google’s target |
|---|---|
| Largest Contentful Paint | Within 2.5 seconds |
| Interaction to Next Paint | Under 200 milliseconds |
| Cumulative Layout Shift | Below 0.1 |
It names no weight, so read these as a floor.
Definition Largest Contentful Paint measures how long the biggest item on the screen takes to show. Interaction to Next Paint measures how fast the page reacts to a tap. Cumulative Layout Shift measures how much the page jumps while it loads.
Google’s page experience documentation adds that a good score does not guarantee top rankings. It also says chasing a perfect score for SEO alone may not be the best use of your time.
Our post on PageSpeed score versus Core Web Vitals explains how to read the numbers. The causes below are our experience.
6. An oversized hero image or video
The biggest element on a service homepage is usually the hero. When it’s a multi-megabyte photo or a background video, it often becomes the Largest Contentful Paint element, and phones on mobile data feel that most.
Our usual fix: serve a still image sized for its display slot, move any video lower on the page, and test on a phone. We have no universal file-size target to hand you, and we won’t make one up.
7. Lazy-loading the first screen
Lazy-loading helps below the fold, and Google says not to add it to content likely to be immediately visible. A lazy-loaded hero image delays the one thing the visitor came to see.
Open the markup of the top image. If the template lazy-loads every image by default, exclude the first one or two. It’s a small change and one of the cheapest fixes here.
8. No reserved space for images and embeds
When an image, map or video loads without reserved dimensions, the text below it jumps, and that jump is what Cumulative Layout Shift measures. Late banners, cookie bars and web fonts that swap in at a different size do the same thing.
Give images a width and height or an aspect ratio, reserve a box for each embed, and place banners where they push nothing. The fastest check is to watch the page load on a throttled connection.
9. Third-party widgets that stall taps
Chat tools, review carousels, schedulers, tracking tags and animation libraries all run scripts. Too many of them keep the page busy when a visitor taps, which is what Interaction to Next Paint measures.
List every script on a template and ask what each one earns. Cut the ones nobody owns. For the ones you keep, load them after the main content wherever the tool allows it.
Build a website search engines can trust.
Not sure where to start? Get a plan for your own business.
Which mistakes confuse users and search systems?
The last group is about clarity. A page can load fast and still send mixed signals through a popup, a vague title or an unreadable URL. Mistakes 10 to 12 are cheap to fix and easy to miss in a design review.
10. Full-screen popups on arrival
Google’s page experience documentation lists “Do your pages avoid using intrusive interstitials?” as a question to ask. Its SEO starter guide says ads and interstitials should not prevent users from reading your content.
The documentation states no ranking penalty size, so we won’t invent one.
Our view A full-screen offer that covers the page on arrival, especially on a phone, loses more calls than it wins sign-ups. Delay it, or swap it for an inline form.
11. Template titles and unclear H1s
Google’s title link guidance, accessed 22 Oct 2026, says every page needs a title with distinct text that describes the content of the page. It advises avoiding vague labels such as “Home.” It notes Google may rewrite a title that does not reflect the page.
Themes often ship one title pattern for every service page. Crawl the site and sort by title: duplicates are the mistake.
Google also suggests putting the title text in the first visible H1. For homepages specifically, see homepage SEO for service businesses.
12. Weak URLs, fragments and soft 404s
Google’s URL documentation says to use readable words rather than long IDs and not to use fragments to change page content. Its JavaScript guidance says client-side routed apps can produce soft 404s unless error pages return a real 404 or carry noindex.
If your builder produces /#/services/roofing or ?id=4837 URLs, change the routing. Then request a made-up URL and confirm it returns a real 404 status. Our JavaScript SEO guide goes through the checks.
What goes wrong in a redesign?
The most expensive design mistake is changing URLs without a redirect map. Google tells site owners to map every old URL to a new one and use permanent server-side redirects. It also says to avoid chains and expect temporary ranking fluctuation during a move.
- Map every old URLSend each old URL to a new one.
- Use permanent redirectsUse server-side redirects, not temporary ones.
- Avoid chainsDo not send a redirect through several hops.
- Expect fluctuationTemporary ranking changes are normal during a move.
Google’s site move documentation, accessed 22 Oct 2026, also gives two warnings. Do not redirect many old URLs to one irrelevant destination. Keep redirects for as long as possible, generally at least one year.
13. Redesign without a redirect map
A redesign usually changes more than looks. Page names get shortened, services get merged and the blog moves, and each of those changes can orphan a page that ranks.
Before launch, export the old URL list from your sitemap and Search Console and decide where each URL goes. After launch, compare the old and new sitemaps line by line. Our redirect mapping guide and website migration SEO guide walk through it.
Two related launch errors
Two launch errors are common enough to name. One is a staging site left indexable, which our post on a staging site that got indexed covers. The other is a blanket noindex carried from staging into production, and our noindex header check explains how to catch it.
Watch out Be wary of robots.txt as the fix. Google says robots.txt is not a mechanism for keeping a page out of Google.
A disallowed page can still be indexed if linked from other sites. Use noindex or password protection instead.
What does the evidence not show?
It does not show how much any of these mistakes costs in rankings. Google documents what it can read, crawl and index. It gives thresholds for Core Web Vitals, but it does not publish weights or the size of any penalty.
We also have no published before and after numbers from our own builds for this post, and we will not imply any. When we add lab data from a build, it will carry the tool, the date and the word “lab.”
Two more limits apply. Field data in the Core Web Vitals report is a trailing 28-day view, so a fix can take weeks to show. And rankings move for many reasons, so a redesign that fixes five items and loses traffic does not prove the fixes were wrong.
In what order should you fix them?
Fix reachability first, then speed and stability, then clarity, then polish. The order follows the damage: pages Google can’t read cost the most, a slow hero costs some, and a vague title costs the least.
- Mistakes 1 to 5: make links, text and images readable in the rendered HTML, on mobile too.
- Mistake 13 and the launch errors: protect URLs and indexing before any release.
- Mistakes 6 to 9: reduce weight, reserve space, trim scripts.
- Mistakes 10 to 12: popups, titles, URLs.
Here is the same order as a diagram.
- Make pages readableFix links, text and images in the rendered HTML, on mobile too.
- Protect URLs and indexingHandle redirects and launch errors before any release.
- Speed and stabilityReduce weight, reserve space, trim scripts.
- ClarityFix popups, titles and URLs.
What if time is short?
Two rules help when time is short, and both are our view. If the live site shows any of mistakes 1 to 5, stop other work until they are fixed, because everything else rests on them.
If you can only change one speed item this month, pick the hero, since it is the element visitors wait for.
Key takeaway Fix what stops Google from reading the page before anything else. Speed, popups and titles come after links, text and images are readable.
A 30-minute triage for a service site
This is the routine we’d run on a homepage and one service page, with rough timings that are our own estimates.
- Minutes 0 to 10: inspect both URLs in URL Inspection. Confirm the headline, service names, phone number and main links appear in the rendered HTML.
- Minutes 10 to 15: load both on a phone. Check that the same copy and a tappable call button are there.
- Minutes 15 to 25: read the Core Web Vitals report and note which URL groups are not Good.
- Minutes 25 to 30: view source on the hero image and the first title tag. Look for lazy-loading on the hero and a title that repeats across pages.
- Minutes 0 to 10Inspect both URLs and read the rendered HTML.
- Minutes 10 to 15Load both on a phone and check the call button.
- Minutes 15 to 25Read the Core Web Vitals report.
- Minutes 25 to 30Check the hero image and the title tag.
Write down what you find, mapped to the numbered mistakes above. That list becomes the work order for a designer or developer.
How to read the triage results
Each step in the triage points back to a group of mistakes. Match what you found to the group, then fix in the order above.
| What the triage shows | Go to |
|---|---|
| Step 1 shows missing copy or links (a reachability problem) | Mistakes 1 to 4 first |
| Step 2 shows less copy or no tappable call button on the phone | Mistake 5 |
| Step 3 shows URL groups that are not Good | Mistakes 6 to 9 |
| Step 4 shows a lazy-loaded hero | Mistake 7 |
| Step 4 shows a title that repeats across pages | Mistake 11 |
For a build where these rules are part of the brief, see our website design and development service.
The Core Web Vitals guide covers the speed items in more depth. Our post on website accessibility and SEO overlaps on alt text and structure.
FAQ
What is the most common website design mistake for SEO?
In our experience it is navigation and content that Google cannot reach. Examples are menus built without real links, text stored in images, or copy that loads only after a click. Google documents that it follows a elements with an href and indexes content visible in the rendered HTML, so check these first.
Can a slow hero image really hurt SEO?
It can hurt the user experience and the Largest Contentful Paint metric, which Google says to keep within 2.5 seconds. Google gives no weight for that metric and says relevance can win despite a poor page experience. Fix it for visitors first, and treat any ranking effect as a bonus.
Are accordions and tabs a mistake?
Not by themselves, since Google’s spam policies say accordions, tabs, sliders and tooltips are not hidden text violations. The mistake is loading the text only after a click or swipe, because Google does not interact with the page. Keep the text in the HTML and let design collapse it.
Do popups hurt SEO?
Google’s page experience documentation asks whether your pages avoid intrusive interstitials. Its starter guide says advertisements should not become overly distracting or prevent users from reading your content. The documentation does not name a penalty size, so our advice is to avoid full-screen popups on arrival, especially on phones.
Is a redesign the riskiest time for SEO?
Usually, yes. Google tells site owners to map every old URL to a new one, use permanent server-side redirects, avoid chains, and expect temporary ranking fluctuation. Redesigns that change URLs, titles and links in one release give you many things to break and little to compare.
How do I find these mistakes on my own site?
Start with Search Console: inspect a key URL to see the rendered HTML, and read the Core Web Vitals and Page indexing reports. Then open the site on a phone and crawl it for empty links, repeated titles and missing alt text. Most items on this list show up within an hour.
Run the website SEO checker on your homepage, then Get Your Organic Growth Plan.
Sources
- JavaScript SEO basics, Google Search Central, accessed 22 Oct 2026
- SEO link best practices for Google, Google Search Central, accessed 22 Oct 2026
- Google image SEO best practices, Google Search Central, accessed 22 Oct 2026
- Fix lazy-loaded content, Google Search Central, accessed 22 Oct 2026
- Mobile-first indexing best practices, Google Search Central, accessed 22 Oct 2026
- Spam policies for Google web search, Google Search Central, accessed 22 Oct 2026
- Core Web Vitals and Google Search results, Google Search Central, accessed 22 Oct 2026
- Understanding page experience in Google Search results, Google Search Central, accessed 22 Oct 2026
- Influence your title links in search results, Google Search Central, accessed 22 Oct 2026
- URL structure best practices for Google, Google Search Central, accessed 22 Oct 2026
- Site moves with URL changes, Google Search Central, accessed 22 Oct 2026
- Introduction to robots.txt, Google Search Central, accessed 22 Oct 2026
- SEO Starter Guide, Google Search Central, accessed 22 Oct 2026
- Core Web Vitals report, Search Console Help, accessed 23 October 2026
Build a website search engines can trust.
Not sure where to start? Get a plan for your own business.
