Website Development: The Complete Local Business Website & SEO Guide for 2026

Now the fun begins! We will build your professional website using AI. This phase covers initial website structure, homepage design, service pages, location pages, and design refinement. Make sure you have completed Phase 1: environment setup and Phase 2: keyword research before starting. For the full series overview, see the local SEO guide for small business owners.

Time Estimate: 3-6 hours (spread over multiple sessions)

Understanding the Build Process

We will use an iterative approach:

1. 1. Foundation: Create basic structure and routing
2. 2. Content: Add text and information to pages
3. 3. Design: Make it look professional
4. 4. Optimization: Refine for conversions

Important

Do not try to make it perfect on the first pass! We will iterate and improve throughout the process. Vercel's deployment workflow makes it easy to preview each change before it goes live.

Before we code, let's plan the structure of your website. The Next.js documentation is a good reference for understanding how the App Router organizes files and routes.

Plan Your Site Structure

Core Pages:

• Homepage (/)
• About (/about)
• Contact (/contact)
• Service Area (/service-areas)

Service Pages (/services/):

• /services/service-1
• /services/service-2
• /services/service-3
• [One page per service from your keyword research]

Location Pages (/locations/):

• /locations/city-1
• /locations/city-2
• /locations/city-3
• [One page per city from your keyword research]

Create Site Structure with Claude Code

Using Claude Code (Option A):

claude code "Create the initial site structure for my local business website.

Business Info:
- Type: [YOUR BUSINESS TYPE - e.g., residential plumbing]
- Name: [YOUR BUSINESS NAME]
- Phone: [YOUR PHONE]
- Primary Location: [YOUR CITY]

Services (create a page for each):
[LIST YOUR SERVICES]

Service Areas (create a page for each):
[LIST YOUR CITIES]

Requirements:
1. Use Next.js 15 App Router structure
2. Create necessary folders and files in /app directory
3. Use TypeScript
4. Include proper route structure
5. Add basic layout with navigation
6. Create reusable components

Make sure navigation links to all pages."

Type 'y' to confirm and let Claude Code create all the files.

Expected File Structure:

app/
├── page.tsx (homepage)
├── about/
│   └── page.tsx
├── contact/
│   └── page.tsx
├── services/
│   ├── page.tsx (overview)
│   ├── [service-1]/page.tsx
│   ├── [service-2]/page.tsx
│   └── [etc.]
├── locations/
│   ├── page.tsx (overview)
│   ├── [city-1]/page.tsx
│   ├── [city-2]/page.tsx
│   └── [etc.]
└── components/
    ├── Header.tsx
    ├── Footer.tsx
    ├── Navigation.tsx
    └── CallToAction.tsx

The homepage is your most important page. It must immediately communicate what you do and drive conversions. If you are working with Claude Code, you can generate the entire homepage in a single prompt.

Homepage Requirements

Required Content:

• Business name and tagline
• Primary service area
• Phone number (click-to-call)
• List of main services (3-6)
• Years in business
• Certifications and licenses
• 3-5 customer testimonials
• Trust badges (insured, licensed, etc.)

Build Homepage with Claude Code

Using Claude Code:

claude code "Build a professional homepage for my local service business.

Business Information:
- Business Name: [YOUR NAME]
- Tagline: [YOUR TAGLINE]
- Service Type: [YOUR INDUSTRY]
- Primary Location: [YOUR CITY]
- Service Areas: [LIST CITIES]
- Phone: [PHONE NUMBER]
- Years in Business: [NUMBER]
- Licenses: [LICENSE NUMBERS]

Services (main 4-6):
1. [Service 1 with brief description]
2. [Service 2 with brief description]
3. [Service 3 with brief description]
4. [Service 4 with brief description]

Design Requirements:
- Modern, clean, professional aesthetic
- Swiss spa / luxury hotel vibe
- Minimalist design
- Mobile-first responsive
- Fast loading
- No emojis - use Lucide React icons instead
- Color scheme: [YOUR COLORS or 'choose professional colors']

Structure:
1. Header with logo and nav
2. Hero section with compelling headline and CTAs
3. Services section with grid of main services
4. Why Choose Us section
5. Service Areas section
6. Social Proof with testimonials
7. Call-to-Action section
8. Footer with navigation and contact info

Replace the current /app/page.tsx with this new homepage."

Test and Iterate:

Open your site in the browser and check:

• ✓ Does it look professional?
• ✓ Is the phone number prominent?
• ✓ Does it work on mobile? (open DevTools, toggle device toolbar)
• ✓ Are CTAs clear and visible?
• ✓ Does navigation work?

Each service page should be thorough and keyword-optimized.

Service Page Content Template

Required Sections:

1. 1. Hero section with service name and CTA
2. 2. Service overview (what it is, what is included)
3. 3. Benefits (why customers need this service)
4. 4. Process (how it works, step-by-step)
5. 5. Pricing information (or "Free Quote" CTA)
6. 6. Common problems solved
7. 7. FAQ section (6-10 questions)
8. 8. Service areas served
9. 9. Related services
10. 10. Strong CTA (call now, get quote)

Create Service Pages with Claude Code

For EACH service, run this prompt:

claude code "Create a comprehensive service page for [SERVICE NAME].

Service Information:
- Service Name: [SERVICE NAME]
- Primary Keyword: [KEYWORD from your research]
- Secondary Keywords: [LIST 3-5 KEYWORDS]
- Target URL: /services/[service-slug]

Service Details:
- What it includes: [DESCRIBE SERVICE]
- Common issues it solves: [LIST PROBLEMS]
- Process/how it works: [STEPS]
- Typical timeline: [TIME]
- Pricing: [PRICE RANGE or 'Free Quote']

Create a detailed, SEO-optimized service page with:
1. HERO SECTION with H1 including primary keyword
2. SERVICE OVERVIEW (200-300 words)
3. BENEFITS SECTION (4-6 key benefits with icons)
4. HOW IT WORKS (step-by-step process)
5. COMMON PROBLEMS SOLVED (4-6 specific problems)
6. FAQ SECTION (8-10 FAQs specific to this service)
7. SERVICE AREAS (where we provide this service)
8. RELATED SERVICES (3-4 related services with links)
9. FINAL CTA SECTION

Design: Professional, clean layout with Lucide React icons
SEO: 1000-1500 words total, proper heading hierarchy

Create the file at: app/services/[service-slug]/page.tsx"

Pro Tip

Do 2-3 services, test them, then continue with the rest. Do not try to build everything at once!

Location pages are critical for local SEO and work hand in hand with your Google Business Profile. Each one should be unique and locally relevant.

Important

Do not just copy-paste the same content for each city! Google penalizes "doorway pages." Each location page must have unique, locally-relevant content.

Research Each Location First

Use Claude Code to research:

claude code "Research [CITY NAME] for local business SEO.

Provide information about:
1. Major neighborhoods or districts
2. Notable landmarks (parks, schools, shopping centers)
3. Demographics (family-friendly? retirees? young professionals?)
4. Local characteristics (suburban? urban? coastal?)
5. Any local events, festivals, or sports teams
6. Nearby major employers or institutions
7. Common local issues related to [YOUR INDUSTRY]

Format as a structured overview I can reference when writing location pages."

Save this research. You will use it to make each page unique. The US Census Bureau QuickFacts is a free source of demographic data you can reference for each city.

Create Location Pages with Claude Code

For EACH city/location:

claude code "Create a comprehensive, locally-relevant location page for [CITY NAME].

Location Information:
- City: [CITY NAME]
- State: [STATE]
- Primary Keyword: [service] in [city]
- Secondary Keywords: [LIST KEYWORDS]
- Target URL: /locations/[city-slug]

Local Research (make each page unique):
[PASTE THE RESEARCH FROM ABOVE]

Create a detailed location page with:
1. HERO SECTION with H1: 'Professional [Service] in [City], [State]'
2. LOCAL INTRODUCTION (250-350 words) referencing specific neighborhoods
3. AREAS WE SERVE IN [CITY] with neighborhoods and landmarks
4. WHY CHOOSE US IN [CITY] with local response time
5. SERVICES IN [CITY] linking to service pages
6. LOCAL SEO ELEMENTS naturally incorporated
7. LOCAL FAQ (8-12 city-specific questions)
8. GOOGLE MAPS INTEGRATION placeholder
9. LOCAL TESTIMONIALS section
10. STRONG LOCAL CTA

Design: Consistent with site design, mobile responsive
SEO: 800-1200 words total, each page MUST be unique

Create file at: app/locations/[city-slug]/page.tsx"

Let's build the remaining essential pages for your website. For design inspiration, Tailwind CSS's component examples are a helpful starting point, and Google's web.dev design guidance covers responsive layout fundamentals.

About Page

Using Claude Code:

claude code "Create a compelling About page at /app/about/page.tsx

Include:
1. Company Story (how we started, years in business, mission/values)
2. Our Team (owner bio, key team members, certifications)
3. Why Choose Us (licensed, insured, experience, guarantees)
4. Community Involvement (local partnerships, charity work)
5. Trust Signals (certifications, awards, memberships)

Design: Professional and personal, warm and welcoming tone
CTA: Contact us to experience the difference"

Contact Page

Using Claude Code:

claude code "Create a comprehensive Contact page at /app/contact/page.tsx

Include:
1. Contact Form (name, email, phone, service dropdown, message)
2. Direct Contact Information (phone, email, address, hours)
3. Google Maps Embed placeholder
4. Quick Links (all services, all locations, FAQ)
5. Response Promise ('We respond within 24 hours')

Design: Simple, easy to use form, mobile-friendly
Technical: Form validation, accessible form fields"

Now that you have content, let's make it look professional. Good frontend development is what turns a functional site into one that actually converts visitors. Our Freshly Folded project is a good reference point — a local service business where clean design and clear booking UX directly translated into higher conversions.

Review Current Design

Check for:

• Does it look modern and professional?
• Is spacing consistent?
• Are colors cohesive?
• Does it work on mobile?
• Are CTAs prominent?
• Is navigation easy to use?
• Does it load fast?

Common Issues to Fix:

• Too much bold text
• Inconsistent spacing
• Clashing colors
• Small mobile text
• Slow loading images
• Confusing navigation

Design Refinement with Claude Code

Using Claude Code:

claude code "Review and refine the entire website design for professional quality.

Current Issues: [LIST SPECIFIC PROBLEMS YOU NOTICE]

Design Goals:
- Swiss spa / luxury hotel aesthetic
- Minimalist and clean
- Professional but approachable
- High-end without being flashy
- Mobile-first

Improvements Needed:
1. COLOR SCHEME (limit to 2-3 main colors)
2. TYPOGRAPHY (clear hierarchy, readable fonts)
3. SPACING (consistent padding and margins)
4. ICONS (replace emojis with Lucide React icons)
5. BUTTONS & CTAs (prominent, consistent styling)
6. MOBILE OPTIMIZATION (touch targets, readable text)
7. IMAGES (proper sizing, lazy loading, alt text)

Review all pages and update styling consistently.
Use Tailwind CSS classes."

Ensure easy navigation throughout your site. The Lucide icon library has every icon you will need for navigation and UI elements.

Create Header/Navigation Component

Using Claude Code:

claude code "Create a professional header/navigation component.

Location: app/components/Header.tsx

Include:
1. Logo / Business Name (clickable, links to /)
2. Main Navigation:
   - Home
   - Services (dropdown with all services)
   - Locations (dropdown with all cities)
   - About
   - Contact
3. Phone Number (prominent, click-to-call)
4. CTA Button: 'Get Free Quote'

Mobile:
- Hamburger menu
- Slide-out navigation
- Touch-friendly

Design:
- Sticky header (stays at top when scrolling)
- Clean and professional
- Good contrast for readability

Import and use this in app/layout.tsx"

Create Footer Component

Using Claude Code:

claude code "Create a comprehensive footer component.

Location: app/components/Footer.tsx

Include:
1. Company Information (name, tagline, description)
2. Quick Links (3 columns: Services, Locations, Company)
3. Contact Information (phone, email, address, hours)
4. Service Area ('Proudly serving [Your Cities]')
5. Bottom Bar (copyright, privacy policy, terms)
6. Trust Signals (certifications, insurance badges)

Design:
- Dark background (contrasts with main site)
- Multiple columns (responsive on mobile)
- Organized and easy to scan

Import and use this in app/layout.tsx"

What is Next.js and why use it for my website?

Next.js is a React framework that makes building websites easier. It includes built-in routing, server-side rendering for SEO, automatic code splitting, and image optimization. It is one of the most widely used frameworks for professional websites in 2026.

How long does it take to build a complete website?

Using AI tools like Claude Code, you can build a professional 10-20 page website in 3-6 hours spread over multiple sessions. Traditional development without AI would take 40-80 hours for the same result.

What is mobile-first design?

Mobile-first design means building your website for mobile devices first, then expanding for larger screens. Over 60% of local searches happen on mobile, so your site must work perfectly on phones.

Why do I need separate pages for each service?

Each service page targets a specific keyword and provides detailed information for customers searching for that service. This improves SEO and helps visitors find exactly what they need.

Why do I need separate pages for each location?

Location pages help you rank in local search results for each city you serve. They also provide locally-relevant information that builds trust with customers in that area.

What is a doorway page and how do I avoid creating them?

Doorway pages are low-quality pages created just for SEO with duplicate or thin content. Avoid them by making each location page genuinely unique with local references, specific information, and original content.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that makes styling websites faster and more consistent. Instead of writing custom CSS, you use pre-built classes like "text-xl" or "bg-blue-500".

What are Lucide React icons?

Lucide is an open-source icon library with clean, consistent icons. We use Lucide instead of emojis because icons look more professional and load faster.

How do I make my phone number clickable on mobile?

Use the tel: link format. For example: <a href="tel:+15551234567">(555) 123-4567</a>. This allows mobile users to call you with a single tap.

What is a CTA (Call-to-Action)?

A CTA is a button or link that tells visitors what to do next, such as "Call Now", "Get Free Quote", or "Schedule Service". Effective CTAs are prominent, clear, and action-oriented.

How many CTAs should I have on each page?

Each page should have at least 2-3 CTAs: one in the hero section, one in the middle of the content, and one at the bottom. Make sure your phone number is visible throughout the page.

What is a sticky header?

A sticky header stays fixed at the top of the screen as users scroll down the page. This keeps navigation and your phone number always visible and accessible.

How do I test my website on mobile?

Open Chrome DevTools (F12 or Cmd+Option+I), click the device toggle icon, and select a mobile device. Better yet, test on your actual phone by accessing localhost through your network.

What should I do if Claude Code makes a mistake?

Simply tell Claude Code what is wrong and ask it to fix the issue. Be specific about what needs to change. Claude Code can iterate and improve based on your feedback.

How do I add images to my website?

Place images in the /public folder and reference them in your code. Use Next.js Image component for automatic optimization. For now, placeholder images are fine - we will add real photos later.

What is the App Router in Next.js?

The App Router is Next.js 15's file-based routing system. Each folder in the /app directory becomes a route, and each page.tsx file becomes a page. For example, /app/about/page.tsx creates the /about page.

How do I get feedback on my website design?

Show your site to 2-3 people (family, friends, other business owners). Ask if it is clear what you do, if they can find the phone number easily, if it looks professional, and if anything is confusing.

Website Development Complete

If you would rather have professionals handle the build, our web development services team can take your keyword research and deliver a finished site. For more complex needs, explore our backend development and CMS/e-commerce options.

You should now have:

• ✓ Complete site structure with all pages
• ✓ Professional homepage with CTAs
• ✓ Detailed service pages (one per service)
• ✓ Unique location pages (one per city)
• ✓ About and Contact pages
• ✓ Navigation and footer components
• ✓ Mobile-responsive design
• ✓ Professional, clean aesthetic
• ✓ Fast loading performance

Your Website Structure:

app/
├── page.tsx (Homepage)
├── about/page.tsx
├── contact/page.tsx
├── services/
│   ├── page.tsx (overview)
│   ├── service-1/page.tsx
│   ├── service-2/page.tsx
│   └── [all your services]
├── locations/
│   ├── page.tsx (overview)
│   ├── city-1/page.tsx
│   ├── city-2/page.tsx
│   └── [all your cities]
└── components/
    ├── Header.tsx
    ├── Footer.tsx
    └── [other components]

Final Testing Checklist:

• Visit every page
• Click every link
• Test on mobile
• Check loading speed
• Verify phone numbers work

Ready for Phase 4: Technical SEO Optimization

In the next phase, you will optimize your website for technical SEO with meta tags, schema markup, sitemaps, and more. After that, the content enhancement strategy and advanced optimization guide will take your site to the next level.

Continue to Phase 4 when ready.