Como adicionar JSON-LD no Next.js: esquemas de artigos, produtos, software e trilhas de navegação

Adicione JSON-LD seguro e preciso às páginas Next.js App Router, com exemplos de Article, Product, SoftwareApplication e BreadcrumbList.

Equipe Adios16 de julho de 2026Atualizado 17 de julho de 20268 min de leitura

Dados estruturados devem ser uma projeção tipada da página visível ao usuário. Não são um segundo canal de marketing para preencher fatos ausentes com suposições otimistas.

Escolha a entidade antes do esquema

Identifique o que a página representa principalmente. Uma notícia ou publicação de blog pode ser Article. Um item à venda pode ser Product com Offer. Uma página de software pode descrever SoftwareApplication. BreadcrumbList representa a hierarquia de navegação e pode acompanhar outra entidade principal.

Não escolha um tipo só pela aparência atraente nos resultados de busca. Essas funcionalidades têm regras de elegibilidade além de JSON válido, e publicar a marcação não garante um resultado enriquecido. O objetivo inicial é uma descrição precisa, legível por máquina e alinhada à página visível.

Renderizar JSON-LD no servidor

Monte o objeto em um Server Component com o mesmo registro que renderiza a página. Serialize-o em um script com type application/ld+json. Substitua os caracteres menor que no valor serializado para impedir que strings controladas pelo usuário fechem o elemento script e injetem marcação.

Mantenha a função auxiliar pequena. Ela deve serializar com segurança, não decidir fatos do negócio. Crie objetos Article, Product ou SoftwareApplication em funções tipadas que validem os campos obrigatórios e omitam valores opcionais desconhecidos.

export function JsonLd({ data }) {
  const json = JSON.stringify(data).replaceAll("<", "\u003c");
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: json }}
    />
  );
}

Descrever um artigo

Use título canônico, descrição, datas de publicação e alteração, autor, responsável pela publicação, imagem principal e URL da página. Atualize dateModified apenas em mudanças substanciais do artigo. Recompilar todo o site não é uma revisão editorial.

O autor deve corresponder ao crédito visível. Se a página atribui a autoria a uma organização, marque essa organização; se atribui a uma pessoa, use essa pessoa. Inclua links estáveis para autor ou responsável pela publicação quando disponíveis e mantenha a URL do logotipo absoluta.

const article = {
  "@context": "https://schema.org",
  "@type": "Article",
  headline: post.title,
  description: post.excerpt,
  datePublished: post.publishedAt,
  dateModified: post.updatedAt,
  mainEntityOfPage: SITE_URL + "/blog/" + post.slug,
  author: { "@type": "Organization", name: "Acme" },
};

Descrever um produto à venda

Product pode incluir nome, descrição, imagens, SKU, marca e ofertas. Os valores de Offer — preço, moeda, URL, condição e disponibilidade — devem corresponder ao que o comprador vê e pode comprar. Gere-os a partir do mesmo registro comercial usado pela página.

Variantes exigem um modelo claro. Não publique preços contraditórios como uma única oferta sem explicar a faixa e não declare InStock quando o checkout rejeita o item. Resenhas e avaliações agregadas devem vir de dados reais e visíveis e seguir as políticas de busca pertinentes.

const product = {
  "@context": "https://schema.org",
  "@type": "Product",
  name: item.name,
  image: item.images,
  sku: item.sku,
  offers: {
    "@type": "Offer",
    price: item.price.amount,
    priceCurrency: item.price.currency,
    availability: item.inStock
      ? "https://schema.org/InStock"
      : "https://schema.org/OutOfStock",
  },
};

Descreva honestamente uma aplicação SaaS

SoftwareApplication pode identificar nome, categoria, sistema operacional, URL e descrição da aplicação. Adicione Offer somente quando preço e condições corresponderem a uma opção visível. Se o preço variar ou exigir contato, represente isso corretamente em vez de forçar uma oferta enganosa de preço zero.

Dados estruturados não substituem uma página clara de produto. Ela ainda precisa explicar finalidade, público, funcionalidades, restrições, como consultar preços e próxima ação. Não inclua alegações de avaliações ou prêmios sem respaldo na página e nas evidências.

Criar trilhas de navegação a partir da hierarquia canônica

BreadcrumbList descreve o caminho pela arquitetura de informação do site. Cada item tem posição, nome e URL canônica. A trilha visível e o JSON-LD devem concordar. Não inclua todos os segmentos da rota se a hierarquia apresentada ao usuário usa um rótulo mais simples.

Gere trilhas de navegação a partir dos dados da rota, não analisando URLs arbitrárias. Um produto pode pertencer a várias categorias, mas a página deve escolher a hierarquia canônica reforçada pela navegação visível e pelos links internos.

const breadcrumbs = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: items.map((item, index) => ({
    "@type": "ListItem",
    position: index + 1,
    name: item.name,
    item: new URL(item.path, SITE_URL).toString(),
  })),
};

Validar os dados e o comportamento de falha

Valide sintaxe JSON, estrutura do esquema e requisitos da funcionalidade de busca e compare todos os valores relevantes com a página visível. Teste aspas, sinais de menor e maior que, Unicode, imagens ausentes, ausência de preço, produtos sem estoque, artigos não publicados e URLs canônicas alteradas.

Quando um campo opcional faltar, normalmente omita a propriedade. Se faltar um fato obrigatório do negócio, a página pode não estar pronta para aquele esquema. Registre falhas de validação no desenvolvimento e na ingestão de conteúdo, em vez de publicar valores padrão inventados.

Verificar os dados estruturados na rota promovida

A Adios permite que a mesma versão Next.js sirva a página visível e o JSON-LD em um ambiente persistente. Implante a candidata, acesse a rota gerada e valide o script no HTML real. Logs de compilação revelam erros de serialização ou tipos; logs de execução ajudam a rastrear registros que só falham com dados de produção.

Após a verificação de saúde passar, mantenha o domínio personalizado e o TLS gerenciado vinculados à versão promovida. Repita a validação na URL canônica porque host, redirecionamentos, variáveis de ambiente e URLs de imagens podem diferir do teste local.

env:
  NEXT_PUBLIC_SITE_URL: https://www.example.com

runtime:
  name: node@24
  port: 3000
  health_path: /api/health

Todos os artigos