minguri brain is busy

웹페이지에 구조화된 데이터(JSON-LD) 추가하기 본문

FE/개발

웹페이지에 구조화된 데이터(JSON-LD) 추가하기

minguri.k 2023. 5. 4. 19:21
반응형

추가하려는 동기

자주 사용하는 Spotify 사이트를 소스보기해서 본 적 있는데 JSON-LD이라는 스크립트가 적용되어 있는 것을 봤고 구조화된 데이터에 대한 방식과 효용에 대해 알아봤습니다. 현재 제가 운영하는 서비스의 상품상세 페이지는 SSR적용으로 SEO 메타 태그 적용이 잘 되고 있는 상태였지만 구조화된 데이터 적용은 적용되지 않은 상태입니다. Spotify 사이트처럼 구조화된 데이터를 적용해서 유저가 웹사이트와 더 많이 상호작용하도록 유도하고 싶어서 적용하고자 합니다.

구조화된 데이터란?

검색엔진이 해석하기 쉽게 웹 문서의 콘텐츠를 조직화하는 것을 말합니다.

왜 페이지에 구조화된 데이터를 추가할까요?

구조화된 데이터는 Google 검색결과에 리치 결과로 표시하도록 하기 위함입니다. 리치 결과란, 검색 등의 Google 서비스에서 일반적인 파란색 링크보다 훨씬 더 많은 내용을 보여주는 검색 콘텐츠입니다. 예로는 캐러셀, 이미지, 텍스트가 아닌 기타 요소가 포함될 수 있습니다.

StyleCraze의 단계별 'HowTo' 미리보기

일반적인 링크 검색 결과보다 데이터에 적합한 ui로 노출돼서 접근성이 높아 보이지요?

형식

리치 결과를 사용하려면 세 가지 지원되는 형식 중 하나를 사용하여 사이트의 페이지를 마크업 합니다. 저는 이중에 JSON-LD을 적용할 예정입니다.

  • JSON-LD(권장)
  • 마이크로데이터
  • RDFa
저는 이중 JSON-LD로 적용할 예정입니다.
처음 구조화된 데이터를 접했을 때 마크업이라는 단어를 보고 마크업 구조가 SSR에 적용되어야 bot이 크롤링할 때 수집되는 것으로 오해했으나, 단순히 구조화한 '데이터'를 위 세 가지 중 한 가지 형식에 맞추어 적용하면 된다는 것을 이해했습니다.

콘텐츠 만들 때 품질 가이드라인

형식에 맞춰 데이터를 구조화할 때 데이터 품질에 대한 가이드가 제시되어 있었습니다.

  • 페이지 독자에게 표시되지 않는 콘텐츠를 마크업 하지 않습니다. 예를 들어 JSON-LD 마크업이 실행자를 나타내는 경우 HTML 본문에서도 동일한 실행자를 나타내야 합니다.
  • 구조화된 데이터를 사용하여 사용자를 속이거나 혼란스럽게 만들지 않습니다. 사람이나 조직을 사칭하거나 소유권, 제휴, 기본 목적을 왜곡하지 않습니다.

 

데이터 추가하기

Recipe 데이터를 구조화하여 추가한다고 가정해 보겠습니다.

- 구조화된 데이터 유형 정의

1. index.html의 <head>에 application/ld+json으로 설정된 유형의 <script> 요소를 만듭니다.

<head>
  <script type="application/ld+json">
  </script>
</head>

2. <script> 요소 안에서 @context을 http://schema.org로 설정하여 Google에 schema.org 구조화된 데이터를 사용하고 있다고 알립니다.

<head>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
</script>
</head>
3. 내가 설명하고 있는 것의 종류를 Google에 알려주려면 @type을 Recipe로 설정합니다.
<html>
<head>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe"
}
</script>
</head>
</html>

- 필수 및 권장 속성 추가

1. Recipe 문서에서 필수 속성 목록을 보고 name 속성을 찾아 이 속성에 대한 추가 가이드라인이 있는지 확인합니다.

2. index.html에 "@type": "Recipe" 다음에 name의 value로 음식 이름(Party Coffee Cake)을 입력합니다.

3. 문서에 리스트업 된 다른 필수 속성을 추가합니다.

4. 권장되는 속성을 추가하면 검색에 더 잘 걸립니다.

 

구조화된 데이터는 다음과 같습니다.

<html>
<head>
...
<script type="application/ld+json">
  {
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Party Coffee Cake",
  "image": "https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg",
  "author": {
    "@type": "Person",
    "name": "Mary Stone"
  },
  "datePublished": "2018-03-10",
  "description": "This coffee cake is awesome and perfect for parties.",
    "prepTime": "PT20M",
    "cookTime": "PT30M",
    "totalTime": "PT50M",
    "recipeYield": "10 servings",
    "recipeCategory": "Dessert",
    "recipeCuisine": "American",
    "keywords": "cake for a party, coffee",
    "nutrition": {
      "@type": "NutritionInformation",
      "calories": "270 calories"
     },
      "recipeIngredient": [
        "2 cups of flour",
        "3/4 cup white sugar",
        "2 teaspoons baking powder",
        "1/2 teaspoon salt",
        "1/2 cup butter",
        "2 eggs",
        "3/4 cup milk"
       ],
    "recipeInstructions": [
      {
      "@type": "HowToStep",
      "text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
      },
      {
      "@type": "HowToStep",
      "text": "In a medium bowl, combine flour, sugar, and cinnamon."
      },
      {
      "@type": "HowToStep",
      "text": "Mix in butter until the entire mixture is crumbly."
      },
      {
      "@type": "HowToStep",
      "text": "In a large bowl, combine flour, sugar, baking powder, and salt."
      },
      {
      "@type": "HowToStep",
      "text": "Mix in the butter."
      },
      {
      "@type": "HowToStep",
      "text": "Spread into the prepared pan."
      },
      {
      "@type": "HowToStep",
      "text": "Sprinkle the streusel mixture on top of the cake."
      },
      {
      "@type": "HowToStep",
      "text": "Bake for 30 to 35 minutes, or until firm."
      },
      {
      "@type": "HowToStep",
      "text": "Allow to cool."
     }
  ],
  "video": [
     {
    "@type": "VideoObject", 
    "name": "How to make a Party Coffee Cake",
    "description": "This is how you make a Party Coffee Cake.",
    "thumbnailUrl": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
     ],
    "contentUrl": "http://www.example.com/video123.flv",
    "embedUrl": "http://www.example.com/videoplayer.swf?video=123",
    "uploadDate": "2018-02-05T08:00:00+08:00",
    "duration": "PT1M33S",
    "interactionStatistic": {
      "@type": "InteractionCounter",
      "interactionType": { "@type": "http://schema.org/WatchAction" },
      "userInteractionCount": 2347
     },
    "expires": "2019-02-05T08:00:00+08:00"
   }
  ]
}
</script>
</head>
</html>

- 리치 결과 테스트

데이터를 구조화 한 후에 리치데이터 결과를 아래 링크에서 테스트할 수 있습니다. 이상적으로는 오류 0개와 경고 0개가 표시되어야 합니다.

https://search.google.com/test/rich-results

 

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

페이지에서 리치 검색결과를 지원하나요? 올바른 URL이 아닙니다.테스트에 사용할 에이전트Googlebot 스마트폰Googlebot 데스크톱테스트에 사용할 에이전트Googlebot 스마트폰Googlebot 데스크

search.google.com

 

 

 

참고

https://developers.google.com/search/docs/appearance/structured-data/sd-policies?hl=ko#individual-items
https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ko#guidelines
반응형

'FE > 개발' 카테고리의 다른 글

Apollo Server 4로 마이그레이션(sandbox 랜딩페이지 플러그인 설정, health check 적용)  (0) 2023.08.24
TypeScript 5.1 베타 발표 살펴보기  (0) 2023.04.19
무한스크롤 페이지에서 스크롤 위치 복원  (0) 2022.12.23
Next.js의 SSR, CSR 기본개념알아보기  (0) 2022.08.04
Saga패턴 vs Redux-Saga / 간단한 예제로 살펴보기  (0) 2022.07.22
'FE/개발' Related Articles more
Comments