O primeiro post sobre a construção do meu portfólio com Next.js e TypeScript já estava ficando longo, mas havia uma história que eu não poderia deixar de fora. Uma história sobre obsessão, aprendizado e uma única palavra que mudou tudo. Este é o relato de como passei mais de 3 horas caçando 8 pontos perdidos no SEO.
🚨 O Problema Que Não Deveria Existir
A questão é a seguinte: meu portfólio antigo, construído com React + Vite e JavaScript puro, tinha uma pontuação perfeita de 100/100 no SEO do Lighthouse. Não era nada fancy, mas funcionava. Então, quando decidi reconstruir tudo do zero usando Next.js 15 e TypeScript—tecnologias supostamente mais "profissionais"—eu tinha um requisito inegociável: o novo site tinha que ser pelo menos tão bom quanto o antigo. Você pode imaginar minha frustração quando fiz o deploy do novo site e rodei o Lighthouse pela primeira vez:
SEO: 92 ❌
Espera... 92? Onde eu perdi 8 pontos?
🔎 A Investigação Começa No início, pensei que seria fácil. Problemas de SEO geralmente são simples, certo? Alt tags faltando, links quebrados, talvez uma meta description. Abri o relatório do Lighthouse e comecei minha checklist:
✅ Todas as imagens têm atributos alt descritivos
✅ Meta descriptions presentes
✅ Viewport configurado
✅ Estrutura HTML válida
✅ Hierarquia de headings adequada
Tudo parecia perfeito. Mas o Lighthouse insistia: "Links do not have descriptive text - 1 link found" 🤔Um link. Apenas um. Quão difícil poderia ser encontrá-lo?
🕳️ Descendo na Toca do Coelho Foi aqui que o Claude, meu assistente de IA para programação, entrou em cena. Eu perguntei: "Meu SEO no Lighthouse está em 92. O que pode estar errado?" O que se seguiu foi um mergulho profundo de 3 horas em padrões web que eu havia estudado, mas nunca realmente aplicado em produção:
🥊Round 1: Structured Data 💡"Vamos adicionar dados estruturados JSON-LD!" Claude sugeriu. Schema.org markup para Person, WebSite, BreadcrumbList. Implementei tudo cuidadosamente:
{ "@context": "https://schema.org", "@type": "Person", "name": "Gustavo Vieira Serpa", "jobTitle": "React Frontend Developer", ... }
Deploy. Teste. Ainda 92.
🗺️Round 2: Sitemap & Robots.txt
💡"Talvez você precise de um sitemap?" Claro, por que não. Criei o sitemap.ts, gerei o XML, adicionei robots.txt com as diretivas adequadas.
Deploy. Teste. Ainda 92.
🏷️Round 3: Mergulho Profundo nas Meta Tags
💡Passamos por cada meta tag: Open Graph, Twitter Cards, URLs canônicas, idiomas alternativos. Adicionei metadataBase, corrigi URLs de imagens, garanti que tudo fossem caminhos absolutos.
Deploy. Teste. Ainda 92.
🔄A Espiral de Refatoração Neste ponto, eu não estava mais apenas corrigindo SEO—estava reconstruindo. Componentes foram refatorados. HTML semântico substituiu divs genéricas. Adicionei aria-labels a cada botão com ícone, aumentei o tamanho dos tap targets, mudei <h2> para <h1> na seção hero.
✨Cada mudança parecia que seria a definitiva. Cada deploy carregava esperança. 😤E cada teste do Lighthouse retornava o mesmo número: 92.
🤖A Verdade Sobre Assistência de IA
Aqui está algo importante que aprendi: IA é uma ferramenta incrível, mas não é onisciente. Claude me deu sugestões excelentes—cada uma delas era uma best practice. A qualidade do meu código melhorou dramaticamente. Aprendi sobre padrões web que eu havia apenas folheado antes.
❌ Mas Claude não podia ver minha página renderizada de fato. Não podia clicar no meu site e encontrar aquele único link problemático. Só podia sugerir possibilidades baseadas em problemas comuns.
💡 A verdade é que nem mesmo a melhor IA pode substituir debugging prático.
💡 A Solução de Duas Palavras Depois de três horas, cansado mas não derrotado, decidi reconstruir manualmente um dos meus componentes do zero. Não porque achava que resolveria algo—apenas para ver o código com olhos frescos. Na seção About, havia um botão simples:
<Link href="/aboutus"> See more </Link>Deploy. Abri o Lighthouse. Cliquei em "Generate report."
SEO: 100 ✅
😅 A Vitória Agridoce Fiquei olhando para aquele lindo "100" por um minuto inteiro. Três horas de trabalho. Dezenas de deploys. Montanhas de conhecimento novo sobre sitemaps, dados estruturados e padrões web. Tudo resolvido mudando "See more" para "Read More About Gustavo." Foi tempo perdido? No início, me senti frustrado. Todo aquele esforço para uma correção tão simples! Mas então olhei para o meu código. Os dados estruturados ainda estavam lá, tornando meu site mais descobrível. O sitemap estava configurado adequadamente. Cada imagem tinha alt text significativo. Meu HTML semântico estava mais limpo do que nunca. Eu não tinha desperdiçado tempo. Eu tinha construído uma fundação. 📚 O Que Realmente Aprendi
📊Dados estruturados ajudam o Google a entender meu conteúdo 🗺️Sitemap garante que todas as páginas sejam rastreadas 📱Meta tags melhoram o compartilhamento social ♿HTML semântico melhora acessibilidade
Essas coisas se acumulam. Elas tornam seu site mais robusto. 4.🎯 Confie no Processo, Não Apenas nas Ferramentas A IA me ajudou brilhantemente, mas a solução final exigiu persistência humana e debugging manual. Ferramentas te guiam; experiência te completa. 💭Reflexões Finais Três horas por 8 pontos pode parecer exagero. Mas eu não ganhei apenas 8 pontos de SEO—ganhei confiança na minha compreensão de padrões web. Agora posso implementar dados estruturados adequados, criar sitemaps e otimizar meta tags sem copiar de tutoriais. E mais importante: aprendi a ler mensagens de erro com mais cuidado. Às vezes a resposta não é complexa. Às vezes são apenas duas palavras. Agora meu portfólio está com pontuações perfeitas em todas as métricas do Lighthouse. Não porque tive sorte, mas porque conquistei—um erro, uma correção, uma lição de cada vez. A moral? Até os menores detalhes importam no desenvolvimento web. E às vezes, a jornada te ensina mais do que o destino.
Você já passou horas debugando só para descobrir que a solução era constrangedoramente simples? Compartilhe sua história nos comentários abaixo! Tags: #DesenvolvimentoWeb #SEO #Lighthouse #NextJS #LiçõesAprendidas #VidaDeDev
Share your thoughts about this article
No comments yet. Be the first to share your thoughts!