블로그 이름을 입력해주세요

웹사이트에 구조화된 데이터 활용하기 본문

웹 개발

웹사이트에 구조화된 데이터 활용하기

Dev_jihoon8730 2025. 5. 7. 18:32

들어가면서

"검색엔진의 검색은 페이지의 콘텐츠를 파악하기 위해 노력하고 있습니다 페이지에 구조화된 데이터를 포함하면 페이지 의미에 관한 확실한 단서를 제공하여 내용을 파악하는데 도움이 됩니다

구조화된 데이터는 페이지에 관한 정보를 제공하고 페이지 콘텐츠를 분류하기 위한 표준화된 형식으로 예를 들어 레시피 페이지의 경우 재료, 조리 시간, 온도, 칼로리 등이 여기에 해당합니다"

 

- 구글의 구조화된 데이터에 관한 설명 중 -

왜 페이지에 구조화된 데이터를 추가하나?

구조화된 데이터를 추가하면 사용자에게 더욱 눈길을 끄는 검색결과를 제공하여 웹사이트와 더 많이 상호작용하도록 유도할 수 있으며, 이를 리치 결과라고 한다 사이트에 구조화된 데이터를 구현한 웹사이트의 우수사례를 살펴보면 다음과 같다.

  • Rotten Tomatoes에서는 100,000개의 개별 페이지에 구조화된 데이터를 추가함으로써 구조화된 데이터로 개선한 페이지의 클릭률을 구조화된 데이터가 없는 페이지 대비 25% 높였다
  • Food Network에서는 페이지의 80%에 검색 기능을 추가하여 방문자 수를 35% 늘렸다
  • Rakuten에서는 사용자가 구조화된 데이터가 구현된 페이지에 구조화된 데이터가 없는 페이지보다 1.5배 더 오래 머무르며, 검색 기능이 있는 AMP 페이지의 상호작용 발생률이 검색 기능이 없는 AMP 페이지보다 3.6배 높았다고 밝혔다
  • Nestlé의 측정에 따르면 검색에 리치 결과로 표시되는 페이지의 클릭률이 일반 검색결과로 표시되는 페이지보다 82% 더 높은 것으로 나타났다

구현

나 같은 경우 구조화된 데이터를 작동하게 하기 위해 JSON-LD 데이터를 활용하였다

JSON-LD를 활용하여 레시피 구조화 데이터
구조화된 데이터의 형식 종류

 

구조화된 데이터의 기능 가이드

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

 

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

검색결과에 표시되는 방식의 예를 포함하여 Google 검색에 표시될 수 있는 구조화된 데이터 지원 기능을 살펴보세요. 사이트가 Google 검색의 리치 결과에 표시되도록 구조화된 데이터를 추가하는

developers.google.com

 

EX) 기사 및 뉴스 기능 가이드

<html>
  <head>
    <title>Title of a News Article</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Title of a News Article",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2024-01-05T08:00:00+08:00",
      "dateModified": "2024-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "https://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "https://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>


JSON-LD 방식의 적절한 type 스키마는 무수히 많이 존재하고 있다 나의 웹사이트의 페이지가 어떤 형식을 취하고 있는지 파악 후 알맞은 type을 맞춰주고 그에 맞는 형식을 작성하면 된다

Schema.org

https://schema.org/docs/schemas.html

 

Schemas - Schema.org

Schemas Organization of Schemas The schemas are a set of 'types', each associated with a set of properties. The types are arranged in a hierarchy. The vocabulary currently consists of 816 Types, 1512 Properties 14 Datatypes, 94 Enumerations and 521 Enumera

schema.org

 

나는 Next.js를 기준으로 프로젝트에 구조화된 데이터를 추가 하였다

 

예시)

import Head from 'next/head';

const NewsArticlePage = () => {
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    "headline": "Title of a News Article",
    "image": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
    ],
    "datePublished": "2024-01-05T08:00:00+08:00",
    "dateModified": "2024-02-05T09:20:00+08:00",
    "author": [
      {
        "@type": "Person",
        "name": "Jane Doe",
        "url": "https://example.com/profile/janedoe123"
      },
      {
        "@type": "Person",
        "name": "John Doe",
        "url": "https://example.com/profile/johndoe123"
      }
    ]
  };

  return (
    <>
      <Head>
        <title>Title of a News Article</title>
        {/* JSON-LD 구조화된 데이터를 script로 삽입 */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Head>
      <main>
        <h1>News Article Page</h1>
        {/* 기사 본문 등 다른 컨텐츠 */}
      </main>
    </>
  );
};

export default NewsArticlePage;

 

예시) YTN 검색

구조화된 데이터를 적용한 구글 검색

 

결론

SEO 최적화 중 한 방법으로 구조화된 데이터를 이용해 보았다 많은 개발자들이 메타데이터 스크립트를 추가하고 사이트맵을 만드는 등 검색엔진 최적화를 위해 노력하고 있다 그중 하나인 구조화된 데이터를 활용하여 검색엔진 최적화를 더욱 좋게 하는 것도 하나의 방법일 수 있다!

 

출처

Google

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

 

'웹 개발' 카테고리의 다른 글

시맨틱 마크업 : 구글에서 내 사이트가 잘 보이지 않는 이유  (0) 2025.04.22
[Next.js] Tanstack Query Mutations  (0) 2025.04.09
[Next.js] Tanstack Query로 SSR ???  (0) 2025.03.23
zustand(쥬스탠드)로 사용으로 전역상태 관리하기 (사용법)  (0) 2024.02.09
교차 출처 리소스 공유(CORS)  (0) 2022.12.11
'웹 개발' Related Articles more