O Google confirma os nomes de classe CSS não influenciam o SEO

Em um episódio recente do podcast de pesquisa do Google, Martin Splitt e John Mueller esclareceram como o CSS afeta o SEO.

Embora alguns aspectos do CSS não tenham influência no SEO, outros podem influenciar diretamente como os mecanismos de pesquisa interpretam e classificam o conteúdo.

Aqui está o que importa e o que não faz.

Os nomes de classe não importam para o ranking

Uma das sugestões mais claras do episódio é que os nomes de classes do CSS não têm impacto na pesquisa do Google.

Split declarou:

“Eu não acho que sim. Acho que não nos importamos porque os nomes das classes CSS são exatamente isso. Eles estão apenas atribuindo um pouco específico de regras de folha de estilo para elementos e é isso. É tudo. Você pode nomeá -los” Blurb “. Não faria diferença do ponto de vista de SEO. ”

Eles explicaram nomes de classe, são usados apenas para aplicar o estilo visual. Eles não são considerados parte do conteúdo da página. Portanto, eles são ignorados pelo Googlebot e outros analisadores HTML ao extrair informações significativas.

Mesmo se você estiver alimentando o HTML em um modelo de idioma ou em um rastreador básico, os nomes das classes não serão considerados, a menos que seu sistema seja explicitamente projetado para ler esses atributos.

Por que o conteúdo em pseudo elementos é um problema

Enquanto os nomes das classes são inofensivos, a equipe alertou sobre a colocação de conteúdo significativo em elementos pseudo -CSS como :before e :after.

Split declarou:

“A idéia novamente – a idéia original – é separar a apresentação do conteúdo. Portanto, o conteúdo está no html e como é apresentado no CSS. Então, com before e afterse você adicionar elementos decorativos como um pouco de triângulo ou um pequeno ponto ou uma pequena lâmpada ou um pouco de unicórnio – seja o que for – acho que é bom porque é decorativo. Não tem significado no sentido do conteúdo. Sem ele, ainda ficaria bem. ”

A adição de floreios visuais é aceitável, mas a inserção de manchetes, parágrafos ou qualquer conteúdo voltado para o usuário em elementos pseudo quebra o princípio principal do desenvolvimento da Web.

Esse conteúdo se torna invisível para mecanismos de pesquisa, leitores de tela e quaisquer outras ferramentas que dependam de analisar diretamente o HTML.

Mueller compartilhou um exemplo do mundo real de como isso pode dar errado:

“Uma vez houve uma escalada da equipe de indexação que dizia que devemos entrar em contato com o site e pedir para eles pararem de usar before e after… eles estavam usando o before Pseudo -classe para adicionar um sinal numérico a tudo o que considerou hashtags. E nosso sistema de indexação era como, seria tão bom se pudéssemos reconhecer essas hashtags na página, porque talvez sejam úteis para alguma coisa. ”

Como os símbolos de hashtag foram adicionados via CSS, eles nunca foram vistos pelos sistemas do Google.

Splitt testou -o ao vivo durante a gravação e confirmou:

“Não está no DOM … então não é escolhido pela renderização.”

CSS de grandes dimensões pode prejudicar o desempenho

O episódio também abordou questões de desempenho relacionadas a folhas de estilo inchadas.

De acordo com os dados do Almanaque da Web do HTTP Archive, o tamanho médio de um arquivo CSS cresceu para cerca de 68 kb para celular e 72 KB para desktop.

Mueller declarou:

“O almanaque da web diz que todos os anos vemos que o CSS cresce em tamanho e, em 2022, o tamanho da folha de estilo mediano era de 68 kilobytes ou 72 kilobytes.

Esse tipo de inchaço pode afetar negativamente os principais vitais da Web e a experiência geral do usuário, que são duas áreas que fazer influência rankings. Estruturas e bibliotecas pré -construídas são frequentemente a causa.

Embora os desenvolvedores possam mitigar isso com a minificação e a poda de regra não utilizada, nem todo mundo faz. Isso faz da otimização do CSS um item que vale a pena na sua lista de verificação técnica de SEO.

Mantenha o CSS rastreável

Apesar do papel limitado do CSS no ranking, o Google ainda recomenda tornar os arquivos CSS rastreáveis.

Mueller brincou:

“As diretrizes do Google dizem que você deve tornar seus arquivos CSS rastreáveis. Portanto, deve haver algum tipo de mágica lá, certo?”

A verdadeira razão é mais técnica do que mágica. O GoogleBot usa arquivos CSS para renderizar as páginas da maneira como os usuários os veriam.

O bloqueio de CSS pode afetar como suas páginas são interpretadas, especialmente para layout, amigas móveis ou elementos como conteúdo oculto.

Dicas práticas para profissionais de SEO

Aqui está o que este episódio significa para suas práticas de SEO:

• Pare de otimizar os nomes das classes: Palavras -chave nas classes CSS não ajudarão suas classificações.
• Verifique os elementos pseudo: Qualquer conteúdo real, como o texto destinado a ser lido, deve viver em html, não em :before ou :after.
• Tamanho da folha de estilo de auditoria: Arquivos CSS grandes podem prejudicar a velocidade da página e os principais vitais da Web. Aparar o que você pode.
• Verifique se CSS pode ser rastreável: As folhas de estilo de bloqueio podem interromper a renderização e impactar como o Google entende sua página.

A equipe também enfatizou a importância de usar tags HTML adequadas para imagens significativas:

“Se a imagem faz parte do conteúdo e você é como ‘Olhe para esta casa que acabei de comprar’, então você quer um imguma tag de imagem ou um picture Tag que realmente tem a imagem real como parte do DOM, porque você quer que vejamos como, ah, então esta página tem essa imagem que não é apenas decoração. ”

Use CSS para estilo e HTML para significado. Essa separação ajuda os usuários e os mecanismos de pesquisa.

Ouça o episódio completo do podcast abaixo:

https://www.youtube.com/watch?v=L2E3GBDP_QY