<h1>-시맨틱 영향과 SEO 영향

html5의 제목 구조 아키텍처에 대해서는 많은 논쟁이 있습니다. 다양한 기사를 읽은 후 논리적으로 이해할 수있는 세 가지 가능한 아키텍처를 찾았지만 실제 적절한 접근 방법은 확실하지 않습니다. 아래에 코드 예제와 함께 나열하고 누군가가 적절한 균형에 약간의 빛을 비추거나 더 나쁘거나 더 낫다는 것을 두려워합니다.

접근법 1 : 버전 A

단일 <h1>: 페이지 특정 내용에만 제목을 사용합니다.

그러면 콘텐츠 영역 내에서 필요 <h1>에 따라 페이지 특정 제목에 대한 최상위 탐색 기능이 그대로 유지됩니다 <h2-6>. 떠나는 동안 <header>, <nav>그리고 <footer>으로 "제목"요소를.

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

접근법 1 : 버전 2

여러 개 <h1>: 페이지 특정 콘텐츠에만 제목을 사용합니다.

여러 개의 동일하게 중요한 페이지 컨텐츠 주제가 추가 된 1A 와 동일 합니다. (예 : 블로그 또는 분할 된 주제 페이지에 가능)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

접근법 1 개요 : SEO에 가장 논리적 인 내용 (연구에 대한 나의 의견)

• 제목없는 BODY
  • 제목없는 NAV
• 주요 제목
  • 섹션 제목
    • 소제목
  • 제목없는 섹션

접근법 2 :

배수 <h1>: 개요 구조 및 내용 계층 강조

이것은 사이트 전체 요소에 제목을 적용 하고 내용 중심이 아닌 요소 <header>에는 여러 개를 사용 합니다.<nav><footer><h1>

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

접근법 2 개요 : 의미 론적 개요에 가장 논리적 (다시 말하면, 내 의견)

• 헤더 제목
  • 탐색 제목
• 주요 제목
  • 섹션 제목
    • 소제목
• 바닥 글 제목
  • 섹션 제목

접근법 3

단일 <h1>: 콘텐츠 계층 구조 포커스; <h1-6>사이트 전체 요소의 하위 수준

이 사이트 전체 요소에 제목을 적용 <header>, <nav>및 <footer>다중를 사용하지 않고 <h1>컨텐츠가 아닌 중심 요소 S '이 (가) 있습니다.

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

접근법 3 개요 : 두 가지 접근 방식의 하이브리드

• 헤더 제목
  • 탐색 제목
• 주요 제목
  • 섹션 제목
    • 소제목
  • 바닥 글 제목
  • 섹션 제목

그래서 모든 것을 말하면서 어떻게이 모든 것을 이해합니까? 어떤 접근법이 다른 접근법보다 의미 론적 가치를 더 많이 가지고 있습니까? SEO 측면에서 더 의미가 있습니까? 달성 할 수있는 행복한 균형이 있습니까?

출처 : 더 많은 것이 있었으며, 현재 기억할 수있는 것들이 있습니다.

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

우선, 어떤 예제도 의미와 관련이 없습니다. 귀하의 질문은 페이지가 전통적인 방식으로 위에서 아래로 읽히는 파서 모델을 기반으로합니다.

이러한 이유로 첫 번째 예가 정확합니다. 다음 예는 예측 가능한 결과를 제공하지 못하고 심각한 화상을 입을 수 있습니다.

귀하의 웹 페이지는 개념적으로 몇 가지 방식으로 검토 될 것임을 이해하십시오. 하나는 사용자 관점에서 HTML 등이 평가되는 전통적인 DOM 모델을 따릅니다. 2, 제목, 부제목, 내용 등을 표시하는 간단한 마크 업이있는 텍스트 만; 셋째, h1-6 계층에서의 위치를 ​​기준으로 색인의 헤더 태그에 실제로 약간의 가중치 만 적용되는 의미 론적보기를 사용합니다. DOM 모델에서 제목 태그, 설명 메타 태그 등과 같은 다른 두 가지 뷰에서 누락 된 것을 얻을 수 있습니다. 그러나 DOM보기는 내용에 가중치를 부여하는 데 거의 도움이되지 않습니다. 주요 기능은 페이지, 탐색 위치, 머리글 및 바닥 글 위치, 콘텐츠 시작 및 종료 위치 등을 이해하는 것입니다.

당신이 정말로주의해야 할 것은 텍스트와 의미 론적 견해입니다. 시맨틱 뷰는 주로 텍스트 전용 뷰에서 파생되지만 다양한 언어학, 심리학, 의미론 및 기타 컨텐츠 분석과 함께 제공됩니다.

시맨틱을 다시 설명하지는 않지만 주제에 대한 미니 튜토리얼 인 얼마 전에 쓴 답변을 지적 할 것입니다. 키워드가 채워진 웹 사이트가 Google 검색 결과가없는 웹 사이트보다 높은 순위를 갖는 이유는 무엇입니까?

웹은 인쇄 된 페이지를 기반으로하며 초기부터 파서는 이러한 전통을 따르고 크게 변경되지 않았으므로이를 피할 수 없습니다. 다음은 파서 모델에 따라 최상의 전략으로 유지되는 헤드 라인 읽기 순서를 설명하는 답변입니다. 일반 키워드와 특정 키워드의 Google 순위 향상

헤더 태그를 움직일 때 약간의 영향이있을 수 있음을 인정하지만 나는 이것이 현명한 일입니까? 지옥 아니야! 오늘 가중치를 부여하는 방식이 내일 가중치를 부여하는 방식이 아닐 수도 있습니다. 전통적인 형식을 따르면 간단한 가중치 변경만으로도 사이트가 테일 스핀에 빠질 수있는 예측 가능한 결과가 보장됩니다.

이것이 작동하는 방식에 대한 관점은 다음과 같습니다. SEO의 도메인 이름 이점 제목을 무시하고 답의 맨 위를 건너 뛰고 프로그래머의 관점에 도달하십시오.

이 세 가지 답변을 읽으면 헤더 태그의 효과를 쉽게 이해할 수 있습니다. 정렬 방법에 따라 페이지 / 사이트 성능이 손상 될 수 있습니다. 전통에 따라 몇 가지 하위 헤더 태그를 과도하게 최적화하여 타이틀 태그와 h1 태그를 매우 빠르게 취소 할 수 있습니다. 신중한 균형이 핵심입니다.

마지막으로 엔지니어가 아닌 사람들의 모든 온라인 SEO 조언에 대해 경고합니다. 돈을 벌고주의를 끌기 위해 경쟁하는 것은 라켓입니다. 검색 엔진의 작동 방식은 비밀이 아닙니다. 어디를보아야하는지 알 수 있습니다. 대부분의 모든 SEO 전문가는 검색 기술이 어떻게 구성되어 있는지 내부적으로 알 수 없다는 점에서 전문가가 아닙니다. Google 또는 Bing의 엔지니어가 아니라면 이러한 검색 엔진의 작동 방식을 정확히 알 수 없습니다. 다행히도 Google은 과학과 기술을 잘 알고 있으면 상당히 합리적인 가정을 할 수 있다고 충분히 말해주었습니다. 만들어지다. 내 관점에서 볼 때 대부분의 SEO는 올바른 것보다 더 틀리며 일부는 평균보다 히트 율이 훨씬 높습니다.

다음은 검색 엔진과 같은 소비자가 HTML 표준에 지정된 내용을 예상하고 사용할 것이라는 가정하에 HTML5 사양의 관점에서 본 것입니다. 현재 관행에서 이러한 마크 업 세부 사항은 아마도 SEO에는 중요하지 않지만 다른 소비자와 접근성에는 중요 할 수 있습니다.

HTML5가 권장하는 것이므로 적절한 순위의 제목을 사용 하지만 적절한 위치에 항상 섹션 콘텐츠 요소를 사용하는 경우 어디에서나 사용할 수 h1있습니다 .

제목 header이나 footer요소는 제목을 포함 할 수 없기 때문에 제목 이나 요소에 "적용"할 수 없습니다 (제목 만 포함 할 수 있지만이 제목은 header/ 의 범위로 제한되지 않습니다 footer).

각 절편 콘텐츠 요소 ( section, article, nav, aside), 각 절편 루트 요소 ( body, blockquote등)를 호에 적용 할 수있다.

이 절편 컨텐츠 / 루트 요소와 제목 요소 h1- h6유일한 요소 그에 대한 문제 문서 개요 .

모든 섹션은 제목에 대해 "길다"지만 섹션 을 제공 할 필요 는 없습니다 (이 경우 제목이없는 "암시적인"제목을 얻습니다). 하나를 제공하는 것이 종종 유용하지만 실제로 필요하지 않은 경우가 있습니다. 예를 들어 탐색이 하나만 있으면 nav제목이없는 것으로 충분합니다. 그러나 사이트에 여러 개의 탐색이있는 경우 다른 목적을 설명하는 제목을 사용하는 것이 좋습니다.

접근 방식 1에서 body제목이없는 섹션입니다 (그러나 이것은 첫 번째 제목 요소 앞에nav 나타나기 때문에 그렇습니다. 그렇지 않으면 전체 문서의 제목이됩니다). 제목없는 섹션을 사용하는 것이 좋은 선택 이라고 생각하지 않습니다 . 개요의 첫 번째 항목이며, 이상적으로는 아니지만 반드시 뒤에 나오는 모든 항목이이 항목의 범위에 있습니다.h1
body

전역 탐색이있는 일반적인 웹 사이트 의 경우 전역 탐색 은 현재 문서뿐만 아니라 전체 사이트 에도 속하기 때문에 섹션 제목에 사이트 이름을 사용하는 것이 좋습니다 ( 더 설명 ) .body

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

이 문서의 주요 내용은 사이트 제목의 범위 내에 있어야합니다. 사이트는이 문서의 주요 내용의 컨텍스트이므로 사이트의 일부입니다.

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

기본 게시물의 여러 섹션 (예 : 블로그 게시물 목록)이있는 경우 section다음 article과 article같이 직접 하위 항목을 갖는 대신 이들 모두를 포함 하는를 사용하는 것이 좋습니다 body.

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

사이트 전체 바닥 글이 너무 복잡하여 섹션 요소가 필요한 nav경우 기본 콘텐츠가 아닌 사이트에 속하므로 기본 콘텐츠와 같은 수준에 다시 있어야합니다 .

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(이러한 모든 예에서 탐색은 기본 컨텐츠보다 먼저 이루어 지지만, 기본 컨텐츠를 먼저 갖는 것이 합리적입니다.이를 교환 할 수 있습니다. h1사이트 이름이있는 다른 섹션 / 제목보다 앞에 있어야합니다 .)