Estava fazendo uso das ferramentas do Google para cores para encontrar algumas tonalidades da cor #e0138c, tem ótimas páginas para isso e o próprio Google Search tem uma ferramenta, acabei tendo uma surpresa
Search Engine Optimization, para os íntimos SEO
Ao procurar as cores para compor com o magenta algo me chamou atenção, eu estava como o quinto resultado no Google Search para essa codificação de cores
Por que não procurar o primeiro lugar?
Para isso precisamos entender um pouco de otimização para motores de busca (Search Engine Optimization) ou simplesmente SEO, para isso temos de entender a importância das metatags, relevância e Google Lighthouse
Para quem está interessado somente na parte da otimização pode pular os quadros de explicações rápidas, eles estão aqui para agregar relevância nesse artigo
Explicação rápida de RGB parargb(224, 19, 140)
O atributo RGB é composta de três números inteiros em ordem Red (R), Green (G) e Blue (B)
Imagine que você possua três laternas com controle de intencidade, com 0% apagada e 100% ligadas no máximo, sendo uma de cada cor, para gerar as outras cores apontamos as três para uma superfície branca e controlamos a porcentagem de cada cor:
Esse percentual é representado com um byte, oito bits representado como 28, com mínimo de 0 para 0% e máximo de 255 para 100%, por exemplo 50% é 128
Os valores da cor #e0138c são dividido em pares possuem esses valores:
Referência
Hexadecimal
Decimal
Porcentagem
Cor
Vermelha
e0
224
88%
Verde
13
019
07%
Azul
8c
140
55%
Título e Metatags
A tag title é usada para nomear a página, o conteúdo parece na aba do navegador e nome ao favoritar, ele tem forte importância na seleção dos resultados, recomendado um tamanho de 50 a 60 caracteres
Vamos usar um título de com 54 caracteres e o termo desejado #e0138c como parte do título
<title>Magenta "#e0138c" na aplicação de SEO | Johny W. Alves</title>
Outras tags importantes são as metatags, elas não aparecem, usadas no compartilhamento nas redes sociais
Como no exemplo abaixo, podemos ver um artigo compartilhado no Twitter, com título, descrição e miniatura (thumbnail) do artigo vindo das metatags
No nosso caso elas serão usadas pelos robôs de rastreamento (scrapper) e indexação das ferramentas de busca, com um pouco do conteúdo e como apresentar um resumo nos resultados
<metaname="title"property="og:title"content='Magenta "#e0138c" na aplicação de SEO | Johny W. Alves'/><metaname="description"property="og:description"content='Usando o termo "#e0138c" e regras do SEO para alcançar a otimização em resultados nas ferramentas de busca'/><metaname="image"property="og:image"itemprop="image"content="https://johnywalves.com.br/ogimage/seo-e0138c.jpg"/>
Estamos repetindo o título na metatag com as mesmas regras, a descrição explicando um resumo do conteúdo com tamanho variando de 100 a 155 caracteres e um imagem, para ilustrar a página com o caminho absoluto
Observação: essas metatags devem fazer parte do corpo do independente do JavaScript, os robôs do Google conseguem sem problemas interpretar quando geradas com JavaScript, mesmo nessa condição uma boa prática é fixar antes da execução
Relevância
O Google Search não prioriza o uso da metatag description, para apresentar os resultados e pontuar a relevância, ele prioriza o conteúdo da página, por isso estamos fazendo o uso dos blocos de explicação rápida, pensando em aumentar essa relevância
Explicação rápida de HSL parahsl(325, 84%, 48%)
O atributo HSL é a representação na roda das cores ou círculo cromático
Onde:
Hue (H) o ângulo na roda das cores no sentido horário, também chamado de matriz, os valores 0º e 360º são vermelhos, 120º verde, 240º azul e assim por diante;
Saturation (S) é saturação da cor, sendo 0% cinza médio (metade entre o preto e branco) e 100% da cor forte;
Light (L) quantidade de luz ou brilho em percentual da cor, com 0% preto e 100% branco.
Para a cor hsl(325, 84%, 48%) podemos deixar escura reduzindo o brilho ou mais clara aumentando o brilho
No exemplo uma variação de 20% de brilho, para uma variação monocromática
08% (-40%)28% (-20%)48%68% (+20%)88% (+40%)
Google Lighthouse
A ferramenta de Google Lighthouse pode ser encontrada entro das ferramentas de desenvolvimento do Google Chrome (F12 ou Configurações > Mais ferramentas > Ferramentas do desenvolvedor) ela aponta uma pontuação de 0 a 100 para os critérios de performance, acessibilidade, boas práticas e SEO, os robôs do Google gostam de páginas com boas pontuações para mobile, o relatório é bem detalhado e os erros não acompanhados por links para os artigos explicando o motivo e apontando possibilidades de soluções
Esse artigo estamos gerando com Gatsby, que costuma ter bons pontos de performance e tomamos os seguintes cuidados:
Tamanho e Formato de Imagens: As imagens e outros recursos devem usar formatos e dimensões mais otimizados, trocamos algumas imagens para .jpg e corte de algumas bordas, o plugin do Gatsby tem uma configuração para adicionar opção para Webp, um formato otimizado com 97.23% de suporte pelos navegadores;
Contraste: As cores de fundo e letras, devem tem um contraste suficiente para facilitar a leitura para pessoas com baixa visibilidade e tela com problema de brilho, entre outros problemas;
HTML Semático: Fazer uso das tags corretas para a situação adequada como <header> para cabeçalhos e <footer>para rodapé, também a ordem correta dos <h1>, <h2> ...;
Texto alternativo para imagens: As tags de imagens devem possuir o atributo alt com uma descrição de leitor de telas e caso a imagem não carregue.
Pontuamos 100 pontos em todos os aspectos para Desktop:
Não temos ainda... vou atualizar o artigo com as lições do processo e o resultado final
Atualizações
Todas as pesquisas apresentadas neste estudo foram realizadas no Brasil dentro de uma aba anônima no Chrome, com configuração de língua padrão para inglês e português brasileiro, somente a ferramenta de seleção de cores foi ocultada
O artigo foi publicado em 02 de outubro de 2022, depois dessa data tivemos os resultados:
Verificando oito dias depois
Em 10 de outubro contado oito dias depois, este artigo começou aparecer nos resultados, incluindo algumas imagens presentes no site
Sucesso 🎊 🎉 🍾 em quinze dias depois
Em 17 de outubro , a proposta foi superada, esperava ser o primeiro lugar no resultado, este artigo conseguiu ser o primeiro, segundo e terceiro juntamente com o monopólio das imagens apresentadas
A proposta era simples, competir com as página de listagem de cores e foi superada com uma certa margem
Essa página já está em primeiro lugar para "Johny W. Alves" e "Johny William de Oliveira Alves", qual termo devo buscar na próxima?
