개인 웹사이트를 위한 JSON-LD 설명

4 hours ago 3

개인 웹사이트도 구조화 데이터를 넣으면 크롤러가 페이지와 인물, 글의 관계를 더 잘 이해하고 링크 미리보기와 검색 노출 품질을 개선할 수 있음
구현은 <head> 안의 <script type="application/ld+json">에 @context를 Schema.org로 지정하고, @graph에 WebSite, Person, BlogPosting 같은 노드를 배치하는 방식임
같은 @id를 쓰면 웹 크롤러가 여러 페이지의 노드 속성을 병합할 수 있지만, 한 페이지만 읽는 스크레이퍼나 LLM은 병합하지 않는다는 차이가 있음
루트 페이지에는 WebSite, ProfilePage, Person을 기본으로 두고, 블로그·프로젝트·목록 페이지에는 Blog, BlogPosting, SoftwareApplication, CollectionPage, BreadcrumbList를 성격에 맞게 추가함
Person의 sameAs, 페이지의 breadcrumb, 글의 image·license·날짜 필드는 인물 식별, 검색 결과 경로, 글 미리보기, 사용 조건, 최신성 판단에 직접 쓰임

JSON-LD의 역할과 기본 구조

JSON-LD는 JSON Linked Data의 약자로, 웹페이지에 구조화 데이터를 추가하는 형식임
크롤러가 사이트의 의미 구조를 이해하는 데 도움을 주며, 더 풍부한 링크 미리보기와 잠재적인 검색 순위 개선에 기여할 수 있음
페이지에 추가할 때는 <head> 섹션 안에 다음 형태의 스크립트를 넣음
- <script type="application/ld+json">는 MIME 타입을 application/ld+json으로 선언함
- 이 타입이 지정되면 브라우저의 JavaScript 엔진은 실행하지 않음
- Googlebot 같은 특수 크롤러가 해당 요소를 찾아 내용을 파싱함

@context, @graph, 노드 ID

@context는 JSON-LD 데이터가 따르는 문맥을 지정하며, 웹 크롤러는 Schema.org를 표준으로 사용함
Schema.org는 JSON에서 사용할 수 있는 유효한 키-값 쌍을 정의함
JSON-LD 문서는 라벨이 붙은 방향 그래프로 볼 수 있고, 데이터는 @graph 아래에 저장됨
그래프에는 여러 노드가 들어가며, 노드들은 방향성 있는 연결로 이어짐
각 노드는 다음 요소로 구성됨
- @type: 노드가 무엇인지 나타냄. 예: WebSite, SoftwareApplication
- @id: 보통 URL 끝에 고유한 해시 값을 붙인 노드의 식별자
- 속성: 노드의 특성을 나타내는 키-값 쌍
웹 크롤러는 같은 @id를 공유하는 노드의 속성을 여러 페이지에 걸쳐 병합할 수 있음
단일 페이지만 읽는 스크레이퍼나 LLM은 속성을 병합하지 않으므로, 여러 페이지에 JSON-LD를 재사용할 때 이 차이를 고려해야 함
@id는 #website처럼 노드를 고유하게 식별하는 해시를 URL 뒤에 붙이는 방식이 권장됨

사이트와 페이지를 설명하는 노드

WebSite
- WebSite는 사이트의 메타데이터를 담고, 크롤러가 사이트를 어떻게 표시할지 판단하는 데 힌트를 제공함
- 루트 페이지에는 url, name, alternateName, description, inLanguage, publisher, image 같은 속성을 포함한 상세 버전을 둘 수 있음
- 모든 페이지에 전체 WebSite 노드를 넣을 필요는 없음
- 도메인의 루트 페이지는 상세하게 작성하고, 다른 페이지에는 @type, @id, url, name만 포함한 축약 버전도 충분함
- 축약 버전은 단일 페이지만 읽는 크롤러가 사이트 이름을 올바르게 파악하는 데 필요한 맥락을 제공함
WebPage
- WebPage는 현재 페이지 자체, 즉 HTML 물리 페이지를 나타냄
- BlogPosting 같은 콘텐츠 유형과 구분해야 하며, WebPage는 해당 콘텐츠를 담고 있는 페이지를 가리킴
- 예시 속성에는 url, isPartOf, name, inLanguage, breadcrumb가 포함됨
- ProfilePage, CollectionPage는 WebPage의 더 구체적인 하위 타입임
- 덜 일반적인 하위 타입은 Schema.org의 WebPage 정의에서 확인할 수 있음

개인 식별과 프로필 페이지

Person
- 개인 웹사이트의 모든 페이지에는 Person 노드를 넣는 것이 권장됨
- Person은 사이트 주인이 누구인지 나타내며, Google의 콘텐츠 품질 지표 일부로 사용됨
- LLM 크롤러도 답변에서 누구를 인용할지 판단할 때 Person 정보를 점점 더 사용함
- WebSite와 달리 Person은 모든 페이지에 포함할 만큼 중요한 맥락임
- 중요한 속성은 다음과 같음
  - url: 루트 페이지를 가리켜 노드를 고정함
  - name, givenName, familyName: 이름을 명확히 나타냄
  - image: 가능하면 본인 사진이나 관련 로고를 사용해 정식 이미지를 연결함
  - sameAs: 다른 프로필을 크롤러에 알려 인물 식별에 도움을 줌
- sameAs는 특히 흔한 이름을 가진 경우 동명이인 구분에 유용하며, 여러 페이지에 걸친 지식 그래프 표현을 만드는 데 쓰임
- 다른 Person 속성은 세부 정보를 더하는 데 유용하지만 필수는 아니며, 줄여도 영향은 작음
ProfilePage
- ProfilePage는 사이트 안에서 특정 인물에 관한 페이지를 나타냄
- 홈 페이지에서 자신을 소개한다면 홈 페이지에 쓸 수 있고, 별도 about 페이지가 있다면 그곳에 두는 것이 더 적절할 수 있음
- isPartOf로 더 넓은 WebSite 노드와 연결하는 것이 중요함
- mainEntity는 해당 페이지가 누구에 관한 것인지 크롤러에 알려줌
- dateCreated, dateModified는 크롤러에 대한 최신성 신호로 유용하지만, 사이트에서 쉽게 제공되지 않는다면 크게 걱정할 필요는 없음

프로젝트와 경로 표시

SoftwareApplication
- 페이지에서 소프트웨어를 소개한다면 SoftwareApplication 노드로 해당 소프트웨어의 메타데이터를 담는 것이 좋음
- 더 구체적인 타입으로는 MobileApplication, WebApplication, VideoGame을 사용할 수 있음
- url 속성은 프로젝트가 배포된 위치를 가리켜야 함
- 예시로 crates.io 같은 배포 페이지가 해당됨
- sameAs는 소스 코드 저장소처럼 프로젝트와 연결된 다른 페이지에 사용함
- applicationCategory의 유효한 값은 Google의 SoftwareApplication 정의에서 확인할 수 있음
- FOSS 프로젝트라도 offers를 포함하고 가격을 0으로 설정해야 함
BreadcrumbList
- BreadcrumbList는 루트 페이지를 제외한 모든 페이지에 널리 유용함
- 페이지의 분류 경로를 나타내며, 실제 URL 경로와 반드시 같을 필요는 없음
- 검색 엔진이 특정 페이지의 경로를 어떻게 표시할지 제어하는 데 사용할 수 있음
- 사이트 경로가 이미 짧다면 이 노드의 이득은 작아 생략할 수 있음
- 경로가 긴 사이트에서는 BreadcrumbList가 검색 결과의 경로를 짧게 만드는 데 유용함

목록, 블로그, 글 페이지

CollectionPage
- CollectionPage는 주로 목록을 담는 페이지에 쓰는 WebPage의 하위 타입임
- 다른 프로필을 모아둔 /elsewhere/ 페이지나 블로그 글 목록인 /blog/ 페이지가 예시임
- about으로 관련 Person 노드를 연결할 수 있음
- breadcrumb는 반드시 현재 페이지의 올바른 BreadcrumbList와 연결해야 함
Blog
- Blog 노드는 블로그의 인덱스나 홈 페이지에 추가함
- WebSite와 개별 BlogPosting 사이를 잇는 중간 노드 역할을 함
- dateModified는 최신성 신호로 유용하지만, 쉽게 제공할 수 없다면 생략해도 됨
- license는 크롤러가 글을 어떤 조건에서 사용할 수 있는지 알게 함
- 개인 웹사이트에서는 publisher를 Organization이 아니라 Person으로 설정해도 됨
- Google 문서는 이전과 달리 Person도 유효하게 허용하며, 개인 웹사이트에는 더 정확할 수 있음
BlogPosting
- BlogPosting은 게시된 모든 블로그 글에 포함해야 함
- 크롤러가 글을 더 정확하게 표현할 수 있도록 추가 정보를 제공함
- 검색 결과에서 더 정확한 위치 배치와 풍부한 세부 정보를 제공하는 데 쓰일 수 있음
- 개인 사이트에서는 author와 publisher가 같은 Person 노드를 가리켜도 괜찮음
- image 속성은 글의 링크 미리보기에 이미 쓰는 OG 이미지와 맞추는 것이 좋음
- license는 글의 이용 조건을 나타내는 데 사용할 수 있음

최소 구현과 적용 기준

개인 사이트에 필요한 JSON-LD는 페이지 성격에 따라 선택적으로 구성할 수 있음
빌드 단계가 없는 정적 사이트라도 루트 페이지에 최소한 다음 노드를 추가해 이점을 얻을 수 있음
- WebSite
- ProfilePage
- Person
블로그가 있다면 Blog와 BlogPosting을 추가하고, 글 목록이나 외부 프로필 목록 페이지에는 CollectionPage를 사용할 수 있음
프로젝트 소개 페이지에는 SoftwareApplication, 루트가 아닌 페이지에는 BreadcrumbList를 검토할 수 있음

Read Entire Article