Mastering Technical SEO: Structured Data, Dynamic OG, and Core Web Vitals

Why Technical SEO Matters for Developers

For technical content to reach its intended audience, search engines need structured, machine-readable representations of your pages. Modern search engines index not just text, but layout stability, loading speed, and structured entities.

In this guide, we examine the three pillars of modern technical SEO:

Structured Data (JSON-LD)
Dynamic Social Metadata (OpenGraph & Twitter Cards)
Core Web Vitals Optimization (LCP, INP, CLS)

Pillar 1: JSON-LD Schema Markup

Embedding JSON-LD structured data into your HTML allows Google and other search engines to display rich snippets, author information, and publication dates in search results.

Here is how we construct a type-safe BlogPosting schema in Next.js:

src/components/seo/JsonLd.tsx

import { SITE_CONFIG } from "@/lib/seo";
import { Post } from "@/lib/types";
 
export function ArticleJsonLd({ post }: { post: Post }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: post.frontmatter.title,
    description: post.frontmatter.description,
    datePublished: post.frontmatter.date,
    dateModified: post.frontmatter.date,
    author: {
      "@type": "Person",
      name: post.frontmatter.author,
      url: SITE_CONFIG.url,
    },
    publisher: {
      "@type": "Organization",
      name: SITE_CONFIG.name,
      url: SITE_CONFIG.url,
      logo: {
        "@type": "ImageObject",
        url: `${SITE_CONFIG.url}/favicon.ico`,
      },
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": `${SITE_CONFIG.url}/blog/${post.slug}`,
    },
    keywords: post.frontmatter.tags.join(", "),
  };
 
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}

Pillar 2: Dynamic Canonical URLs and Robots Config

To prevent duplicate content indexing issues across varying query parameters or mirrors, always define a strict metadataBase:

src/app/layout.tsx

import { SITE_CONFIG } from "@/lib/seo";
import type { Metadata } from "next";
 
export const metadata: Metadata = {
  metadataBase: new URL(SITE_CONFIG.url),
  title: {
    default: SITE_CONFIG.title,
    template: `%s | ${SITE_CONFIG.name}`,
  },
  description: SITE_CONFIG.description,
  alternates: {
    canonical: "./",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
};

Pillar 3: Optimizing Core Web Vitals

To achieve a 100/100 Lighthouse score on static content:

Zero Layout Shifts (CLS = 0): Always reserve aspect ratios for code blocks, images, and headers.
Instant LCP: Preload critical fonts and avoid heavy client-side hydration for above-the-fold content.
Fast INP: Keep interactive handlers lightweight, offloading expensive computation from the main thread.

Summary Checklist

Canonical URLs defined on all pages
Valid sitemap.xml generated at build time
robots.txt configured with sitemap link
BlogPosting JSON-LD schema injected
Responsive OpenGraph images for social engagement