Estimated reading time: 3 minutes
구조화된 데이터 마크업 설명을 시작하며
지난 시간에는 SEO를 구성하는 데 있어 필요한 기본적인 마크업과 메타데이터에 대해서 간략하게 살펴보았습니다.
또, schema.org를 활용하여 구조화된 데이터들을 사이트에 추가하는 방법들도 확인해보았습니다.
페이지에 구조화된 데이터를 추가하는 데 사용하는 더 다양한 유형의 마크업들도 있으니 이 글을 통해서 살펴보도록 하겠습니다.
RDFa와 마이크로데이터 마크업
첫 번째 마크업은 PDFa 유형입니다. 이 유형은 ‘속성의 자원 설명 프레임워크’를 의미하는데, HTML 태그 속성의 사이트 코드에 구조화된 데이터를 추가하는 형식입니다. 예시를 살펴보자면 다음의 사진과 같습니다.
RDFa 마크업은 schema.org의 어휘를 이용해서 각각 속성들을 지정해주곤 합니다. 위의 예시처럼, 코드를 작성해본다면 다음과 같습니다.
<div vocab="https://schema.org/" typeof="recipe">
<span property="name">Pagewriters world famouse banana bread</span>
...(중략)
각 schema에 알맞은 태그들을 할용해 작성일, 이미지, 만드는 시간 등등을 미리 입력하여 검색엔진이 해당 콘텐츠를 색인하기 쉽도록 만들어줄 수 있습니다.
이러한 RDFa는 일반적으로 HTML <head>와 <body> 섹션에 모두 적용됩니다.
마이크로데이터 입력하기
또, schema.org에서 Microdata를 찾으실 수 있을 텐데, RFDa와 마찬가지로 HTML 태그 속성을 이용해 노출하려는 속성 이름을 지정하시면 됩니다.
예문 코드를 살펴보자면 다음과 같습니다.
<div itemscope itemtype="https://schema.org/Recipe"
<span itemprop="name"> pagewriter famous banana bread </span>
<meta itemprop="author"> Parks</span>
<img itemprop="image" src="example.jpg" alt="bananaa bread on a plate"/>
...(중략)RDFa와 비슷하게 구성할 수 있으므로 RDFa를 입력하는 방법과 Microdata 입력 방법의 차이점을 유의하셔서, HTML의 헤드 섹션에 입력하시거나, 본문에 이용하시면 됩니다.
마이크로데이터는 일반적으로 페이지 본문에서 이용하시면 되는데, 필요하다면 헤드 섹션에 넣으셔도 무방합니다.
JSON-LD Markup
또 다른 형식인 JSON-LD 마크업은 javascript 개체 표기법입니다. 연결된 데이터들은 인터넷을 사용해 관련 데이터들의 연결 관계를 나타냅니다. JSON-LD 마크업은 RDFa, Microdata와 다르게, HTML 표기법이 아니라 javascript 표기법을 따릅니다.
그러니까, 페이지의 헤드나 본문에 <script> 태그를 포함하여, 사용자가 볼 수 있는 텍스트, 인터렉티브에 포함되지 않게 됩니다. 예시를 보자면 다음과 같습니다.
이 방법은 HTML 태그와 마찬가지로 페이지별 모든 개별 요소들에 태그를 추가하는 대신, 모든 연결을 포함한 정보들을 정의한 javascript 코드 블록으로 입력할 수 있습니다.
JSON-LD를 이용해 밝히는 정보들은 레시피에 들어가는 영양 정보들이나 기타 정보들을 쉽게 정의할 수 있다는 점에서 많이 사용되는 방법입니다.
JSON-LD 사용 주의사항
원하신다면 JSON-LD를 직접 인력할 수도 있지만, 썩 권하고 싶은 방법이 아닙니다. 권한다면 스키마 생성기 혹은 구글에서 제공하는 구조화된 데이터 마크업 도우미를 이용하시는 게 가장 좋습니다.
이후 구글 구조화 데이터 도움, 리치 결과 테스트 등을 이용하시는 방법으로 확인해보실 수도 있습니다.
