사이트 구축 & 기술 SEO

사이트 구축 레이어(Site Build & Technical SEO)는 하나의 문제를 해결합니다: 검색 엔진이 당신의 페이지를 원활하게 찾고, 크롤링하고, 이해하고, 색인하도록 만드는 것입니다. 이 레이어는 키워드 리서치 다음, 콘텐츠 제작 이전에 위치합니다. 아무리 정확하게 리서치하고 아무리 콘텐츠를 잘 써도, 크롤러가 읽지 못하거나 URL이 엉망이거나 페이지가 3초 동안 빈 화면일 만큼 느리다면 순위는 논할 수조차 없습니다. 좋은 소식은: 이 레이어가 바로 코드를 쓸 줄 아는 사람이 가장 유리한 전장이라는 점입니다. 대다수의 「기술 SEO 문제」는 본질적으로 설정 파일, HTTP 헤더, HTML 태그, 성능 최적화입니다. 모두 당신에게 익숙한 것들이죠. 아래는 이 레이어의 개요입니다.

도메인과 호스팅（Domain & Hosting）

무엇인가: 도메인은 사이트의 정체성(Domain)이고, 호스트/서버는 페이지의 응답 속도와 가용성(Hosting)을 결정합니다.
왜 중요한가: 응답이 느리거나 잦은 다운타임은 크롤링 효율과 사용자 경험을 직접적으로 떨어뜨립니다. HTTPS는 기본 순위 신호입니다.
어떻게 하나:
- 짧고, 기억하기 쉽고, 주제와 관련된 도메인을 고르세요. 새 도메인에는 「도메인 나이」 혜택이 없지만 과거의 부담도 없습니다.
- 사이트 전체에 HTTPS를 강제하고, http://와 www 없는/있는 버전을 하나의 버전으로 301 리다이렉트로 통일해 여러 사이트로 간주되는 것을 피하세요.
- 가능하면 CDN이 적용되고 타깃 사용자와 가까운 데이터센터에 위치한 호스트를 우선하세요. 첫 바이트까지의 시간(TTFB, Time To First Byte)은 낮을수록 좋습니다.

🧑‍💻 개발자 관점: curl -I https://당신의-도메인 으로 응답 헤더를 확인하세요. 상태 코드가 200인지, strict-transport-security가 있는지, 그리고 예상치 못한 x-robots-tag: noindex가 없는지 확인하세요.

사이트 구조（Site Architecture）

URL 구조: example.com/seo/technical-seo 처럼 의미가 담긴, 소문자, 하이픈으로 단어를 구분한 경로를 사용하고, ?id=123&cat=7 같은 매개변수 더미를 피하세요.
계층（Hierarchy）: 중요한 페이지는 가급적 홈페이지에서 3번의 클릭 이내로 도달할 수 있게 하세요. 계층이 얕을수록 권위 전달과 크롤링이 원활합니다.
내부 링크와 토픽 클러스터（Internal Links & Topic Cluster）: 하나의 「필러 페이지(Pillar Page)」로 특정 주제를 총괄하고, 여러 「클러스터 페이지(Cluster Pages)」가 그 주위에서 서로 링크를 걸어 검색 엔진에 주제 권위를 표현하세요.
어떻게 하나: 내비게이션과 빵부스러기(Breadcrumb) 구조를 명확하게 유지하고, 내부 링크의 앵커 텍스트(Anchor Text)는 「여기를 클릭」이 아니라 설명이 담긴 키워드를 사용하세요.

💡 팁: 사이트를 한 그루의 나무라고 상상해 보세요. 홈페이지는 뿌리, 카테고리는 가지, 글은 잎입니다. 크롤러는 내부 링크를 따라 「나무를 타고 오릅니다」. 끊어진 링크는 곧 부러진 가지입니다.

기술 SEO 체크리스트

이것이 이 레이어의 핵심입니다. 항목별로 하나씩 대조하세요:

항목	역할	핵심 포인트
`robots.txt`	크롤러에게 어떤 경로를 크롤링할 수 있는지 알림	사이트 루트 디렉터리에 둘 것. 페이지를 「숨기는」 용도로 쓰지 말 것, 색인을 막지 않음
`sitemap.xml`	색인되기를 원하는 URL 목록	Google Search Console에 제출. 색인 가능한 페이지만 넣을 것
canonical	중복 콘텐츠의 「대표」를 지정	`<link rel="canonical" href="...">` 로 선호하는 URL을 가리킬 것
hreflang	다국어/다지역 버전 대응	`<link rel="alternate" hreflang="zh-CN" href="...">` 사용, 양방향 참조 필요
구조화된 데이터（Schema）	검색 엔진이 콘텐츠 유형을 이해하게 함	JSON-LD 사용, 리치 결과(Rich Results)를 얻을 수 있음

모바일 우선 색인（Mobile-First Indexing）: Google은 주로 모바일 버전 페이지로 색인하고 순위를 매깁니다. 모바일의 콘텐츠, 구조화된 데이터가 데스크톱과 일치하도록 하세요.
핵심 웹 지표（Core Web Vitals）: LCP(최대 콘텐츠 렌더링 ≤ 2.5s), INP(상호작용에서 다음 렌더링까지 ≤ 200ms), CLS(누적 레이아웃 이동 ≤ 0.1).
크롤링 예산과 중복 콘텐츠（Crawl Budget & Duplicate Content）: canonical, 매개변수 처리, 합리적인 내부 링크를 활용해 크롤러가 의미 없는 중복 URL에 할당량을 낭비하지 않도록 하세요.

robots.txt 최소 예시(sitemap은 절대 주소를 사용하는 점에 주의):

User-agent: *
Allow: /
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml

한 편의 글에 대한 구조화된 데이터(JSON-LD) 골격:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "技术 SEO 入门",
  "author": { "@type": "Person", "name": "你的名字" },
  "datePublished": "2026-06-18"
}
</script>

🧑‍💻 개발자 관점: 이런 파일들을 손으로 쓰다 실수하지 마세요. 본 사이트의 robots/sitemap 생성기와 Schema 생성기로 바로 생성한 뒤, Google 리치 결과 테스트 도구로 검증하세요.

사이트 구축 도구 선정（CMS / Framework）

도구마다 SEO에 대한 「기본 친화도」 차이가 큽니다:

WordPress: 생태계가 성숙했고, Yoast/Rank Math 같은 플러그인이 meta, sitemap, Schema를 모두 처리해 줍니다. 단점은 성능을 캐시와 최적화 플러그인으로 메워야 한다는 점입니다.
Webflow: 시각적 사이트 구축 방식이며, SEO 필드(title, canonical, hreflang)를 바로 설정할 수 있어 서버를 만지고 싶지 않은 사람에게 적합합니다. 다만 커스텀 로직은 제한됩니다.
Next.js: React 프레임워크로 SSR/SSG를 지원하며 제어력이 가장 강합니다. 다만 next/head, generateMetadata, 동적 sitemap 라우트로 SEO를 직접 「채워 넣어야」 하며, 그렇지 않으면 CSR은 기본적으로 크롤러에 친화적이지 않습니다.
Astro: 콘텐츠 사이트를 목표로 하며, 기본적으로 정적 HTML, 불필요한 JS 없음을 출력해 Core Web Vitals와 크롤링에 자연스럽게 부합합니다. 블로그/문서/SEO 사이트에 특히 편리합니다(본 사이트도 Astro를 사용).

⚠️ 주의: 순수 클라이언트 렌더링(CSR) 단일 페이지 앱은 첫 화면의 HTML이 빈 껍데기일 수 있습니다. 정적 생성(SSG)이나 서버 렌더링(SSR)을 우선해 크롤러가 완전한 콘텐츠를 받게 하세요.

📌 이 레이어는 공사 중

전체 튜토리얼(각 설정의 단계별 실습과 코드 예시 포함)은 현재 작성 중입니다. 기대해 주세요. 우선 아래 빠른 체크리스트로 기초를 단단히 다지세요:

사이트 전체에 HTTPS 강제, 모든 도메인 변형을 하나의 선호 URL로 301
robots.txt와 sitemap.xml 생성 및 제출(본 사이트의 생성기 사용 가능)
주요 페이지에 canonical 추가, 중복/페이지네이션 콘텐츠의 귀속 정리
JSON-LD로 글, 빵부스러기, 조직 정보에 구조화된 데이터 추가
Lighthouse를 한 번 실행해 LCP / INP / CLS 세 항목이 기준을 충족하는지 확인