DEV Community

Joshua Matthews
Joshua Matthews

Posted on

Technical SEO Developers Actually Need to Know

#nextjs #javascript #seo #webdev

SEO guides usually focus on keywords and backlinks. But if your site's technical foundation is broken, none of that matters.

Here's the technical SEO that actually moves the needle.

Core Web Vitals: The Numbers That Count

Google uses three metrics to judge your site:

LCP (Largest Contentful Paint): Under 2.5 seconds. This is usually your hero image or main heading. Optimise your largest visible element.

FID (First Input Delay): Under 100ms. How quickly your site responds to user interaction. Heavy JavaScript blocks this.

CLS (Cumulative Layout Shift): Under 0.1. Elements jumping around as the page loads. Usually caused by images without dimensions or late-loading fonts.

Check yours: https://pagespeed.insights.google.com

The Rendering Decision

How your pages render affects whether Google can even see your content.

Server-Side Rendering (SSR): HTML arrives fully formed. Google sees everything immediately. Best for SEO.

Static Site Generation (SSG): Pre-rendered at build time. Fastest option. Perfect for content that doesn't change frequently.

Client-Side Rendering (CSR): JavaScript builds the page in browser. Google can render JavaScript, but it's slower and less reliable. Avoid for important content.

// Next.js - Force SSR for SEO-critical pages
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// Or use SSG for static content
export async function getStaticProps() {
  const posts = await getAllPosts();
  return { 
    props: { posts },
    revalidate: 3600 // Regenerate hourly
  };
}
Enter fullscreen mode Exit fullscreen mode

Metadata That Matters

Every page needs unique, descriptive metadata:

// Next.js App Router
export const metadata = {
  title: 'Web Development Services | LogicLeap',
  description: 'High-performance websites and web applications built with Next.js and React. Fast turnaround, honest pricing.',
  openGraph: {
    title: 'Web Development Services | LogicLeap',
    description: 'High-performance websites built for conversion.',
    images: ['/og-image.jpg'],
  },
};
Enter fullscreen mode Exit fullscreen mode

Keep titles under 60 characters, descriptions under 160. Front-load keywords.

Structured Data: Speak Google's Language

Help search engines understand your content:

// Product page schema
const productSchema = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: 'Web Development Package',
  description: 'Custom Next.js website with CMS',
  offers: {
    '@type': 'Offer',
    price: '2500',
    priceCurrency: 'GBP',
  },
};

// Add to your page
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }}
/>
Enter fullscreen mode Exit fullscreen mode

Test with Google's Rich Results Test.

URL Structure

Clean URLs rank better and get more clicks:

Bad: /page?id=123&category=5
Good: /services/web-development

In Next.js, your file structure IS your URL structure:

/app
  /services
    /web-development
      page.jsx  → /services/web-development
Enter fullscreen mode Exit fullscreen mode

Canonical URLs: Avoid Duplicate Content

If the same content exists at multiple URLs, tell Google which one is the "real" version:

// In your page head
<link rel="canonical" href="https://logic-leap.co.uk/services" />
Enter fullscreen mode Exit fullscreen mode

This is critical for:

  • Pages accessible with and without trailing slashes
  • Parameter variations (sorting, filtering)
  • HTTP vs HTTPS versions

Image Optimisation

Images are usually the biggest performance killer:

// Next.js Image component handles this automatically
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Web development team collaborating"
  width={1200}
  height={630}
  priority // Load above-fold images immediately
/>
Enter fullscreen mode Exit fullscreen mode

Always include descriptive alt text. It's accessibility AND SEO.

Sitemaps and robots.txt

Help crawlers find and prioritise your content:

<!-- public/sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://logic-leap.co.uk/</loc>
    <lastmod>2025-01-20</lastmod>
    <priority>1.0</priority>
  </url>
  <!-- More URLs -->
</urlset>
Enter fullscreen mode Exit fullscreen mode 
# public/robots.txt
User-agent: *
Allow: /
Sitemap: https://logic-leap.co.uk/sitemap.xml
Enter fullscreen mode Exit fullscreen mode

Internal Linking

Every important page should be reachable within 3 clicks from the homepage. Use descriptive anchor text:

Bad: "Click here for our services"
Good: "View our web development services"

The Quick Wins Checklist

  • [ ] All pages return 200 status codes
  • [ ] HTTPS enabled everywhere
  • [ ] Mobile-responsive design
  • [ ] Page load under 3 seconds
  • [ ] Unique title and description per page
  • [ ] Images have alt text and dimensions
  • [ ] No broken internal links
  • [ ] XML sitemap submitted to Search Console
  • [ ] Structured data validates without errors

What Actually Moves Rankings

Technical SEO is the foundation, but it's not magic. It removes barriers.

Once your technical base is solid, rankings come from content quality and backlinks. But without the foundation, you're building on sand.

Technical SEO is part of every site we build at LogicLeap. Fast, crawlable, and built to rank.

Top comments (0)