일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- prettier-plugin-tailwindcss
- 명시적 타입 변환
- TypeScript
- helm-chart
- type assertion
- task queue
- CI/CD
- 암묵적 타입 변환
- JavaScript
- Custom Hook
- useCallback
- 타입 단언
- 프로세스
- useMemo
- CS
- Headless 컴포넌트
- Event Loop
- Render Queue
- useLayoutEffect
- docker
- React.memo
- 주니어개발자
- Compound Component
- 좋은 PR
- Sparkplug
- AJIT
- Microtask Queue
- react
- useEffect
- linux 배포판
- Today
- Total
구리
[SEO] JSON-LD, 구조화된 데이터 본문
어떤 키워드 (사과 요리)를 검색했을 때, 관련 사이트 목록뿐만 아니라 다양한 컨텐츠 형식(레시피)을 볼 수 있습니다.
이는 페이지에 구조화된 데이터를 포함하기 때문에 가능하며 사용자에게 더욱 효과적인 검색결과를 제공해 웹사이트와 더 많은 상호작용을 하도록 유도할 수 있습니다. 이때 구조화된 데이터를 만들기 위한 방법 중 하나로 사용되는 것이 JSON-LD
입니다.
JSON 탄생 배경
JSON-LD를 알아보기 전, 먼저 JSON의 탄생 배경에 대해 알아보겠습니다.
JSON은 XML의 대안으로 더 쉽게 데이터를 교환하고 저장하기 위해 고안되었습니다.
XML
(Extensible Markup Language)은 HTML과 비슷한 문자 기반의 마크업 언어로 무언가를 실행하는 언어가 아닌 데이터를 표현하는 '형식'에 가깝습니다. JSON이 나오기 전까지는 XML이라는 형식을 이용해 데이터를 주고 받았습니다.
그런데 XML 사용시 불편한 점이 많았습니다. 데이터를 표기할 때마다 종료 태그를 붙어야 하고, XML을 처리하려면 별도의 응용프로그램이 필요했습니다. 이런 불편한 점은 개선한 형식이 바로 JSON입니다.
<guests>
<guest>
<firstName>John</firstName> <lastName>Doe</lastName>
</guest>
<guest>
<firstName>María</firstName> <lastName>García</lastName>
</guest>
<guest>
<firstName>Nikki</firstName> <lastName>Wolf</lastName>
</guest>
</guests>
JSON이란
{"guests":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"María", "lastName":"García" },
{ "firstName":"Nikki", "lastName":"Wolf" }
]}
JSON이란 데이터 저장 혹은 교환시 사용되는 경량의 데이터 포맷으로 key, value로 구성되어있습니다.
XML과 비교했을 때 차이점은 다음과 같습니다.
- 처리 속도
- XML 문서는 XML DOM을 이용해 문서에 접근
- JSON은 JSON 형태의 문자열을 전송받은 후 표준 JS 함수로 파싱하기에 처리 속도가 더 빠름
- 데이터 종류
- XML : 오로지 string
- JSON : array, string, boolean, number
- XML보다 간결하며 쓰고 읽기 쉬움
Linked Data란
JSON-LD는 JSON for Linked Data의 약자로 JSON이 무엇인지 알았으니 다음으로 Linked Data
에 대해 알아보겠습니다.
Linked Data는 웹 상에 존재하는 데이터를 개별 URI로 식별하고, 각 URI에 링크 정보를 부여해 상호 연결된 웹을 지향하는 모형입니다.
기존의 웹은 문서 기반으로 제공되었기에, 컴퓨터는 데이터 자체만으로 서로의 연관관계를 알 수 없어 데이터를 구조화하고 연결되는 웹을 구현하기 위해 탄생된 개념입니다.
Linked Data는 다음 4가지 원칙을 만족하는 데이터 모형입니다.
- URI의 사용 : Linked Data는 웹문서의 위치를 나타내는 URL 중심의 식별체계를 지양. 즉, 개별 문서에 존재하는 개별 객체에 각각 URI를 부여
- HTTP URI의 사용 : Linked Data는 URI중 HTTP 프로토콜을 통해 접근할 수 있는 URI를 제안, 이는 Linked Data에 대한 접근성을 강화하려는 목적
- RDF의 사용 : Linked Data는 RDF와 같이 트리플 모형으로 구조화된 데이터를 사용해야 함, 웹의 데이터를 정형화된 구조로 나타내고, 연계하기 위함
- 링크 정보의 부여 : 위 3가지 원칙을 지켜도 풍부한 링크 정보가 없다면 웹에 존재하는 데이터를 연결하기 어려움. Linked Data에서는 보다 발전된 시맨틱웹을 위해 링크 정보를 부여하는 것이 중요함
간단하게 정리해보면 다음과 같습니다.
- 사물 이름으로 URI를 사용해야 함
- 사람들이 이름을 찾을 수 있도록 HTTP URI를 사용해야 함
- 누군가 URI를 찾아볼 때, 표준 스펙(RDF 등)을 이용해 정보를 제공해야 함
- 사람들이 더 더 많은 것을 발견할 수 있도록 다른 URI에 대한 링크를 포함해야 함
Linked Data와 관련된 아래 영상을 보면 개념 이해에 도움이 될 것 같습니다.
https://www.youtube.com/watch?v=4x_xzT5eF5Q
JSON-LD란
JSON-LD
는 JSON 포맷을 사용해 Linked Data를 인코딩하는 방식으로 데이터가 어떤 데이터와 연관 관계를 갖는지 설명하기 위해 사용됩니다.
페이지는 HTML로 이뤄져 있지만 실제로 페이지를 방문했을 경우, 형태를 표시해줄뿐이며 방문하지 않은 시점에 해당 데이터가 어떤 데이터인지 알 수 없기에 이를 파악하기 위해 구조화된 데이터(스키마 마크업)가 필요합니다.
구조화된 데이터를 만드는데 필요한 것이 Schema.org로 인터넷, 웹페이지, 전자메일 메세지 등의 구조화된 데이터에 대한 스키마 마크업을 생성해야 하는데 그 방법 중 하나가 JSON-LD입니다. 즉, 구조화된 데이터를 만드는 하나의 방법으로 검색 엔진과 기타 웹 크롤러가 페이지의 콘텐츠를 이해하는데 도움이 되는 방법을 제공합니다.
JSON-LD의 형태는 다음과 같으며 웹 페이지에 아래 예시를 그대로 <script>
태그에 넣어 HTML에 포함하면 검색 엔진이 아래 정보를 활용하게 됩니다.
<script type="application/json+ld">
{
"@context": "http://schema.org/",
"@type": "Person",
"name": "Jane Doe",
"jobTitle": "Professor",
"telephone": "(425) 123-4567",
"url": "http://www.janedoe.com"
}
</script>
참고 자료
https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ko
https://aws.amazon.com/ko/compare/the-difference-between-json-xml/
https://www.tcpschool.com/json/json_intro_xml
https://ko.wikipedia.org/wiki/%EB%A7%81%ED%81%AC%EB%93%9C_%EB%8D%B0%EC%9D%B4%ED%84%B0
https://ko.wikipedia.org/wiki/JSON-LD
'Web' 카테고리의 다른 글
[브라우저] 자바스크립트 엔진은 어떤 기준으로 코드를 순서대로 실행할까? (0) | 2023.10.03 |
---|---|
[브라우저] 자바스크립트 엔진은 내 코드를 어떻게 실행할까? (0) | 2023.10.01 |
[Browser] 웹성능 최적화 (0) | 2023.06.30 |
[Browser] 브라우저 렌더링 과정 (0) | 2023.06.23 |