HTML 구획 제목 요소(제목 태그)

“구획 제목 요소”라고 명칭을 쓰긴 했지만 이 글을 읽는 대부분의 사람들은 처음 듣는 단어일 것 같습니다. 사실 저도 이글을 쓰기 위해 찾아본 자료에서 이렇게 이야기해서 알게된 것이라서.. 영어로는 Heading Elements 라고 하고 실제 현장에서는 보통 “H tag”라고 부르고 있죠. 그냥 쉽게 생각해서 <H1> ~ <H6> 로 표시되는 HTML 태그입니다.

 <h1>Beetles</h1>
    <h2>External morphology</h2>
        <h3>Head</h3>
            <h4>Mouthparts</h4>
        <h3>Thorax</h3>
            <h4>Prothorax</h4>
            <h4>Pterothorax</h4>

대부분 그냥 이걸 모르는 사람이 SEO 때문에 이글을 보고 있을리 없다 싶은 상황이겠지만 SEO에서는 의외로 꽤 중요한 요소로 관리됩니다. SEO라는 것은 사용자가 만든 콘텐츠가 어떤 방법을 통해서 기계(검색엔진)에게 잘 읽혀지게 만들어서 그 기준을 충족해 더 잘나오게 하는 과정이기 때문입니다.

간단하게 정리하면 아래와 같습니다.

  1. 페이지 전체의 구조에 맞추어 제목 태그를 활용하여 Hierarchy(계층구조)를 만들어 적용한다.
  2. <H1> ~ <H6>를 사용해 페이지의 구조를 정의하도록 한다. 검색엔진은 <H> 태그를 제목으로 아래 부분을 본문으로 인식한다.
  3. 강조의 의미 또는 스타일을 위해 <H>태그를 사용하지 않아야 한다. 페이지 내 너무 많은 제목 태그를 사용하지 않아야 한다.

기본적으로 대한민국에서 웹사이트를 만들 때 제목과 본문을 구별하기 위해 H tag를 정리하고(가이드를 잡고) 퍼블리싱하는 곳이 늘고 있지만 아직은 완벽하지 않습니다. 해외에서는 이 제목 태그의 계층구조를 맞추는걸 해당 페이지의 SEO 작업의 시작으로 생각하고 있습니다.

새롭게 프로젝트를 시작한다면 해외의 SEO가 잘되어 있는 서비스를 참고하여 H tag를 기준으로 디자인 가이드와 퍼블리싱 가이드를 잡는다면 조금은 나은 SEO 환경이 될 것으로 생각됩니다. 아래는 Booking.com의 메인페이지 제목 태그 상황입니다. booking.com, expedia.com 등 해외의 글로벌 OTA(online travel agency)들은 천문학적인 광고비를 집행하는 만큼 SEO에도 꾸준히 투자하기에 SEO를 참고하기에는 굉장히 좋은 샘플이 됩니다.

<H1> Find deals on hotels, homes, and much more...
    <H2> Try searching for...
    <H2> Browse by property type
        <H3> Hotels
        <H3> Apartments
        <H3> Resorts
        <H3> Villas
        <H3> Cabins
        <H3> Cottages
        <H3> Glamping
        <H3> Serviced Apartments
        <H3> Vacation Homes
        <H3> Guest houses
        <H3> Hostels
        <H3> Motels
        <H3> B&Bs
        <H3> Ryokans
        <H3> Riads
        <H3> Resort Villages
        <H3> Homestays
        <H3> Campgrounds
        <H3> Country Houses
        <H3> Farm Stays
        <H3> Boats
        <H3> Luxury Tents
        <H3> Self-catering Accommodations
        <H3> Tiny houses
    <H2> Recommended destinations
        <H3> Seoul
        <H3> Tokyo
        <H3> Singapore
        <H3> Osaka
        <H3> Busan
        <H2> Homes guests love
        <H3> Sugar Loft Apartments
        <H3> Apartments on Belinskogo ulitsa
        <H3> A casa di Edi
        <H3> Baranova Apartments
        <H3> BNBHolder Vintage & Deluxe LATINA
    <H2> Get inspiration for your next trip
        <H3> America is for everyone
        <H3> Safety cleans up
        <H3> Vital value: Maximizing travel for less
        <H3> Bye bye 9-to-5: Work from wherever you want
        <H3> Spontechnaity: How tech will drive travel
    <H2> Connect with other travelers
        <H3> Travel Talk
        <H3> More communities
        <H3> Taipei
        <H3> Bangkok
        <H3> Paris
        <H3> London
        <H3> New York
        <H3> Rome
    <H2> Destinations we love
    <H2> Save time, save money!
    <H2> Verified reviews from real guests.
    <H2> How does it work?
        <H3> It starts with a booking
        <H3> Followed by a trip
        <H3> And finally, a review

댓글을 남겨주시거나 메일을 부탁드립니다.응답 취소