SEO, 플랫폼이 먼저 설계되어야 합니다
검색 엔진 최적화(SEO)는 단순히 키워드를 잘 넣는 문제가 아닙니다. 검색 엔진이 페이지를 효율적으로 크롤링하고 색인화할 수 있도록 사이트의 구조 자체가 올바르게 설계되어 있어야 합니다. 그리고 그 설계를 플랫폼 차원에서 가장 잘 지원하는 도구가 바로 웹플로우입니다.
올인웹이 웹플로우를 메인 빌드 플랫폼으로 채택한 이유 중 하나도 바로 여기에 있습니다. SEO에 필요한 핵심 설정들이 별도 플러그인 없이 플랫폼 내에서 통합 관리됩니다.
사이트 구조 & 내비게이션 — Site Structure
SEO의 출발점은 명확한 사이트 구조입니다. 홈페이지에서 어떤 페이지든 세 번 이내의 클릭으로 도달할 수 있어야 사용자 경험과 크롤링 효율이 동시에 개선됩니다.
웹플로우에서 구조를 설계할 때
웹플로우의 네비게이션 바·푸터 컴포넌트를 활용하면 접근성이 기본 탑재된 일관된 메뉴 구조를 만들 수 있습니다. 카테고리 → 하위 카테고리로 이어지는 명확한 계층 구조를 페이지 폴더로 정의하고, 관련 콘텐츠를 잇는 내부 링크를 체계적으로 배치하는 것이 핵심입니다.
드롭다운 메뉴는 데스크톱과 모바일 양쪽에서 동작을 반드시 확인하세요. 검색 엔진 크롤러는 모바일 버전을 우선 색인(Mobile-first Indexing)하기 때문에 반응형 내비게이션 완성도가 SEO에 직결됩니다.
URL 구조 설계 — URL Architecture
URL은 사용자와 검색 엔진 모두에게 콘텐츠의 로드맵이 됩니다. 웹플로우에서는 정적 페이지의 슬러그를 페이지 설정에서, CMS 컬렉션의 슬러그는 컬렉션·항목 단위로 각각 관리할 수 있어 URL 체계를 세밀하게 제어할 수 있습니다.
CMS 컬렉션 항목을 생성하면 항목 이름 기반으로 슬러그가 자동 생성됩니다. 자동 생성 이후에는 간결성과 명확성을 기준으로 슬러그를 직접 수정하는 것을 권장합니다. 예: webflow-seo-guide처럼 짧고 의미 있는 형태로.
디렉터리 구조 설계 원칙
정적 페이지는 페이지 폴더를 중첩해 디렉터리·하위 디렉터리를 구성하며, CMS 컬렉션은 별도의 디렉터리 구조로 URL을 체계화할 수 있습니다. 단, 웹플로우는 현재 컬렉션과 페이지 폴더에 동일한 슬러그를 부여하는 기능을 지원하지 않으므로, 정적 콘텐츠와 동적 콘텐츠를 하나의 디렉터리 아래 혼용하는 구조는 설계 단계에서 배제해야 합니다.
301 리디렉션 — 기존 SEO 자산을 보호하는 방법
사이트 이전이나 페이지 슬러그 변경 시 리디렉션 설정이 누락되면 기존에 쌓아온 SEO 순위와 백링크 자산이 한꺼번에 손실됩니다. 301 리디렉션은 이전 URL의 SEO 가치를 새 URL로 이전하는 가장 확실한 방법입니다.
| 상황 | 리디렉션 필요 여부 | 권장 방식 |
|---|---|---|
| 사이트 이전 (플랫폼 교체) | 필수 | CSV 일괄 업로드 |
| 기존 페이지 슬러그 수정 | 필수 | 단일 규칙 수동 추가 |
| 하위 디렉터리 전체 이동 | 권장 | 와일드카드 리디렉션 |
| 기존 페이지를 새 콘텐츠로 교체 | 권장 | 단일 규칙 수동 추가 |
와일드카드 리디렉션으로 규칙 수를 최소화하세요
웹플로우는 리디렉션 규칙마다 manifest.json에 항목을 추가하는 방식으로 작동합니다.
규칙이 많아질수록 브라우저가 다운로드해야 하는 파일 크기가 커지므로,
하위 디렉터리를 한 번에 처리할 수 있는 와일드카드 리디렉션을 우선 적용하는 것이 성능상 유리합니다.
리디렉션 체인(A → B → C)은 SEO 점수와 로딩 속도 모두를 저하시킵니다. 규칙은 항상 단일 단계(A → C)로 유지하고, 내부 링크는 중간 리디렉션 URL이 아닌 최종 URL을 직접 가리키도록 정기적으로 점검하세요.
캐노니컬 태그 — 중복 콘텐츠 문제를 차단합니다
동일하거나 유사한 콘텐츠가 여러 URL에 노출될 경우,
검색 엔진은 어느 페이지를 대표 결과로 표시해야 할지 판단하지 못합니다.
캐노니컬 태그(rel="canonical")는 검색 엔진에 선호 URL을 명시적으로 알려줘
링크 가치를 하나로 통합하고 순위 하락을 방지합니다.
글로벌 캐노니컬 vs 페이지별 캐노니컬
웹플로우 사이트 설정에서 글로벌 캐노니컬 URL을 지정하면, 플랫폼이 각 페이지의 슬러그를 조합해 자체 참조 캐노니컬 태그를 자동으로 삽입합니다. 다국어·지역화 페이지처럼 예외 처리가 필요한 경우에는 페이지별 커스텀 코드로 태그를 수동 적용할 수 있습니다.
캐노니컬 URL 설정 시 URL 끝 슬래시(/)를 반드시 제외하세요.
슬래시가 포함되면 모든 하위 페이지 URL에 이중 슬래시(//contact)가 붙어
캐노니컬 태그가 의도한 대로 작동하지 않습니다.
사이트맵 & robots.txt — 크롤링 효율을 직접 설계합니다
사이트맵은 검색 엔진에게 사이트의 전체 구조를 알려주는 XML 파일입니다. 웹플로우는 사이트 게시 시 사이트맵을 자동으로 업데이트하며, 페이지 생성·삭제에 맞춰 동적으로 항목을 추가·제거합니다.
사이트맵 자동 생성 활용 시 주의사항
자동 생성 사이트맵에는 사이트의 모든 활성 페이지가 포함됩니다. 검색 결과에 노출되면 안 되는 페이지는 페이지 설정의 '사이트맵 색인 생성' 토글을 비활성화해 개별 제어할 수 있습니다. 또한, 사이트맵에는 기본 도메인이 반영되므로 기본 도메인 설정을 먼저 완료해야 크롤러가 301 오류 없이 페이지를 정상 색인합니다.
robots.txt — 크롤링 범위를 직접 정의하세요
웹플로우는 robots.txt 파일을 자동 생성하되, 포함할 지시문은 사이트 설정에서 직접 제어할 수 있습니다. 민감하거나 내부용 페이지를 검색 결과에서 배제해야 할 때 유용합니다.
robots.txt로 크롤링을 차단해도 색인화를 완전히 막을 수는 없습니다. 이미 외부에서 링크된 페이지는 크롤링 없이도 색인될 수 있습니다. 색인 제거가 목적이라면 robots.txt 대신 '사이트맵 색인 생성' 토글 또는 Google Search Console 삭제 도구를 사용하는 것이 정확합니다.
404 페이지 & SSL — 사용자 신뢰의 마지노선
잘 만든 404 페이지는 이탈을 막습니다
존재하지 않는 페이지에 도달했을 때 사용자가 마주하는 화면이 브랜드의 첫인상을 결정합니다. 기술적 오류 메시지 대신 브랜드 스타일에 맞는 안내 문구와 주요 페이지로 돌아갈 수 있는 명확한 CTA를 배치해야 합니다. 웹플로우의 커스텀 404 페이지 기능은 디자인 자유도와 CMS 연동을 모두 지원합니다.
HTTPS SSL — SEO와 신뢰의 기반
구글은 HTTPS를 SEO 순위 신호로 반영합니다. 웹플로우는 호스팅 플랜에 자동 SSL 인증서 발급 및 갱신이 포함되어 있어 별도 설정 없이 즉시 HTTPS 환경을 제공합니다. 커스텀 SSL 인증서가 필요한 경우 외부 CA에서 발급 후 직접 업로드할 수 있으나, 자동 갱신이 지원되지 않으므로 만료일 알림을 팀 내 별도 일정으로 관리하세요.
성능 최적화 — SEO & Performance
페이지 로딩 속도는 Google의 Core Web Vitals 지표와 직결됩니다. 웹플로우는 CSS, HTML, JS를 자동 최소화(minification)하는 기본 설정을 제공하지만, 사용자 정의 코드를 추가할 때는 다음 원칙을 지켜야 성능 저하를 방지할 수 있습니다.
| 스크립트 속성 | 동작 방식 | 권장 사용 케이스 |
|---|---|---|
async |
페이지와 병렬 로드, 준비되는 즉시 실행 | 분석 스크립트 등 독립적 코드 |
defer |
페이지와 병렬 로드, 페이지 완료 후 실행 | DOM 의존성이 있는 스크립트 |
| 없음 (기본) | 렌더링 차단 후 순차 실행 | 최소화 권장, 피해야 할 패턴 |
커스텀 코드 최적화 원칙
사이트 설정의 전역 코드 영역에 모든 스크립트를 몰아넣으면 관계없는 페이지에서도 불필요한 코드가 실행되어 성능에 직접 영향을 줍니다. 페이지별 설정 또는 태그 매니저를 활용해 스크립트가 실행되는 위치와 시점을 세밀하게 제어하세요. 서드파티 스크립트와 라이브러리는 꼭 필요한 것만, 최소한으로 운용하는 것이 핵심입니다.
결론 — 웹플로우는 SEO를 위해 설계된 플랫폼입니다
지금까지 살펴본 SEO 기능들 — 명확한 URL 구조, 301 리디렉션, 캐노니컬 태그, 자동 사이트맵, robots.txt, SSL, 성능 최적화 — 은 웹플로우에서 모두 플랫폼 내에서 통합 관리됩니다. 워드프레스처럼 별도 플러그인을 설치하거나 개발자의 도움을 기다릴 필요가 없습니다.
올인웹은 웹플로우 기반으로 SEO 설정까지 고려한 사이트 구조를 설계하고 구축합니다. 검색 엔진이 좋아하는 사이트, 그리고 사용자가 머무는 사이트를 함께 만들고 싶다면 지금 바로 올인웹에 문의해 주세요.
* 본 글은 올인웹 블로그 포스트 초안입니다. Webflow BLOG Posts 컬렉션의 Post(RichText) 필드에 그대로 옮겨 발행할 수 있도록 디자인 시스템 토큰(브랜드 컬러 #1dd7d7 · Pretendard · radius/spacing)을 기준으로 구성했습니다.
