블로그

  • 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
  • 스니펫 (snippet)은 뭘 말하는 건가?

    스니펫?

    snippet 미국·영국 [ˈsnɪpɪt]  영국식 
    1. (작은) 정보
    2. (대화·음악 등의) 한 토막

     S.E.O. 에서 이야기하는 스니펫은 검색엔진이 질문(quary)에 대한 결과들의 부분을 의미합니다. 우리가 구글에서 만나게 되는 일반적인 스니펫은 URL 링크를 가지고 있는 제목과, 세부설명으로 구성되어 있습니다.1 일반적으로 동일 페이지(URL)에 대해서 동일한 스니펫을 제공하는 것으로 알고 계시겠지만 키워드에 따라 다른 세부설명문이 다른 스니펫을 보일 수도 있습니다.

    현재 구글에서는 3가지의 스니펫을 제공하고 있습니다.

    • 레귤러 스니펫(regular snippet) / 일반 파란색 링크(Plain blue link)
    • 리치 스니펫(rich snippet) / 리치 결과(rich result)
    • 추천 스니펫(featured snippet)

    레귤러 스니펫

    일반 파란색 링크2은 검색 시 가장 많이 볼 수 있는 구조로서 링크 URL, 페이지 제목, 페이지 설명으로 구성되어 있습니다. 여기에서 링크 URL, 페이지 제목, 페이지 설명이 일정 글자수를 초과하게 되면 … 으로 표시됩니다.

    구글 공식 문서에 등장하는 레귤러 스니펫,
    1. 페이지제목 2. 링크 URL 3. 스니펫으로 구성되어 있다.

    리치 스니펫

    리치 스니펫(rich snippet)은 현재는 리치 결과(Rich result)로 명칭이 변경되었습니다. 시각 자료(평점이나 사진 혹은 추가 정보) 또는 대화형 기능이 추가되어 개선된 검색 결과 항목을 의미합니다. ‘리치 카드’ 또는 ‘리치 스니펫’으로 불려왔고 최근 명칭이 변경되었습니다. 리치 결과라는 명칭은 익숙해지기 힘들 것 같지만 계속 사용하다보면 익숙해지리라 생각합니다. 레귤러 스니펫에 비해 리치 스니펫이 화면에 표시될 경우 사용자의 눈길을 끌게 되어 있으며 이에 따라 클릭의 확률이 높아집니다. 계속해서 제공하는 항목이 늘어나고 있기에 SEO에 관심이 있다면 자신의 웹사이트가 어떤 항목을 제공할 수 있을지, 또는 어떤 페이지를 만들어서 구글에 리치 결과 항목으로 검색될 수 있을지를 고민해야합니다. 리치 결과 갤러리는 매우 유용한 정보를 제공해주고 있습니다. 꼭 방문해 보시기 바랍니다.

    추천 스니펫

    추천 스니펫(featured snippet)일반적인 목록 형식과는 반대로 설명 형식의 스니펫이 먼저 표시되는 특수한 상자입니다. 사용자의 검색의도를 예측하여 가장 적합하다고 생각되는 정보를 검색 페이지 상단에 별도로 제공하는 영역을 칭합니다. 구글에서는 인위적으로 추천 스니펫을 만드는 것은 불가능하다고 명시하고 있으며 구글의 기계적인 판단에 의해 제공한다고 공지하고 있습니다. 

    SEO와 스니펫

    최근의 SEO 시장에서 리치 결과에 대한 이야기가 꽤 많이 회자되고 있습니다. 리치 결과를 제공한다는 것은 SEO측면에서 순위에는 즉시 영향을 미치치 않습니다만 타 경쟁 페이지가 리치 결과를 제공하지 않는 경우 사용자의 눈에 띌 확률이 높아지고 그에 따라 클릭이 활성화됨에 따른 부수효과로 장기적으로 순위 상승에 영향을 미치게 되는 결과를 낳습니다. 사실 국내 웹페이지 제작자들이 리치 결과를 만드는 법에 대해서 너무 무지 했던 것 때문에 아직도 대부분의 경쟁 페이지들이 리치 결과를 제공하지 못하고 있는 이 시점에 우선적으로 리치 결과를 제공하기 위한 방법을 숙지하는 것이 좋고, 보유하고 있는 웹페이지에 반영하는 것을 추천합니다.

    구글은 최근 경쟁적으로 추천 스니펫 항목을 늘려가고 있습니다. 마치 네이버가 지식인 결과를 가지고 사용자를 유도 했듯이 구글은 추천 스니펫의 데이터로 구글 검색 결과와 구글 어시스턴트를 통해 서비스를 제공합니다. 하지만 추천 스니펫에 선정된다면 굉장한 트래픽을 유도할 것 같지만 실제로는 꼭 그렇지만도 않습니다. 이는 대부분의 콘텐츠가 해당 박스에 제공되어 추가적인 클릭이 발생하지 않기 때문입니다만 그래도 최 상단에 놓여지는 만큼 상당한 트래픽이 발생합니다. 대부분의 경우 추천 스니펫은 질문 형태 또는 의미가 확실한 검색 (ex. 볶음밥 레시피, 볶음밥 만드는 법 등)에 나타나게 됩니다.

  • 누구나 알고 있다고 생각하는 Title, description, keyword

    웹사이트를 만들게 되면 누구나 배우게 되는 HTML에서 <head>와 </head> 사이에 들어가 있는 저 3가지 태그는 분명히 배우기는 배우지만 그냥 스쳐 지나간 태그일 것입니다.

    검색엔진은 웹사이트의 페이지에서 저 Title 태그를 통해 해당 페이지의 제목을 인식합니다. Title에는 핵심 키워드가 포함되게 작성하고, 각 페이지는 페이지 별로 다르게 페이지를 설정하는 것이 좋습니다. Title과 description은 검색엔진을 구성하는 중요 요소, 스니펫(snippet)에 적용됩니다.3 자세한 내용은 스니펫 생성 및 관리와 관련한 구글의 문서를 참고합니다.

     하지만 SEO 효과는 불투명합니다. 해당 요소에 검색하고 있는 키워드가 등록되어 있다면 의미가 전혀 없지는 않겠으나 검색엔진(구글)의 순위에는 거의 반영이 되지 않습니다. 특히 구글에서 Keyword는 더 이상 유효하지 않습니다.

    <title>는 구글의 경우

    • 동일 title 금지, 스팸성 키워드, 반복 키워드 금지
    • 사이트 제목, 구분자(-, :, | 등) 허용
    • 특수문자 가능
    • 한글 기준 35자, 영문기준 65자 이내 권장

    네이버의 경우 구글과 거의 동일합니다. 다만 한가지 차이점은

    • 15자 이내 권장4
    • 2회 이상 반복적인 키워드, 스팸성 키워드, 콘텐츠와 연관이 없는 키워드가 나열되어 있는 경우 검색 노출에 불이익

    <meta name=”description” 과 관련하여 구글의 경우

    • 한글 기준 77자, 영어 기준 160자 이내 권장
    • 요약 정보로 2문장 수준으로 키워드 나열 및 페이지 전체 내용 기입 금지

    네이버의 경우 역시 구글과 유사한 기준을 가지고 있으나

    • 45자 이내 권장5
    • 대부분의 경우 네이버에서 스니펫 내용을 기계적으로 작성하여 반영되지 않음

    description의 내용은 일반적인 내용으로 작성하면 좋습니다. 다만 아래와 같은 경우 검색엔진에서 순위상 불이익이 발생하기에 주의가 필요합니다.

    • 사이트 및 해당 페이지와 연관이 없는 키워드가 포함된 경우
    • 검색 노출만을 위해 사이트 메인 페이지의 태그 내용의 빈번한 변경
    • 기준 이상으로 긴 내용으로 사이트를 파악하기 힘들게 하는 경우

    Keyword 태그는 구글을 포함한 대부분의 검색엔진 순위에는 더 이상 유효하지 않습니다. 하지만 검색시 노출 여부에는 관계가 전혀 없다고는 할 수 없는 사항으로 특별한 노력을 기울이지는 않더라도 일반적인 중요 키워드의 나열은 필요합니다.