Vamos começar indo um pouco além do display:none.
Você já usou essa técnica de visually-hidden?
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
overflow: hidden;
word-wrap: normal;
}Lembrou? Não? Ela faz a mesma coisa que a classe sr-only do Tailwind CSS .
Elas têm o mesmo objetivo: ocultar um elemento visualmente, e deixá-lo disponível apenas para leitores de tela e SEO. E no fim, melhorar a acessibilidade.
Porém isso pode ter um impacto direto no SEO. O Google não vai muito com a sua cara quando você mostra algo para os motores de busca mas oculta dos usuários. E isso pode punir o seu site no rankeamento das pesquisas.
A intenção aqui não é falar de CSS, e sim do impacto dessa técnica no SEO. Mas só para esclarecer...
O que essa técnica faz?
Resumidamente:
Retira do elemento do fluxo normal da página
Reduz seu tamanho a zero
E remove espaçamentos
O visually-hidden oculta um elemento visualmente, mas o mantém disponível para leitores de tela e os robôs do Google.
Assim, você pode acrescentar informações importantes para pessoas cegas ou com baixa visão. E essas informações não irão atrapalhar o layout ou são desnecessárias para pessoas com visão.
Veja um exemplo desse tipo de informação no site da Apple. Na imagem a seguir, abaixo de cada produto, existe um botão com a label "Saiba mais":
Para pessoas com visão, está claro o que cada botão "Saiba mais" faz: mostra mais informações sobre o produto daquele contexto. Mas só isso não basta para a acessibilidade. Como deixar claro para todos o que esses botões fazem?
Melhorar a compreensão do botão "Saiba mais"
Se tiver curiosidade, instale um leitor de tela no seu computador.
Ele irá narrar as informações de cada produto de cima para baixo, e depois passar para o próximo produto. Sempre que o usuário focar no botão "Saiba mais", por padrão o leitor irá narrar apenas "Saiba mais".
Mas ao longo de uma lista de produtos, isso fica chato e pouco claro. "Saiba mais", "Saiba mais", "Saiba mais"... Saiba mais sobre o que, meu consagrado?
Existem algumas formas de corrigir isso.
Solução 1: colocar mais informações no botão
Como solução, o front-enzo colocou o nome de cada produto dentro do saiba mais:
Agora o tamanho do botão depende do tamanho do nome do produto. Isso pode ir contra o design system, além de quebrar facilmente o layout.
Solução 2: visually-hidden
Essa é a técnica que comentei lá no começo.
Você pode fazer assim como na solução 1, porém ocultar visualmente o nome do produto:
<a href="/br/iphone-16/">
Saiba mais <span class="visually-hidden">sobre o iPhone 16</span>
</a>Isso fará o botão mostrar apenas o texto "Saiba mais" como label, e o leitor de tela irá narrar "Saiba mais sobre o iPhone 16".
Mas você cai no problema que contei no início, isso fica disponível apenas para parte dos usuários. Assim, o Google fará um pente fino no seu site.
A Shopify também não recomenda ocultar algo apenas visualmente por motivos de layout.
Solução 3: aria-label
A solução que a Apple adotou nesta página foi colocar o texto completo dentro do atributo aria-label.
Essa me parece a melhor solução até o momento, porque o leitor de tela prioriza o aria-label em relação ao conteúdo da tag HTML. Assim, não é preciso nenhuma técnica obscura para ocultar visualmente as coisas.
Outras situações que podem exigir o uso do visually-hidden são:
Títulos que precisam estar no HTML mas não fazer parte do design
Textos explicativos adicionais desnecessários para usuários com visão
Labels de formulários com design minimalista
Mas afinal...
Visually-hidden impacta o SEO do site?
Antes de qualquer coisa, você sabe o que é cloaking?
Segundo o Google, cloaking (camuflagem em português) é uma técnica para apresentar diferentes conteúdo no site, a depender de quem acessa. Se for um usuário comum, mostra algo; se for um motor de busca, mostra outro. É uma camuflagem do conteúdo.
Isso te lembra algo?
Essa técnica é considerada black hat, pois ela engana o motor de busca para melhorar o rankeamento do site de forma fraudulenta. E caso o Google descubra, irá penalizar seu site.
Logo, posso concluir que visually-hidden causa cloaking, e logo é ruim. Certo? Mais ou menos.
Na página que linkei acima, o Google usa exemplos muito extremos para explicar o uso de cloaking:
Você cria uma página sobre um assunto (medicamento com descontos), mas configura ela para mostrar outro assunto (destinos de viagens) quando for acessada por um motor de busca
Você insere palavras "invisíveis" na página que o usuário não vê, mas aparecem para os robôs
Isso parece mal intencionado, mais do que ocultar algumas palavras dentro de um botão "Saiba mais".
Afinal, visually hidden é cloaking? A diferença entre o remédio e o veneno é a dose.
Se usar o visually-hidden com cuidado, não haverá problemas. Mas se abusar, isso facilmente se encaixao como cloaking.
Se o google é realmente inteligente, ele vai perceber que o visually-hidden serve apenas para não quebrar o layout e melhorar a acessibilidade, em vez de mostrar conteúdos completamente diferentes, aplicar golpes, spam, etc.
Agora não pense em algo pequeno demais, como um texto dentro de um botão; ou grandioso demais, como o assunto principal da página. Veja um meio termo: ocultar a tag H1.
Se você já estudou um pouco sobre HTML semântico e SEO, sabe que essa tag é essencial para o rankeamento do site. E se eu ocultar ela?
Aplicar visually-hidden no H1 da página impacta no SEO?
A tag H1 do HTML é uma das mais importantes da página.
Ela é responsável por descrever o assunto principal. Porém, às vezes esse assunto é tão claro que fica redundante exibir um H1. E você opta por aplicar um visually-hidden ou nem colocá-la no HTML.
Como eu disse alguns parágrafos acima, espero que os robôs do Google realmente sejam inteligentes. Se o cloaking é aplicado em diversas páginas do site em conteúdos grandes, muitas tags HTML, etc... um sinal de alerta deve ser ligado. Por outro lado, se você faz pouco uso disso, espera-se que o Google não seja tão linha dura.
Ocultar a tag H1 apenas da página inicial, por exemplo, é completamente compreensível. Mas o mesmo não se aplica a uma subpágina como um post de blog, pois ele perderia relevância nas pesquisas.
Como você pode ver, são muitas questões, e pouco se fala que SEO é uma junção de fatores. Se você ocultar o H1, o Google não não irá lhe banir para sempre. Assim como se você usar as palavras-chave certas, não será automaticamente movido para o topo das pesquisas.
Dito isso, seo on-page é apenas um dos fatores. Então faça o menor (ou nenhum) uso de cloaking possível, enquanto cuida de outros fatores, como:
Backlinks
CTR
Tempo de permanência na página
Bounce rate
Entre outros
Recomendo muito que você leia esse artigo sobre o impacto no SEO de ocultar o H1 na página inicial de um site .
A liderança mandou eu fazer cloaking. E agora?
Ok, você já sabe (quase) tudo sobre visually-hidden e cloaking.
Mas a pessoa techlead chegou e disse que é para fazer mesmo assim. Nesse caso você pode tomar alguns cuidados.
Estilizar o H1
Use o CSS ao seu favor.
Sugira ao time abandonar a tag HTML H1 com o estilo default, um texto grande, em bold e com destaque. E em vez disso, estilizá-lo para parecer um parágrafo comum.
Assim você mantém o mesmo conteúdo para todos os usuários e robôs de busca, sem quebrar o layout.
Oculte o conteúdo com Javascript
Outra técnica que vejo muito acontecer é ocultar conteúdo com Javascript.
Isso tem um problema. Na maioria das vezes, o Javascript só executa após toda a página montar. Então pode ser que o usuário veja o conteúdo, e alguns segundos depois ele suma. Para a experiência do usuário, estabilidade da página e evitar CLS (cumulative layout shift) , isso é horrível.
Então pense bem.
O Google baniu ou penalizou meu site e olha no que deu
Para finalizar as dicas, procure pelo Google Search Console.
Essa ferramenta serve para você monitorar como um site performa nas buscas, com dados sobre:
Quantidade de cliques
Principais palavras-chave
Etc
Ele também irá te sinalizar sobre problemas de indexação das suas páginas. Recomendo ver esses alertas e relatórios com frequência e corrigir o quanto antes quando algo surgir.
Se você já leu tudo na internet sobre SEO, maratonou o demenezes.dev (cof cof), e mesmo assim deu problema no SEO, pode consultar esse guia sobre como corrigir sites invadidos .
Além disso, sites que aplicam paywall (para exibir conteúdo apenas para usuários autenticados) podem sofrer do mesmo problema. E o Google tem uma documentação para amostragem flexível (paywall).
Callback
A técnica de visually-hidden serve para ocultar visualmente um conteúdo do site, mas mantê-lo disponível para leitores de tela e robôs de busca.
Você pode usar ela na melhor das intenções, como por exemplo manter a boa acessibilidade sem quebrar o layout. Mas alguns casos podem se encaixar em cloaking, uma técnica black hat de SEO mais desencorajada do que Javascript no back-end (brincadeira).
Visually-hidden não necessariamente penaliza o SEO do seu site, mas cloaking sim.
Ocultar visualmente o H1 de uma página pode não ser prejudicial, desde que isso se aplique à página inicial.
Se você já tomou todos os cuidados e mesmo assim precisa aplicar o visually-hidden, use algumas alternativas. Você pode estilizar o H1 de uma forma que não prejudique o layout, ou um conteúdo com Javascript (sempre cuidando do CLS).
Por fim, mantenha o seu site conectado ao Google Search Console para ser notificado de possíveis problemas de SEO.
Se você está lendo aqui, imagino que SEO seja algo importante no seu trabalho, ou pelo menos está nos seus interesses. Então te convido a ler esse artigo sobre como evitar que imagens sem texto alternativo afetem o SEO e acessibilidade do seu site.
Esse tema sempre me desperta muita curiosidade, pois SEO é a intersecção do front-end com marketing. E isso impacta diretamente no dinheiro que entra no bolso da empresa. Sem falar que minha primeira formação foi em marketing, antes de fazer a migração para a área de desenvolvimento.
Muito obrigado pela sua leitura. Deixe seu comentário caso tenha dúvidas, ou para agregar no conteúdo. Vou ficar muito feliz em ler :)
