Olá leitores da Agência Mestre,
Hoje estou aqui parar tirar uma das dúvidas mais recorrentes da área de Search quando falamos de arquitetura e design, o famoso text-indent. Vamos ver a pergunta feita no meu Formspring:
text-indent: -9999px; pra tags de heading (h1, h2) é passível de punição no Google?
Vamos entender um pouco mais sobre o tal assunto.
Image Replacement
Em um dos primeiros artigos do antigo SEO Dicas, blog que antecedeu a Agência Mestre, levantamos a discussão sobre uma técnica chamada image replacement, que nada mais é que substituir uma imagem por um texto através do uso de CSS, ou seja, o browser irá mostrar uma imagem, enquanto no HTML você verá apenas o texto.
Esta é uma técnica bem comum, utilizada por designers para manter uma fonte ou ainda facilitar a codificação do HTML.
Punição ou Não?
Bom, vamos aos fatos. A primeira coisa que eu gostaria de compartilhar com vocês é o vídeo do Matt Cutts, falando um pouco sobre o assunto:
Neste vídeo, o Matt Cutts afirma que a melhor maneira de incluir um logo em um cabeçalho de um website é da forma tradicional, em forma de imagem, descrevendo-a pela ALT tag. Ele recomenda evitar o uso da técnica de image-replacement.
Em seguida, vamos entender bem o que o Google fala em suas diretrizes sobre texto escondido:
Se percebermos que o seu site tem texto e links ocultos com propósito enganoso, ele poderá ser removido do índice do Google e não aparecerá mais nas páginas de resultados de pesquisa.
Existem diversas recomendações em todo o texto das diretrizes mas eu ressalto exatamente o texto acima, onde reforço para vocês: utilizar a técnica de image replacement para adicionar “algumas palavrinhas a mais” pode fazer com que o seu website seja punido.
Mas não posso usar nada?
Um ponto que eu gostaria de adicionar através da minha experiência é que o Google não irá punir o seu website por usar text-indent desde que você escreva exatamente o que a imagem contém.
Por exemplo, se no seu logo diz “Empresa de Calçados” então o seu texto no HTML deve estar refletindo exatamente o texto da imagem. Não fuja disso em hipótese alguma.
Espero que tenham gostado deste artigo e até o próximo!
![Black Friday: Estratégias Para Vender Mais [2024]](https://www.agenciamestre.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2022/10/black-friday-guia-definitivo-270x173.jpg.webp)
Ei pessoal!
Bem interessante a discussão!
Bom, o que posso dizer é que, como front-end developer a mais de 6 anos, SEMPRE usei image replacement, pois deixa seu CSS/HTML muito mais elegante, organizado e de fácil manutenção. Em todos os sites que fiz isso, nunca tive problemas com punição ou coisa do tipo! Aliás, a maioria dos front-end que utilizam a técnica muitas vezes não tem nem conhecimento de SEO, como eu não tinha até pouco tempo atrás. Além disso, image replacement é coisa mínima comparado à toda estrutura de um website.
Devemos lembrar também que o foco deve sempre no USUÁRIO! Se pensarmos assim, não há o pq de nos preocuparmos!
Creio que devemos nos importar com fatores mais importantes em relação a SEO, pois muitas vezes acaba virando “xiitismo” e deixamos de ser levados a sério como profissionais! 😉
Enfim, era essa minha opinião, com a visão de um front-end e não somente de SEO! 😉
Primeiramente parabéns por mais um artigo de qualidade.
Se você afirma que devemos por “exatamente o texto da imagem” para o site não ser punido, isso significa que o Google consegue “ler” o que está escrito nas imagens?
Forte abraço!
Olá Carlos,
Não existem provas ou patentes que eu tenha em mãos para provar isso, mas uma vez que a sua análise pode ser feita por um profissional do Google, eu consideraria deixar corretamente o seu código.
Ola Ricotta
Vc diz: “se no seu logo diz “Empresa de Calçados” então o seu texto no HTML deve estar refletindo exatamente o texto da imagem. Não fuja disso em hipótese alguma.”
Vc quer dizer que o meu texto que esta com image replacement deve estar idêntico ao texto na Alt Tag da imagem?
No site da minha agência http://www.culturetec.com.br utilizei muito desta tecnica (image replacement) nos Titulos de cabeçalhos e no logo. Nunca fomos punidos pelo Google e temos bons rankeamentos para algumas keywords. Porem sempre procurei nao fazer Black Hat.
Bom assunto para se discutir.
Oi Emerson,
O que o Fábio quer dizer, é que precisamos evitar técnicas de black hat, onde você coloca palavras-chave com grande volume de busca mas que não tem nada a ver com o assunto do seu site ou a imagem que você está publicando. No seu caso, o ideal seria você colocar o texto “Culturetec Agencia Web”, mas mesmo que tenha adicionado algo a mais no img-replacement do seu logo, você não está tentando trapacear, está apenas descrevendo a empresa.
abs.
Guilherme Grillo
twitter.com/@AnalistaSEO
Eu também vou por esta linha mais moderada.
Não acredito que o Google vai me punir por eu usar um breve texto explicativo no logo descrevendo o site. Eu ainda uso o title=”” com a mesma descrição, ou seja, não estou enganando o usuário, a informação completa esta no title=”” e na propriedade HTML que está minha logo (h1 ou div).
Aurélio Arantes | http://www.twitter.com/aurelioarantes
O que eu quis dizer na verdade é para utilizar exatamente o que é visto na imagem. Por exemplo, no logo da Agência Mestre está escrito “Agência Mestre”, logo, no HTML não poderia estar escrito “Otimização de Sites”. Entende o ponto?
Fábio, mas pelo conteúdo da página se tratar de tal “keyword” será que seria errado usar? Pois em alguns casos na home a logo seria o title principal da página e nas internas seria o nome da seção.
Bem interessante, apesar que confirmou o que já sabia. Analisando a página inicial do Google, os que eles fazem é colocar a imagem dentro de uma div sem nenhuma informação, não seria algo “estranho”?
Oi Tiago,
Curiosamente, algumas coisas ligadas ao google são como “casa de ferreiro, espeto de pau”. Se você acessar o Google.com peceberá que eles colocam a imagem do Google, exatamente da forma que eles orientam, uma imagem, com ALT text, já nos outros países ocorre isso que você descreveu, uma div com outra div dentro informando o país e fazendo o replacement.
abs.
Guilherme Grillo
twitter.com/@AnalistaSEO
Bacana o Post Fábio,
Essa realmente é uma grande dúvida para desenvolvedores, eu particularmente prefiro usar:
Calçados | Amorim Calçados
Onde no meu CSS, seto a class none com display:none;
Em todos os projetos que praticamentos aqui na Agência usamos o image replacement, nunca houve punição em algum projeto por tal ato.
Vlw pelo Post 😉
Abraços!
Fabio,
então você acha que existe uma equipe que antes de banir definitivamente o site, da uma olhadinha no site para verificar o texto da imagem? pois OCR, principalmente nestas imagens que geralmente têm textos mais “enfeitados” fica complicado, não acha?
Não que eu ache que tenha uma equipe para revisão mas vamos pensar no seguinte ponto: você faz spamming de keywords com image replacement, ou seja, o Google irá perceber esse spamming e pune o seu website.
No seu pedido de reconsideração, o seu caso pode passar por uma revisão manual. Atente para o detalhe: PODE. Se passar, creio que este profissional irá observar este aspecto também.
Bacana o Post Fábio,
Essa realmente é uma grande dúvida para desenvolvedores, eu particularmente prefiro usar:
<code>
<h1>
<a href="#" title="Calçados | Amorim Calçados" class="logo">
<span class="none">Calçados | Amorim Calçados</span>
</a>
</h1>
</code
Onde no meu CSS, seto a class none com display:none;
Em todos os projetos que praticamentos aqui na Agência usamos o image replacement, nunca houve punição em algum projeto por tal ato.
Vlw pelo Post 😉
Abraços!
Acredito que a utilização da propriedade display com o valor none esconda o conteúdo tanto visualmente como para programas leitores de tela. Não recomendaria seu uso. Nesse caso o melhor a usar é o text-indent: -9999px que pelo menos é lido por programas leitores de tela.
Eu também, uso essa “técnica” do text-indent: -9999px e meus sites nunca foram punidos.
Abração!
Veja bem meu querido, concorda que o Leitor Lê o Title de um elemento ? Ou seja eu seto display:none; no texto e não no elemento , logo quado se passa o mouse encima da logo com display:none; o atributo title aparece 😉 logo assim é lido^^
Entendi…
Não tinha percebido esse pequeno grande detalhe.
Abraço, meu querido… ^^
Punição tambem nunca vi com img replacement e texto exato, mas um bom teste seria ver se há variações de posicionamento ao se trocar img replacement por img c/ alt ou vice versa. Alguém aí já fez?
Muito bem colocado, seria bom testar mesmo sobre a img ou o texto!
Variar posicionamento no Google por trocar apenas por imagem eu nunca vi nada diferente. O que eu fiz é testar todas as formas de spammar o logo de um site e até hoje nunca recebi uma punição.
Acho que um texto do alt dentro de um H1 para o Google é a mesma coisa que um texto comum, tem que ser considerado que um texto no alt tem a mesma importância de um texto comum não só pela acessibilidade, mas também para o SEO.
Em nosso site (e na maioria de nossos clientes) utilizamos o image replacement, mantendo o nome do arquivo como no html.
O importante seria avaliar qual tem mais força.
Acho que assim poderiam deixar de utilizar esta técnica
Fábio, minha dúvida é a seguinte!
Entre dois sites, suponhamos que igual em todos os aspectos de classificação do Google, com apenas uma diferença, um usa esta técnica e o outro não usa, quem será melhor classificado. Você saberia?
Abraços,
André Gibin
É um bom teste para se fazer. Vou anotar aqui pra gente.
Uma pergunta bem simples…e se a minha logo não tem nada escrito e eu coloco “atrás” o nome da empresa? O texto é diferente da logo, mas a representa, como fica?
Muito bom o tema.
Anderson,
Esse é um ponto que os Developers da Agência sempre indagam.
Outra hipótese, seria a utilização de links em ícones com image replacement, qual seria a descrição permitida?
Para o usuário, não vejo diferença em se utilizar o image replacement ou a descrição no atributo “alt” da imagem, mas, nesse caso, pode-se incluir uma palavra-chave relevante caso a imagem seja utilizada como h1 ou link da página?
Enfim, conheço centenas de sites que utilizam image replacement nas heading tags e em links, porém nunca vi uma punição por esse motivo.
No comentário abaixo, o Alexandre Santos deu um exemplo, mas, o image replacement era dinâmico para cada página, daí complica muito.
Enfim, é um tema bem antigo, mas vejo dúvidas sobre o assunto até hoje.
No meu modo de ver, temos que ter um pouco de bom censo e o Google provavelmente deve trabalhar desta forma.
Você tem uma marca, que não tem nada escrito, mas você faz image-replacement com o nome da empresa, tudo bem, isso passa.
Agora, você tem a marca, que não tem nada escrito e você coloca a sua keyword ali com image-replacement… isso já seria mais “ousado” e poderia trazer algum problema.
Sempre que você abusar, você PODE conseguir algum problema.
Escreva exatamente o que sua imagem mostra ( ex: Nome da empresa ou slogan ), nada mais.
Acredito que seu site será punido apenas por denuncia, mas aconteceu comigo com um dos maiores classificados gratuito do Brasil, onde colocávamos nome da categoria e subcategoria na imagem do logo.
Isso aconteceu em 2009 e ficamos fora do índice por 1 semana até reavaliar nosso pedido de inclusão.
[ ]s
Otimo artigo parabéns.
só lembrando que text-indent pode dar erro no IE http://twixar.com/TPCX1w.
Fantástico, eu sempre tive dúvidas quanto a isso! Eu sabia que o uso do display:none causava problemas com leitores de tela, mas não sabia se o google punia ou não esta utilização do recurso de text-indent.
Obrigado por este esclarecimento, e se me permite uma sugestão para uma próxima dúvida, eis uma que me atormenta atualmente:
Eu adquiri alguns domínios, devido a conterem palavras-chave interessantes para o meu negócio, e também para evitar que a concorrência compre estes domínios futuramente. A dúvida é: se eu fizer o apontamento dessas várias URLs para o meu site, isso pode caracterizar uma punição no Google? Pode influenciar positivamente ou negativamente nos resultados de pesquisa?
Obrigado a todos e um abraço!
Oi Eduardo,
Você pode ter vários domínios apontando para o mesmo endereço. Escolha o mais forte, que tem o nome do seu negócio para ser o principal, faça REDIRECT 301 em todos os outros, e configure no Google Webmaster Tools os apontamentos.
abs.
Guilherme Grillo
twitter.com/@AnalistaSEO
Olá, Guilherme!
Muito obrigado por seu esclarecimento. Fiz os redirecionamentos, mas não tinha pensado em configurar o REDIRECT 301, fiz o redirecionamento utilizando os mesmos DNS na configuração e o apontamento através do painel de controle do site principal, listando as URLs novas para que redirecionem a ele.
Vou verificar essa alternativa que você sugeriu, mas acho que para isto eu vá precisar de um serviço de hospedagem para todos os domínios, correto?
Agradeço novamente, e desejo um bom dia!
Oi Eduardo,
Você não precisa de serviço de hospedagem. Você está apontando todos os endereços para o mesmo DNS, basta ter o arquivo de redirect na raiz do servidor, com todas as instruções. Em servidores windows esse arquivo se chama web.config e em servidores linux, .htaccess. Você disse que fez o apontamento através do painel de controle do site principal, então provavelmente esse serviço já deve ter feito o redirect para você, resta saber qual tipo foi. Caso isso não esteja claro no painel de controle do seu site, recomendo o uso do plugin HTTPFOX do Firefox para verificar que tipo de redirect está sendo utilizado.
abs.
Guilherme Grillo
twitter.com/@AnalistaSEO
Ricotta, muito obrigado pela resposta – eu que mandei a pergunta pro seu Formspring hoje.
O que não ficou claro pra mim ainda é o seguinte: se o “Google não irá punir o seu website por usar text-indent desde que você escreva exatamente o que a imagem contém”, há algum ganho significativo se eu usar “text-indent: -9999px” pra H1 que ficaria na div onde aparece o arquivo nome-da-empresa.gif, em vez de simplesmente descrevê-lo no ALT? Por exemplo:
CSS:
#logo {
background: url(‘img/nuvenus-chovendus.gif’) no-repeat;
text-indent: -9999px;
}
HTML:
Nuvenus Chovendus
Nuvenus Chovendus
Abraço.
Ops, o código HTML que eu coloquei não saiu. A idéia era que, depois de definir o CSS, fossem usadas as mesmas keywords tanto para o title como para o h1 dentro da div #logo.
Não ser removido do índice não quer dizer que não existe nenhuma penalidade e/ou punição.
Em todos os sites que eu otimizo, estou trocando o image replacement pela imagem com o Alt correto, dá trabalho em alguns lugares, mas vale a pena. No mínimo estou fazendo o que acredito ser o certo.
O único motivo para colocar um H1 com image replacement é criar um H1 para o Google, o que, segundo as diretrizes é algo que você não deve fazer. (leitores de tela usam o alt da imagem, então o H1 é só para o google).
Não tenho como afirmar o quanto isso impacta positivamente ou negativamente, pois a maioria das mudanças ocorrem em batch, fica difícil dizer isoladamente o que cada mudança impactou.
Para quem está sugerindo colocar o mesmo texto da imagem, saberia me dizer como o algoritmo sabe que o texto é o mesmo da imagem? Duvido muito que usem OCR ou revisão manual para todos os sites que usam esse recurso.
Realmente é um assunto e tanto este, sempre rodeado de dúvidas…
Eu por exemplo na logo da empresa de instrumentos musicais não sei se devo completar: “marca + instrumentos musicas” mesmo sabendo que instrumentos musicas nao faz parte da marca mas sim do negocio da empresa. E agora?
Poxa vida só vocês mesmo para esclarecerem essa dúvida.
Estou guardando dinheiro para fazer curso com vocês esse ano ainda.
Depois da notícia do Google de punir que usar text-indent, ficaram muitas dúvidas no ar, e uma delas era se não poderia usar de forma alguma essa técnica.
Em relação ao logo, não tem problema algum em ter que coloca-lo em imagem, basta declarar suas medidas por CSS, e caso mude fica fácil a atualização.
Já os “menus personalizados” eu fico feliz em saber que posso usá-los novamente, com essa técnica. Nunca fui a favor e nunca usei a técnica para dizer algo diferente do que estava na imagem, o problema era o medo de ser punido.
Mas eu tenho outra dúvida…
E a “@font-face” ??
Como ela é interpretada pelos motores de busca?
O site fica realmente um pouco mais lento, mas funciona até mesmo no internet 6.
Gostaria de saber sua opnião sobre o assunto.
Obrigado.
Eu gosto de usar o text-indent pelo fato de manter o controle do visual do site no CSS, deixando a marcação limpa. Colocando imagens direto no código esse controle fica um pouco mais comprometido.