Existem várias maneiras de ocultar um elemento no CSS. Os efeitos de cada método na acessibilidade, layout e desempenho do site podem variar muito. Trabalhar com atributos HTML é uma maneira de ocultar elementos e, como este é um atributo global, pode ser usado em qualquer elemento HTML no CSS.
Neste artigo, veremos como ocultar um elemento HTML e quando fazer isso. Acompanhe!
O que é um elemento HTML oculto?
Um atributo HTML oculto indica que o elemento ainda não é ou deixou de ser relevante. Se algo estiver marcado como ‘hidden’ no CSS, isso torna o elemento oculto para os mecanismos de pesquisa, tornando-o invisível até mesmo para os leitores de tela.
Em outras palavras, o uso de um atributo HTML oculto garante que os mecanismos de pesquisa, como o Google, não renderizem determinados elementos.
Dica do especialista: booleano é uma variável binária, isto é, pode ter apenas dois valores possíveis, 0 (falso) ou 1 (verdadeiro). O atributo hidden é booleano. Isso significa que, se estiver presente, o valor será sempre verdadeiro e, se estiver ausente, o valor será falso.
Por que ocultar um elemento HTML?
Existem muitos motivos para ocultar um elemento HTML. Geralmente o atributo hidden é usado para impedir que o usuário veja um elemento até que algum requisito específico seja atendido.
Por exemplo: você pode ocultar certos elementos de uma página até que o usuário conclua o processo de login.
Muitas vezes, os webmasters decidem usar JavaScript para desbloquear os elementos ocultos, usando comandos parecidos com estes:
Por fim, um bom motivo para usar atributos HTML ocultos é a transição do Google para o Mobile First Index. O benefício mais claro para SEO é a possibilidade de colocar muito conteúdo em uma página para dispositivos móveis (que é pequena) e, simultaneamente, oferecer uma boa experiência ao usuário.
É o equilíbrio perfeito entre SEO e UX.
Como usar o atributo hidden
Ao usar o atributo hidden no HTML, é importante que você não vincule o elemento oculto a partir de outros não ocultos.
Por exemplo: um atributo href que tem um link apontando para uma seção oculta. O conteúdo marcado com hidden não deve ser relevante para o usuário — caso contrário, não estaria oculto. Portanto, não deveria haver nenhum motivo para criar um link para ele.
No entanto, em alguns casos, os elementos ainda podem estar linkados a elementos HTML ocultos no CSS.
Por exemplo: algumas descrições podem ser relevantes somente se forem referenciadas a partir do elemento que descrevem. Esse é o caso de um atributo aria-descriptoby. Essa descrição permanece oculta até que o usuário a acione ativamente com uma ação específica, como clicar ou passar o mouse sobre ela.
Dica do especialista: um atributo aria-descriptoby fornece um rótulo descritivo para um elemento no mesmo documento DOM.
É importante lembrar que alterar a exibição do estilo DOM de um elemento HTML oculto substituirá o primeiro comando. Em outras palavras, um elemento estilizado como display: flex será lido e exibido pelos navegadores mesmo na presença de um atributo oculto.
O que evitar ao ocultar um elemento HTML
Ocultar elementos é sempre um movimento muito arriscado e pode prejudicar seriamente suas classificações. Isso porque ele tem sido amplamente usado como técnica de spam, já que os mecanismos de pesquisa contam com algoritmos muito simples que podem ser enganados pela repetição de palavras-chave.
Sites de spam frequentemente usam técnicas black hat de SEO. Por exemplo: criar duas versões da mesma página, uma para o algoritmo e outra para visitantes.
Nesse caso, o webmaster escreveria parágrafos sem sentido, cheios de palavras-chave para enganar os mecanismos de pesquisa, enquanto os usuários veriam uma página otimizada para conversão, na qual o conteúdo original está oculto e inacessível.
Essa prática criava situações em que os usuários clicavam em um link pensando que levaria a um site legítimo, mas eram levados para outro lugar.
Isso era conhecido como ‘cloaking’ e permitia que os spammers aumentassem suas vendas de links de afiliados ou conversões de anúncios. Felizmente, tornou-se uma das principais causas de penalidades do Google.
Observação: a prática de cloaking não tem nada a ver com o atributo HTML hidden que discutimos neste post.
Como ocultar um elemento HTML sem violar as diretrizes do Google
Hoje em dia, a maioria dos sites apresenta elementos ocultos, geralmente na forma de uma aba na qual o usuário precisa clicar para acessar mais conteúdo.
Porém, o conteúdo oculto torna-se problemático apenas quando é completamente inacessível ao usuário. Então, há uma grande diferença entre camuflagem e elementos HTML ocultos acessíveis por meio de uma ação específica (como clicar em um botão ‘Leia mais’).
Em caso de dúvida, lembre-se desta regra: coloque algum elemento claramente visível que mostre aos usuários que há mais conteúdo na página e explique como eles podem acessá-lo.
Se um usuário puder ver os elementos ocultos na sua página, o Google também conseguirá e, com isso, não penalizará seu site.
O algoritmo do Google se aperfeiçoou muito desde seu lançamento e é capaz de renderizar uma página usando arquivos JavaScript e CSS. Os bots visualizam sites praticamente da mesma forma que um usuário. Por isso, foque em oferecer uma boa experiência de navegação.
A ferramenta Auditoria do site é fundamental para evitar as penalidades do Google. Se você quer encontrar problemas técnicos de SEO, acesse a aba Problemas na ferramenta para ver os erros, advertências e avisos encontrados no seu site.
Veja a lista completa de problemas que a Auditoria do site pode identificar.