Técnica image replacement no logotipo da página, sim ou não?

Thiago, no exercício em questão não seria interessante usar a técnica, pois a imagem é o logotipo da empresa. Se você usar a técnica, os mecanismos de busca não vão indexar a imagem, ou seja, quando alguém buscar no Bing, por exemplo, pelo nome da empresa, o logotipo não aparecerá. Na verdade, queremos que ele apareça, que dê visibilidade à empresa, por isso a resposta é não, porque a imagem, nesse caso, é altamente relevante, pois é a imagem que representa a empresa. Você só usa a técnica image replacement quando a imagem não for relevante, como marcadores (bullets) diferentes nas suas tags li, imagens diferentes dos links (tags a), etc.

Obrigado pelo retorno, Manoel, mas e no exemplo do Globo.com que eu citei? Fiquei meio confuso com isso...

Um grande portal utiliza a técnica de utilizar uma imagem no H1 da página e, fazendo isto, ela está utilizando a técnica "image replacement", certo?

Só que, no exercício Alura, a resposta correta seria para uma não recomendação de utilização desta técnica do logotipo. Este seria o ponto da minha dúvida: ou para saber se estou confundindo algo, ou se existe alguma coisa que não consegui compreender direito.

OBS: não só o portal Globo, mas diversos outros sites que eu acessei o código fonte tem uma estrutura similar, utilizando geralmente a tag H1 para incluir via CSS o logotipo da empresa, dando mais relevância para o nome da página, mas por outro lado deixando a imagem não ser indexada pelo Google e outros mecanismos de busca. É isso?

Agradeço novamente sua atenção.

Olá Thiago, não sei quanto aos outros sites que visitou, mas em relação ao site da globo você se enganou.

O site não está usando image replacement para o logo, na verdade está utilizando uma imagem direto na marcação HTML. Entretanto é uma imagem no formato SVG, um tipo de imagem de gráficos vetoriais, estas imagens são construídas a partir de linhas e curvas matemáticas, e permitem um ampliamento sem perda de qualidade, além de que geralmente o carregamento da imagem será mais rápido considerando que o navegador "lerá" o código da imagem. Programas como Corel Draw, Adobe Illustrator, Sketch e Inkscape permitem a edição nativa deste tipo de imagem.

Vou deixar uma print do console pra você entender melhor:

Se reparar, dentro da tag a existem duas tags svg as imagens em formato SVG são representadas em código, por isso existe a tag <svg>, neste caso existem duas imagens em duas tags svg separadas, isto porque eles usam uma imagem para smartphones, mas quando o tamanho da tela é maior ou igual a 620px a outra imagem é utilizada; isto é feito para criar um design responsivo. Para perceber isto diminua a janela do seu navegador a menos que 620px e verá que a imagem mudará. No Chrome abra o inspetor de elementos antes de reduzir a janela pois no canto superior direito da janela ele irá mostrar a largura e altura da janela.

Você também pode reparar que nas classes do h1 não há nenhum estilo com a propriedade background pois filtrei ali na parte de estilos e ele não encontrou nada, ou seja, não foi definido background na folha de estilos para o h1.

Complementos:

• A W3C recomenda SVG
• Curso Web Design Responsivo
• Curso Bootstrap
• Curso Sketch
• Curso Illustrator
• Curso CorelDraw

Thiago, se você usar a técnica, o logotipo não vai aparecer nos mecanismos de busca! Na web, quando você quer ser "encontrado", você tem que deixar os buscadores indexar tudo relevante do seu site, inclusive a imagem que identifica o site. Por exemplo, no site da Caelum, a imagem

é importante de ser encontrada, pois qualquer um que olhar a imagem, vai saber de qual site se trata.

Se tivessem utilizado a técnica de image replacement ela não seria indexada e não seria localizada nos mecanismos de busca.

No exercício acontece a mesma coisa, a parte em azul dessa imagem

é como se fosse o logotipo da caelum (está aparecendo o sobre, produtos, consultoria e contato porque o pessoal deu um print e saiu tudo junto, mas quando estamos desenvolvendo, isso é separado).

Por isso a resposta no exercício é não, porque pergunta se devemos usar a técnica e não indexar a imagem. Como ela é um logotipo e queremos que ela apareça nos mecanismos de busca, NÃO devemos usar a técnica.

Ficou mais claro agora?

Se ainda tiver dúvida, só postar!

Pedro e Manoel, obrigado pelas infos.

Desta forma, abaixo, estaria sendo utilizado a técnica image replacement, certo?

E, de acordo com o que vocês disseram a imagem, ainda desta forma, não estaria sendo indexada... é isso?

Código HTML:

<div id="logo">
    <h1><a href="index.html"><span>Nome da Marca</span></a></h1>
</div>

Código CSS:

#logo {
    float: left;
    margin-top: 10px;
}

#logo a {
    background-image: url(../img/logo.png);
    width: 180px;
    height: 114px;
    display: block;
}

#logo span {
    display: none;
}

Obrigado novamente pela ajuda e atenção.

Exato Thiago.

Agora você levanta outro tópico com seu código, referente à técnica para a utilização do image replacement, existem várias técnicas. A que aprendemos no curso utilizando text-indent é provavelmente a mais utilizada na web, não trabalho com isso mas já ouvi dizer que apesar de parecer uma gambiarra, é "uma das mais profissionais". Pra mim não deixa de ser gambiarra, mas se funciona melhor como dizem, por que não utilizar?

Enfim, pelo que li, também existem muitas discussões sobre qual a melhor técnica, separei dois posts muito bons do CSS-TRICKS pra você dar uma olhada:

• Nine Techniques for CSS Image Replacement
• The Image Replacement Museum

O site é em inglês, mas mesmo que não entenda muito vale a pena se esforçar um pouquinho pra ler.

O conteúdo dos arquivos .CSS não são indexados, pois são considerados irrelevantes para os mecanismos de busca. Eles indexam o conteúdo das páginas, no HTML mesmo.

Nesse seu exemplo, como você insere a imagem no css, ela não será indexada. Para que ela seja localizada nos buscadores, você deve mudar e inseri-la no html (se for a sua intenção).

Assim, a técnica do image replacement é recomendada para imagens que não sejam relevantes ou que você não quer que sejam indexadas pelos mecanismos de busca.

As informações que o Pedro e eu passamos estão bem complementares. Mas se tiver mais dúvidas, basta postar!

Abraço.