Estudo de caso lighthouse clebson.cc
A um tempo atrás estava trabalhando para melhorar o meu Branding pessoal e o meu primeiro objetivo era melhorar o SEO da minha página que utilizo para falar sobre mim e finalmente consegui todos os scores do lighthouse em 100. Então hoje to vindo aqui compartilhar um pouco sobre experiência e como fiz para chegar nos 100 de status, esse artigo não tem o objetivo de ser um tutorial, muito pelo contrário, é mais algo para encorajar você a pesquisar sobre o que está escrito aqui.
Primeiro passo — Acessibilidade
O primeiro e mais difícil para mim foi trabalhar com a acessibilidade, mas foi interessante trabalhar novamente alguns conceitos que ensinava para meus alunos.
Trabalhar em um uso real para os “Accessible Rich Internet Application”(ARIA) é um pouco complexo, nossa pergunta natural é: “quando utilizar o ARIA?” Pra mim depois dessa experiência se tornou algo mais simples, devemos utilizar o aria quando estivermos com um componente não tão semântico. Por exemplo: um progress bar que fazemos utilizando uma div, não é nada semântico, então precisamos deixar acessível com os atributos ARIA.
Terminando a escrita dos atributos ARIA de alguns componentes finalmente pude seguir para um ponto que ainda estava pecando nos meus projetos, o texto alternativo para imagens e assim finalmente consegui a pontuação de 100 em acessibilidade.
Segundo passo — Melhores práticas
Por se tratar de um site relativamente simples, a pontuação de “melhores práticas” foi alta desde o início, para chegar em 100% precisei apenas de algumas simples configurações, como por exemplo ativar o header de Strict-Transport-Security, utilizar uma Canonical Tag e não utilizar target=”_blank” sem rel=”noopener”.
Terceiro passo — SEO
O terceiro e último passo que percorri é de longe o mais importante para o meu objetivo de rankear no google. O SEO, esse foi o mais custoso de conseguir os 100% de status. O mais interessante, é que todos os outros passos anteriores ajudaram a melhorar o SEO, como por exemplo os textos alternativos das imagens. Então assim que comecei a otimizar o SEO tive que focar em alguns conceitos:
- Distribuir as palavras-chave mais comuns pelas tags HTML importantes(h1,title, meta description). Isso ajudou os mecanismos de pesquisa a identificar adequadamente o tópico de cada página.
- Utilização de metatags para diversas mídias sociais(Open Graph Protocol).
- Utilização de dados estruturados(json-ld)
- Ter uma meta description concisa.
E finalmente chegou o tão sonhado 100 de status no SEO!
Obrigado pela leitura! Pretendo editar esse artigo durante a evolução da minha missão de melhorar meu branding. Enquanto não temos essa atualização, vou deixar aqui alguns links:
Repositório Github: https://github.com/clebsonf/clebson.cc
Site: https://clebson.cc/
Instagram: https://instagram.com/cl3bsonf/
