html-examples/doc/seo/10_JSON-LD.md

JSON-LD (JavaScript Object Notation for Linked Data)는 구조화된 데이터를 표현하기 위한 경량화된 형식으로, JSON을 기반으로 설계되었습니다. 이는 Linked Data(연결된 데이터) 개념을 웹에 적용하여, 사람과 기계가 데이터를 쉽게 이해하고 상호 연결할 수 있게 합니다. Schema.org와 같은 어휘를 사용해 웹 페이지에 의미론적 데이터를 추가하는 데 가장 널리 사용되며, 검색 엔진(Google, Bing 등)이 선호하는 마크업 형식입니다.

---

1. JSON-LD의 정의와 목적

• 정의: JSON에 @context, @type 같은 키워드를 추가해 데이터의 의미와 관계를 정의한 형식.
• 목적:
  • 의미론적 데이터 제공: 데이터에 문맥과 구조를 부여.
  • 검색 엔진 최적화: Rich Snippets, Knowledge Graph 등 지원.
  • 연결된 데이터: 서로 다른 시스템 간 데이터 상호운용성 향상.
  • 간단한 구현: 기존 JSON과 유사해 개발자 친화적.

---

2. JSON-LD의 주요 특징

• JSON 기반: 기존 JSON 파서를 그대로 사용 가능.
• Linked Data 지원:
  • @context: 데이터의 의미를 정의하는 어휘(예: Schema.org).
  • @id: 리소스의 고유 식별자(URI).
• 독립성: HTML 콘텐츠와 분리되어 <script> 태그로 삽입.
• 확장성: 다양한 어휘와 사용자 정의 컨텍스트 사용 가능.
• W3C 표준: 2014년에 W3C에서 표준화(JSON-LD 1.0), 이후 2020년에 JSON-LD 1.1 업데이트.

---

3. JSON-LD의 구조

JSON-LD는 몇 가지 핵심 키워드로 데이터를 구조화합니다:

키워드	설명	예제
@context	데이터의 의미를 정의하는 어휘(URL 또는 객체)	"@context": "http://schema.org"
@type	데이터의 타입(엔티티 유형)	"@type": "Person"
@id	리소스의 고유 식별자	"@id": "https://example.com/1"
@graph	여러 객체를 포함하는 그래프	"@graph": [{...}, {...}]

기본 예제:

{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "홍길동",
  "email": "hong@example.com"
}

---

4. JSON-LD 사용 방법

JSON-LD는 주로 HTML에 <script> 태그로 삽입됩니다.

(1) HTML에 추가

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "컨퍼런스 2025",
  "startDate": "2025-03-07T09:00:00+09:00",
  "location": {
    "@type": "Place",
    "name": "서울 컨벤션 센터",
    "address": "서울특별시 강남구"
  }
}
</script>

(2) 결과

• 검색 엔진은 이를 파싱해 이벤트 정보를 인덱싱.
• 사용자에게 이벤트 날짜, 장소 등이 검색 결과에 표시됨.

---

5. JSON-LD의 작동 방식

1. 마크업 작성: Schema.org 같은 어휘로 데이터 작성.
2. 삽입: <script type="application/ld+json">에 추가.
3. 크롤링: 검색 엔진이 JSON-LD를 읽고 구조화된 데이터로 변환.
4. 활용: Rich Snippets, 음성 검색, API 데이터로 사용.

---

6. 자바로 JSON-LD 생성 예제

Jackson 라이브러리를 사용해 JSON-LD를 동적으로 생성할 수 있습니다.

(1) 의존성 (Maven)

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.30</version>
    <scope>provided</scope>
</dependency>

(2) 모델링 및 생성

import com.fasterxml.jackson.annotation.JsonProperty;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.Data;

@Data
public class EventSchema {
    @JsonProperty("@context")
    private String context = "http://schema.org";

    @JsonProperty("@type")
    private String type = "Event";

    private String name;

    private String startDate;

    private Place location;

    @Data
    public static class Place {
        @JsonProperty("@type")
        private String type = "Place";

        private String name;

        private String address;
    }
}

public class JsonLdExample {
    public static void main(String[] args) throws Exception {
        EventSchema event = new EventSchema();
        event.setName("컨퍼런스 2025");
        event.setStartDate("2025-03-07T09:00:00+09:00");

        EventSchema.Place place = new EventSchema.Place();
        place.setName("서울 컨벤션 센터");
        place.setAddress("서울특별시 강남구");
        event.setLocation(place);

        ObjectMapper mapper = new ObjectMapper();
        String jsonLd = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(event);

        System.out.println("<script type=\"application/ld+json\">");
        System.out.println(jsonLd);
        System.out.println("</script>");
    }
}

출력 결과:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "컨퍼런스 2025",
  "startDate" : "2025-03-07T09:00:00+09:00",
  "location" : {
    "@type" : "Place",
    "name" : "서울 컨벤션 센터",
    "address" : "서울특별시 강남구"
  }
}
</script>

---

7. JSON-LD와 다른 형식 비교

특성	JSON-LD	Microdata	RDFa
형식	JSON 스크립트	HTML 속성	HTML 속성
독립성	HTML과 분리	HTML에 통합	HTML에 통합
복잡도	낮음~중간	중간	높음
SEO 지원	강력 (Google 선호)	강력	강력
Linked Data	강력 지원	약함	강력

• JSON-LD: 독립적이고 가독성 좋음, 현대 웹에서 주류.
• Microdata: HTML과 밀접, 직관적.
• RDFa: 시맨틱 웹에 최적화, 복잡.

---

8. JSON-LD의 장점과 단점

• 장점:
  • HTML 구조와 분리되어 유지보수 용이.
  • 검색 엔진이 선호 (Rich Snippets 지원).
  • Linked Data로 데이터 연결 가능.
  • JSON 기반으로 개발자 친화적.
• 단점:
  • 초기 학습 필요 (@context 등).
  • 잘못된 구조 시 검색 엔진 무시 가능.
  • 동적 생성 시 서버 로직 추가 필요.

---

9. 현대적 맥락

• 사용 사례:
  • Schema.org와 결합해 SEO 강화.
  • Open Graph, Twitter Cards와 함께 소셜 미디어 최적화.
  • API 데이터 교환 형식으로 활용.
• 도구:
  • Google Structured Data Testing Tool: JSON-LD 검증.
  • JSON-LD Playground: 문법 테스트.
• 버전: JSON-LD 1.1은 @nest, @prefix 등 추가 기능 제공.

---

10. 결론

JSON-LD는 구조화된 데이터를 웹에 추가하는 강력하고 유연한 방법으로, Schema.org와 함께 사용 시 SEO와 데이터 활용성을 극대화합니다. JSON 기반으로 자바 같은 언어로 쉽게 생성 가능하며, 검색 엔진과 Linked Data 생태계에서 핵심 역할을 합니다. 현대 웹 개발에서 필수적인 기술로 자리잡았습니다.

추가로 JSON-LD의 특정 기능(예: @graph, 커스텀 @context)이나 다른 예제가 필요하면 말씀해주세요!