2025-03-11T00:21:14
This commit is contained in:
214
doc/seo/10_JSON-LD.md
Normal file
214
doc/seo/10_JSON-LD.md
Normal file
@@ -0,0 +1,214 @@
|
||||
**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": [{...}, {...}]` |
|
||||
|
||||
#### 기본 예제:
|
||||
```json
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "Person",
|
||||
"name": "홍길동",
|
||||
"email": "hong@example.com"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. JSON-LD 사용 방법
|
||||
JSON-LD는 주로 HTML에 `<script>` 태그로 삽입됩니다.
|
||||
|
||||
#### (1) HTML에 추가
|
||||
```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)
|
||||
```xml
|
||||
<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) 모델링 및 생성
|
||||
```java
|
||||
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>");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 출력 결과:
|
||||
```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>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 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`)이나 다른 예제가 필요하면 말씀해주세요!
|
||||
Reference in New Issue
Block a user