HTML 표제 태그를 올바르게 사용하는 방법

게시 됨: 2020-06-25

모든 웹사이트는 고유한 괴물이며 개발자와 디자이너는 코드에 고유한 서명 목소리를 넣습니다. 그러나 모든 단일 웹사이트에 공통적으로 있는 한 가지 요소는 HTML 제목 태그입니다. 이러한 제목은 콘텐츠를 읽기 쉬운 섹션으로 나눌 뿐만 아니라 사이트의 의미론적 개요를 만들어 검색 엔진과 접근성 소프트웨어가 사이트를 구성하는 콘텐츠를 정확히 알 수 있도록 합니다. 때때로 HTML 표제 태그의 적절한 사용과 기능에 대해 약간의 혼란이 있기 때문에 6가지 계층을 모두 살펴보고 올바르게 사용하는 방법과 시기에 대해 논의하고자 합니다.

YouTube 채널 구독

HTML 표제 태그를 사용하는 이유

위에서 말했듯이 이 태그는 사이트의 골격을 만듭니다. 그것들이 없으면 사이트의 제목과 목적이 명확하지 않을 뿐만 아니라 사용자와 봇에게 콘텐츠가 마치 단락을 사용하여 나누더라도 하나의 거대한 텍스트 벽처럼 보입니다.

또한 화면 판독기 및 접근성 소프트웨어는 이를 사용하여 콘텐츠를 탐색합니다(때로는 문자 그대로). 따라서 HTML 제목 태그를 포함하지 않으면 페이지와 콘텐츠를 이동할 수 없기 때문에 많은 사람들이 사이트에 액세스할 수 없게 됩니다.

또한 귀하의 사이트로 이동하는 검색 엔진 및 기타 웹 크롤러도 귀하의 제목을 통해 탐색합니다. 최근 Google은 순위에서 코드 의미 체계를 고려하고 있습니다. 즉, 검색 의도가 매우 중요합니다. HTML 표제 태그는 이것의 주요 부분으로, Google과 방문자에게 페이지에서 계층적 중요도별로 구성된 특정 정보를 찾을 수 있는 위치를 알려줍니다.

그리고 페이지 내의 각 태그는 이 모든 것을 자체 방식으로 도와줍니다.

태그 계층이 중요합니다.

HTML 제목 태그 계층 구조가 중요합니다. 이러한 태그를 사용하는 순서에 따라 사이트의 SEO가 결정되거나 중단될 수 있습니다. CSS를 사용하여 스타일을 지정하고 H6 태그를 H2보다 더 크고 대담하고 밝게 만들 수 있지만 크롤러(및 독자)를 혼동하지 않도록 계속 유지해야 합니다.

태그가 게시물 개요의 제목인 것처럼 오름차순으로 태그를 생각하십시오. (일반적으로) 바로 전임자 아래에 더 높은 숫자만 넣어야 합니다. 원하는 만큼 깊이 중첩할 수 있지만 매번 다음 항목만 순서대로 배치해야 합니다.

다음은 예입니다.

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

H4 위에 단일 H6이 있는 특정한 경우가 있을 수 있지만 대부분의 경우 Google 및 기타 검색 엔진은 주제 우선순위를 결정하고 제목을 사용하여 콘텐츠를 탐색함으로써 검색 의도에 대한 콘텐츠 효율성을 측정합니다.

H1 태그

H1 태그는 HTML 표제 태그 중 가장 단순하지만 가장 잘못 이해되고 있는 태그 중 하나입니다. 대부분의 경우 특정 페이지나 게시물의 제목으로 H1 제목이 표시됩니다. 그것은 검색 엔진이 (아마도) 결과에 표시할 것입니다. 많은 SEO 플러그인 및 유사한 앱에서 이를 변경할 수 있지만 브라우저의 제목 표시줄에도 이를 표시할 수 있습니다. 이 때문에 H1 태그에 대상 키프레이즈를 포함하는 것이 중요하지만 100% 필요한 것은 아닙니다. HTML 표제 태그를 채우는 키워드 대신 방문자의 검색 의도를 포함하도록 표제와 제목을 의미론적으로 작성하십시오.

h1 예

위의 이미지는 Elegant Themes 블로그 기사의 항목 제목으로 사용된 H1 태그를 보여줍니다. 페이지에서 유일한 H1 태그이기도 합니다. 이는 페이지에 있는 콘텐츠의 주제임을 나타냅니다.

수년 동안 표준 관행은 페이지당 하나의(단 하나의) H1 태그를 갖는 것이었습니다. 대부분의 경우 이것은 여전히 좋은 조언입니다. Google 및 기타 검색 엔진은 페이지를 크롤링하고 H1 태그를 찾습니다. 그런 다음 이를 사용하여 주제, 제목 및 구조를 결정합니다.

그러나 Google은 귀하의 사이트에 여러 개의 H1 HTML 제목 태그가 있어도 SEO 패널티가 전혀 발생하지 않는다고 명시적으로 밝혔습니다. 그렇다고해서 사이트의 모든 곳에서 사용하지 않는다는 의미는 아니지만 필요할 때 페이지당 두 개 이상을 사용할 수 있다는 의미입니다.

여러 H1 제목을 사용하는 경우

H1의 유일한 목적은 단일 주제에 대한 전체 섹션을 나타내는 것입니다. 즉, 하나 이상의 주제가 있는 단일 페이지가 있는 경우 해당 페이지의 각 새 주제에 대해 H1을 사용하고 싶을 것입니다. 이렇게하면 페이지가 바로 제목의 주제에 대해 아니라고 구글을 말할 것. 그러나 아래에 완전히 다른(그러나 관련이 있는) 주제에 대한 섹션이 있을 수도 있습니다.

단일 페이지 웹 사이트에서는 한 페이지에 정보, 가격 책정, 연락처 및 포트폴리오 섹션이 있을 수 있기 때문에 중요합니다. 그렇다면 각 섹션에 포함된 콘텐츠가 자체적인 자율 단위라는 것을 Google에 어떻게 알릴 수 있을까요?

H1 태그, 그게 방법입니다. 위에서 논의한 계층 구조를 사용하여 각 섹션을 자체 미니 웹페이지인 것처럼 취급합니다. 그렇게 하면 Google은 페이지를 탐색할 때 제목을 보고 검색자의 질문에 답하기 위해 추천 스니펫(등)을 가져올 섹션을 결정할 수 있습니다.

사이트에서 섹션 태그를 사용할 때마다 H1 태그를 사용하도록 선택할 수도 있지만 하위 섹션이 아니라 페이지 제목과 평행하게 중요한 섹션인 경우에만 그렇게 하는 것이 좋습니다.

H2 태그

이제 H2 태그는 페이지에서 가장 많이 사용되는 HTML 제목 태그가 될 것입니다. 그리고 그럴만한 이유가 있습니다. 인터넷에 있는 대부분의 게시물과 페이지는 몇 개의 부제목이 있는 단일 주제로 구성됩니다. 생성하는 모든 콘텐츠에는 최소 하나의 H2 태그가 포함되는 것이 좋습니다. Yoast 및 기타 SEO 플러그인은 대략 300단어마다 제목을 제안합니다. 콘텐츠에 따라 H2 태그가 필요합니다.

읽기 쉽도록 하위 주제(또는 단계)를 구분합니다. 예를 들어, 대부분의 게시물은 주로 H2 제목으로 구성됩니다(해당되는 경우 H3 포함). 그것은 우리 기사가 단일 주제에 대해 다루고 있기 때문입니다. 여기서 우리는 단일 문제를 해결하려고 합니다. H1으로 OBS Studio를 사용하여 라이브 스트리밍하는 방법과 같은 제목이 있지만 "OBS Studio 시작하는 방법"과 같은 부제목은 H2에 있습니다.

h2의 예

H2 태그는 H1 주제와 직접 관련된 개별 단계를 나타냅니다. 그 특정 포스트에서 우리는 다음 구조를 사용했습니다:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

이 게시물의 H2 제목 태그는 시작 및 다운로드, 실제 소프트웨어 설정, 시청자에게 화면이 표시되는 방식 조정과 같은 주요 아이디어를 다룹니다. H3의 단계 아래에도 단계가 포함되어 있지만 H2 제목은 기사의 대규모 그림을 나타냅니다. 크롤러와 독자가 기사에 검색하는 정보가 포함되어 있는지 확인하기 위해 스캔할 수 있는 상위 수준 보기입니다.

일반적으로 기사당 여러 개의 H2 태그가 있지만 그 아래에 중첩된 부제목이 없을 수도 있습니다. 페이지 또는 게시물이 위의 예와 같이 하위 섹션이 있는 섹션으로 분류되지 않은 단일 주제에 있는 경우 중첩된 H2 -> H3 -> H4보다 여러 H2 태그가 있는 것이 좋습니다. 게시물의 주요 주제를 확장하는 것보다 주제에 대해 더 깊이 파고듭니다.

H3 태그

반면에 H3 태그는 기사가 주제의 세부 사항을 실제로 파고들 수 있는 곳입니다. H1 바로 아래에 이러한 H3 태그를 사용해서는 안 됩니다. Googlebot과 검색 엔진은 이들을 절대적으로 부제목으로 봅니다. H2는 단일 기사 내의 섹션에 대한 기본 표제로 허용되는 반면(H1은 주요 주제를 제목으로 선언함을 기억하십시오).

h3 예제

위의 이미지를 자세히 보면 H2와 H3 태그 사이의 실제 스타일과 크기가 크게 다르지 않다는 것을 알 수 있습니다. 그 이유는 스캔을 통해 우리가 H3에서 만드는 모든 포인트가 H2보다 덜 중요하다고 가정하는 것을 원하지 않기 때문입니다. 왜냐하면 그렇지 않기 때문입니다.

글의 SEO에 관한 구조적 관점에서 가장 중요한 전체 주제와 직접적인 관련이 있는 것이 아니라 H2의 종속 지점임을 나타내기 위해 크기가 작을 뿐입니다. 로봇이 아닌 인간 독자의 경우 시각적 구분은 단순히 페이지 아래로 이동하고 정보를 세분화하여 더 쉽게 구문 분석하는 데 도움이 됩니다.

H4, H5, H6 태그

이유가 있어서 이것들을 하나로 묶었습니다. 일반적으로 HTML 표제 태그의 H1에서 H6 범위를 최대한 활용하는 사이트를 찾기가 어려울 것입니다. 지금까지 가장 인기 있는 구조는 H1에서 H3입니다. 두 번째 중첩 수준을 넘어서는 콘텐츠 개요를 거의 볼 수 없는 것처럼.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

대부분의 경우 H4 태그는 H3과 동일한 용도로 사용됩니다. 그것들을 사용하여 단계와 예에 대해 자세히 설명하지만 항상 기본 제목 아래에 중첩됩니다. 디자이너는 일반적으로 H3보다 작은 CSS로 스타일을 지정합니다. 그들은 일반적인 콘텐츠 제작에서 제한된 사용을 보는 경향이 있습니다. H4 표제 태그가 필요하도록 아이디어를 세분화해야 하는 경우 주제는 매우 심층적인 경향이 있습니다.

H5 및 H6

몇 가지 다른 방법으로 H5 및 H6 제목을 사용할 수 있습니다.

첫 번째 방법

(예를 들어, 이 특정 섹션을 제목을 통해 다양한 부분으로 나누었고, 주요 기사의 하위 주제이기 때문에 이제 H4 아래에 있습니다.)

이 표제는 목차와 유사한 목록에 자주 사용되지만 주요 기능은 기술적으로 다른 것과 동일하며 페이지 전체에서 중요도가 낮은 주제를 설명합니다. H6까지의 전체 표제 배열이 있는 문서를 찾는 것은 매우 드뭅니다.

두 번째 방법

어떤 사람들은 H5 및 H6 태그를 "전문" 서식 제목으로 사용합니다. H1에서 H4까지 완전히 다른 이 두 HTML 표제 태그에 특수 CSS를 적용합니다. 그런 다음 이를 사용하여 간과할 수 있는 주제와 아이디어에 주의를 환기할 수 있습니다.

머리글이 계층적이기 때문에 이것은 기술적으로 모범 사례가 아닙니다. 그러나 사이트가 전반적으로 잘 구성되어 있고 특정 개별 페이지나 게시물에서 전문 스타일로 H5 및 H6을 드물게 사용하는 경우 SEO 적중을 거의 확실히 받지 못할 것입니다.

특별한 서식을 사용하는 경우에도 계층 구조를 벗어나지 않는다는 점을 기억하십시오. 순서대로 보관하십시오. 따라서 H6을 사용하여 부제목의 스타일을 지정하는 경우 다음으로 사용하는 것이 H1 또는 H2인지 확인하여 표준 구조로 다시 이동했음을 보여줍니다.

HTML 표제 태그로 하지 말아야 할 일

전체 머리글 계층 구조가 아래로 내려가도록 단일 페이지를 구성하지 마십시오. 각 연속 제목이 중첩되는 것보다 제목과 모든 H2에 대해 H1을 사용하는 것이 좋습니다.

예:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

아니요:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

또한 제목을 무심코 사용하고 싶지 않습니다. 순서대로만 사용하십시오. 그렇지 않으면 크롤러가 페이지를 탐색하는 방법과 접근성 소프트웨어를 알지 못합니다.

아니요:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

일반적으로 크롤러는 다음 H1 또는 H2를 찾을 때 하위 섹션에서 벗어났다는 것을 알 것이라고 가정할 수 있습니다. 위의 코드 조각에서 크롤러와 봇은 정보 구조를 구문 분석하는 데 어려움을 겪을 것입니다.

HTML 표제 태그로 마무리하기

그리고 봐라? 우리는 일을 마무리하기 위해 H2로 돌아갑니다. 제목 태그는 모든 단일 웹사이트의 중요한 요소입니다. 이를 적절히 사용하면 방문자가 귀하의 콘텐츠에서 원하는 정보를 더 쉽게 찾을 수 있으므로 사이트의 UX뿐만 아니라 검색 엔진 순위를 높일 수 있습니다. 너무 많은 제목을 키워드로 사용하지 않도록 하십시오. 아이디어를 명확하게 하기 위해 토론 중인 키워드나 구문을 포함하는 것이 좋지만 Googlebot과 다른 사람들은 매우 똑똑하고 주제를 바꿨거나 같은 주제에 대해 말할 수 있습니다. 전반적으로 HTML 제목 태그를 사용하는 것은 매우 중요하지만 몇 가지만 염두에 두면 사이트가 순식간에 빛날 것입니다.

HTML 제목 태그를 올바르게 사용하고 있습니까?

VectorV/Shutterstock.com의 기사 특집 이미지