É uma prática comum para desenvolvedores front-end colocar o título ou o logotipo do site na tag H1 e o título em H2. Mas na maioria das vezes o título da página / artigo é mais importante porque carrega o valor do conteúdo. Então, minha pergunta é qual é a melhor abordagem do ponto de vista semântico e de SEO. Exemplos:
Forneceu outras variantes se você acha que elas terão um efeito maior.
Respostas:
Normalmente, não coloco o logotipo ou o título do site em um H1. O jeito que eu gosto de ver é que cada página é um documento. Esse documento é sobre um assunto específico, conforme refletido no título da página e também no cabeçalho principal. O site em si é apenas o editor do documento. Portanto, semanticamente, é incorreto usar o logotipo ou o nome do site como cabeçalho principal de cada página. Os logotipos são exibidos com destaque para lembrar ao usuário onde eles estão e para fins de marca, mas na verdade não fazem parte do conteúdo ou documento.
Quero dizer, quando você assiste uma notícia, pode ver um pequeno logotipo do canal de notícias no canto, mas a notícia não terá o título "CNN" ou "BBC News". O título será sobre a história, não a rede que a publicou. Da mesma forma, quando você lê uma revista, apenas o título do artigo é usado no cabeçalho, não o nome da publicação.
Também é semanticamente incorreto usar uma tag H1 para o nome do logotipo / site e uma para o título do documento. Os títulos definem a estrutura hierárquica do conteúdo da página; usar um para o nome do site e outro para o título do documento é como dizer, esta página possui 2 seções principais: "meudominio.com" e "entre em contato".
h1, mas apenas na página principal . Vá para uma listagem específica e o título da listagem está agora em h1.
Consulte a página nº 37 do documento do boletim SEO do Google :
A maioria das páginas principais do produto tem a oportunidade de usar uma
<h1>tag, como no exemplo acima, mas atualmente elas estão usando apenas outras tags de cabeçalho (<h3>nesse caso) ou um estilo de fonte maior. Embora estilizar seu texto para que ele pareça maior possa obter a mesma apresentação visual, ele não fornece o mesmo significado semântico para o mecanismo de pesquisa que uma<h1>tag. O nome do produto e / ou algumas palavras sobre seus recursos são ótimos em uma<h1>tag da página principal do produto.
De acordo com a própria análise do Google sobre suas ofertas, eu chegaria à conclusão de que o Google espera que um valor exclusivo específico da página apareça em um H1 (a ilustração no documento vinculado ilustra isso).
Aqui está uma boa justificativa: seu logotipo é uma imagem, não um <h1>
Semanticamente, <h1>deve ser usado para o título da página, e o título da página deve ser único por página. O nome do seu logotipo ou site não é o título da página (exceto, talvez, a página inicial).
O nome do seu logotipo / site deve estar em uma div simples, talvez com o ID do 'cabeçalho'. Ou, a <header>tag se estiver usando HTML5.
<img>tag, pode ser um plano de fundo, não apenas um plano de fundo em uma <h1>tag. No entanto, como o artigo vinculado argumenta, seu logotipo pode ser visto como conteúdo da página.
Na IMO, deve haver apenas um H1 na página. E o H1 deve sempre antes do H2 - para manter uma hierarquia correta do seu conteúdo.
O logotipo geralmente é repetido em todas as páginas e, como você diz, na maioria das páginas o título é quase sempre mais importante.
Na página inicial, eu consideraria usar:
logo / título - H1 [, título - H2]
Embora, na sua página inicial, o logotipo possa muito bem ser o seu título.
No entanto, em todas as páginas subseqüentes, eu procuraria:
logo - outra tag, título - H1
Mesmo tendo o logotipo como imagem de fundo, se apropriado.
O que você realmente procura na tag H1 é o título da página ou o que torna essa página única. Se você estiver usando uma imagem nela, precisará fazê-lo com um método de fallback para degradabilidade:
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
Dessa forma, você pode definir uma imagem para aparecer no H1 (que as pessoas costumam usar mal como a área do logotipo) e ainda ter um bom conteúdo para pessoas que usam experiências de Internet degradadas. Também faz o seu valor de SEO feliz.
Esta é uma pergunta fantástica, devido às práticas (e modelos) existentes.
Pessoalmente, gosto de me referir à lógica "Outlining 101", considerando o seguinte:
H1 é como um título (certamente você deseja complementar seu título HTML) e deve haver apenas um por página, assim como uma página possui apenas um título
H2 é como algarismos romanos no esboço: I., II., III., Etc.
H3 seria o esboço equivalente a A., B., C.
Freqüentemente, é difícil aplicar exatamente o uso prático dessa lógica em uma página da Web - existem tantas informações incidentais que simplesmente não se acumulam nessa hierarquia. No entanto, se você se sentar e tentar quebrá-la com essa lógica, sinto que há um benefício para a disciplina.
Eu sou o h1cara do título principal. E o título principal é o nome do site decorado, ou como você chama, o logotipo. Aqui está o cabeçalho do site - o logotipo não é realmente um logotipo, é o cabeçalho do site ilustrado. Os designers gostam de projetar como logotipo.
O que há de errado com LOGO -> H1?
<div>Google</div>
<h1>About Us</h1>
Agora, como h1é a seção mais importante, pois informa ao visitante o que é isso, o visitante não consegue entender a página, porque h1é muito específica. Sobre quem?
<h1>Google</h1>
<h2>About Us</h2>
Esta página é sobre o Google. Aqui está a seção sobre nós. Veja - não há dúvida? Tudo está claro.
Estrutura da página. Se você colocar o cabeçalho principal do site em div ou p, não há nada a associá-lo.
<p>Google</p>
<h1>About us</h1>
Como posso associar "About U" ao Google se h1vier depois? Porque tudo o que vem depois H1está associado a ele, não o que se torna antes.
<h1>Google</h1>
<h2>About Us</h2>
"Quem Somos" pertence ao Google. Sem perguntas.
HTML é a linguagem para DESCREVER informações. Portanto, você não exibe informações, descreve-as. E cada página é independente. Portanto, você descreve uma página porque não há associações entre as páginas. Apenas links que vinculam páginas individuais.
<p>Google</p>
<h1>About us</h1>
Esta página é sobre nós. Quem / o que é? Não está claro. Apenas descreve algo chamado "Sobre nós".
<h1>Google</h1>
<h2>About Us</h2>
Este site descreve o google. E há uma seção sobre nós. Us = provavelmente google, porque a estrutura a descreve dessa maneira.
Espero ter feito o meu ponto :)
PS! Você não pode usar h2- h1- h3como é ilógico, portanto, um grande fracasso. Só porque o w3c não disse que não é permitido, não o torna válido. É ilógico, pense nisso.
Logo como uma marca h2?
Eu estava navegando pelo SitePoint (www.sitepoint.com), que é um blog WordPress com uma mistura de páginas e blogs regulares. Em geral, descobri que eles têm o título da página como a tag h1 e o logotipo definido como h2. Você pode ver isso em uma página de blog como www.blogs.sitepoint.com/category/design/. Navegando pelo site, você encontra diferentes configurações. Muitas vezes, não conseguia encontrar a tag h1, como um exemplo na página principal do produto (http://products.sitepoint.com/). Embora a partir dessa página, se você clicar em qualquer produto específico para obter mais informações em www.sitepoint.com/books/design2/, você encontrará novamente que h1 é o título da página, h2 é o logotipo. Uma página da Web típica é semelhante ao blog (consulte www.sitepoint.com/help/). Nesse caso, os assuntos das perguntas frequentes são todos tags h2.
Tom Rogers
Seu logotipo não precisa ser aninhado em um cabeçalho - headerbasta uma simples imagem vinculada no arquivo. Mas o título do site e o título da página / artigo devem ser <h1>. Este artigo é informativo: A verdade sobre várias tags H1 na era do HTML5 .