HTML5 웹 사이트에서 <title>, <header>, <h1> 및 <h2>를 올바르게 사용합니까?

나는이 주제를 며칠 동안 연구 해 왔으며 검색 색인 생성과 관련하여 많은 상충되는 제안을 발견했습니다. 간단한 제품 설명에서 심층적 인 사용자 설명서에 이르기까지 다양한 페이지가있는 프로젝트를 진행하고 있습니다.

나는 이것이이 질문의 미래 독자들에게 더 유용 할 것이라고 생각하기 때문에이 질문을 여러 섹션으로 나누었다.

내 발견 중 일부

일부 웹 사이트는 다음과 같은 문서 개요를 가정 한 것 같습니다.

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

위의 예제가 <nav>적절한 제목을 가진 요소를 사용하지 않는다는 것이 흥미 롭습니다 . 나는 개요의 단순함을 좋아하고 Google이기 때문에 그들이 이것에 관해서 그들이 무엇을하고 있는지 알고 있다고 확신합니다.

그러나 위의 개요에서 "다트"에 대한 언급이 없기 때문에 혼란스러워합니다. 시맨틱 의미에서 "Dart"에 대한 유일한 언급은 " <title>프로그래머 안내서 | Dart : 구조화 된 웹 앱" 의 주요 문서 요소 내에있는 것 같습니다 .

MDN (Mozilla Developer Network)은이 원칙을 따르는 웹 사이트의 또 다른 훌륭한 예입니다. 많은 <h1>제목이 전체 컨텍스트를 제공 합니다 (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

다른 사람들은 맥락에서 많은 의미를 갖지 않는 반면 ( 피해야 할 구식 ). 예를 들어 다음 HTML5 개요는 CSS, HTML5 또는 C #과 관련이 있습니까?

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

설상가상으로, MDN에 CSS 가이드의 일부이고 다른 하나는 HTML 가이드의 일부인 "피해야 할 관행"이라는 제목이 같은 (또는 매우 유사한) 2 개의 주제가 포함되어 있다면 어떻게 될까요?

스펙트럼 웹 사이트의 다른 쪽 끝 <body>에서는 제품 이름 (Foo) 또는 주제 컨테이너 (Foo 사용 설명서) 의 기본 수준 제목 을 사용하는 것 같습니다 . 모든 후속 페이지 <h2>는 실제 페이지 제목으로 사용됩니다.

질문

검색 엔진은 DOM 및 HTML5 개요를 사용하여 MDN 웹 사이트에있는 것과 같은 웹 페이지의 컨텍스트를 어떻게 유추합니까?

Google이 적절한 컨텍스트에서 페이지를 색인 할 수 있도록 다음 HTML5 페이지를 마크 업하는 올바른 방법은 무엇입니까? 이것은의 사용을 포함 <title>, <header>및 <h1>요소.

회사 이름
상품명
사용자 설명서
시작하기

웹 브라우저에서 볼 수있는 HTML에서 가장 중요한 제목은 전체 웹 사이트의 컨텍스트 (회사 이름 또는 제품 이름), 주제 모음 (사용자 안내서) 또는 실제 주제 (시작하기)를 나타내야합니다. ?

내 최선의 추측

<!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>

개요로 이어지는 :

1. Getting Started

— 레아 헤이스
소스

검색 엔진이 개요를 사용하는 경우 문서를 찾고 있다는 것을 올바르게 이해하고 있습니까? (및 SEO와 관련이없는 마크 업에 대한 조언이

— 아님

@unor MDN / Dart 문서에 사용 된 기술이 작동하는 이유와 주요 지식이 누락 된 경우에 대해 알고 싶습니다. 그들은 <title>맥락을 제공 하는 데 의존하는 것 같습니다 . 예를 들어, 같은 포함하는 나쁜 생각이 그 것이다 <h1>User Guide for Ubermachine</h1>주제의 제목이 제시 될 때마다 페이지를 <h2>Getting Started</h2>... 또는 개요로 시작해야 <h1>Getting Started</h1>동반으로 <title>Getting Started | User Guide for Ubermachine</title>검색 엔진에 대한 유용한 컨텍스트를 제공 할 수 있습니다. 이것은 SEO 질문입니다.

— Lea Hayes

2 개의 개별 제품이있는 경우 자체 "시작"주제를 포함하는 2 개의 사용자 안내서가있을 가능성이 큽니다. 따라서 MDN 접근 방식에 대한 관심의 일부와 <title>충분한 컨텍스트를 제공 하는지 여부를 알고 싶은 이유 .

— Lea Hayes

나는 검색 엔진에 대해 걱정하지 않을 것입니다. 이 수준에서 생각하고 있다면 나머지 사이트는 기술적으로 훌륭하고 검색 엔진에 충분할 것입니다. 대신 사용자에 대해 생각하십시오.

— John Mueller

URL을 언급하지 않았습니다. 이는 인간과 로봇의 친근 함을위한 중요한 메커니즘이기도합니다. 예를 들어 두 개의 MDN 예 <h1>이 일치하지 않습니다. 문맥에서 두 URL 모두 페이지 제목 앞에 / web / guide / html /을 포함합니다.

— Martin F

답변:

광범위한 웹 검색을하는 동안 나는이 질문의 미래 독자들도 유용하다고 생각하는 인용문을 찾았습니다.

사용 <h1>최상위 제목에 대한

<h1> 문서의 첫 번째 레벨 제목에 대한 HTML 요소입니다.

문서가 기본적으로 독립형 인 경우 (예 : 제네바에서보고해야 할 것) 최상위 제목은 제목과 동일 할 것입니다.

애완 동물에 관한 페이지 모음에서 개에 대한 섹션과 같은 모음의 일부인 경우 최상위 제목은 특정 양의 컨텍스트를 가정해야합니다. <h1>Dogs</h1>제목이 어떤 맥락에서든 작동하는 동안 작성 하십시오 : 개-애완 동물 안내.

원본 출처 : http://www.w3.org/QA/Tips/Use_h1_for_Title

위의 인용문은 문서 수준 <h1>요소가 <title>자체를 사용하여 정의 된 현재 페이지의 컨텍스트를 가정 할 수 있다고 제안하는 것 같습니다 . 아마 같은 페이지가 여러 개 있다면<h1> 괜찮을 것입니다 ...

<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>

또한보십시오 : <title> : 양질의 웹 페이지에서 가장 중요한 요소

답변을 수락하기 전에 다른 사람들의 생각을 기다립니다.

— 레아 헤이스
소스

멋진 질문 업데이트 및 후속 답변. 당신의 대답이 맞다고 생각한다면 당신의 대답을 받아들이지 않는다면, 다른 사람들이 차임 할 것입니다.

— dan

헤더의 '제품 이름'에 H1 또는 제목 수준 사용에 대해 이의를 제기합니다.
H1은 제품, 응용 프로그램 또는 사이트가 아닌 페이지 제목을 나타냅니다.
접근성과 SEO 목적을 위해 모든 페이지에서 반복되는 H1은 해 롭습니다. Unfortunetaly이 경우 수단 '사이트 제목은'그래서 유일한 옵션은 것을 더 의미 HTML 태그가 없다 <div>거나 <p>혹은 심지어 <strong>그것을 어떤 의미 중점을 제공하는 태그.

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

— 다비 엘리 조
소스

정답은 하나도 없으며 다른 옵션도 있습니다.

다음은 몇 가지 옵션이지만 모두 장단점이 있습니다.

이 옵션은 당신이 제시 한 것보다 많거나 적지 만, 더 많은 제목과 내용이 어디로 가고 로고가 이미지 / 텍스트보다 더 복잡한 요소라는 아이디어를 보여줍니다. 회사의 성격으로 인상을 남길 요소, 왜 섹션. 다시. 섹션이 아니라 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>

다음은 메인 태그를 소개하여 페이지의 관련 부분을 보여줍니다. 이 태그는 지원 및 향후에 여전히 스케치되어 있지만 탐색이 제품 또는 페이지와 관련이 없음을 명확하게 나타냅니다. 섹션 태그는 다른 컨테이너 일 수 있고 main은 일부 사람들의 기사 일 수 있습니다.

<!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>

다음 기사는 대부분의 사람들이 그 기사를 사용하는 경향이 있으므로 기사를 사용합니다.

<!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>

나는 매우 모듈화되고 블록 지향적이므로 다음 요소와 같은 것을 사용하므로 각 요소는 관련 키와 관련된 데이터베이스 관점에서만 독립적입니다. 섹션 태그를 건너 뛸 것입니다.

<!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>

여전히 더 많은 옵션이 있습니다.

— PatomaS
소스

그들은 모두 나에게 지나치게 복잡해 보인다.

— Martin F

HTML5 웹 사이트에서 <title>, <header>, <h1> 및 <h2>를 올바르게 사용합니까?

내 발견 중 일부

질문

내 최선의 추측

사용 <h1>최상위 제목에 대한

사용 `<h1>`최상위 제목에 대한