Eu mostro um passo a passo prático para melhorar SEO e acessibilidade em sites feitos no Framer. Primeiro configurei os textos alternativos (alt) de todas as imagens usando um plugin e traduzi para português, apliquei a tag figure nas imagens, e garanti a correta hierarquia de headings (h1–h6), transformando elementos errados em p ou ajustando a ordem para manter a semântica. Também corrigi aria-labels em logos e ícones com link, converti elementos visuais soltos em botões quando necessário e organizei as layers (header, main, section, footer) para uma arquitetura clara. Usei um plugin de contraste para ajustar cores e melhorar legibilidade, e revisei as cores globais do projeto para padronizar a paleta. Depois disso fiz testes iniciais no PageSpeed em navegação anônima (focando desktop) para validar as mudanças; corrigi itens apontados como baixo contraste e ausência de labels, e notei um problema temporário com o componente ticker do Framer 2.0 que não reconhecia listas corretamente. Essas correções aumentam a acessibilidade, ajudam o crawler a entender o conteúdo e elevam a nota de SEO e PageSpeed — o que impacta positivamente ranqueamento. Na próxima aula vou detalhar otimizações de performance. Termos técnicos (explicação rápida): - Alt (texto alternativo): descrição textual de uma imagem usada quando a imagem não carrega ou por leitores de tela. - Tag figure: elemento semântico que envolve imagens/ilustrações com propósito de agrupamento. - h1–h6 (headings): títulos hierárquicos que organizam o conteúdo; h1 é o principal. - p: parágrafo, tag neutra quando não é título. - aria-label (area label): atributo que descreve para leitores de tela o propósito de um elemento sem texto visível. - PageSpeed: ferramenta do Google que avalia performance e acessibilidade de páginas. - SVG: formato de imagem vetorial usado para logos e ícones. - li/ul: tags de lista (li = item, ul = lista não ordenada).