Uso adequado de <title>, <header>, <h1> e <h2> em um site HTML5?

15

Estou estudando esse assunto há vários dias e encontrei muitas sugestões conflitantes com relação à indexação de pesquisa. Estou trabalhando em um projeto que possui várias páginas diferentes, desde descrições simples de produtos até documentação detalhada do usuário.

Dividi esta questão em seções, pois sinto que isso a tornará mais útil para futuros leitores dessa questão.

Algumas das minhas descobertas

Vários sites parecem ter assumido contornos de documentos como os seguintes:

1. Programmer's Guide  (https://www.dartlang.org/docs/)
    1. Getting Started
    2. Concepts
        1. Libraries
        2. Fundamental classes
        etc.

Acho interessante que o exemplo acima não utilize o <nav>elemento com um cabeçalho adequado. Gosto da simplicidade do esboço e, sendo o Google, tenho certeza de que eles sabem o que estão fazendo quando se trata disso.

Mas estou confuso, já que o esquema acima não menciona "Dart". A única menção de "Dart" no sentido semântico parece estar dentro do <title>elemento principal do documento "Guia do programador | Dart: aplicativos da web estruturados".

O MDN (Mozilla Developer Network) é outro exemplo brilhante de um site que segue esse princípio. Muitos dos <h1>títulos fornecem contexto completo ( seções e esboços de um documento HTML5 ):

1. Sections and Outlines of an HTML5 Document
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Structure of a Document in HTML 4
    4. Problems Solved by HTML5

Enquanto outros não fazem muito sentido fora do contexto ( práticas obsoletas a serem evitadas ). Por exemplo, o seguinte esboço HTML5 se refere a CSS, HTML5 ou C # ... apenas com o esboço do documento, quem sabe!

1. Obsolete practices to avoid
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Doctype
    4. <meta> element and charset attribute

Para piorar a situação, o que aconteceria se o MDN contivesse 2 tópicos com o mesmo título (ou muito semelhante) do título "Práticas obsoletas a serem evitadas", onde um faz parte do guia CSS e o outro faz parte do guia HTML ...

No outro extremo do espectro, os sites parecem usar o <body>cabeçalho de nível principal para o nome do produto (Foo) ou o contêiner de tópicos (Guia do Usuário para Foo). Onde todas as páginas subsequentes são usadas <h2>para o título da página real.

A questão

Como os mecanismos de pesquisa inferem o contexto de uma página da Web como as encontradas no site da MDN usando o DOM e o esquema HTML5?

Qual é a maneira correta de marcar a página HTML5 a seguir para que o Google possa indexar a página no contexto adequado? Isto inclui o uso de <title>, <header>e <h1>elementos.

  • Nome da empresa
  • Nome do Produto
  • Guia de usuario
  • Começando

O cabeçalho mais significativo do HTML, exibido em um navegador da Web, deve representar o contexto de todo o site (Nome da Empresa ou Nome do Produto), a coleção de tópicos (Guia do Usuário) ou o tópico real em questão (Introdução) ?

Meu melhor palpite

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
    <header role="banner"> <!-- Note: Lack of <h1> in here -->
        <a id="logo" href="http://example.com">Company Name</a>
        <nav>
            <h1>Site Navigation</h1>
            <ul> ... </ul>
        </nav>
    </header>
    <main role="main">
        <div class="product-name">Product Name</div>
        <div class="document">User Guide</div>

        <h1>Getting Started</h1>

        <p>blah</p>
    </main>
</body>
</html>

Levando ao esboço:

1. Getting Started
seo html google-search html5 semantic-web Lea Hayes
fonte
Entendi corretamente que você está procurando documentação se e como os mecanismos de pesquisa usam o esquema? (e não para aconselhamento sobre qual marcação usar, não relacionada ao SEO)
unor
@unor Quero saber por que a técnica usada na documentação do MDN / Dart funciona e se estou perdendo algum conhecimento importante. Eles parecem confiar <title>para fornecer contexto. Por exemplo, é uma má idéia incluir o mesmo <h1>User Guide for Ubermachine</h1>em todas as páginas em que o cabeçalho do tópico é apresentado <h2>Getting Started</h2>... ou o esboço deve começar <h1>Getting Started</h1>com um acompanhamento <title>Getting Started | User Guide for Ubermachine</title>para fornecer um contexto útil para os mecanismos de pesquisa. Esta é uma pergunta de SEO.
Lea Hayes
Se houvesse 2 produtos separados, é muito provável que houvesse 2 guias do usuário contendo seu próprio tópico "Introdução". Daí parte da minha preocupação com a abordagem MDN e por que quero saber se <title>fornece contexto suficiente.
Lea Hayes
2
Eu não me preocuparia com os mecanismos de pesquisa. Se você está pensando nesse nível, o restante do site provavelmente será tecnicamente bom e bom o suficiente para os mecanismos de pesquisa. Pense nos seus usuários.
John Mueller
1
Você não mencionou o URL. Esse também é um mecanismo importante para a amizade entre humanos e robôs. Por exemplo, enquanto seus dois exemplos de MDN <h1> s são inconsistentes. Nesse contexto, os dois URLs incluem / web / guide / html / antes do título da página.
Martin F

Respostas:

8

Durante minhas extensas pesquisas na web, encontrei uma citação que considero útil e suspeito que os futuros leitores desta questão também o encontrarão.

Use <h1>para cabeçalho de nível superior

<h1> é o elemento HTML para o cabeçalho de primeiro nível de um documento:

  • Se o documento for basicamente autônomo, por exemplo, Coisas para ver e fazer em Genebra, o cabeçalho de nível superior provavelmente será o mesmo do título.
  • Se faz parte de uma coleção, por exemplo, uma seção sobre Cães em uma coleção de páginas sobre animais de estimação, o cabeçalho de nível superior deve assumir uma certa quantidade de contexto; basta escrever <h1>Dogs</h1>enquanto o título deve funcionar em qualquer contexto: Cães - Seu Guia para Animais de Estimação.

Fonte original: http://www.w3.org/QA/Tips/Use_h1_for_Title

A citação acima parece sugerir que o <h1>elemento no nível do documento pode assumir que o contexto da página atual é definido usando- <title>se. Então, presumivelmente, se houvesse várias páginas exatamente iguais <h1>, tudo estaria bem ...

<title>Getting Started | Guide | Uber Product - Company Name</title>
<h1>Getting Started</h1>

<title>Getting Started | Guide | Other Uber Product - Company Name</title>
<h1>Getting Started</h1>

Consulte também : <title>: o elemento mais importante de uma página da Web de qualidade

Antes de aceitar uma resposta, gostaria de esperar e ver o que os outros pensam.

Lea Hayes
fonte
Atualizações de perguntas legais e resposta de acompanhamento. Talvez outras pessoas entrem na conversa, se não aceitarem sua resposta, se você achar que é a certa.
dan
1

Eu contestaria o uso de um H1 ou qualquer nível de cabeçalho para o 'Nome do produto' no cabeçalho.
O H1 representa o título da página e não o produto, aplicativo ou site.
Tanto para fins de acessibilidade quanto para SEO, um H1 repetido em todas as páginas seria prejudicial. Unfortunetaly, neste caso, não há nenhuma tag HTML semântica que significa 'título do site' então a única opção é um <div>ou <p>ou talvez mesmo um <strong>tag para dar-lhe alguma ênfase semântica.

<main>
  <header>
    <div>Logo</div>
    <div>Product name</div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>
  <section>
    <h1>Getting started</h1>
    ...content
  </section>
</main>
davidelrizzo
fonte
0

Não existe uma resposta certa, existem opções diferentes.

Abaixo estão algumas opções, mas todas elas têm prós e contras:

Essa opção é mais ou menos a que você apresentou, mas mostra um pouco mais de cabeçalhos e para onde o conteúdo iria, além da ideia de que o logotipo seria um elemento mais complexo do que apenas a imagem / texto, teria todas as informações relacionadas. elementos para impressionar a personalidade da empresa, por isso a seção. Novamente. não poderia ser uma seção, mas apenas uma div.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <p>...</p>
            <header>
                <h1>User Guide</h1>
                <p>...</p>
            </header>
            <p>...</p>
        </main>
    </body>
</html>

Este próximo introduz a tag principal para mostrar qual é a parte relevante da página. Essa tag ainda é superficial no suporte e no futuro, mas fornece uma indicação clara de que a navegação não tem nada a ver com o produto ou a página. A tag de seção pode ser outro contêiner e main pode ser um artigo para algumas pessoas.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <section>
                <header>
                    <h1>User Guide</h1>
                    <p>...</p>
                </header>
                <p>...</p>
            </section>
        </main>
    </body>
</html>

O próximo usa o artigo, já que a maioria das pessoas está inclinada a usá-lo.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <article>
            <a id="logo" href="http://example.com">Company Name</a>
            <nav>
                <ul> ... </ul>
            </nav>
            <main>
                <header>
                    <h1>Product Name</h1>
                </header>
                <section>
                    <header>
                        <h1>User Guide</h1>
                        <p>...</p>
                    </header>
                    <p>...</p>
                </section>
            </main>
        </article>
    </body>
</html>

Eu usaria algo como o próximo, já que sou muito modular e orientado a blocos, para que cada elemento seja independente de uma perspectiva de banco de dados relacionada apenas por chaves relevantes. Embora eu provavelmente pule as tags de seção.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product name</h1>
            </header>
            <section>
                <header>
                    <h1>description of product</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>user guide</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>Getting started</h1>
                </header>
                <p>...</p>
            </section>
        </main>

    </body>
</html>

e ainda há mais opções.

PatomaS
fonte
2
Todos eles parecem muito complicados para mim.
Martin F