[JS] 스키마 마크업(Schema Markup) 이해하고 적용하기

해당 글에서는 스키마 마크업에 대해 이해하고 이를 적용하는 방법에 대해 알아봅니다

1) 스키마 마크업(Schema Markup)

---

💡 스키마 마크업(Schema Markup)

- Schema.org에서 정의한 표준 코드를 HTML내에 추가하여 검색 엔진이 웹페이지 콘텐츠의 의미(레시피, 제품, 이벤트 등)를 정확히 이해하도록 돕는 구조화된 데이터입니다.
- 예를 들어서, 검색 결과로 나타낼 때, 단순히 "이 페이지에 텍스트가 있다"라고 보여주는 것이 아니라, "이 부분은 메인 메뉴이고, 이 부분은 하위 카테고리다"라고 구조를 선언하는 행위입니다.
- JSON-LD 형식을 가장 많이 사용하며, 이를 통해 검색 결과에 풍부한 정보(리치 스니펫)를 표시해 클릭률(CTR)과 SEO 성과를 높입니다.

 

https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ko

 

1. 리치 결과(Rich Results)

---

💡 리치 결과(Rich Results)

- 검색 엔진이 웹페이지의 내용을 더 잘 이해할 수 있고, 사용자에게 더욱 눈길을 끄는 검색결과를 제공하기에 추가된 스키마 마크업 정보를 바탕으로, 검색 결과 페이지에서 일반적인 텍스트 링크보다 훨씬 풍부하고 시각적인 정보를 제공하는 기능을 말합니다.

- 쉽게 말해, 검색 결과가 단순히 '제목 - URL - 설명'으로만 끝나는 것이 아니라, 사용자에게 도움이 되는 추가 정보를 UI 형태로 보여주는 것입니다.
- 예로는, 검색 결과에서 별점, 가격, 조리 시간, 이벤트 날짜 등이 추가적으로 표시됩니다. 이는 클릭률(CTR)을 비약적으로 높여줍니다.

리치 검색결과 테스트 - Google Search Console

 

 

💡 아래와 같이 리치 결과로 나오는 관련 질문(People Also Ask)으로 출력이 됩니다.

 

 

2. 사이트 링크

---

💡 사이트 링크

- Google이 브랜드 검색 시 메인 결과 아래에 자동으로 추가해 주는 하위 페이지 링크 목록입니다.(이는 스키마 마크업과는 무관하지만 이해를 하는데 도움이 됩니다.)

- 해당 사이트 링크는 모든 페이지에 나오지 않고, 브랜드명 검색 시 압도적 1위이며, 사이트가 충분한 기간 동안 운영이 되었을 경우 등 일 때 Google에서 자동으로 추가해 주는 링크 목록입니다.
- 스키마 마크업과 같이 개발자가 이를 다루는 것이 아니라 Google 내에서 이를 노출하기에 스키마 마크업과 차이가 있습니다.

사이트링크에 대해 자세히 알아보기 | Google 검색 센터  |  Documentation  |  Google for Developers

 

💡 아래와 같이 ‘네이버’를 검색했을때, 가장 먼저 나오는 정보에 대해서 사이트 링크가 출력이 됩니다.

 

 

2) 스키마 마크업(Schema Markup) 리치 결과 종류

---

리치 결과 종류	설명
지식 패널	스키마 마크업은 등록은 가능하지만, 구글에 의해서 자동으로 결정이 됨
FAQPage	스키마 마크업은 등록 가능하지만, 2023년 이후부터 정부/보건 사이트에서만 기록됨
별점/리뷰	스키마 마크업으로 등록 가능
레시피	스키마 마크업으로 등록 가능

 

💡 [참고] 추가 종류에 대해서는 아래에 공식 사이트에서 확인이 가능합니다

Google 검색에서 지원하는 구조화된 데이터 마크업 | Google 검색 센터  |  Documentation  |  Google for De

 

1. 지식 패널

---

💡 지식 패널

- 브랜드나 인물에 대한 정보를 구글 지식 패널(오른쪽 정보창)에 노출하는 데 기여합니다.
- 실제적으로 스키마 마크업에 등록을 하였다고 하더라도, 해당 브랜드명으로 검색이 충분히 발생하는 경우에 해당 패널이 생성이 됩니다.

 

 

2. FAQPage

---

💡 FAQPage

- 페이지에 질문과 답변 목록이 있음을 검색엔진에 알려주는 구조화 데이터입니다.
- 2023년 Google이 FAQPage 리치 결과 정책을 크게 변경했습니다. 현재는 정부 또는 보건 당국 중심의 공신력 있는 사이트에만 FAQ 리치 결과를 표시합니다

- 실제적으로 사용이 되지는 않지만, 검색엔진이 페이지를 더 잘 이해하고 순위를 매기는 데 도움을 주며, AI가 콘텐츠를 질문-답변 쌍으로 명확하게 인식하게 해 줘서 AI 검색(ChatGPT 등)에서 인용될 확률이 높아집니다.

 

💡 [참고] FAQPage 변경사항에 대한 정보

FAQ Schema in 2025: Still a Valuable SEO Asset | Epic Notion

 

 

 

3. 별점(AggregateRating) / 리뷰(Review)

---

💡 별점(AggregateRating) / 리뷰(Review)

- 구글 검색 결과를 리치 결과(Rich Results)로 만들어 클릭률을 높여주는 핵심 요소들입니다. 이는 특정 제품이나 서비스 아래에 표시되는 별점(Star Rating)과 리뷰 개수를 사용자 클릭률(CTR)을 높이는 아주 강력한 요소입니다.

1. 종합 별점 (AggregateRating)
- 개별 리뷰가 아닌, 전체 평균 점수와 참여 인원을 보여줄 때 사용합니다.

2. 개별 리뷰 (Review)
- 특정 사용자가 남긴 구체적인 평점과 코멘트를 보여줄 때 사용합니다.

https://developers.google.com/search/docs/appearance/structured-data/sd-policies

{
  "@type": "SoftwareApplication",
  "name": "앱 이름",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",   ← DB에서 평균값 가져와서 동적으로
    "ratingCount": "120",   ← DB에서 리뷰 수 가져와서 동적으로
    "bestRating": "5"
  },
  "review": [
    {
      "@type": "Review",
      "author": {"@type": "Person", "name": "유저명"},
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5"
      },
      "reviewBody": "리뷰 내용"
    }
  ]
}

 

[ 더 알아보기 ]

💡 별점/리뷰는 하드코딩으로 작성하는것 같은데? 만약에 내가 홍보하고 싶은 앱인 경우는 어떻게 하나?

- 실제로 Store에 있는 실제 별점을 그대로 사용하는 게 가장 안전하며, 현재 별점과 리뷰 수를 확인해서 하드코딩으로 넣고, 주기적으로 업데이트해 주면 됩니다.

 

 

4. 레시피

---

💡 레시피

- 스키마를 잘 적용하면 구글 검색 결과에 요리 소요 시간, 칼로리, 완성 사진이 포함된 '레시피 카드' 형태로 노출되어 클릭률이 비약적으로 상승합니다.

{
  "@context": "<a href=https://schema.org/>https://schema.org/</a>",
  "@type": "Recipe",
  "name": "할머니 손맛 순우리말 비빔밥",
  "image": [
    "<a href=https://example.com/photos/1x1/photo.jpg>https://example.com/photos/1x1/photo.jpg</a>"
  ],
  "author": {
    "@type": "Person",
    "name": "우리말 지킴이"
  },
  "datePublished": "2026-02-19",
  "description": "전통적인 방식으로 만드는 건강한 비빔밥 레시피입니다.",
  "prepTime": "PT20M",
  "cookTime": "PT15M",
  "recipeYield": "2인분",
  "recipeIngredient": [
    "쌀 2컵",
    "고추장 2큰술",
    "각종 나물"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "쌀을 씻어 밥을 짓습니다.",
      "image": "<a href=https://example.com/step1.jpg>https://example.com/step1.jpg</a>"
    },
    {
      "@type": "HowToStep",
      "text": "나물을 데치고 양념합니다."
    }
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "120"
  }
}

 

 

3) JSON-LD(JavaScript Object Notation for Linked Data)

---

💡 JSON-LD(JavaScript Object Notation for Linked Data)

- JSON 형식을 사용하여 '연결된 데이터(Linked Data)'를 표현하는 방식입니다.
- 쉽게 말해, 검색 엔진(구글 등)이 웹페이지의 내용을 단순한 텍스트가 아니라 의미 있는 정보로 이해할 수 있도록 돕는 일종의 '데이터 명세서'라고 보시면 됩니다.

 

1. 구조 확인

---

키워드	의미	비고
@context	데이터의 의미를 해석할 표준 주소	보통 https://schema.org 고정
@graph	여러 개의 개체를 하나의 배열로 묶을 때 사용	페이지 내 여러 구조화 데이터를 선언할 때 효율적
@type	데이터의 유형 (클래스)	예: Person, WebSite, LocalBusinessOrganization
@id	개체를 식별하는 고유 URI	여러 데이터를 서로 연결할 때 사용
@language	값의 언어를 지정	예: "@language": "ko"

 

2. 사용예시

---

💡 사용예시

1. @context:  Schema.org를 기준으로 데이터를 해석하겠다는 선언을 의미합니다.
- 일종의 "이 데이터는 이 규칙을 따릅니다"라는 명세를 의미합니다.

2. @graph: 여러 개의 Schema 객체를 하나의 스크립트 안에 묶어서 표현할 때 사용하는 배열을 의미합니다.


3. Organization: 조직/개인의 정보를 명세를 합니다.
- name : 조직 이름을 의미합니다.
- url : 대표 웹사이트 주소을 의미합니다.
- logo : 로고 이미지를 URL을 의미합니다
- sameAs : 이 조직과 동일한 주체임을 나타내는 외부 링크들 (GitHub, 티스토리 블로그)이며, 검색엔진이 여러 플랫폼의 정보를 하나의 엔티티로 연결하는 데 도움을 줍니다.
- contactPoint : 연락처 정보. 이메일, 연락 유형(고객 서비스), 사용 가능한 언어를 명시하는 것을 의미합니다.


4. WebPage: 현재 페이지 자체에 대한 정보를 명세를 합니다.
- name : 페이지 제목을 의미합니다.
- description : 페이지 설명 (검색결과 스니펫에 활용)을 의미합니다.
- url : 페이지 주소를 의미합니다.

 

💡 [참고] 사용 예시

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@graph": [
            {
                "@type": "Organization",
                "name": "Ecodelab",
                "url": "https://www.ecodelab.im",
                "logo": "https://www.ecodelab.im/assets/developer.png",
                "sameAs": ["https://github.com/adjh54ir", "https://adjh54.tistory.com"],
                "contactPoint": {
                    "@type": "ContactPoint",
                    "email": "adjh54ir@gmail.com",
                    "contactType": "customer service",
                    "availableLanguage": "Korean"
                }
            },
            {
                "@type": "WebPage",
                "name": "Ecodelab - 제작 앱 소개",
                "description": "Ecodelab에서 개발한 다양한 앱들을 소개합니다",
                "url": "https://www.ecodelab.im"
            }
        ]
    }
</script>

 

 

 

4) 검증 방법

---

 

1. Google Search Console 활용

---

💡 Google Search Console 활용

- 아래와 같이 리치 검색결과 테스트에 직접 배포한 도메인에 대해서 테스트를 진행합니다.

리치 검색결과 테스트 - Google Search Console

 

1.1. 실제 사이트에서 스키마 마크업을 적용하였습니다

---

💡 실제 사이트에서 스키마 마크업을 적용하였습니다

- 배포된 사이트의 요소를 확인하면 스키마 마크업을 확인할 수 있습니다.

 

 

1.2. 스키마 마크업을 적용한 도메인 주소를 검사합니다

---

 

 

1.3. 아래와 같이 결과로 실제 발견이 되었음을 확인하였습니다

---

 

 

1.4. 해당 사이트를 확인하였을 때, 스키마 마크업은 출력이 안되고 있습니다.

---

💡 해당 사이트를 확인하였을때, 스키마 마크업은 출력이 안되고 있습니다.

- 이는 즉시 적용되는 것이 아니고 일정 시간이 지나 크롤링되는 과정에 적용이 된다고 합니다.

 

 

 

💡 적용한 사이트는 아래에서 확인이 가능합니다!

Ecodelab - 제작 앱 소개

 

 

오늘도 감사합니다. 😀