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

240

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.

Andrew
fonte
você deve consultar este tópico para: stackoverflow.com/questions/1874895/…
meo
15
Matt Cutts, respondendo a esta pergunta. youtu.be/fBLvn_WkDJ4
troynt
2
O titleatributo não deve estar no <a>?
bobo
23
Esta pergunta não deve ser marcada como off-topic. É uma pergunta claramente definida sobre CSS e otimização de mecanismo de busca. Só porque não é C # não significa que não é código.
MikeMurko
3
Troynt @ Acho Matt Cutts para dar conselhos enganosos, às vezes. Como tal, eu tendem a não vê-lo.
TheBlackBenzKid 13/03

Respostas:

221

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!

Rahul
fonte
12
agrupar um h1 em torno de uma imagem com texto alternativo tem o mesmo peso (seo-sensitivo) que o texto sem formatação envolvido com um h1?
Andrew
11
A propósito, é relevante, um logotipo faz parte do conteúdo do seu site, não é usado para decoração, portanto, use <img> com o atributo alt e não CSS para o seu logotipo.
Boris Guéry 31/03
14
Matt Cutts, respondendo a esta pergunta. youtube.com/user/GoogleWebmasterHelp#p/search/0/fBLvn_WkDJ4
troynt
34
Infelizmente, o link no comentário deixado por @troynt agora está quebrado. Aqui está um novo link
ahsteele 4/13
10
Para todos que estão se perguntando o que há no vídeo vinculado: Matt Cutts basicamente diz: você deve usar o atributo alt da tag img em vez de ocultar o texto com css.
precisa saber é o seguinte
17

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 */  }
Rob Knight
fonte
1
O que há de errado com o recuo? Minha suposição era que os leitores de tela e os rastreadores ainda captam o texto apesar do recuo.
22410 ckarbass
2
Desculpe, demorei tanto para voltar aqui. O único problema com o recuo é se as imagens estão desabilitadas no navegador do usuário, mas o CSS está ativado, nada aparece, texto ou imagens. É uma espécie de caso extremo, mas importante considerar para mim, trabalhando em um site da universidade.
Rob Cavaleiro
hmm ... eu não consegui fazer isso funcionar. O texto âncora continuava aparecendo na parte superior da imagem.
Andrew
<nitpicker> usar #logo espaço em vez disso, ele vai ser mais eficiente para o navegador para renderizar </ nitpicker>
Chris Missal
1
Em alguns casos, você precisa de um {top: 0} para #logo um período.
Marcus
11

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.

se_pavel
fonte
3
display:nonenão é acessível.
KPM
O melhor método é agrupar o logotipo em div devido à sua acessibilidade, usabilidade e otimização de SEO, e usado principalmente em grandes organizações da web. Twitter, Amazon e Mozilla não usam <h1> para seus logotipos, mas títulos principais para capturar melhor o valor da página. bit.ly/1MR4fr5
Oriol
4

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.

Mattypants
fonte
1
Além disso, tudo isso é verdade, e o logotipo não deve ser o h1 em nenhuma outra página, exceto na página inicial (e, idealmente, não em uma página inicial). No entanto, geralmente em uma página inicial, o local mais relevante para o h1 será o logotipo, pois o conteúdo do banner hero pode não ser específico o suficiente para o tópico do site (ou seja, pode estar relacionado a um serviço ou produto atual que está sendo empurrado em vez de o tópico principal do site). Se o site tiver apenas uma área de foco (por exemplo, um site para um aplicativo), a área do herói poderá funcionar para o h1. Quando não funciona, uma imagem com alt envolto em h1 é melhor que nada.
Elmarko 29/08/19
3

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.

Ross
fonte
Tenho certeza de que IMGs são considerados conteúdo, enquanto imagens de fundo css não são. É por isso que costumo me basear em imagens de plano de fundo para imagens em todo o site e coisas dessa natureza que não são explicitamente para o conteúdo da página.
21410 Joe Phillips
@ d03boy: Bem, nesse caso, você pode fazer uma div em linha com o tamanho correto para o tamanho do logotipo e fornecer o plano de fundo. Um espaço dentro dele (que possui visibilidade: oculto;) fornecerá uma substituição de "texto alternativo".
211Ross Ross
6
O debate sobre o H1 agora é um link morto
alex
3
<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;
}
Vishal Gupta
fonte
2

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.

30ml
fonte
2

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;
}
Sebastien Horin
fonte
1

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.

DFA
fonte
Você sempre pode usar H1 para o logotipo apenas na página principal.
Mariusz Jamro
0

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.

Taswiz
fonte
0

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>
Potky
fonte
0

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;
}
Dani Amsalem
fonte
-1
<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});
}
Rodrigo Reis
fonte
É melhor não usar recuos de texto em massa como esse, porque causa um grande impacto no desempenho. Explicação detalhada aqui .
Nick F
-1
<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;
}
Daniel Boundy
fonte