헤더 태그: 정의 및 사용 방법

처음 블로그를 시작했을 때 검색 엔진 순위를 매기기 위해 게시물을 구성하는 방법이나 그것이 왜 중요한지 전혀 몰랐습니다.

나는 보기에 좋고 검색 엔진 결과 페이지(SERP)에 대해 무작위로 선택되기를 바라는 굵은 단어와 문구를 던졌습니다.

이제 나는 과학이 있다는 것을 안다. 블로그 최적화, 전문적으로 보이도록 블로그 게시물에 삽입한 것은 헤더/제목 태그라고 하며 이해를 위한 중요한 도구입니다. 과 SEO.

헤더 태그와 그 용도에 대한 빠른 가이드는 다음과 같습니다.

• H1 — 게시물의 제목입니다. 일반적으로 키워드 중심이고 페이지나 게시물의 "큰 아이디어"에 초점을 맞추고 독자의 관심을 끌 수 있도록 제작되었습니다.
• H2 — 단락의 주요 요점과 섹션을 구분하는 하위 헤더입니다. H1의 "큰 아이디어"와 관련된 의미론적 키워드를 사용하는 동시에 독자가 읽고 싶은 섹션을 쉽게 찾을 수 있도록 도와주세요.
• H3 — 이는 H2에서 제시된 요점을 더욱 명확히 하는 하위 섹션입니다. 또는 목록이나 글머리 기호 형식을 지정하는 데 사용할 수 있습니다.
• H4 —H3에서 제시된 요점을 더욱 명확히 하는 하위 섹션입니다. 또는 목록이나 글머리 기호 형식을 지정하는 데 사용할 수 있습니다.

H1, H2 등의 "H"는 공식적으로 "제목 요소"를 의미하지만 SEO 커뮤니티에서는 일반적으로 이러한 태그를 "헤더 태그"라고도 합니다.

위의 가이드에서 짐작할 수 있듯이 숫자는 각 항목 간의 계층적 관계를 나타냅니다(H1이 가장 중요하고 H2가 덜 중요함 등).

다음은 이 계층 구조가 블로그 개요에 어떻게 나타날 수 있는지에 대한 예입니다.

이제 헤더 태그가 페이지에 구조를 제공한다는 것을 이해했으므로 H1 태그부터 시작하여 더 구체적으로 이에 대해 이야기해 보겠습니다. 

헤더 태그를 단지 스타일 요소로만 사용하는 실수를 저지르지 마십시오. 결국 그들은 본질적으로 구조적입니다. H1을 책 제목처럼 생각해보세요. 일반적으로 책에는 제목이 하나만 있으므로 페이지나 게시물에도 제목이 하나만 있어야 합니다. 

또한 H1 태그는 책 제목이 내부 텍스트에 들어가기 전에 표지 바깥쪽에 있는 것처럼 항상 나머지 콘텐츠보다 먼저 페이지 상단에 있어야 합니다.

설명을 위해 아래 예의 헤더 태그는 제목입니다.2021년 제품 마케팅을 위한 궁극의 가이드. "

제목은 HTML 코드를 사용하여 페이지의 H1로 지정됩니다. 이 코드는 웹페이지의 소스 코드에 다음과 같이 나타날 수 있습니다.

펜보기 H1 예시 1 크리스티나 페리콘(Christina Perricone)hub)에 코드 펜.

그러나 앞서 언급했듯이 페이지 구조를 만드는 데 도움이 되는 다른 제목 태그도 있습니다.

HTML은 몇 개의 헤더 태그를 지원합니까?

HTML은 필요에 따라 페이지를 구성하는 데 사용할 수 있는 최대 1개의 헤더 태그(H6-H1)를 지원합니다. 브랜드에 따라 시각적으로 스타일을 지정할 수 있으며, HXNUMX을 제외하고 페이지에 원하는 만큼 이러한 태그를 포함할 수 있습니다. 

헤더는 독자(및 검색 엔진)가 콘텐츠 내의 주요 요점을 찾고 페이지 흐름을 안내하는 데 도움이 될 수 있으므로 작성 중인 주제에 충실해야 합니다. 서식을 지정할 때 섹션을 나눌 때는 최선의 판단을 내리세요.

다음은 화살표로 표시된 헤더 태그의 예가 포함된 HubSpot 블로그 게시물의 스크린샷입니다.

보시다시피 모든 헤더 태그는 시각적으로 다르게 보이며 각 헤더 태그는 새로운 아이디어에 사용됩니다.

이제 헤더 태그가 무엇인지 좀 더 알았으니, 헤더 태그가 SEO에 어떻게 사용되는지 살펴보겠습니다.

헤더 태그 및 SEO

웹사이트와 관련된 전체적인 계획에서 헤더 태그가 중요하지 않다고 생각할 수도 있습니다. 그러나 헤더 태그는 콘텐츠에 구조를 제공하고 가장 중요한 아이디어, 주제 및 (실제로) 주의를 환기시키는 데 도움이 될 수 있습니다. 키워드 그 내용에. 결과적으로 헤더 태그는 키워드 관련성과 가독성 측면에서 중요한 역할을 합니다. 

다음을 고려하십시오. Google은 다음을 통해 사용자에게 서비스를 제공할 콘텐츠를 찾습니다. 웹페이지 크롤링. 그렇게 하면서 찾은 텍스트, 이미지 및 기타 요소를 분석하여 그 페이지의 내용을 이해하세요.

헤더 태그에 텍스트를 넣으면 이 텍스트가 중요하다는 신호를 보내는 것이며, Google은 이를 사용하여 페이지의 컨텍스트를 파악한 다음 검색자의 검색어와 관련된 결과를 제공하는 데 도움이 됩니다.

그렇기 때문에 헤더 태그를 사용할 때 헤더 태그가 올바르게 일치하는지 확인하는 것이 중요합니다. 키워드 의도. 게시물의 H1 태그에 키워드가 없거나, H2, H3 태그에 관련 없는 텍스트를 넣으면 Google이 페이지를 이해하기 어려워집니다. 결과적으로 해당 페이지의 순위는 기대만큼 높지 않습니다. 

설명을 위해 키워드가 '전자상거래'라고 가정해 보겠습니다. 이것이 H1 태그에 반영되기를 원하므로 "전자상거래 사업 시작 가이드"와 같은 제목이 이상적입니다. 그러면 웹 브라우저를 귀하의 게시물로 보내는 방법을 Google에 정확하게 알릴 수 있습니다.

검색 엔진은 게시물 내의 헤더 태그도 확인하므로 키워드 중심으로 유지하는 것도 좋습니다. 예를 들어, "전자상거래 비즈니스를 창출하기 위한 2단계" 또는 "전자상거래를 위한 최고의 소셜 미디어 도구"와 같이 전자상거래와 관련된 인기 있는 롱테일 키워드를 둘러싼 일부 HXNUMX 섹션을 만들 수 있습니다.

키워드를 스스로 생각할 필요도 없습니다. 사실 키워드를 쉽게 생각해 낼 수 있습니다. 키워드 연구 도움을 주거나 다음과 같은 키워드 조사 도구를 살펴보기 위해 SEMRush or Ahrefs. 헤더 태그가 사람과 검색 엔진 로봇 모두에게 친숙한지 확인하세요.

헤더는 또한 페이지를 더 쉽게 읽을 수 있게 해줍니다. 웹페이지의 여러 부분을 구분하면 정보가 이해하기 쉬운 방식으로 체계화되고 분리됩니다. 이를 통해 독자는 원하는 정보를 찾을 수 있을 뿐만 아니라 검색 중인 검색 엔진도 찾을 수 있습니다.

섹션이 이해되지 않으면 페이지 순위가 매겨지지 않을 수 있습니다. 이 게시물의 섹션을 생각해 보세요. 읽기 쉬운 방식으로 나누어져 있다고 생각하시나요?

HTML에 헤더 태그를 추가하는 방법

HTML에 헤더 태그를 추가하는 것은 매우 간단한 과정입니다. H1을 표기하려면 및 을 입력하고 두 태그 사이에 H1 텍스트를 넣습니다. 이는 모든 유형의 헤더 태그에 대해 동일한 방법입니다.

예를 들어, h1이 “전자상거래 시작 가이드,” 다음과 같이 보일 것입니다 :

펜보기 H1 예시 2 크리스티나 페리콘(Christina Perricone)hub)에 코드 펜.

이는 HTML4 이하에서 작동합니다. HTML5로 작업하는 경우 동일한 결과를 얻으려면 약간 다른 줄을 사용해야 할 수도 있습니다. 변경 사항은 H1이 무엇인지 Google에 미리 알려주는 것입니다.

펜보기 H1 예시 3 크리스티나 페리콘(Christina Perricone)hub)에 코드 펜.

두 태그 사이에 구두점을 포함할 수도 있습니다. 예를 들어 다음과 같은 경우가 있을 수 있습니다.

펜보기 H3 예시 1 크리스티나 페리콘(Christina Perricone)hub)에 코드 펜.

Google은 웹 브라우저에 페이지 내용을 알리기 위해 헤더 태그의 HTML을 스캔하므로 이를 살펴보고 HTML 헤더의 형식이 올바른지 확인하는 것이 중요합니다.

WordPress 및 HubSpot과 같은 일부 블로그 플랫폼에는 도구 모음에 헤더 태그를 생성하는 옵션이 있으므로 헤더 태그를 추가할 때마다 소스 코드나 HTML을 자세히 살펴볼 필요가 없습니다.

다음에 웹사이트에 대한 게시물을 작성할 때 관련 헤더 태그를 추가하면 SEO에 영향을 미치는지, 그리고 독자가 정보를 어떻게 이해하는지 확인하세요.

제가 즐겨 사용하는 좋은 테스트는 블로그나 마케팅에 대해 잘 모르는 가까운 가족에게 게시물을 보내는 것입니다. 게시하기 전에 외부인 피드백을 사용하고 내 글을 이해할 수 있는지 묻는 것은 게시물을 이해할 수 있도록 형식을 지정하는 데 도움이 됩니다.

헤더를 사용하면 사용자의 가독성은 물론 검색 엔진의 크롤링에도 도움이 되기 때문에 페이지와 게시물을 만들 때 헤더를 사용하지 않을 이유가 없습니다. 검색 엔진 순위, 트래픽, 페이지 방문 시간이 급등하는 것을 볼 수도 있습니다.

편집자 주: 이 게시물은 원래 2020년 XNUMX월에 게시되었으며 포괄성을 위해 업데이트되었습니다.

출처: https://blog.hubspot.com/marketing/header-tags