Web design and SEO essentials for a small business website

Web design and SEO essentials, in short: mobile-first, responsive design, a logical site structure with clear navigation, fast page speed and good Core Web Vitals, on-page basics done properly (titles, meta descriptions, one H1, a sensible heading order), semantic HTML with structured data, compressed and properly labelled images, and accessible markup that works for people and search engines alike. Get these right while you're building, not after, and most of the SEO groundwork is already done before you've written a single blog post.

I build both sides of this for a living, the design and the SEO underneath it, so this is the checklist I actually work through on every build, not a generic list pulled from somewhere else. Here's what matters, and why, in the order I'd tackle it.

Why web design and SEO aren't separate jobs

A lot of small business websites get designed first, then handed to someone else to "do the SEO" afterwards. That's backwards. By the time a site is designed and built, decisions that matter for search, like heading structure, page speed and how pages link to each other, are already locked in.

I'll be honest, I didn't always see it that way. When I first started building websites, I thought the job was done once a site looked right and was live: build it, put it up, move on. I hadn't reckoned on how much work actually goes into getting a site found at all, or how many separate things, structure, speed, content, links, have to line up before anyone searching actually sees it. Learning that the hard way is a big part of why I don't treat web design and SEO as two separate jobs now.

Treating them as one job from the start is why I offer web design and SEO groundwork together rather than as a bolt-on. It's genuinely less work overall, and it means nothing has to be rebuilt six months later to fix a problem that was baked in on day one.

Start with mobile-first, responsive design

Google evaluates the mobile version of your site, not the desktop one, for how it ranks. This is what's known as mobile-first indexing, and it's been the default for years now. Most of your visitors will also be on a phone before they're on a laptop, so a site that's designed mobile-first rather than "shrunk down" afterwards tends to work better for people and for search at the same time.

• Design the small screen first, then expand up, not the other way round
• Touch targets (buttons, links) should be comfortably tappable, not fiddly
• Text needs to be readable at a normal phone zoom level, no pinching required
• Test the actual site on an actual phone before calling it finished

None of this is optional any more. A site that only really works on desktop is designing itself out of most of its own traffic before a single visitor arrives.

Get your site structure and navigation right

Search engines find your pages by following links, so how your site is structured directly affects what gets discovered and how it's understood. A small business site doesn't need anything complicated, it needs to be logical.

• Keep the main pages reachable from the navigation in one click
• Use short, readable URLs that describe the page, not a string of IDs
• Link between related pages using descriptive text, never "click here"
• Every page should be reachable from at least one other page on the site

Flat is better than deep. If a page is buried four or five clicks below the homepage, search engines have to work harder to find it and understand how important it is, and so does anyone trying to navigate there themselves. For a five-page small business site this usually isn't hard to get right, it just needs deciding properly at the start rather than growing organically as pages get bolted on later.

None of this is glamorous. It's also the part most templated sites get wrong, because a generic theme doesn't know how your business actually fits together.

Page speed and Core Web Vitals

Core Web Vitals measure how fast a page loads, how quickly it responds, and whether it jumps around while loading (technically Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift). All three are confirmed ranking factors, and all three are decided by design and build choices rather than content.

The single biggest speed win on most small business sites is just not shipping code you don't need. A hand-coded page with no framework overhead starts miles ahead of a page-builder site before you've optimised anything.

Heavy images, unnecessary scripts, and fonts loaded from five different places are the usual culprits. So are things that look impressive in a design mockup and turn out to be genuinely heavy in practice: autoplay video backgrounds, carousel sliders loading several full-size images at once, and third-party embeds that quietly load their own scripts on top of yours. Fixing them is mostly a matter of discipline during the build, not a specialist tool afterwards.

On-page SEO basics: titles, descriptions, headings

This is the part most people mean when they say "SEO", and it's genuinely simple once the structure above is in place.

• Title tags: around 50 to 60 characters, with the main keyword near the start
• Meta descriptions: around 150 to 160 characters, stating the benefit and a soft call to action
• One H1 per page, using the page's main keyword naturally, not stuffed in
• H2s and H3s that follow a logical order, so the page reads like an outline

Every one of those should read naturally to a person first. If a sentence sounds like it was written for a search engine, rewrite it until it sounds like it was written for a customer instead.

It's worth doing this for every page on the site, not just the homepage. A five-page small business site with four blank meta descriptions is leaving an easy win on the table, since Google will otherwise generate its own snippet from whatever text it finds first on the page, which is rarely the version you'd have chosen yourself.

Semantic HTML and structured data

Semantic HTML just means using the right tag for the job: a <nav> for navigation, a <button> for something clickable, proper heading tags instead of bold text pretending to be a heading. It's one of the simplest wins in web design and SEO, and also one of the most commonly skipped.

On top of that, structured data (JSON-LD schema markup) tells search engines explicitly what a page is, whether that's a business, an article or a set of FAQs, rather than leaving them to guess. This page carries Article, FAQ and breadcrumb schema for exactly that reason, on top of the business schema that runs across the whole site.

Semantic markup and structured data also do a lot of the same job as accessibility markup, which is worth knowing before the next section: get one right and you're most of the way to getting the other right too.

Image optimisation

Images are usually the heaviest thing on a page, and the easiest to get wrong. The rules are the same whether it's a hero photo or a product shot:

• Compress every image before it goes anywhere near the site, ideally under 200 KB
• Use a descriptive, hyphenated filename, not IMG_4021.jpg
• Write real alt text that describes the image, not just the keyword crammed in
• Set width and height attributes so the page doesn't jump while images load
• Lazy-load anything below the fold

Both photos on this page were compressed and resized before upload for exactly this reason, they're each under 200 KB despite being full-width images.

Accessibility is an SEO essential too

Accessibility and SEO aren't the same thing, but the overlap between them is almost total. Screen readers and search engine crawlers rely on a lot of the same signals: proper heading order, descriptive alt text, semantic landmarks like <nav> and <main>, links with meaningful text instead of "click here", and a page that still makes sense with the styling stripped away. Google doesn't rank a page higher purely because it's accessible, but building accessibly and building for search use almost exactly the same checklist, so there's very little reason not to do both at once.

• Every image needs real alt text, not just for SEO but for anyone using a screen reader
• Interactive elements need visible focus states for people navigating by keyboard, not just a mouse
• Colour contrast needs to hold up for anyone with low vision, not just look fine on a designer's monitor
• A skip link at the top of the page, like the one on this page, lets keyboard and screen reader users jump straight to the content

None of this needs to be an afterthought bolted on at the end, either. Design it in from the start and it costs almost nothing extra. Retrofit it later and it's basically the same problem as retrofitting SEO: harder, slower, and more expensive than doing it properly the first time.

Write for the person searching, not just the algorithm

There's a lot of AI-generated content online now that technically mentions the right keywords and still reads badly, because whoever published it didn't understand what actually makes a page useful. AI tools aren't the problem. Publishing without knowing what a good page needs is the problem, whether a human or a tool wrote the draft.

Answer the actual question in the first couple of sentences. Then back it up with detail. If you wouldn't be satisfied reading your own page as the person who searched for it, neither will Google, eventually.

Good content and good design are doing the same job here, not two different ones. A page that answers the question but is dense, cluttered or hard to scan loses people fast, and how long someone actually stays on a page is something search engines pick up on indirectly, through things like whether people bounce straight back to the results and try a different site instead. That's not a reason to over-design a page or add anything decorative. It's a reason to make sure the content and the layout around it are both doing the one job: making the answer easy to find and easy to act on.

A quick self-audit checklist

If you want to check your own site against everything above, run through this before calling a build finished:

• Site works and reads well on a phone before anything else is checked
• Every page is reachable within a couple of clicks of the homepage
• Images are compressed, sensibly named, and have real alt text
• Every page has its own title tag and meta description, none left blank
• One H1 per page, with a logical H2/H3 order underneath it
• Structured data is in place for the page types that need it
• Keyboard focus states and colour contrast have actually been tested, not just assumed
• The site loads fast on a normal phone connection, not just on office wifi
• Internal links use descriptive text, not "click here" or "read more"
• Content on every page actually answers what someone searching would want to know

If more than two or three of those are missing, that's where I'd start.

SEO doesn't stop at launch

A site that's well built on launch day still needs looking after. Content ages, links break, and search engines reward sites that keep getting updated over ones that go quiet. That's the whole reason the on-page SEO groundwork is built into every site I make, with an optional monthly plan afterwards to keep it maintained and optimised rather than left to drift.

If you're planning a new build or want an honest look at what your current site is missing, get a free quote and I'll talk you through it properly rather than sending a generic audit.