elex/html-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2025-03-11T00:21:14

Browse Source
This commit is contained in:
Elex
2025-03-11 00:21:14 +09:00
parent d24ff7cae9
commit e6370a4a32
3 changed files with 621 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
doc/seo/08_Microformats.md Normal file
View File

@@ -0,0 +1,201 @@
**Microformats(마이크로포맷)**은 HTML에 구조화된 데이터를 추가하기 위한 간단하고 개방적인 형식으로, 사람과 기계가 모두 읽을 수 있도록 설계되었습니다. 이는 웹 페이지의 콘텐츠(예: 연락처, 이벤트, 리뷰 등)에 의미를 부여하여 검색 엔진, 크롤러, 브라우저 확장 프로그램 등이 데이터를 쉽게 파싱하고 활용할 수 있게 합니다. Microformats는 기존 HTML을 확장하며, 별도의 파일이나 복잡한 스키마 없이도 사용할 수 있는 것이 특징입니다.
---
### 1. Microformats의 정의와 목적
- **정의**: HTML 클래스 속성(`class`)과 기타 속성(`rel`, `title` 등)을 사용해 콘텐츠에 의미론적 마크업을 추가하는 방식.
- **목적**:
- **구조화된 데이터 제공**: 검색 엔진(Google, Bing 등)이 콘텐츠를 더 잘 이해하도록 도움.
- **사용자 경험 개선**: 브라우저 도구나 앱이 데이터를 자동 추출(예: 캘린더에 이벤트 추가).
- **간단함**: JSON-LD나 RDFa 같은 복잡한 대안 대비 쉽게 적용 가능.
---
### 2. Microformats의 주요 특징
- **사람 우선**: HTML 자체가 사람이 읽기 쉬운 형태로 유지됨.
- **기계 해석 가능**: 클래스 이름으로 의미를 정의해 파싱 가능.
- **재사용성**: 기존 HTML에 추가 작업만으로 적용.
- **커뮤니티 기반**: 오픈 표준으로, microformats.org에서 관리.
---
### 3. 주요 Microformats 종류
Microformats는 여러 유형으로 나뉘며, 각 유형은 특정 데이터 형식을 표현합니다.
#### (1) hCard (연락처 정보)
- **용도**: 사람, 조직, 장소의 연락처 정보.
- **예제**:
```html
<div class="vcard">
<span class="fn">홍길동</span>
<span class="org">Example Corp</span>
<a class="email" href="mailto:hong@example.com">hong@example.com</a>
<div class="adr">
<span class="street-address">123 서울로</span>
<span class="locality">서울</span>
</div>
</div>
```
- **클래스**: `vcard`, `fn`(fullname), `org`, `email`, `adr`(address) 등.
#### (2) hCalendar (이벤트)
- **용도**: 이벤트, 일정 정보.
- **예제**:
```html
<div class="vevent">
<h3 class="summary">컨퍼런스 2025</h3>
<span class="dtstart">2025-03-07T09:00:00+09:00</span> -
<span class="dtend">2025-03-07T17:00:00+09:00</span>
<div class="location">서울 컨벤션 센터</div>
</div>
```
- **클래스**: `vevent`, `summary`, `dtstart`(시작), `dtend`(종료), `location`.
#### (3) hEntry (블로그 게시물)
- **용도**: 블로그 포스트, 기사 등.
- **예제**:
```html
<article class="hentry">
<h1 class="entry-title">오늘의 뉴스</h1>
<time class="published" datetime="2025-03-07">2025-03-07</time>
<div class="entry-content">최신 소식을 전합니다.</div>
<span class="author vcard">홍길동</span>
</article>
```
- **클래스**: `hentry`, `entry-title`, `published`, `entry-content`, `author`.
#### (4) hReview (리뷰)
- **용도**: 제품, 서비스 리뷰.
- **예제**:
```html
<div class="hreview">
<h3 class="item fn">최신 스마트폰</h3>
<span class="rating">4.5</span>
<p class="description">성능이 뛰어납니다.</p>
<span class="reviewer vcard">홍길동</span>
</div>
```
- **클래스**: `hreview`, `item`, `rating`, `description`, `reviewer`.
#### (5) rel 속성 기반 Microformats
- **rel-nofollow**: 링크가 신뢰하지 않음을 표시.
```html
<a href="https://spam.com" rel="nofollow">스팸 링크</a>
```
- **rel-tag**: 태그 지정.
```html
<a href="/tags/java" rel="tag">Java</a>
```
---
### 4. Microformats의 작동 방식
- **구성 요소**:
- **루트 클래스**: 데이터 유형 정의(예: `vcard`, `vevent`).
- **속성 클래스**: 세부 데이터 정의(예: `fn`, `dtstart`).
- **파싱**:
- 크롤러나 도구가 클래스 이름으로 데이터 추출.
- 예: `class="fn"` → 이름 데이터로 인식.
---
### 5. 자바로 Microformats 파싱 예제
HTML에서 Microformats를 파싱하려면, Jsoup 같은 라이브러리를 사용해 클래스 기반 데이터를 추출할 수 있습니다.
#### (1) 의존성 (Maven)
```xml
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.15.3</version>
</dependency>
```
#### (2) hCard 파싱
```java
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
public class MicroformatsParser {
public static void main(String[] args) throws Exception {
String html = "<div class=\"vcard\">" +
"<span class=\"fn\">홍길동</span>" +
"<a class=\"email\" href=\"mailto:hong@example.com\">hong@example.com</a>" +
"</div>";
Document doc = Jsoup.parse(html);
Element vcard = doc.selectFirst(".vcard");
if (vcard != null) {
String name = vcard.selectFirst(".fn").text();
String email = vcard.selectFirst(".email").text();
System.out.println("Name: " + name);
System.out.println("Email: " + email);
}
}
}
```
#### 출력 결과:
```
Name: 홍길동
Email: hong@example.com
```
---
### 6. Microformats와 다른 기술 비교
| **특성** | **Microformats** | **JSON-LD** | **RDFa** |
|---------------------|------------------------|-----------------------|-----------------------|
| **형식** | HTML 클래스 | JSON 스크립트 | HTML 속성 |
| **복잡도** | 낮음 | 중간 | 높음 |
| **SEO 지원** | 제한적 | 강력 (Schema.org) | 강력 |
| **적용 용이성** | 쉬움 | 중간 | 어려움 |
| **사용 사례** | 간단한 데이터 | 복잡한 구조화 데이터 | Semantic Web |
- **Microformats**: 간단한 블로그, 연락처 등에 적합.
- **JSON-LD**: 현대 SEO, Schema.org 기반 구조화 데이터에 주로 사용.
- **RDFa**: 복잡한 온톨로지와 시맨틱 웹에 활용.
---
### 7. Microformats의 장점과 단점
- **장점**:
- 적용이 쉬움 (기존 HTML 재사용).
- 사람과 기계 모두 이해 가능.
- 경량화된 구조.
- **단점**:
- 복잡한 데이터 표현 어려움.
- 최신 SEO에서 JSON-LD에 비해 지원 감소.
- 제한된 표준화 (Microformats 2로 개선 중).
---
### 8. Microformats 2 (h-*)
- **개선판**: Microformats의 한계를 보완한 버전.
- **특징**:
- 클래스 이름 단순화 (예: `h-card`, `p-name`).
- 중첩된 구조 지원 강화.
- **예제**:
```html
<div class="h-card">
<span class="p-name">홍길동</span>
<a class="u-email" href="mailto:hong@example.com">hong@example.com</a>
</div>
```
- **클래스 접두사**: `h-`(루트), `p-`(속성), `u-`(URL), `dt-`(날짜).
---
### 9. 현대적 맥락
- **사용**: IndieWeb 커뮤니티, 블로그, 소규모 사이트에서 여전히 활용.
- **대안**: JSON-LD와 Schema.org이 SEO 주류로 자리잡음.
- **도구**: Operator(파이어폭스 확장), Microformat Shiv(JavaScript 파서).
---
### 10. 결론
Microformats는 HTML에 구조화된 데이터를 추가하는 간단한 방법으로, 초기 웹에서 널리 사용되었습니다. 현재는 JSON-LD와 같은 대안에 밀려 사용이 줄었지만, 경량화와 직관성 덕분에 소규모 프로젝트나 IndieWeb에서 여전히 유효합니다. 자바로 파싱하려면 Jsoup 같은 도구를 활용하면 됩니다.
추가 질문이나 특정 Microformat(예: hCard, hCalendar)에 대한 예제가 필요하면 말씀해주세요!

206
doc/seo/09_Schema.org.md Normal file
View File

@@ -0,0 +1,206 @@
**Schema.org**는 구조화된 데이터를 웹에 추가하기 위한 개방형 표준으로, 검색 엔진(Google, Bing, Yahoo 등)이 웹 페이지의 콘텐츠를 더 잘 이해하고 활용할 수 있도록 설계되었습니다. 2011년에 Google, Microsoft, Yahoo, Yandex가 공동으로 시작했으며, 현재는 커뮤니티 주도로 유지됩니다. Schema.org는 주로 **마크업 형식**(Microdata, RDFa, JSON-LD)을 통해 HTML에 의미론적 데이터를 삽입하며, 이를 통해 검색 결과의 풍부한 표시(Rich Snippets), 음성 검색 최적화, 기계 학습 등 다양한 용도로 활용됩니다.
---
### 1. Schema.org의 정의와 목적
- **정의**: 웹 콘텐츠에 의미를 부여하는 어휘(Vocabulary)와 이를 적용하는 가이드라인 집합.
- **목적**:
- **검색 엔진 최적화(SEO)**: 콘텐츠의 의미를 명확히 해 검색 결과 개선.
- **풍부한 검색 결과**: 리뷰 별점, 이벤트 날짜, 제품 가격 등이 검색 결과에 표시.
- **기계 이해도 향상**: AI, 크롤러가 데이터를 구조적으로 파싱 가능.
- **상호운용성**: 다양한 플랫폼 간 데이터 공유 용이.
---
### 2. Schema.org의 주요 특징
- **어휘 기반**: 계층적 타입(Type)과 속성(Property)으로 구성.
- 예: `Person` 타입은 `name`, `email`, `birthDate` 속성을 가짐.
- **확장성**: 커뮤니티 제안으로 새로운 타입과 속성 추가 가능.
- **형식 지원**:
- **Microdata**: HTML 속성 사용.
- **RDFa**: HTML 속성으로 시맨틱 웹 연결.
- **JSON-LD**: 별도 스크립트로 삽입 (가장 널리 사용).
- **오픈 소스**: 누구나 무료로 사용 가능, schema.org에서 문서 제공.
---
### 3. Schema.org의 주요 타입과 속성
Schema.org는 수백 개의 타입과 속성을 제공하며, 몇 가지 대표적인 예는 다음과 같습니다:
#### (1) `Person` (사람)
- 속성: `name`, `email`, `telephone`, `address`, `jobTitle`.
- 예: 개인 프로필.
#### (2) `Event` (이벤트)
- 속성: `name`, `startDate`, `endDate`, `location`.
- 예: 컨퍼런스, 공연.
#### (3) `Product` (제품)
- 속성: `name`, `description`, `price`, `brand`, `review`.
- 예: 전자상거래 상품.
#### (4) `Article` (기사)
- 속성: `headline`, `author`, `datePublished`, `image`.
- 예: 블로그 포스트, 뉴스.
#### (5) `Organization` (조직)
- 속성: `name`, `logo`, `contactPoint`, `url`.
- 예: 회사 정보.
---
### 4. Schema.org 마크업 형식
Schema.org는 세 가지 주요 형식으로 구현됩니다.
#### (1) Microdata
- HTML 태그에 `itemscope`, `itemtype`, `itemprop` 속성 추가.
- **예제**:
```html
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">홍길동</span>
<a href="mailto:hong@example.com" itemprop="email">hong@example.com</a>
</div>
```
#### (2) RDFa
- HTML 속성(`typeof`, `property`)으로 데이터 연결.
- **예제**:
```html
<div typeof="Person">
<span property="name">홍길동</span>
<a href="mailto:hong@example.com" property="email">hong@example.com</a>
</div>
```
#### (3) JSON-LD (권장)
- `<script>` 태그에 JSON 형식으로 삽입.
- **예제**:
```html
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "홍길동",
"email": "hong@example.com"
}
</script>
```
- **왜 권장?**: HTML 구조와 분리, 유지보수 용이, 검색 엔진 선호.
---
### 5. Schema.org의 작동 방식
1. **마크업 추가**: 웹 페이지에 적절한 타입과 속성 삽입.
2. **크롤링**: 검색 엔진이 마크업을 파싱.
3. **활용**:
- **Rich Snippets**: 별점, 가격 등이 검색 결과에 표시.
- **Knowledge Graph**: Google의 지식 패널에 정보 제공.
- **음성 검색**: "가까운 이벤트는?" 같은 질문에 답변.
---
### 6. 자바로 Schema.org JSON-LD 생성 예제
Jackson 라이브러리를 사용해 Schema.org 데이터를 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 PersonSchema {
@JsonProperty("@context")
private String context = "http://schema.org";
@JsonProperty("@type")
private String type = "Person";
private String name;
private String email;
}
public class SchemaOrgExample {
public static void main(String[] args) throws Exception {
PersonSchema person = new PersonSchema();
person.setName("홍길동");
person.setEmail("hong@example.com");
ObjectMapper mapper = new ObjectMapper();
String jsonLd = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(person);
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" : "Person",
"name" : "홍길동",
"email" : "hong@example.com"
}
</script>
```
---
### 7. Schema.org의 장점과 단점
- **장점**:
- 검색 엔진의 강력한 지원 (Rich Snippets, SEO 향상).
- 다양한 타입과 속성으로 유연성 제공.
- JSON-LD로 쉬운 구현.
- **단점**:
- 초기 학습 곡선 존재.
- 잘못된 마크업 시 검색 엔진 패널티 가능.
- 모든 데이터가 풍부한 결과로 반영되지 않을 수 있음.
---
### 8. Schema.org와 Microformats 비교
| **특성** | **Schema.org** | **Microformats** |
|---------------------|------------------------|------------------------|
| **형식** | JSON-LD, Microdata 등 | HTML 클래스 |
| **복잡도** | 중간 | 낮음 |
| **SEO 지원** | 강력 | 제한적 |
| **어휘 범위** | 광범위 | 제한적 |
| **현재 사용** | 주류 | 소규모/레거시 |
- **Schema.org**: 현대 웹에서 SEO와 데이터 활용에 최적화.
- **Microformats**: 간단한 구조화 데이터에 유용.
---
### 9. 현대적 맥락
- **사용 사례**: 전자상거래, 블로그, 이벤트 사이트, 지역 비즈니스 등.
- **도구**:
- Google Structured Data Testing Tool: 마크업 검증.
- Rich Results Test: 풍부한 결과 확인.
- **확장**: `pending.schema.org`로 새로운 타입 제안 가능.
---
### 10. 결론
Schema.org는 웹 콘텐츠에 구조화된 데이터를 추가하는 강력한 도구로, SEO와 사용자 경험을 동시에 개선합니다. JSON-LD 형식이 가장 널리 사용되며, 자바로 쉽게 생성 가능합니다. 검색 엔진의 풍부한 결과를 노리거나 데이터를 기계 친화적으로 만들고 싶다면 필수적인 선택입니다.
추가로 특정 타입(예: `Event`, `Product`)에 대한 예제나 질문이 있다면 말씀해주세요!

214
doc/seo/10_JSON-LD.md Normal file
View 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`)이나 다른 예제가 필요하면 말씀해주세요!