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 emh1
.Consulte a página nº 37 do documento do boletim SEO do Google :
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).
fonte
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.fonte
<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.
fonte
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:
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.
fonte
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.
fonte
Eu sou o
h1
cara 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
?Agora, como
h1
é a seção mais importante, pois informa ao visitante o que é isso, o visitante não consegue entender a página, porqueh1
é muito específica. Sobre quem?Esta página é sobre o Google. Aqui está a seção sobre nós. Veja - não há dúvida? Tudo está claro.
Segundo ponto.
Estrutura da página. Se você colocar o cabeçalho principal do site em div ou p, não há nada a associá-lo.
Como posso associar "About U" ao Google se
h1
vier depois? Porque tudo o que vem depoisH1
está associado a ele, não o que se torna antes."Quem Somos" pertence ao Google. Sem perguntas.
Terceiro ponto.
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.
Esta página é sobre nós. Quem / o que é? Não está claro. Apenas descreve algo chamado "Sobre nós".
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
-h3
como é 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.fonte
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
fonte
Seu logotipo não precisa ser aninhado em um cabeçalho -
header
basta 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 .fonte