Substituindo o texto H1 por uma imagem do logotipo: o melhor método para SEO e acessibilidade?

Parece que existem algumas técnicas diferentes por aí, então eu esperava obter uma resposta "definitiva" sobre isso ...

Em um site, é prática comum criar um logotipo vinculado à página inicial. Desejo fazer o mesmo, otimizando melhor para mecanismos de pesquisa, leitores de tela, IE 6+ e navegadores que desativaram CSS e / ou imagens.

Exemplo 1: Não usa uma marca h1. Não é tão bom para SEO, certo?

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Exemplo Dois: Encontrei isso em algum lugar. O CSS parece um pouco hacky.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

Exemplo três: Mesmo HTML, abordagem diferente usando recuo de texto. Essa é a abordagem "Phark" para substituição de imagens.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

Exemplo Quatro: O método Leahy-Langridge-Jefferies . Exibe quando imagens e / ou css estão desativadas.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

Qual método é o melhor para esse tipo de coisa? Forneça html e css na sua resposta.

Você está perdendo a opção:

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

título em href e img para h1 é muito, muito importante!

Faço isso principalmente como o descrito acima, mas, por razões de acessibilidade, preciso oferecer suporte à possibilidade de imagens serem desativadas no navegador. Portanto, em vez de recuar o texto do link da página, eu o cubro posicionando-o absolutamente <span>na largura e altura total do <a>e usando-o z-indexpara colocá-lo acima do texto do link na ordem de empilhamento.

O preço está vazio <span>, mas estou disposto a tê-lo lá por algo tão importante quanto um <h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }

Se os motivos de acessibilidade forem importantes, use a primeira variante (quando o cliente quiser ver a imagem sem estilos)

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Não há necessidade de conformidade com requisitos imaginários de SEO, porque o código HTML acima tem estrutura correta e somente você deve decidir se isso é adequado para seus visitantes.

Além disso, você pode usar a variante com menos código HTML

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>

/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

Observe que eu removi todos os outros estilos e hacks CSS porque eles não correspondiam à tarefa. Eles podem ser úteis apenas em casos particulares.

Dizendo um pouco tarde aqui, mas não pude resistir.

Sua pergunta é meio falha. Deixe-me explicar:

A primeira metade da sua pergunta, sobre substituição de imagem, é uma pergunta válida, e minha opinião é que, para um logotipo, uma imagem simples; um atributo alt; e CSS para o seu posicionamento são suficientes.

A segunda metade da sua pergunta, sobre o "valor SEO" do H1 para um logotipo, é a abordagem errada para decidir sobre quais elementos usar para diferentes tipos de conteúdo.

Um logotipo não é um cabeçalho principal, ou mesmo um cabeçalho, e o uso do elemento H1 para marcar o logotipo em cada página do seu site causará (um pouco) mais mal do que bem aos seus rankings. Semanticamente, os títulos (H1 - H6) são apropriados para, bem, exatamente isso: títulos e subtítulos para o conteúdo.

No HTML5, é permitido mais de um cabeçalho por página, mas um logotipo não merece um deles. Seu logotipo, que pode ser um widget verde difuso e algum texto está em uma imagem ao lado do cabeçalho por um motivo - é uma espécie de "carimbo", não um elemento hierárquico para estruturar seu conteúdo. O primeiro (se você usa mais depende da sua hierarquia de cabeçalhos) H1 de cada página do seu site deve encabeçar o assunto. O principal cabeçalho principal da sua página de índice pode ser 'A melhor fonte para widgets verdes difusos em Nova York'. O cabeçalho principal em outra página pode ser 'Detalhes da remessa para nossos widgets difusos'. Em outra página, pode ser 'Sobre a Bert's Fuzzy Widgets Inc.'. Você entendeu a ideia.

Nota lateral: por incrível que pareça, não procure na fonte das propriedades da web de propriedade do Google exemplos de marcação correta. Este é um post completo em si.

Para obter o máximo "valor de SEO" do HTML e de seus elementos, dê uma olhada nas especificações do HTML5 e tome decisões de marcação com base na semântica (HTML) e no valor para os usuários antes dos mecanismos de pesquisa, e você terá mais sucesso com o seu SEO.

Eu acho que você estaria interessado no debate H1 . É um debate sobre o uso do elemento h1 no título da página ou no logotipo.

Pessoalmente, eu iria com sua primeira sugestão, algo nesse sentido:

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

Obviamente, isso depende se o seu design usa títulos de página, mas esta é a minha opinião sobre esse assunto.

<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

Essa foi a boa opção para o SEO, porque o SEO dá alta prioridade à tag H1; dentro da tag h1 deve ser o nome do site. Usando esse método, se você pesquisar o nome do site em SEO, ele também mostrará o logotipo do site.

você deseja ocultar o nome do site OU o texto, use o recuo do texto em valor negativo. ex

h1 a {
 text-indent: -99999px;
}

Você perdeu o título no <a>elemento.

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

Sugiro colocar o título no <a>elemento, porque o cliente gostaria de saber qual é o significado dessa imagem. Como você configurou text-indento teste <h1>, esse usuário front-end poderá obter informações do logotipo principal enquanto estiver no logotipo.

Como o W3C faz?

Basta dar uma olhada em https://www.w3.org/ . A imagem tem a z-index:1, o texto está aqui, mas está atrasado, devido ao z-index:0acoplamento aoposition: absolute;

O HTML original:

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

O CSS original:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}

Um ponto em que ninguém abordou é o fato de que o atributo h1 deve ser específico para todas as páginas e o uso do logotipo do site replicará efetivamente o H1 em todas as páginas do site.

Gosto de usar o índice az oculto h1 para cada página, pois o melhor SEO h1 geralmente não é o melhor para vendas ou valor estético.

Um novo método (Keller) deve melhorar a velocidade em relação ao método -9999px:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

recomendado aqui: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Eu não sei, mas este é o formato usado ...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

Simples e não causou nenhum dano ao meu site, tanto quanto eu posso ver. Você poderia enviá-lo, mas não vejo o carregamento mais rápido.

Por razões de SEO:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>

Depois de ler as soluções acima, usei uma solução CSS Grid.

1. Crie uma div contendo o texto h1 e a imagem.
2. Posicione os dois itens na mesma célula e coloque-os relativamente posicionados.
3. Use a técnica antiga zeldman.com para ocultar o texto usando as propriedades recuo, espaço em branco e estouro de texto.

<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>

.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

<h1><a href="/" title="Some title">Name</a></h1>

h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}

<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>

#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}