구조·마크업 · 공식 문서
해시 URL SEO, 경로로 바꿀 화면 판단 기준
다른 페이지로 보지 않습니다. 구글은 URL 프래그먼트를 대체로 지원하지 않고, 네이버는 수집할 때 # 뒤를 지웁니다. 목차 이동처럼 내용이 그대로인 # 는 두고, # 뒤에서 다른 화면이 그려진다면 History API 로 화면마다 경로를 만듭니다.
SPA로 만든 사이트는 메뉴를 눌러도 URL의 # 뒤만 바뀌는 경우가 많습니다. 화면은 여러 개인데 검색 결과에는 첫 화면 하나만 보입니다.
# 를 전부 걷어낼 일은 아닙니다. 목차 이동처럼 문제없는 # 도 있어서, 어느 # 를 경로로 바꿀지 기준이 필요합니다.
발견 01
구글과 네이버 모두 # 뒤가 다른 URL을 다른 페이지로 보지 않습니다
| 검색엔진 | # 를 다루는 방식 | 공식 문서 원문 |
|---|---|---|
| 구글 | URL 프래그먼트는 대체로 지원하지 않습니다. | Don't use fragments to change the content of a page, as Google Search generally doesn't support URL fragments. If you're using JavaScript to change content, use the History API instead.구글 검색은 대체로 URL 프래그먼트를 지원하지 않으므로, 프래그먼트로 페이지 내용을 바꾸지 말라. 자바스크립트로 내용을 바꾼다면 History API 를 쓰라. |
| 구글 | # 가 붙은 URL을 캐노니컬로 지정하지 말라고 적었습니다. | Don't specify a URL fragment as canonical, as Google generally doesn't support URL fragments.구글은 대개 URL 프래그먼트(# 뒷부분)를 지원하지 않으므로 프래그먼트를 표준으로 지정하지 않는다. |
| 네이버 | 수집 대상 URL을 해석할 때 # 뒤를 지웁니다. | 네이버 검색로봇은 수집 대상 URL 을 해석하는 과정에서 fragment 부분을 제거합니다. |
| 네이버 | 성격이 다른 콘텐츠는 독립된 URL로 만들라고 적었습니다. | 부분 식별자(fragment)는 검색엔진이 해석하지 않기 때문에 콘텐츠의 성격이 다른 페이지는 독립된 URL로 구축합니다. |
그래서 /#/products 와 /#/services 는 검색엔진에게 / 하나입니다. 화면이 몇 개든 색인 후보는 # 앞의 URL 하나로 모입니다.
캐노니컬도 같습니다. # 가 붙은 URL을 대표로 적으면 구글이 그 값을 쓸 수 없으므로 # 를 뺀 URL을 적습니다.
발견 02
# 를 둘지 바꿀지는 6가지 상황으로 가르고, 그중 5가지는 경로로 바꿉니다
| 상황 | URL 예 | 판단 | 할 일 | 공식 문서 원문 |
|---|---|---|---|---|
| 같은 페이지 안에서 목차·절로 이동 | /guide#price | 그대로 둠 | 그대로 둡니다. 내용은 그대로이고 보이는 위치만 옮겨집니다. | Clicking a featured snippet takes the user directly to the section of the page that appeared in the featured snippet. Scrolling to the position that appeared in the snippet happens automatically, without any additional annotation by the site.추천 스니펫을 누르면 스니펫에 나온 절로 바로 이동한다. 그 위치로 스크롤하는 것은 사이트가 따로 표시하지 않아도 자동으로 된다. |
| 메뉴를 누르면 # 뒤만 바뀌고 다른 화면이 그려짐 | /#/products | 경로로 바꿈 | History API 로 /products 같은 경로를 만듭니다. | To ensure that Googlebot can parse and extract your URLs, don't use fragments to load different page content.Googlebot 이 URL을 파싱하고 추출할 수 있게, 다른 페이지 콘텐츠를 불러오는 데 프래그먼트를 쓰지 말라. |
| 검색에 따로 나와야 할 상품·서비스 화면이 # 뒤에 있음 | /#/service/maintenance | 경로로 바꿈 | 화면마다 독립된 경로를 둡니다. | 부분 식별자(fragment)는 검색엔진이 해석하지 않기 때문에 콘텐츠의 성격이 다른 페이지는 독립된 URL로 구축합니다. |
| #! 로 시작하는 옛 AJAX 크롤링 방식 URL | /#!/notice/12 | 경로로 바꿈 | 경로로 바꾸고, 옛 링크는 새 경로로 이어지게 합니다. | The AJAX-crawling scheme has been deprecated since 2015, so you can't rely on URL fragments to work with Googlebot.AJAX 크롤링 방식은 2015년부터 지원이 중단됐으므로, Googlebot 에서 # 조각 URL이 동작한다고 기대할 수 없다. |
| 링크가 href 없이 클릭 이벤트로만 화면을 바꿈 | <a onclick="go('products')"> | 경로로 바꿈 | <a href="/products"> 처럼 실제 경로를 href 에 적습니다. | Google can only discover your links if they are <a> HTML elements with an href attribute.구글은 href 속성이 있는 <a> HTML 요소만 링크로 발견할 수 있다. |
| 캐노니컬 태그에 # 가 붙은 URL을 적음 | rel="canonical" href="/guide#top" | 경로로 바꿈 | # 를 뺀 URL로 적습니다. | Don't specify a URL fragment as canonical, as Google generally doesn't support URL fragments.구글은 대개 URL 프래그먼트(# 뒷부분)를 지원하지 않으므로 프래그먼트를 표준으로 지정하지 않는다. |
To ensure that Googlebot can parse and extract your URLs, don't use fragments to load different page content.
Googlebot 이 URL을 파싱하고 추출할 수 있게, 다른 페이지 콘텐츠를 불러오는 데 프래그먼트를 쓰지 말라.
목차 이동 # 를 두는 근거는 구글의 동작에 있습니다. 추천 스니펫을 누르면 구글이 사이트의 별도 표시 없이 해당 절로 스크롤합니다.
즉 페이지 안 위치는 검색엔진이 따로 처리하고, 사이트는 페이지 단위 URL만 제대로 두면 됩니다.
발견 03
History API 로 바꾸면 화면마다 URL이 생기고, 그 URL을 서버가 직접 돌려줘야 합니다
| 항목 | # 방식 | History API 방식 |
|---|---|---|
| 링크 | <a href="#/products"> | <a href="/products"> |
| 화면 전환 | hashchange 이벤트로 # 뒤를 읽어 그림 | 클릭을 가로채 그린 뒤 history.pushState() 로 URL을 바꿈 |
| 크롤러가 보는 URL | # 앞까지 하나 | 화면마다 하나씩 |
| URL을 바로 열었을 때 | 첫 화면이 열림 | 서버가 그 경로의 화면을 돌려줘야 함 |
For single-page applications with client-side routing, use the History API to implement routing between different views of your web app.
클라이언트 측 라우팅을 쓰는 단일 페이지 애플리케이션은 웹 앱의 화면 사이 이동을 History API 로 구현하라.
링크는 href 에 실제 경로가 있는 <a> 로 둡니다. 구글은 href 가 있는 <a> 에서만 링크를 찾는다고 적었습니다.
경로를 만든 뒤에는 브라우저에 /products 를 바로 입력해도 같은 화면이 열려야 합니다. 서버가 그 경로에 200과 화면을 돌려줘야 크롤러가 읽습니다.
발견 04
같은 # 라도 B2B·B2C·B2G 사이트마다 경로로 바꿀 화면이 다릅니다
예시 ① 장비 제조사의 제품 소개 사이트(B2B)
제품군을 탭으로 나누고 /#/pump, /#/valve 로 전환했습니다. 구매 담당자가 치는 제품군 이름마다 들어올 페이지가 없었습니다.
제품군마다 /products/pump 같은 경로를 만들고, 제품 사양표 안의 #spec 같은 절 이동은 그대로 둡니다.
예시 ② 상품 필터를 # 로 처리한 쇼핑몰(B2C)
카테고리 페이지에서 색상·가격 필터를 누르면 # 뒤만 바뀌었습니다. 필터 결과를 검색에 따로 내보낼 계획이 없다면 카테고리 페이지 하나로 읽혀도 손해가 적습니다.
반면 상품 상세가 /#/item/123 이라면 상품마다 경로가 필요합니다. 필터 URL을 다루는 법은 「URL 파라미터」 편에 자세히 적었습니다.
예시 ③ 민원 안내를 # 메뉴로 바꾸는 공공기관 누리집(B2G)
민원 종류별 안내가 /#/guide/1, /#/guide/2 로 열렸습니다. 시민이 민원 이름으로 검색하면 첫 화면만 나옵니다.
안내마다 경로를 만들고, 게시판 본문의 「맨 위로」 같은 앵커는 그대로 둡니다.
그럼 우리 사이트의 # 는 어떤 순서로 가르나요?
- 메뉴와 주요 링크를 차례로 눌러 URL에서 # 뒤만 바뀌는 화면을 목록으로 적습니다.
- 목록의 화면마다 위 표의 6가지 상황 중 어디에 해당하는지 표시합니다.
- 「경로로 바꿈」인 화면은 History API 경로와 <a href> 링크로 바꾸고, 그 URL을 브라우저에 바로 입력해 열리는지 봅니다.
- 옛 # 링크가 외부에 퍼져 있다면 첫 화면 스크립트에서 # 뒤를 읽어 새 경로로 넘기는 처리를 둡니다.
- 캐노니컬과 사이트맵에 # 가 붙은 URL이 없는지 확인합니다. SPA 전체 점검은 「리액트 SPA SEO」 편에 자세히 적었습니다.
조사 방법
- Google Search Central 「URL structure best practices for Google Search」 (문서 수정일 2026-10-21) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/url-structure
- Google Search Central 「Understand the JavaScript SEO basics」 (문서 수정일 2026-03-04) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics
- Google Search Central 「Fix Search-related JavaScript problems」 (문서 수정일 2025-12-18) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript
- Google Search Central 「How to specify a canonical URL with rel="canonical" and other methods」 (문서 수정일 2026-07-10) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central 「Featured snippets and your website」 (문서 수정일 2025-12-10) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/appearance/featured-snippets
- 네이버 서치어드바이저 「자바스크립트 검색 최적화」 · 최종 확인일 2026-10-25 · https://searchadvisor.naver.com/guide/seo-advanced-javascript
- 네이버 서치어드바이저 「검색 친화적인 URL 구축하기」 (문서 수정일 2021-03-24) · 최종 확인일 2026-10-25 · https://searchadvisor.naver.com/guide/seo-advanced-url
- 판단 기준 6가지는 위 문서들이 프래그먼트·링크·캐노니컬에 대해 적은 것을 상황별로 묶은 것입니다. 묶는 방식과 「할 일」 칸은 편집 판단입니다.
- 옛 # 링크를 새 경로로 넘기는 처리와 서버 응답 조건은 공식 문서 문장이 아니라 구현상 필요한 일로 적었습니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 원문은 영어판(hl=en)이고, 도구·보고서 이름은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다. 네이버 원문은 한국어 그대로입니다.