"검색엔진 가이드"를 금융쇼핑 서비스에 SEO로 활용하기

"검색엔진 가이드"를 금융쇼핑 서비스에 SEO로 활용하기

이 글은 2022년 12월 기준으로 제공된 검색엔진 가이드를 기반으로 작성되었습니다. 가이드 및 정책은 변경될 수 있습니다.

안녕하세요. 뱅크샐러드 웹 프론트엔드 엔지니어 김희찬입니다.

최근 금융쇼핑 PA팀에서는 마이데이터를 통해 수집된 사용자들의 카드, 대출, 예금, 적금 등 금융상품 정보와 실제 사례를 기반으로 “금융쇼핑”이라는 웹 서비스로 제공하기 시작했습니다. 누구에게나 노출되는 웹 서비스인만큼 사용자가 금융상품에 대한 묻는 모든 질문에 대한 답을 한다는 기본 원칙 아래, 검색엔진 최적화에 신경을 쓸 수밖에 없는 상황이었는데요. 구글과 네이버에서 제공하는 검색엔진 가이드를 어떻게 금융쇼핑 서비스에 활용하였는지 공유해 드리는 시간을 가지고자 합니다.

구조화된 데이터?

검색엔진은 사이트가 사용자에게 어떤 정보를 제공하려는지 정확히 파악하려 노력합니다. 검색엔진이 사이트의 정보를 읽는 과정에서 정확한 정보를 얻기 위해 여러 방법을 사용하는데 가장 기본적으로 우리가 가장 잘 알고 있는 meta tag와 semantic tag가 있습니다. 실제로 구글 스타일 가이드에서는 목적에 맞게 html tag를 사용하라고 되어 있습니다.

또 중요하게 보는 것 중 하나가 바로 오늘 소개해 드릴 구조화된 데이터입니다. 구조화된 데이터란 간단하게 설명하면 다양한 정보를 담고 있는 콘텐츠 또는 정보 꾸러미를 특정 형식에 맞게 가공한 데이터라고 보시면 되는데요. 구조화된 데이터에 대한 자세한 설명과 정의는 https://schema.org에서 확인할 수 있습니다. 이 사이트는 구조화된 데이터를 관리하고 정의하는 곳이라고 보시면 됩니다.

표현 방법

구조화된 데이터는 3가지 문법으로 웹에 표현될 수 있는데, 구글과 네이버에서 권장하고 있는 두 가지의 문법을 소개해드리겠습니다. (https://schema.org에 정의된 FinancialProduct type을 예시로 설명하겠습니다.)

  1. JSON-LD

JSON-LD 형식은 네이버와 구글에서 권장하는 형식으로 기본적으로 우리가 흔히 알고 있는 JSON형식을 사용합니다. 만약 토스뱅크의 신용대출 금융상품을 소개하는 웹페이지를 예시로 들면 다음과 같이 표현할 수 있습니다.

{
  "@context": "https://schema.org",
  "@type": "FinancialProduct",
  "name": "토스뱅크 신용대출",
  "url": "https://www.tossbank.com/product-service/loans/loan",
  "provider": {
    "@type": "Organization",
    "name": "토스뱅크",
    "telephone": "1599-4905"
  }
}
  1. Microdata

Microdata 문법은 웹 페이지의 기존 콘텐츠 내에 메타 데이터를 중첩하는 데 사용되는 WHATWG HTML 스펙입니다. 네이버에서만 권장하고 있고 구글에서는 현재 권장하고 있지 않습니다.

<div itemscope itemtype="https://schema.org/FinancialProduct">
  <span itemprop="name">토스뱅크 신용대출</span>
  <span itemprop="url">https://www.tossbank.com/product-service/loans/loan</span>
  <div itemprop="provider" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">토스뱅크</span>
    <span itemprop="telephone">1599-4905</span>
  </div>
</div>

팁을 드리자면, 코드에 직접 반영하기 전 https://validator.schema.org에서 문법 오류가 없는지 확인할 수 있습니다.

구조화데이터 테스트

저희는 구글과 네이버에서 동시에 권장하고 있는 JSON-LD를 기본 문법으로 시작했고 위의 코드를 넣으면 봇은 이 구조화된 데이터를 읽어 페이지가 사용자에게 전달하는 정보가 무엇인지 더 정확하게 판단할 수 있습니다.

리치 스니펫?

하지만 구조화된 데이터를 조금 더 잘 활용하면 저희가 원하는 SEO에 한 발짝 더 가까이 다가갈 수 있었습니다. 그것은 구조화된 데이터를 활용하여 사용자가 원하는 정보를 스니펫에 추가로 노출하게 만들도록 하는 방법인데요. 구글과 네이버에서는 구조화된 데이터 중 일부 도메인을 채택하여 리치스니펫으로 만들어주고 있습니다.

여기서 리치 스니펫에 대해 간략하게 설명하고 넘어가지면 우선 스니펫이란 조각이라는 의미를 담고 있는데 검색엔진에서는 아래 이미지와 같이 검색 결과에 대한 조각을 의미합니다.

스니펫 예시 이미지

그렇다면 리치 스니펫이란 무엇일까요? 리치스니펫이란 기본 스니펫에 노출되는 정보 이외에 평점, 사진, 캐로셀 등 다양한 추가정보를 제공하는 스니펫을 의미합니다. 네이버의 경우 네이버 서치어드바이저에서 제공하고 있는 웹마스터 가이드에서 어떤 type의 구조화된 데이터를 리치 스니펫 으로 만들어주는 지 친절하게 설명되어 있고, 구글의 경우 google 검색 센터에서 리치스니펫을 만들 수 있는 다양한 가이드라인을 제공하고 있습니다.

FAQ 적용

저희 팀은 이 중에서 사용자들이 가장 궁금해할 만한 정보인 금융상품의 실제 사례 보여주는 섹션이 다음과 같이 존재 하는데 이를 FAQ type의 구조화된 데이터를 활용해 리치스니펫을 만들기로 했습니다.

사용자 사례 섹션

위의 데이터를 활용해 JSON-LD 문법으로 다음과 같은 구조화된 데이터를 만들어 줍니다.

{
    "@context":"https://schema.org",
    "@type":"FAQPage",
    "mainEntity": [
        {
            "@type":"Question",
            "name":"가장 낮은 신용점수",
            "acceptedAnswer":{
                "@type":"Answer",
                "text":"신용점수 150점 고객님이 13.00% 금리로 2000만원 대출 받았어요."
            }
        },
        {
            "@type":"Question",
            "name":"가장 많은 대출 금액",
            "acceptedAnswer":{
                "@type":"Answer",
                "text":"신용점수 962점 고객님이 5.00% 금리로 2억 7000만원 대출 받았어요."
            }
        }
    ]
}

그리고 구글에서 제공해 주는 리치스니펫 테스터에 코드를 넣어 예상 결과를 미리 확인해 봅니다. (미리 보기는 시뮬레이션 된 결과일 뿐이고 실제로 표시되는 모양이나 동작은 다를 수 있습니다.)

스니펫 예시 이미지

구글에서 노출되지 않았던 이유

검색엔진이 사이트맵을 통해 주소를 읽고 난 후 적용된 스니펫은 확인해 보러 가면 네이버와 달리 구글은 적용이 되지 않은 모습을 확인할 수 있었습니다. 리치스니펫 테스터에서도 잘 나왔던 데이터가 실제로 프로덕션에 올리니 노출되지 않아 가이드 문서를 다시 천천히 읽어봤습니다. 답은 역시나 가이드에 있었는데요. 가이드 문서에 “모든 FAQ 콘텐츠는 소스 페이지에서 사용자에게 표시되어야 합니다.”라는 조항이 있습니다. 위에서 구조화된 데이터를 만들 때 사용자에게 노출되는 정보는 “가장 낮은 신용점수로 대출받은 사례”이지만 FAQ 콘텐츠에서는 “가장 낮은 신용점수”로 표시하여 구글 봇이 상이한 내용이라고 판단하여 리치스니펫으로 만들어주지 않았던 것이 이유였습니다.

스니펫 예시 이미지

그래서 다음과 같이 문구를 수정했습니다.

{
    "@context":"https://schema.org",
    "@type":"FAQPage",
    "mainEntity": [
        {
            "@type":"Question",
            "name": "가장 낮은 신용점수로 대출받은 사례",
            "acceptedAnswer":{
                "@type":"Answer",
                "text":"신용점수 150점 고객님이 13.00% 금리로 2000만원 대출 받았어요."
            }
        },
        {
            "@type":"Question",
            "name": "대출 금액이 가장 많은 사례",
            "acceptedAnswer":{
                "@type":"Answer",
                "text":"신용점수 962점 고객님이 5.00% 금리로 2억 7000만원 대출 받았어요."
            }
        }
    ]
}

다시 구글 콘솔과 네이버 서치 어드바이저를 통해 색인 요청을 하고 결과를 확인해보니 의도대로 노출되기 시작했습니다.

  • 구글 스니펫 결과
실제 구글 검색 결과 이미지
  • 네이버 스니펫 결과
실제 네이버 검색 결과 이미지

추가로 콘텐츠의 내용 자체만으로 구글 검색 결과에서 리치 스니펫이 아닌 추천 스니펫이 될 수도 있습니다. 예시로 “케이뱅크 신용대출 예상 금리”를 검색했을 때 봇이 사이트를 읽으면서 사용자가 던진 질문에 답이 될만한 콘텐츠가 있다면 아래 이미지와 같이 그 내용 자체를 스니펫에 포함하기도 합니다.

실제 네이버 검색 결과 이미지

FAQ 이외에도 다양한 기능들을 가이드 문서에서 제공해 주고 있으므로 성격이 맞는 데이터가 웹페이지에 존재한다면 구조화된 데이터를 활용해 여러분의 사이트를 더 매력적으로 보이게 만들어 보시기를 바랍니다. 감사합니다.

보다 빠르게 뱅크샐러드에 도달하는 방법 🚀

지원하기
Share This:

Featured Posts

post preview
post preview
post preview
post preview
post preview

Related Posts