mason
mason-log.

mason

mason.

안녕하세요. mason 입니다.

html

SEO Basics.

프론트가 챙기는 SEO 기본. 크롤링, 메타 태그, 시맨틱, Core Web Vitals.

SEO(Search Engine Optimization)는 검색 결과에 잘 노출되도록 페이지를 만드는 일이다. 프론트 관점에서는 크롤러가 읽고, 사용자가 머무를 수 있는 HTML을 제공하는 게 핵심이다.

🔍 크롤링과 인덱싱

크롤 렌더 인덱스 검색 결과 파이프라인

  • 검색 봇이 URL을 요청한 뒤 HTML을 파싱하고, 링크를 따라가며 문서를 모은다.
  • 빈 껍데기 HTML + 전부 클라이언트 렌더만 있으면, 봇이 본문을 못 볼 수 있다. (CSR 한계)
  • 공개 콘텐츠는 SSR / SSG처럼 초기 HTML에 본문이 있는 편이 안전하다.

✅ HTML에서 챙길 것

  • title: 탭, 검색 결과에 나오는 제목. 페이지마다 유일하게.
  • meta description: 검색 스니펫에 쓰일 수 있는 요약.
  • heading 계층
    • h1은 페이지당 하나
    • h2 → h3 순으로 맞춤
    • 스타일만 맞추려고 단계를 건너뛰지 않기
  • 시맨틱 태그: main, article, nav — 구조가 곧 문서 이해다.
  • 이미지 alt: 이미지 검색, 접근성과도 겹친다.
  • 링크 텍스트: "여기 클릭"보다 내용이 드러나는 앵커, 의미 있는 URL.
<head>
  <title>렌더링 타입 (CSR, SSR, SSG, ISR).</title>
  <meta name="description" content="HTML을 언제 만드는지로 나눈 렌더링 타입 정리." />
  <link rel="canonical" href="https://example.com/docs/web-rendering-strategies" />
</head>

🔗 Open Graph / 공유

  • og:title, og:description, og:image — 카톡, 슬랙 미리보기.
  • Twitter Card도 같은 계열이다.
  • 공유 이미지는 절대 URL이 안전하다.

📈 기술 SEO와 성능

  • Core Web Vitals (LCP, INP, CLS)가 순위에 영향을 줄 수 있다.
    • 관련: Web Vitals, Lighthouse 문서
  • robots.txt, sitemap.xml은 사이트 단위 설정이다.
  • canonical로 중복 URL을 하나로 모은다.
  • SPA라면 클라이언트 라우트마다 메타를 갱신할지, 서버에서 내려줄지 미리 정한다. (Next.js Metadata API 등)

🚫 프론트가 하지 않는 것

  • 키워드 도배, 숨김 텍스트, 링크 팜 — 페널티 위험이 있다.
  • 콘텐츠 품질, 백링크 전략은 SEO/콘텐츠 영역 비중이 크다.
  • 프론트는 전달 가능한 마크업과 성능에 집중하면 된다.

🔗 참고 자료