Hugo에 구조화된 데이터 마크업 추가

Hugo 테마가 구조화된 데이터를 지원하지 않는다면...

Page content

구글은 웹사이트에서 수집한 구조화된 데이터를 기반으로 검색 결과에 영화 정보, 일자리 공고, 이벤트 및 강의 정보와 같은 몇 가지 개선 사항을 표시하고 있습니다. 아래에 어떻게 해야 하는지 보여드리겠습니다.

How to add Structured Data to the site using Hugo generator.

아래는 구글 검색 결과에 나타나는 레시피 구조화된 데이터의 예입니다. Recipe Structured data in Google search results

이와 같은 데이터를 페이지에 추가하는 방법은 다음과 같습니다. 다음 단계를 수행해야 합니다.

  • 페이지의 front matter 추가
  • 사이트의 partical 레이아웃 코드 추가
  • 휴고 웹사이트를 생성, 확인 및 배포
  • 구글 개발 도구를 사용하여 구조화된 데이터 테스트

레시피 구조화된 데이터는 https://developers.google.com/search/docs/appearance/structured-data/recipe 에서 설명되어 있습니다.

예시로 FAQ 구조화된 데이터를 웹페이지에 추가하는 방법을 보여드리겠습니다.

페이지 front matter 추가

페이지의 마크다운 코드를 열고, front matter에 TOML을 사용하는 경우 다음 코드를 추가합니다.


[faq]
title = "이 FAQ의 제목입니다"
[[faq.section]]
question = "술에 취한 선원에게 무엇을 할까요?"
answer = "부식한 면도기로 배를 면도합니다"
+++

YAML을 사용하는 경우 다음 코드를 추가합니다.

faq:
  title: '이 FAQ의 제목입니다'
  section: [{question: '술에 취한 선원에게 무엇을 할까요?', answer: '부식한 면도기로 배를 면도합니다.'}]
---

사이트 partical 레이아웃 코드 추가

struct-data.html을 partical 레이아웃에 추가합니다.

{{- if eq .Kind "page" }}
  {{- if $.Page.Params.faq.title -}}
    {{ `<script type="application/ld+json">` | safeHTML }}
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
          {{ with $.Page.Params.faq }}
              {{ $len := len .section }}
              {{ range $index, $element := .section }}
                  {{ $jsonAnswer := .answer | markdownify | jsonify }}
                  {{ $jsonAnswer := replace $jsonAnswer "\\u003c" "<"}}
                  {{ $jsonAnswer := replace $jsonAnswer "\\u003e" ">"}}
                  {
                      "@type": "Question",
                      "name": "{{ .question | markdownify }}",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": {{ $jsonAnswer | safeHTML }}
                      }
                  }
                  {{ if not (eq (add $index 1) $len) }},{{ end }}
              {{ end }}
          {{ end }}
          ]
      }
    {{ `</script>` | safeHTML }}
  {{- end }}
{{- end }}

그리고 이 코드를 head 섹션에 포함시킵니다.

	{{- partial "struct-data.html" . -}}
</head>

생성, 확인 및 휴고 웹사이트 배포

다음 명령어를 실행합니다.

hugo

그런 다음 public 폴더에 새로 생성된 페이지 파일을 찾아 열어보세요.

HTML 페이지의 head 섹션에 다음과 같은 코드가 포함되어 있어야 합니다.

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "술에 취한 선원에게 무엇을 할까요?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "부식한 면도기로 배를 면도합니다."
                      }
                  }
          ]
      }
    </script>

좋아요, 아닐까요?

구조화된 데이터로 웹사이트 테스트

구글의 구조화된 데이터 테스트 페이지를 사용하세요: https://developers.google.com/search/docs/appearance/structured-data

Schema Validator -> Code snippet으로 이동하여 위에서 복사한 코드를 붙여넣고 Run Test를 클릭해 보세요. 결과는 다음과 같습니다:

Validated FAQ snipped screenshot

축하합니다, 작동 중입니다. 웹사이트를 AWS S3에 배포하고 구글 검색 콘솔에서 구조화된 데이터가 Structured Data로 인식되는지 확인할 수 있습니다.

유용한 링크