# optimizing-seo

> Optimizes Next.js applications for search engines. Use to audit SEO, implement metadata, sitemaps, robots.txt, and JSON-LD structured data.

- Author: Damir Sagi
- Repository: Damir-VistaBlox/VistaBlox
- Version: 20260203124151
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/Damir-VistaBlox/VistaBlox
- Web: https://mule.run/skillshub/@@Damir-VistaBlox/VistaBlox~optimizing-seo:20260203124151

---

---
name: optimizing-seo
description: Optimizes Next.js applications for search engines. Use to audit SEO, implement metadata, sitemaps, robots.txt, and JSON-LD structured data.
tags: [seo, nextjs, frontend, optimization]
risk_level: medium
version: 1.1.0
---
# Next.js SEO Optimization

## Environment & Config
- Next.js 16+ (App Router)
- `baseUrl` configured in environment (e.g., `NEXT_PUBLIC_BASE_URL` or `site.config.ts`)

## When to use this skill
- When requested to "optimize SEO" or "fix indexing issues"
- When adding metadata, sitemaps, or robots.txt to a Next.js app
- When auditing the current SEO status of the application
- Before launching to production

## Workflow
1.  **Audit Current State:** Check existing `robots.txt`, `sitemap.xml`, and metadata using `resources/audit-checklist.md`.
2.  **Configure Root Metadata:** Ensure `app/layout.tsx` has comprehensive default metadata and `viewport`.
3.  **Implement Technical File:** Add `app/sitemap.ts` and `app/robots.ts`.
4.  **Add Structured Data:** Implement JSON-LD (`WebSite`, `Organization`, `BreadcrumbList`) using `resources/json-ld-templates.ts`.
5.  **Page-Level Optimization:** Use `generateMetadata` with canonicals for dynamic routes.
6.  **Troubleshoot:** Resolve indexing issues using the troubleshooting guide below.

## Instructions

### 1. Root Metadata (`app/layout.tsx`)
Ensure the root layout exports `metadata` and `viewport`.
**Critical:** `metadataBase` is required for relative URLs (OG images) to work.

```typescript
import type { Metadata, Viewport } from 'next';

export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
  ],
  width: 'device-width',
  initialScale: 1,
};

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || 'https://vistablox.io'),
  title: {
    default: 'VistaBlox - Property Investment',
    template: '%s | VistaBlox',
  },
  description: 'Premium property investment platform.',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    siteName: 'VistaBlox',
  },
  robots: {
    index: true,
    follow: true,
  },
};
```

### 2. Robots.txt (`app/robots.ts`)
```typescript
import type { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://vistablox.io';
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/private/', '/api/'],
    },
    sitemap: `${baseUrl}/sitemap.xml`,
  };
}
```

### 3. Sitemap (`app/sitemap.ts`)
```typescript
import type { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://vistablox.io';
  return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    // Add other static routes here
  ];
}
```

### 4. Structured Data (JSON-LD)
Implement a helper component to inject secure JSON-LD. See `resources/json-ld-templates.ts` for full schemas.

```typescript
// components/seo/json-ld.tsx
export function JsonLd({ data }: { data: Record<string, unknown> }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify(data).replace(/</g, '\\u003c'), // XSS protection
      }}
    />
  );
}
```

### 5. Troubleshooting & Fixes

**"Discovered - currently not indexed"**
- Check for "thin content" or duplication.
- Ensure internal linking is strong.

**"Blocked by robots.txt"**
- Verify `app/robots.ts` rules. Ensure `allow: '/'` is present.

**Duplicate Content**
- Enforce canonical URLs in `generateMetadata`:
```typescript
alternates: {
  canonical: `/proper-url/${params.slug}`,
},
```

## Usage Examples
- "Audit SEO" -> Run checks from `resources/audit-checklist.md`.
- "Add product schema" -> Use `JsonLd` component with Product schema pattern.
- "Fix redirects" -> Use `next.config.ts` redirects instead of client-side.

## Resources
- [Audit Checklist](resources/audit-checklist.md)
- [JSON-LD Templates](resources/json-ld-templates.tsx)
- [Next.js Metadata API](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)