파일 트리

CSS
말줄임 시 text-overflow 와 white-space, width의 관계
max-height transition 딜레이
css variables 에 투명도 조절 (color-mix 함수)
Stacking Context 의 원리
웹 타이포그래피 : 폰트의 실제 크기
tailwindcss color 프리셋 적용하기
word-wrap 이 overflow-wrap 로 변경됨
System
EXIF(Exchangeable Image File Format) 데이터
Vue/Nuxt
부모 컴포넌트의 초기화 완료 시점 감지하기 (Promise.withResolvers)
Github.io + Vue3 로 블로그 만들기
Nuxt Content v2에서 MDC 커스텀 컴포넌트 렌더링하기
Nuxt Pinia 시작하기 + getActivePinia 에러
Vite vue + Github Pages 페이지 구축
Vitest Fake Timer 로 setInterval 테스트 중 다음 루프가 실행 안되는 경우
Vue Code Spliting 간단히 알아보기 (+ Prefetch)
Vue2, Vue3 Reactivity 비교 - Vue2 편
Android
안드로이드 Camera2 API를 활용한 문서 촬영 가이드라인 화면 개발 및 이미지 회전(Exif) 트러블슈팅
모바일앱 딥링크 구성
안드로이드 인앱 업데이트 구현 (AppUpdateManager)
앱 선택기에서 어떤 앱을 선택했는지 확인하기
안드로이드 LifecycleOwner is attempting to register while current state is RESUMED 크래시 해결
안드로이드 노티피케이션 번들 데이터 최신화 Android Notification Bundle Data
안드로이드 Notification과 PendingIntent의 사용기
안드로이드 SDK 15 (Target 35) 업데이트 대응 및 Edge-to-Edge UI, IME 인셋 처리
Postman 으로 FCM 알림 테스트하기
갤럭시 S21 갤러리 다중 선택 오류와 호환성 해결 방법
CSS / Android
안드로이드 해상도와 픽셀 밀도(DPI/PPI)
Android / Webview
안드로이드 웹뷰에서 다운로드 구현
Javascript
3월 31일 axios 악성 코드 배포 사태와 대응 절차
자바스크립트 Window 크기 측정과 getBoundingClientRect 좌표 계산
HTTP
브라우저 캐시는 언제 재사용되고 언제 304로 다시 확인할까
Content-Disposition으로 브라우저 표시와 다운로드 제어하기
CSS / Browser
하드웨어 가속 CSS 속성과 GPU Layer
Browser
자바스크립트로 조작할 수 없는 Forbidden Header와 HttpOnly 쿠키
같은 localhost 포트에서 이전 프로젝트가 열릴 때 Service Worker 정리하기
Git
Git 다중 계정 환경에서 SSH 인증과 커밋 작성자 관리하기
Github Environments 환경변수 관리
Merge와 Squash Merge는 언제 사용할까
Tools
Google Apps Script로 간단한 서버 기능 만들기
AI
Headroom 프록시로 Claude Code 토큰 사용량 24% 절감하기
Llama.cpp와 Qwen 3.5로 Claude Code 로컬 구축하기
HTML / Javascript
HTML dialog 태그와 popover API
한글 IME 조합 이벤트
Javascript / Browser API
브라우저 탭과 창 사이에서 상태와 메시지 동기화하기
Javascript / HTML
DOM 이벤트 버블링과 캡처링, 그리고 blur vs click 호출 순서 제어하기
Node
node patch 버전이 두자리 넘어가며 생긴 로직 문제
npm 의존성 설치 문제 애플 실리콘에서의 Rollup 패키지 (npm ERR notsup Unsupported platform for rollup-darwin-arm64)
Vite에서 하나의 코드베이스를 서비스별 앱으로 나누기: 엔트리와 라우터 분리
JS/TS
구형 스마트 TV 브라우저 es-toolkit 호환성 트러블슈팅
TypeScript에서 type, interface, enum을 선택하는 기준
AWS
S3와 CloudFront에서 SPA 캐시를 분리해 배포 오류 막기
SEO
SEO JSON-LD
Tailwindcss
tailwindcss 4.0.8 버전 storybook 호환성 오류
Tailwind CSS v4: Vue/Svelte <style> 블록에서 @apply가 작동하지 않는 이슈
Vue
defineModel 과 defineProps 의 차이
Vue 3 emit 실행 순서와 props 갱신 타이밍
Vue 3 props에서 Proxy와 객체 참조 이해하기
ESLint
Vue3 ESLint 로컬 커스텀 룰 만들기
Vue3
Vue3에서 같은 컴포넌트를 재사용하는 두 가지 라우트 갱신 문제

최근 업데이트

지난 일주일

하드웨어 가속 CSS 속성과 GPU Layer

지난 3개월

브라우저 캐시는 언제 재사용되고 언제 304로 다시 확인할까

안드로이드 해상도와 픽셀 밀도(DPI/PPI)

DOM 이벤트 버블링과 캡처링, 그리고 blur vs click 호출 순서 제어하기

Stacking Context 의 원리

Vue 3 emit 실행 순서와 props 갱신 타이밍

안드로이드 Notification과 PendingIntent의 사용기

HTML dialog 태그와 popover API

한글 IME 조합 이벤트

자바스크립트로 조작할 수 없는 Forbidden Header와 HttpOnly 쿠키

웹 타이포그래피 : 폰트의 실제 크기

안드로이드 인앱 업데이트 구현 (AppUpdateManager)

Content-Disposition으로 브라우저 표시와 다운로드 제어하기

브라우저 탭과 창 사이에서 상태와 메시지 동기화하기

자바스크립트 Window 크기 측정과 getBoundingClientRect 좌표 계산

S3와 CloudFront에서 SPA 캐시를 분리해 배포 오류 막기

갤럭시 S21 갤러리 다중 선택 오류와 호환성 해결 방법

Vite에서 하나의 코드베이스를 서비스별 앱으로 나누기: 엔트리와 라우터 분리

구형 스마트 TV 브라우저 es-toolkit 호환성 트러블슈팅

Headroom 프록시로 Claude Code 토큰 사용량 24% 절감하기

2026년

안드로이드 웹뷰에서 다운로드 구현

Llama.cpp와 Qwen 3.5로 Claude Code 로컬 구축하기

SEO JSON-LD

Tailwind CSS v4: Vue/Svelte <style> 블록에서 @apply가 작동하지 않는 이슈

3월 31일 axios 악성 코드 배포 사태와 대응 절차

TypeScript에서 type, interface, enum을 선택하는 기준

같은 localhost 포트에서 이전 프로젝트가 열릴 때 Service Worker 정리하기

앱 선택기에서 어떤 앱을 선택했는지 확인하기

부모 컴포넌트의 초기화 완료 시점 감지하기 (Promise.withResolvers)

Git 다중 계정 환경에서 SSH 인증과 커밋 작성자 관리하기

2025년

max-height transition 딜레이

Google Apps Script로 간단한 서버 기능 만들기

Vue3에서 같은 컴포넌트를 재사용하는 두 가지 라우트 갱신 문제

EXIF(Exchangeable Image File Format) 데이터

node patch 버전이 두자리 넘어가며 생긴 로직 문제

안드로이드 Camera2 API를 활용한 문서 촬영 가이드라인 화면 개발 및 이미지 회전(Exif) 트러블슈팅

word-wrap 이 overflow-wrap 로 변경됨

말줄임 시 text-overflow 와 white-space, width의 관계

안드로이드 SDK 15 (Target 35) 업데이트 대응 및 Edge-to-Edge UI, IME 인셋 처리

Github Environments 환경변수 관리

Merge와 Squash Merge는 언제 사용할까

Nuxt Content v2에서 MDC 커스텀 컴포넌트 렌더링하기

tailwindcss color 프리셋 적용하기

css variables 에 투명도 조절 (color-mix 함수)

tailwindcss 4.0.8 버전 storybook 호환성 오류

안드로이드 LifecycleOwner is attempting to register while current state is RESUMED 크래시 해결

npm 의존성 설치 문제 애플 실리콘에서의 Rollup 패키지 (npm ERR notsup Unsupported platform for rollup-darwin-arm64)

Nuxt Pinia 시작하기 + getActivePinia 에러

Vitest Fake Timer 로 setInterval 테스트 중 다음 루프가 실행 안되는 경우

2024년

Vue 3 props에서 Proxy와 객체 참조 이해하기

defineModel 과 defineProps 의 차이

Vue3 ESLint 로컬 커스텀 룰 만들기

모바일앱 딥링크 구성

2023년

Vite vue + Github Pages 페이지 구축

Postman 으로 FCM 알림 테스트하기

안드로이드 노티피케이션 번들 데이터 최신화 Android Notification Bundle Data

2022년

Vue Code Spliting 간단히 알아보기 (+ Prefetch)

Vue2, Vue3 Reactivity 비교 - Vue2 편

Github.io + Vue3 로 블로그 만들기

Engineering note · SEO

SEO JSON-LD

2026년 04월 29일이현수

태그seohtmlrss

구글 등 검색 엔진이 웹사이트의 콘텐츠를 구조적으로 이해하도록 돕는 JSON-LD(구조화된 데이터)의 개념과, 여전히 유효한 콘텐츠 구독 프로토콜인 RSS에 대해 알아본다.

SEO의 핵심 중 하나로 JSON-LD 가 있다. 메타 태그에 심는 것만 알고 있었는데, 이런 게 있었다. JSON-LD (JavaScript Object Notation for Linked Data) 는 json 으로 구성된 검색엔진용 페이지 정보다. 우리가 블로그 글이나 상품 상세 페이지를 예쁘게 만들어도, 구글 봇 입장에서는 그게 '리뷰'인지, '레시피'인지, '상품'인지 직관적으로 깨닫기 어렵다.

콘텐츠의 메타데이터를 구조화된 형태로 페이지의 <head> 태그 등에 심어두면, 검색 엔진이 페이지의 문맥을 완벽하게 이해하게 된다.

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "시맨틱 웹과 JSON-LD 이해하기",
  "author": {
    "@type": "Person",
    "name": "홍길동"
  },
  "datePublished": "2026-04-29"
}
</script>

이렇게 명시해주면 구글이나 네이버 서치어드바이저의 검색 결과 화면에서 평범한 텍스트 덩어리가 아니라 별점, 작성자, 썸네일 이미지가 함께 뜨는 리치 결과(Rich Snippets) 로 노출될 확률이 비약적으로 올라간다. 구글 서치 콘솔 가이드라인에서도 가장 권장하는 방식이다.

이 글이 좋았습니다0

댓글 0개

댓글을 불러오는 중입니다.