MetaCraft — gerador de SEO/OG/Schema
Ferramenta web que gera metatags OG/Twitter e JSON-LD com preview ao vivo, imagem OG dinâmica e estado compartilhável via URL.
Problema
Criar metatags OG/Twitter e JSON-LD do jeito certo é chato, repetitivo e fácil de errar; além disso, fazer uma imagem OG bonita normalmente exige editar arte manualmente.
Contexto
Projeto pessoal focado em produtividade pra devs: gerar SEO/OG/Schema rápido, com preview, validação e um link compartilhável que já abre tudo preenchido via query string.
Objetivos
- Gerar metatags OG/Twitter e canonicals de forma confiável
- Gerar JSON-LD (Schema.org) para WebSite/Article/Person
- Criar imagem OG dinâmica sem depender de Photoshop (endpoint /api/og)
- Ter preview ao vivo, validação clara e UX/A11y caprichadas
- Permitir compartilhar o estado do formulário via URL
Abordagem
- Next.js (App Router) com generateMetadata lendo searchParams
- Form com React Hook Form + Zod para validação e erros acessíveis
- Sincronização do estado com query string (com debounce) para compartilhamento
- Endpoint /api/og com @vercel/og (ImageResponse) gerando PNG 1200×630
- Checagem de contraste WCAG e detalhes de A11y (skip link, foco visível, labels/erros bem vinculados)
Solução
- Interface em cards com campos para Title/Description/Site Name/Canonical e opções de OG/Twitter
- Preview ao vivo do <head> + botão para copiar o snippet pronto
- Gerador de imagem OG (cores e título) com URL direta para testar
- Templates de JSON-LD para tipos comuns (WebSite/Article/Person)
Resultados
- Fluxo rápido: preencher → validar → copiar snippet → colar no projeto
- Imagem OG personalizada por parâmetros (sem edição manual de arte)
- Colaboração simples: enviar a URL com parâmetros e abrir tudo preenchido
- Base bem redonda de SEO + A11y para uso em projetos reais
Feedback do cliente
Em breve.