SEO Para Desenvolvedores: Otimize Seu Site Next.js

Por Que Devs Devem Se Importar Com SEO

Voce pode ter o melhor produto do mundo — se ninguem encontra no Google, nao existe. SEO tecnico e responsabilidade do desenvolvedor, nao so do marketing.

Metadata no Next.js

// app/layout.tsx
export const metadata = {
  title: {
    default: 'Meu Site',
    template: '%s | Meu Site'
  },
  description: 'Descricao do site...',
  openGraph: {
    type: 'website',
    locale: 'pt_BR',
    url: 'https://meusite.com',
    siteName: 'Meu Site',
    images: [{ url: '/og-image.jpg', width: 1200, height: 630 }]
  },
  twitter: {
    card: 'summary_large_image'
  }
};

Metadata Dinamica Por Pagina

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [post.coverImage] }
  };
}

Sitemap Automatico

// app/sitemap.ts
export default async function sitemap() {
  const posts = await getAllPosts();
  return [
    { url: 'https://meusite.com', lastModified: new Date() },
    ...posts.map(post => ({
      url: 'https://meusite.com/blog/' + post.slug,
      lastModified: post.updatedAt
    }))
  ];
}

Core Web Vitals

Google usa 3 metricas para ranquear:

• LCP (Largest Contentful Paint): < 2.5s — otimize imagens e fonts


• INP (Interaction to Next Paint): < 200ms — minimize JavaScript


• CLS (Cumulative Layout Shift): < 0.1 — defina dimensoes de imagens

Otimizacao de Imagens

Use o componente Image do Next.js — ele otimiza automaticamente:

import Image from 'next/image';

<Image
  src="/foto.jpg"
  alt="Descricao"
  width={800}
  height={450}
  priority  // para imagens above the fold
/>

Structured Data (Schema.org)

<script type="application/ld+json">
{JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": post.title,
  "author": { "@type": "Person", "name": post.author },
  "datePublished": post.publishedAt
})}
</script>

Checklist SEO

• Titulo unico por pagina (< 60 caracteres)


• Meta description (< 160 caracteres)


• URLs amigaveis (slug, nao IDs)


• Sitemap.xml e robots.txt


• Open Graph tags para compartilhamento


• Imagens com alt text descritivo


• HTTPS obrigatorio


• Mobile-first (responsivo)