[그림으로 보는 웹 구성 간 흐름]
[그림으로 보는 웹 검색 엔진(구글)과 SEO 그리고 Core Web Vital]
1. 검색 엔진의 원리와 SEO
무언가 나 대신 세계 모든 웹 서버의 웹 페이지들을 미리 다 찾아놓고,
분류 및 정리한 뒤에 내 검색어에 따라 그에 적합한 웹 페이지들만 골라 전달해주면 어떨까?
- 무언가 = 구글 : 네이버, 다음과 같은 검색 서비스 (검색 엔진)
- 다 찾아놓고 = 웹 크롤링 : 세계 모든 웹 서버의 웹 페이지 정보 수집 (봇)
- 분류 및 정리한 뒤 = 인덱싱 : 앞서 수집한 전체 웹 페이지들을 상관관계별로 분류
- 구글 검색 엔진 알고리즘의 시초 PageRank
- 내 검색어에 따라 그에 적합한 웹 페이지들만 골라 전달해주면 어떨까? = 검색 엔진 : 검색 결과 반환
SEO 검색 엔진 최적화 (Search Engine Optimization) = 검색 시 상위 노출
2. SEO 를 위한 robots.txt 와 sitemap.xml의 역할
- robots.txt : 제외 정책 (웹 서버가 갖고있는 어떤 웹 페이지를 웹 크롤러로 허용하고 허용안할것인지 결정)
- sitemap.xml : 홈페이지 지도 (웹 서버가 어떤 웹 페이지를 갖고있는지에 대한 지도)
3. SEO 를 위해 개발자가 신경써야할 몇 가지 요소들
- 좋은 내용 Good Contents
- Semantic HTML - 심화 : schema.org
- 키워드 및 메타 태그
- 성능 Performance Metrics
- 웹 접근성
4. SEO를 위해 어떤 렌더링 패턴을 사용하는 게 좋을까?
- SSR(Server Side Rendering) : 웹 페이지를 서버에서 렌더링하는 것
- 서버에서 웹 페이지를 미리 생성하여 전송하기 때문에 초기 로딩 시간이 단축 사용자가 웹 페이지를 빠르게 볼 수 있어 검색 엔진 최적화(SEO)에도 유리
- 서버에서 웹 페이지를 미리 생성하여 전송하기 때문에 초기 로딩 시간이 단축 사용자가 웹 페이지를 빠르게 볼 수 있어 검색 엔진 최적화(SEO)에도 유리
5. 웹 페이지 성능 매트릭(Performance Metrics)인 Core Web Vital
웹 페이지의 만족도는 연관된 정보의 질과 양 + 페이지 이동 및 이벤트 반응 속도(성능)
- Load Time
- FCP : First Contentful Paint - 웹 페이지 내 가장 첫 의미있는 정보가 보여지는 순간까지의 시간
- LCP : Largest Contentful Paint - 웹 페이지 내 가장 큰 의미있는 정보가 보여지는 순간까지의 시간
- TBT : Total Blocking Time - 동기 실행 시 멈춘 시간들
- TTI : Time to Interactive - JS 자바스크립트가 모두 동작가능한 상태로 준비 완료되기까지의 시간
- TTI : Time to Interactive 완료된 바로 다음에 FCP : First Contentful Paint
- FID : First Input Delay - 이벤트 버튼 등을 누르고 그 이벤트 반영이 시작하기까지의 지연 시간
- ex ) '뭐야 이 버튼 왜 안돼?' 이러면서 반복적으로 버튼을 누르는 동생
(와.. 정말 Chill하다..)