Technical SEO: Crawlability, Metadata and Performance

Introduction

Your website is built, your pages are live, and your content is in place. Now it is time to make sure search engines can actually find, crawl, and understand every page you have created. If you have not completed the earlier phases, go back to Phase 3: website development or the full local SEO series overview. Technical SEO is the foundation that everything else sits on. Without it, even the best content in the world will struggle to rank.

Time Estimate: 2-4 hours (spread over multiple sessions)

Why Technical SEO Matters

Technical SEO helps search engines fetch, render and interpret useful pages. Start with access and status codes, then metadata, canonical signals, structured data and performance. Fixing these issues removes obstacles; it does not establish which change caused a ranking movement.

This guide covers every technical optimization you need, with specific Claude prompts to implement each one. If you want to use Claude Code for the implementation, the prompts below are ready to paste. By the end, your site will be technically sound, fast, and ready to compete for top positions in local search results.

What You Will Achieve

• A full SEO audit identifying every issue on your site
• Accurate titles and descriptions that help searchers understand what each page offers
• Schema markup that qualifies your pages for rich snippets in search results
• Page speed scores of 90+ on Google PageSpeed Insights
• Properly optimized images that load fast without sacrificing quality
• Clean URL structure that search engines and users both understand
• Correct robots.txt and XML sitemap configuration

Running a Comprehensive SEO Audit

Before fixing anything, you need to know what is broken. A thorough SEO audit gives you a prioritized list of issues so you can tackle the highest-impact items first.

What to Check in Your Audit

1. Crawlability and Indexing

These are the fundamentals. If Google cannot crawl your pages, nothing else matters.

• Does your robots.txt file exist and is it configured correctly?
• Is your XML sitemap generated and accessible?
• Are all important pages returning a 200 status code?
• Are there any redirect chains (page A redirects to B, which redirects to C)?
• Can Google actually reach every page through internal links?

2. On-Page Elements

• Does every page have a unique title tag?
• Does every page have a unique meta description?
• Is the heading hierarchy correct (one H1 per page, followed by H2s and H3s)?
• Are images using descriptive alt text?
• Are URLs clean and keyword-relevant?

3. Performance

• What are your Core Web Vitals scores?
• How fast does your largest content element load?
• Are there layout shifts as the page renders?
• Is JavaScript blocking the page from becoming interactive?

4. Mobile Experience

• Does every page work correctly on mobile?
• Are touch targets large enough (at least 48x48 pixels)?
• Is text readable without zooming?
• Is there any horizontal scrolling?

Free Tools for Your Audit

You do not need expensive tools for a thorough audit. Google's own Search Console documentation walks through the basics. These free options cover everything:

• Google Search Console shows crawl errors, index coverage, and Core Web Vitals data straight from Google
• Google PageSpeed Insights tests performance on both mobile and desktop
• Google Rich Results Test validates your schema markup
• Screaming Frog (free up to 500 URLs) crawls your entire site and reports technical issues
• Chrome DevTools is built into every Chrome browser for debugging performance

Run Your Audit with Claude

claude "Perform a comprehensive technical SEO audit on my local business website.

My website is built with Next.js 15 and deployed on Vercel.

Check these areas in detail:

1. CRAWLABILITY
   - Does robots.txt exist at /public/robots.txt?
   - Is there an XML sitemap being generated?
   - Are there any orphan pages (pages not linked from anywhere)?
   - Check for redirect chains or broken links

2. ON-PAGE SEO
   - Review every page.tsx file for title tags and meta descriptions
   - Check heading hierarchy (H1, H2, H3 usage)
   - Verify all images have alt text
   - Review URL structure for all routes

3. TECHNICAL ELEMENTS
   - Check for canonical URL implementation
   - Verify Open Graph tags exist on all pages
   - Look for any duplicate content issues
   - Check if JSON-LD schema markup is implemented

4. PERFORMANCE
   - Review Next.js Image component usage
   - Check for any large unoptimized assets
   - Look for render-blocking resources
   - Verify lazy loading is implemented

Create a prioritized list of every issue found, categorized as:
- CRITICAL (fix immediately)
- HIGH (fix this week)
- MEDIUM (fix this month)
- LOW (fix when convenient)

Include specific file paths and line numbers for each issue."

Tip: Run this audit every time you make significant changes to your site. In our experience at Luminous Digital Visions, new issues creep in surprisingly fast, especially after adding new pages or updating dependencies.

Meta Tags Optimization

Meta tags are the first thing potential customers see in search results. Your title tag and meta description are essentially a miniature advertisement. The keywords you identified during Phase 2: keyword research will drive your tag copy. Get them right and you will see more clicks, even without improving your actual ranking position.

Title Tags

Title tags appear as the clickable blue headline in Google search results. They are one of the strongest on-page ranking signals.

Title Tag Rules:

• Keep them under 60 characters. Google truncates anything longer, which looks unprofessional and loses important keywords.
• Put your primary keyword near the front. "Plumbing Services in San Diego" is better than "Welcome to Our San Diego Plumbing Services Page."
• Include your city name. For local businesses, this is non-negotiable.
• Make each one unique. No two pages should share the same title tag.
• Add your brand name at the end. Use a pipe or dash separator: "Drain Cleaning San Diego | ABC Plumbing"

Title Tag Formula:

[Primary Keyword] in [City] | [Business Name]

Examples:

• Homepage: Professional Plumbing Services in San Diego | ABC Plumbing
• Service page: Drain Cleaning & Repair in San Diego | ABC Plumbing
• Location page: Trusted Plumber in La Jolla, CA | ABC Plumbing

Meta Descriptions

Meta descriptions appear as the grey text below the title tag in search results. They do not directly affect rankings, but they significantly impact click-through rates.

Meta Description Rules:

• Keep them under 160 characters. Anything longer gets truncated.
• Include a call-to-action. Phrases like "Call today," "Get a free quote," or "Schedule now" drive clicks.
• Mention your primary keyword. Google bolds matching search terms in the description.
• Make each one unique and compelling. This is your sales pitch in two sentences.

Meta Description Formula:

[Value proposition with keyword]. [Unique selling point]. [Call-to-action] — [Phone number or action].

Examples:

• Homepage: Professional plumbing services in San Diego with 24/7 emergency response. Licensed, insured, and trusted by 2,000+ homeowners. Call (555) 123-4567 for a free estimate.
• Service page: Drain cleaning in San Diego. Read our service scope and request an appointment. We confirm availability when we respond.

Open Graph Tags

Open Graph tags control how your pages appear when shared on social media platforms like Facebook, LinkedIn, and Twitter/X. They do not affect search rankings directly, but a well-formatted social share can drive significant traffic.

Essential Open Graph Tags:

// In your Next.js page or layout metadata
export const metadata = {
  openGraph: {
    title: 'Professional Plumbing Services in San Diego',
    description: 'Licensed plumber serving San Diego County. 24/7 emergency service, free estimates.',
    url: 'https://www.yoursite.com',
    siteName: 'ABC Plumbing',
    images: [
      {
        url: 'https://www.yoursite.com/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'ABC Plumbing - Professional Plumbing Services in San Diego',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Professional Plumbing Services in San Diego',
    description: 'Licensed plumber serving San Diego County. 24/7 emergency service.',
    images: ['https://www.yoursite.com/og-image.jpg'],
  },
}

Implement Meta Tags with Claude

claude "Optimize all meta tags across my entire Next.js website.

For EVERY page, ensure:

1. TITLE TAGS
   - Under 60 characters
   - Primary keyword near the front
   - City name included for local pages
   - Business name at the end with pipe separator
   - Each page has a unique title

2. META DESCRIPTIONS
   - Under 160 characters
   - Include primary keyword
   - End with a call-to-action
   - Each page has a unique description

3. OPEN GRAPH TAGS
   - og:title, og:description, og:image, og:url, og:type
   - Twitter card tags (summary_large_image)
   - Proper image dimensions (1200x630)

4. ADDITIONAL META TAGS
   - Canonical URLs on every page
   - Viewport meta tag for mobile
   - Language declaration

Use Next.js metadata API (export const metadata) in each page.tsx.
Provide the exact title and description for every page on the site."

Choose structured data for the actual page

Use a self-referencing canonical and metadata that describe the visible page. For an article, connect the author to a real profile and preserve the original publication date. Update the modification date when the article changes substantially. Breadcrumbs should follow the site’s actual hierarchy.

Only describe services, reviews, prices and organizations that the page supports. Do not attach sample ratings or invented business details to a live page. Validate the generated output after a template change.

FAQ content can still help readers, but Google no longer displays FAQ rich results. HowTo rich results are also retired. Keep useful answers for their content value and consult Google’s documentation updates when reviewing supported features.

Page Speed Optimization

Page speed affects the customer experience. Evaluate Core Web Vitals alongside content relevance, usability and successful task completion. A good performance score does not guarantee a search position. See Google’s page experience guidance.

Core Web Vitals Targets

You need to hit these thresholds to pass Google's assessment:

LCP measures how long it takes for the biggest visible element (usually a hero image or heading) to load. INP measures how responsive the page feels during user interactions. CLS measures how much the layout shifts around as elements load in.

Next.js Image Component

The single biggest performance win for most sites is proper image handling. The Next.js Image component handles optimization automatically.

import Image from 'next/image'

// Instead of <img src="/hero.jpg" />
<Image
  src="/hero.jpg"
  alt="Professional plumbing services in San Diego"
  width={1200}
  height={600}
  priority // Only use for above-the-fold images
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
/>

The priority prop should only go on your largest above-the-fold image (typically the hero image). Every other image below the fold should lazy load by default, which the Next.js Image component does automatically.

Code Splitting

Next.js splits code automatically by route, but you can go further with dynamic imports for heavy components.

import dynamic from 'next/dynamic'

// Load the map component only when needed
const GoogleMap = dynamic(() => import('@/components/GoogleMap'), {
  loading: () => <div className="h-64 bg-gray-100 animate-pulse" />,
  ssr: false,
})

This keeps your initial bundle small and loads heavy components only when the user actually needs them.

Font Optimization

Fonts are a common source of layout shift and slow loads. Next.js has built-in font optimization.

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  preload: true,
})

Using next/font eliminates the external network request to Google Fonts and prevents the flash of unstyled text that causes CLS issues.

Optimize Page Speed with Claude

claude "Optimize my Next.js website for maximum page speed. Target 90+ on PageSpeed Insights.

Current setup: Next.js 15, Tailwind CSS, deployed on Vercel.

Implement these optimizations:

1. IMAGE OPTIMIZATION
   - Replace all <img> tags with Next.js Image component
   - Add priority prop to above-the-fold hero images only
   - Add blur placeholders for all images
   - Verify all images have width and height set

2. CODE SPLITTING
   - Dynamic import any components over 50KB
   - Lazy load the Google Maps embed
   - Lazy load any contact form modals
   - Defer loading of analytics scripts

3. FONT OPTIMIZATION
   - Use next/font for all Google Fonts
   - Set display: swap to prevent layout shift
   - Preload only the font weights actually used

4. CSS OPTIMIZATION
   - Purge unused Tailwind classes in production
   - Verify tailwind.config.ts content paths are correct
   - Inline critical CSS for above-the-fold content

5. RENDERING STRATEGY
   - Use Static Site Generation (SSG) for all pages that do not change often
   - Verify pages are not accidentally using client-side rendering
   - Check for unnecessary 'use client' directives

6. THIRD-PARTY SCRIPTS
   - Load Google Analytics with next/script strategy='afterInteractive'
   - Defer all non-critical third-party scripts
   - Remove any unused scripts or dependencies

Run a before-and-after comparison of bundle sizes."

Image Optimization

Inspect the network report to identify which images contribute most to the page download. Resize oversized assets, compare formats at acceptable visual quality and retest the actual page. Optimize the largest visible image before spending time on tiny icons.

WebP Format

Compare WebP, AVIF and JPEG for photographs, and preserve PNG or SVG where their characteristics suit the asset. Browser support, transparency, legibility and file size matter more than requiring one format for every image.

If you are using the Next.js Image component, WebP conversion happens automatically in production. But if you are placing images in the /public folder for direct use, convert them yourself.

Compression Guidelines

Responsive Images

Do not serve a 2000px-wide image to a mobile phone with a 375px-wide screen. The Next.js Image component handles this with the sizes prop.

<Image
  src="/service-hero.jpg"
  alt="Drain cleaning service in San Diego"
  width={1200}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 1200px"
/>

A responsive image source set lets the browser choose an appropriate resource for the viewport and display density. Check the selected resource in developer tools on both mobile and desktop.

Alt Text Best Practices

Alt text serves two purposes: accessibility for screen reader users and SEO signals for search engines.

Good alt text:

• alt="Licensed plumber repairing kitchen sink drain in San Diego home" — Descriptive, includes keyword naturally
• alt="Before and after drain cleaning results" — Describes the image content

Bad alt text:

• alt="image1" — Tells nobody anything
• alt="plumber plumbing San Diego plumber San Diego plumbing services" — Keyword stuffing
• alt="" — Empty alt text (acceptable only for decorative images)

Optimize All Images with Claude

claude "Audit and optimize every image on my Next.js website.

For each image, ensure:

1. FORMAT
   - Next.js Image component used (not raw <img> tags)
   - WebP conversion enabled for production
   - SVG used for icons and logos where appropriate

2. SIZING
   - Width and height attributes set on every image
   - Responsive sizes prop configured for different viewports
   - No images larger than necessary for their display size

3. LOADING
   - Priority prop on above-the-fold hero images only
   - All other images lazy loaded (default behavior)
   - Blur placeholders added for better perceived performance

4. ALT TEXT
   - Every image has descriptive, keyword-relevant alt text
   - Alt text describes the actual image content
   - No keyword stuffing in alt attributes
   - Decorative images use alt='' with role='presentation'

5. FILE SIZES
   - Flag any image over 200KB
   - Suggest compression for oversized images
   - Recommend removing any unused images from /public

List every image found, its current status, and what needs to change."

URL Structure & Configuration

Clean URLs help both search engines and users understand what a page is about before they even visit it. They are also a minor ranking factor. The URL structure you defined during Phase 3: website development should already follow these patterns, but it is worth verifying.

URL Best Practices

Rules for Clean URLs:

1. Use lowercase only. /Services/Drain-Cleaning should be /services/drain-cleaning
2. Use hyphens, not underscores. Google treats hyphens as word separators. /drain-cleaning is correct. /drain_cleaning is not.
3. Include your target keyword. /services/drain-cleaning is better than /services/service-3
4. Keep them short. Aim for 3-5 words after the domain. /services/residential-drain-cleaning-and-repair-service is too long.
5. Use a logical hierarchy. URLs should reflect your site structure: /services/drain-cleaning, /locations/la-jolla
6. No special characters. Avoid query strings, session IDs, or encoded characters in public-facing URLs.

Good URL Examples:

https://www.yoursite.com/services/drain-cleaning
https://www.yoursite.com/services/water-heater-repair
https://www.yoursite.com/locations/la-jolla
https://www.yoursite.com/locations/san-diego
https://www.yoursite.com/about
https://www.yoursite.com/contact

Robots.txt Configuration

The robots.txt file lives at the root of your site and tells search engine crawlers which pages to crawl and which to skip.

# robots.txt for a Next.js local business website
User-agent: *
Allow: /

# Block admin and API routes
Disallow: /api/
Disallow: /_next/
Disallow: /admin/

# Reference your sitemap
Sitemap: https://www.yoursite.com/sitemap.xml

In Next.js 15 with the App Router, create this at app/robots.ts:

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/api/', '/_next/', '/admin/'],
    },
    sitemap: 'https://www.yoursite.com/sitemap.xml',
  }
}

XML Sitemap Configuration

Your sitemap tells Google about every page on your site and how important each one is. In Next.js 15, you can generate it programmatically:

// app/sitemap.ts
import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://www.yoursite.com'

  return [
    { url: baseUrl, lastModified: new Date(), changeFrequency: 'weekly', priority: 1.0 },
    { url: `${baseUrl}/about`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.8 },
    { url: `${baseUrl}/contact`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.8 },
    { url: `${baseUrl}/services`, lastModified: new Date(), changeFrequency: 'weekly', priority: 0.9 },
    { url: `${baseUrl}/services/drain-cleaning`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.8 },
    // Add all your service pages
    { url: `${baseUrl}/locations/san-diego`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.8 },
    // Add all your location pages
  ]
}

Implement URL Structure and Configs with Claude

claude "Review and fix the URL structure, robots.txt, and sitemap for my Next.js website.

1. URL AUDIT
   - Check all route folders use lowercase with hyphens
   - Verify URLs include target keywords
   - Flag any URLs that are too long or use underscores
   - Ensure consistent hierarchy (services/[slug], locations/[slug])

2. ROBOTS.TXT
   - Create app/robots.ts using Next.js MetadataRoute
   - Allow all public pages
   - Block API routes, _next, and any admin routes
   - Include sitemap reference with full production URL

3. XML SITEMAP
   - Create app/sitemap.ts using Next.js MetadataRoute
   - Include every public page with correct priority:
     - Homepage: 1.0
     - Service overview: 0.9
     - Individual services: 0.8
     - Location pages: 0.8
     - About/Contact: 0.7
   - Set appropriate changeFrequency for each page type
   - Use the production domain: [YOUR DOMAIN]

4. CANONICAL URLS
   - Verify every page has a canonical URL in metadata
   - Ensure canonical URLs use the production domain (not localhost)
   - Check for any duplicate content issues

Implement all changes and verify the sitemap is accessible at /sitemap.xml."

Tip: After deploying these changes, submit your sitemap to Google Search Console. Go to Search Console, click "Sitemaps" in the left menu, enter your sitemap URL, and click "Submit." Google decides when to read it, and crawling can take from a few days to a few weeks. To submit sitemaps and check indexing automatically after every deploy, follow our Google Search Console API guide.

Frequently Asked Questions

Next Steps

Technical SEO Optimization Complete

You should now have:

• A complete SEO audit with all critical issues identified and fixed
• Optimized title tags and meta descriptions on every page
• Comprehensive JSON-LD schema markup (LocalBusiness, Service, FAQPage, BreadcrumbList, Organization)
• Page speed scores of 90+ on both mobile and desktop
• Properly optimized images with WebP format, lazy loading, and descriptive alt text
• Clean, keyword-rich URL structure
• Correctly configured robots.txt and XML sitemap

Verify Your Work:

• Run Google PageSpeed Insights on your homepage and 2-3 key pages
• Test schema markup with Google Rich Results Test
• Submit your sitemap in Google Search Console
• Check robots.txt is accessible at yoursite.com/robots.txt
• Open your site on mobile and verify it loads in under 3 seconds

Testing Checklist:

• [ ] Every page has a unique title tag under 60 characters
• [ ] Every page has a unique meta description under 160 characters
• [ ] Schema markup validates without errors in Rich Results Test
• [ ] PageSpeed Insights score is 90+ on mobile
• [ ] All images use Next.js Image component with alt text
• [ ] XML sitemap includes all public pages
• [ ] Robots.txt is properly configured
• [ ] No broken links or redirect chains

Ready for Phase 5: Content Enhancement & Strategy

In the next phase, you will enhance your content depth, analyze competitors, implement semantic SEO with semantically related keywords, and build E-E-A-T signals that establish your authority. After that, advanced optimization strategies and the monitoring and analytics guide will help you maintain and grow your rankings. If you need professional help with any of these phases, our web development services team handles technical SEO implementation daily.

Continue to Phase 5 when ready.

For implementation support, explore digital growth services.