SEO Avançado para Blogs em Next.js

SEO (Search Engine Optimization) é fundamental para qualquer blog. Com Next.js, você tem ferramentas poderosas para otimizar seu conteúdo.

Metadados Dinâmicos

Next.js permite gerar metadados dinâmicos para cada página:

export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await getPostBySlug(params.slug);

return {
title: post.title,
description: post.description,
keywords: post.keywords,
openGraph: {
title: post.title,
description: post.description,
images: [post.image],
},
};
}

Sitemap Automático

Um sitemap XML ajuda os motores de busca a indexarem seu conteúdo:

export default function sitemap(): MetadataRoute.Sitemap {
const posts = getAllPosts();

return [
{
url: 'https://seudominio.com/blog',
lastModified: new Date(),
},
...posts.map((post) => ({
url: https://seudominio.com/blog/${post.slug},
lastModified: post.date,
})),
];
}

Structured Data (JSON-LD)

Dados estruturados ajudam na exibição de rich snippets:

const jsonLd = {
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
description: post.description,
image: post.image,
datePublished: post.date,
author: {
'@type': 'Person',
name: 'Seu Nome',
},
};

Performance e Core Web Vitals

Next.js oferece otimizações automáticas:

• Image Optimization: Componente Image com lazy loading
• Font Optimization: Carregamento otimizado de fontes
• Code Splitting: Divisão automática de código

Conclusão

Implementar SEO avançado em Next.js é relativamente simples graças às suas APIs poderosas. Foque em conteúdo de qualidade e as ferramentas técnicas cuidarão do resto.

SEO Analytics

Monitorando métricas de SEO e performance