{
  "id": 3608201,
  "title": "How I Built an SEO-Optimized Portfolio with Next.js 16",
  "url": "https://urgent.news/2026/08/26/how-i-built-an-seo-optimized-portfolio-with-next-js-16",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-26T22:22:55.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/hasnainabdi/how-i-built-an-seo-optimized-portfolio-with-nextjs-16-2e51"
  },
  "original_language": "en",
  "account": "In this detailed guide, I detail the process of constructing an SEO-optimized portfolio website using Next.js 16. My primary objective was to ensure the website ranked well for keywords such as \"Syed Muhammad Hasnain Abdi portfolio\" and \"Full Stack Developer Pakistan\". Achieving this goal required a strategic focus on SEO from the outset, rather than treating it as a post-build task.\n\nUtilizing Next.js 16 App Router, I employed Static Site Generation (SSG) for each route, including dynamic project case study pages through generateStaticParams. This approach enabled every page to be pre-rendered to static HTML at build time, resulting in rapid loading times and optimal performance metrics. Consequently, the homepage loaded in under 700 milliseconds, complete with all animations and images retained.\n\nTo enhance the site's visibility to search engines, I implemented JSON-LD structured data across four key schemas: Person, WebSite, ProfessionalService, and a CollectionPage listing all projects as CreativeWork items. Each project case study page further benefited from BreadcrumbList and a CreativeWork+SoftwareApplication schema, including author, dateCreated, and keywords.\n\nIn addition to structured data, I employed dynamic Open Graph images and Twitter Cards through Next.js 16's ImageResponse API. This ensured that when users shared links on social media, they were presented with professional, branded previews containing my name, title, and branding instead of generic previews.\n\nKeyword strategy formed a crucial component of the SEO approach. I conducted keyword research and organized them into distinct categories: brand (\"Syed Muhammad Hasnain Abdi portfolio\"), role (\"Full Stack Developer Pakistan, AI Developer Karachi\"), AI-specific terms (\"OpenAI Developer, RAG Developer\"), location (\"Karachi Web Developer\"), and hiring intent (\"Hire Full Stack Developer, Freelance Developer Pakistan\"). These 68 keywords were seamlessly integrated into the title tag, meta description, headings, body content, and JSON-LD structured data, ensuring a natural distribution throughout the site.\n\nThe collective impact of these SEO strategies became evident shortly after deploying the website and submitting the sitemap to Google Search Console. Within weeks, the site began ranking for targeted keywords, demonstrating that SEO was not merely a singular modification but rather the result of cumulative efforts encompassing SSG, structured data, performance optimization, semantic HTML, and strategic keyword integration. This comprehensive approach laid the groundwork for sustained organic traffic and enhanced online presence.",
  "summary": "A practical walkthrough of how I built this very portfolio — covering Static Site Generation, JSON-LD structured data, Open Graph images, and a 68-keyword SEO strategy that ranks for \" Full Stack Developer Pakistan \". When I started building my portfolio, I had one clear goal: it had to rank on Google for keywords like \"Syed Muhammad Hasnain Abdi portfolio\" and \"Full Stack Developer Pakistan\".…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}