html 제목과 문단 태그 종류 그리고 SEO 관계

제목 태그는 콘텐츠의 내용을 대표하는 하나의 키워드이며, 문장이다.
콘텐츠를 구성할 때 해당하는 부분과 함께 콘텐츠를 넣는 것은 SEO 관계와도 밀접하다.
제목 h 태그는 h1부터 h7까지 존재하며, 이들의 내용을 문단으로 설명할 때 p 태그를 사용한다.
제목 태그인 h 와 문단 태그인 p 태그를 사용하는 것은 이미 블로그를 하는 사용자라면 익숙하다.
h 태그로 제목을 구성하고 제목을 설명하기 위해 p 태그를 사용하기 때문.
이것의 사용법은 책을 구입했을 때 처음 보는 목차 부분을 보면 알 수 있다.
홈페이지 제작을 할 때 제목 태그 사용 시 주의할 점은 h1 태그는 단 1번만 사용하는 것이 권장하고 있다.

html 제목과 문단 태그 종류 그리고 SEO 관계
html 제목과 문단 태그 종류 그리고 SEO 관계

🏷️제목 태그

제목 태그는 콘텐츠의 내용을 요약한 키워드로 만든 하나의 문장이다.
사용자가 제목을 보고, 흥미를 일으키고, 내용을 보기 위해 클릭을 한다.
그리고, 자세히 읽어볼 것이다.

제목 태그의 목적은 콘텐츠의 내용을 요약하고, 정보를 찾는 사람들에 흥미를 일으킨다.
제목 태그가 SEO와 관계가 있다는 것은 블로그를 공부해 봤다면 잘 알고 있다.
제목의 키워드와 콘텐츠의 내용의 연관성이 밀접하다면 검색엔진들이 순위 노출에 유리하다.
다만, 정확한 검색 로직은 검색엔진 개발자가 아니라면 알 수 없다.
확실한 것 하나는 제목 태그를 정확히 순서대로 사용하면 SEO에 좀 더 유리하다고 한다.

제목 태그의 종류는 총 6가지가 있으며,
h1 ~ h6 까지 있다.
숫자가 작을수록 최상위 제목이며, 작을 수록 세부 제목이 된다.
h1부터 h6 태그의 정확한 개념을 알고 싶다면,
집에서 굴러다니는 아무 책이나 골라 가장 첫 부분의 목차를 보자.
책의 내용을 정확히 찾을 수 있도록 제목들이 정리되어 있다.

💡종류와 목적

제목 태그는 전체 6가지 종류가 있다.
h1부터 시작하여 h6까지 있으며, 번호가 클수록 소제목이 된다.
소제목은 바로 윗 숫자의 상세한 내용을 담는 키워드 문장이라 생각할 수 있다.
조건이 하나 있다면
h1 태그는 콘텐츠 페이지에서 단 한번만 사용하는 것을 SEO마다 권장하고 있으며,
다른 태그들은 순서만 맞으면 여러 번 사용 가능하다.

  • h1 - 메인 제목, 단 한번만 사용 권장.
  • h2 - 대제목
  • h3 - 중제목
  • h4 - 소제목
  • h5 - 세부 제목
  • h6 - 최하위 제목

🏷️문단 태그 <p>

문단 태그는 <p> 태그를 사용하고, 제목 태그로 구성된 키워드를 설명하는데 사용된다.
SEO에서 제목 태그와 문단 태그의 연관성이 주목되는 부분이다.
제목은 키워드이고, 문단은 제목을 설명한다.

문단이 무엇인지 잠깐 언급해 본다.
문단은 문장의 집합이며,
문장은 어떤 정보를 전달하고 설명하기 위한 단어의 집합이며, 주어와 서술어로 구성된다.
SEO를 공부한 사람이라면
콘텐츠의 내용은 제목과 최대한 연관된 설명을 하는 것을 알고 있다.
이런 점에서 제목 태그와 문단 태그의 연관성이 중요할 수 있다는 예상을 할 수 있다.

어떻게 보면, 홈페이지를 대충 만들었다고 해도,
제목과 문단 태그를 제대로 사용한다면,
검색엔진의 선택에 유리할 수 있다는 점도 예상 할 수 있다.
( 이렇게 얘기를 해도 쉽지 않다. )

🏷️SEO

SEO는 Search Engine Optimization 의 약자이다.
블로그나 웹사이트를 운영하는 사람들이라면 민감하고 고민하는 부분이다.
SEO 로봇에 의해 검색 결과가 표시되는 중요한 요소 중 하나이다.
로직은 구글 또는 네이버 등 검색엔진을 운영하는 업체마다 다르겠지만,
공통점이 있다면,
키워드의 중요성에 있다.
SEO에 가장 근접한 키워드를 찾는 방법은 각 검색엔진에서 제공하는 연관검색어와 자동완성어에 있다.
이런 키워드를 어떻게 사용하고, 어떻게 충실하게 설명하느냐에 따라 다르다.
지금은 AI의 발전과 AI검색 때문에 검색 결과에 대한 검색 유입이 상대적으로 많이 떨어진 것도 있다.

SEO의 중요한 것은 제목 태그와 문단 태그에 있다.
제목 태그로 설정된 키워드 문장을 사용하고,
문단 태그로 제목의 키워드를 충실하고 자세하게 설명할 수 있다면,
SEO는 해당 문서를 선택하고 검색 결과의 노출에 유리할 수 있다.
( 이것이 쉬운 일은 아니며, 어렵다고 할 수 있다. 로직은 아무도 모르기 때문. )

다만, SEO의 유리한 입장에 조금이라도 다가가고자 한다면
사람들이 많이 찾는 단어를 사용해 연관검색어, 자동완성어를 사용해 제목 태그를 이용해 제목을 구성하고,
제목 키워드를 문단 태그를 이용해 충실하게 내용을 구성하면 된다.

만약, 홈페이지를 만들어 자신만의 어떤 서비스를 할 목적이 있다면,
최소한의 화면 구성은
SEO의 규칙에 맞는 제목 태그와 문단 태그를 배치하여 사용하면 검색노출에는 문제가 없겠지만,
제목에 대한 단어와 제목에 대한 설명이 중요하다.

🏷️사용법

이제 제목 태그와 문단 태그의 사용법을 살펴보자.
의외로 간단하며, 난해할 경우 아무 책이나 선택해 목차 부분을 보자.
목차에 설명이 추가되면 그것이 가장 간단한 제목 태그와 문단 태그의 사용법이 된다.
일단 살펴보자.


<h1>h1 제목 태그 </h1>
<p>h1 제목 설명 문단 태그</p>

<h2>h2 제목 태그 </h2>
<p>h2 제목 설명 문단 태그</p>

<h3>h3 제목 태그 </h3>
<p>h3 제목 설명 문단 태그</p>

<h4>h4 제목 태그 </h4>
<p>h4 제목 설명 문단 태그</p>

<h5>h5 제목 태그 </h5>
<p>h5 제목 설명 문단 태그</p>

<h6>h6 제목 태그 </h6>
<p>h6 제목 설명 문단 태그</p>

위의 코드는 제목 태그를 순서대로 나열한 것이다.
가장 간단한 콘텐츠 영역의 SEO의 권장을 따르는 것이지만,
네이버 포스팅들도 구글에 잘 노출되는 것을 보면, 굳이 지킬 필요는 없다.

중요한 점 2가지는 다음과 같다.
문단 태그 ( <p> ) 의 설명은 제목 태그 ( <h> ) 의 내용에 충실해야 한다.
제목 태그는 여러 번 사용할 수 있다.
<h1> 제목 태그는 웹 문서당 단 한 번만 사용할 것을 권장한다.
그 외 다른 태그는 여러 번 사용이 가능하다.

🏷️목차 만들기

<h> 제목 태그와 <p> 문단 태그를 사용하기 전에 목차의 형태를 만들어 보자.
일단, 아무 책이나 선택 한 후 목차( 인덱스, Index )를 먼저 보자.
어디선가 많이 본 형태를 보일 것이다.
아래는 그것을 표현한 것이다.
구글 블로그의 경우 상단 메뉴의 아이콘을 보고 따라하면 된다.

구글 블로그 상단메뉴 번호 매기기

  • h1 제목
    • h2 제목
    • h2 제목
      • h3 제목
      • h3 제목
        • h4 제목
        • h4 제목
      • h3 제목
        • h4 제목
          • h5 제목
          • h5 제목
            • h6 제목
            • h6 제목
    • h2 제목

대충 이해가 될 수 있다.
여기서도 h1 제목 태그를 단 한번만 사용했으며 그 외 나머지 제목 태그들은 중복으로 사용했다.
여기서 p 문단 태그를 사용해 설명을 추가한다면,
기본적인 SEO 규칙에 맞는 콘텐츠 문서가 완성된다.

    🏷️html 만들기

    <h>제목태그와 <p>문단 태그에 대한 설명이 너무 길었다.
    html을 만들 때 필요한 다른 태그들도 있지만, 여기서는 기본적인 h 제목 태그와 p 문단 태그만 언급해 본다.
    단, SEO가 권장하는 내용만 지키면 된다.

    • h1 제목 태그는 단 한번만 사용한다.
    • h1 외 다른 제목 태그는 반복적 사용이 가능하다.
    • h 제목 태그는 숫자가 높을 수록 상세한 내용을 언급한다.
      그렇기에, 순서대로 사용한다.
    • h 제목 다음에 설명을 위한 p 태그를 사용하도록 한다.

    위의 내용을 참고한 기본적인 내용은 다음과 같다.

    
    <h1>h1 제목 태그 </h1>
    <p>h1 제목 설명 문단 태그</p>
    
    <h2>h2 제목 태그 </h2>
    <p>h2 제목 설명 문단 태그</p>
    
    <h3>h3 제목 태그 </h3>
    <p>h3 제목 설명 문단 태그</p>
    
    <h4>h4 제목 태그 </h4>
    <p>h4 제목 설명 문단 태그</p>
    
    <h5>h5 제목 태그 </h5>
    <p>h5 제목 설명 문단 태그</p>
    
    <h6>h6 제목 태그 </h6>
    <p>h6 제목 설명 문단 태그</p>
    
    

    h 제목 태그와 p 문단 태그에 대한 기본적인 사용 방법은 다음과 같다.
    이번엔 html 파일을 만들어 보기로 한다.
    책의 인덱스(목차) 부분을 참고하여 만들어 보도록 하자.
    코드가 조금 길어질 수 있지만, 반복적인 내용은 위의 기본 코드와 같다.

    🏷️SEO 권장 html 제목 태그 문단 태그 만들기

    블로그 또는 웹사이트 기준으로 SEO 권장 html 구조를 만들어 본다.
    반복적으로 언급한 내용이지만
    가급적이면 제목태그와 문단태그는 같이 사용하도록 하자.
    코드를 하나 만들어 볼 것이며, 제목 태그는 몇가지 없을 것이다.

    
    <h1>h1 제목 태그 </h1>
    <p>h1 제목 설명 문단 태그</p>
    
    <h2>h2 제목 태그 </h2>
    <p>h2 제목 설명 문단 태그</p>
    
    <h3>h3 제목 태그 </h3>
    <p>h3 제목 설명 문단 태그</p>
    
    <h3>h3 제목 태그 </h3>
    <p>h3 제목 설명 문단 태그</p>
    
    <h2>h2 제목 태그 </h2>
    <p>h2 제목 설명 문단 태그</p>
    
    <h3>h3 제목 태그 </h3>
    <p>h3 제목 설명 문단 태그</p>
      
    <h4>h4 제목 태그 </h4>
    <p>h4 제목 설명 문단 태그</p>
    
    

    예시로 든 것과 별 차이는 없지만, SEO에서 권장하는 규칙은 유지했다.
    h1 제목 태그는 단 한개만 사용했다.
    그 외 태그는 여러개로 사용은 가능하며,
    제목의 하위에 위치하는 내용이 있을 경우, 하위 제목 태그를 연속으로 사용했다.
    추가적으로 그 외 규칙이 있다면
    meta 태그에 SEO와 관련한 여러가지 내용을 추가하면 된다.

    댓글