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: 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. É um método bastante eficiente e permite um controle melhor sobre a experiência do usuário.

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, enquanto oferece 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.

No entanto, em alguns casos, os elementos ainda podem estar linkados a elementos HTML ocultos no CSS. Algumas descrições podem ser relevantes somente se forem referenciadas a partir do elemento que descrevem. Esse é o caso de um atributo aria-describedby. 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-describedby 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 é um movimento 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 que podem ser enganados pela repetição de palavras-chave.

Sites de spam frequentemente utilizam técnicas black hat de SEO, como criar duas versões da mesma página: uma para o algoritmo e outra para visitantes. Nesse caso, o webmaster escrevia parágrafos sem sentido, cheios de palavras-chave para enganar os mecanismos de pesquisa.

Essas práticas criavam situações em que os usuários clicavam em um link pensando que levaria a um site legítimo, mas eram levados a outra página. Esse processo é conhecido como cloaking. Essa técnica permitia que os spammers aumentassem suas vendas de links de afiliados. Por isso, 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

A maioria dos sites hoje em dia apresenta elementos ocultos, geralmente na forma de uma aba clicável que permite acessar mais conteúdo. 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, siga esta regra: coloque um elemento claramente visível que mostre aos usuários que há mais conteúdo na página e explique como 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 e é capaz de renderizar uma página usando arquivos JavaScript e CSS.

Os bots do Google visualizam sites praticamente da mesma forma que um usuário. Por isso, foque em oferecer uma boa experiência de navegação.

Encontre e corrija problemas de SEO técnico com a ferramenta Auditoria do site

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 erros, advertências e avisos encontrados no seu site. Essa ferramenta fornece insights valiosos para otimizar o desempenho do seu site e garantir que ele esteja em conformidade com as diretrizes do Google.

Veja a lista completa de problemas que a Auditoria do site pode identificar. Identificar e corrigir esses problemas é essencial para manter a visibilidade do seu site e proporcionar uma experiência de navegação tranquila para os usuários.