구조·마크업 · 공식 문서
크롤링 가능한 링크, a href와 onclick 버튼 판단 기준
구글은 대개 href 속성이 있는 <a> 요소만 링크로 크롤링한다고 적었습니다. href 없이 onclick 이나 버튼 클릭으로만 움직이는 링크는 URL을 안정적으로 뽑아내지 못하므로, 이동하는 링크는 <a href="실제 URL"> 로 둡니다.
화면에서는 똑같이 눌리는 메뉴라도 코드 모양에 따라 크롤러에게는 링크가 아닐 수 있습니다. 구글은 링크로 새 페이지를 찾고, 페이지의 관련성을 판단하는 신호로도 씁니다.
그래서 확인할 것은 클릭이 되는지가 아니라 HTML에 무엇이 남는지입니다. 링크 모양을 원문 예로 판단하고, 고치는 순서를 정리했습니다.
발견 01
구글이 대개 크롤링하는 링크는 href 속성이 있는 <a> 요소이고, 자바스크립트로 넣어도 같습니다
Generally, Google can only crawl your link if it's an <a> HTML element (also known as anchor element) with an href attribute.
일반적으로 구글은 href 속성이 있는 <a> HTML 요소(앵커 요소)인 링크만 크롤링할 수 있다.
| 항목 | 공식 문서 원문 |
|---|---|
| 다른 모양 | Most links in other formats won't be parsed and extracted by Google's crawlers.다른 모양의 링크는 대부분 구글 크롤러가 분석해 뽑아내지 않는다. |
| href 없는 링크 | Google can't reliably extract URLs from <a> elements that don't have an href attribute or other tags that perform as links because of script events.href 속성이 없는 <a> 요소나, 스크립트 이벤트로 링크처럼 동작하는 다른 태그에서는 구글이 URL을 안정적으로 뽑아내지 못한다. |
| 자바스크립트로 넣은 링크 | Links are also crawlable when you use JavaScript to insert them into a page dynamically as long as it uses the HTML markup shown above.자바스크립트로 페이지에 동적으로 넣은 링크도 위 HTML 마크업을 쓰면 크롤링할 수 있다. |
| DOM 에 넣은 링크 | It's fine to use JavaScript to inject links into the DOM, as long as such links follow the best practices for crawlable links.크롤링 가능한 링크 권장사항을 따르기만 하면 자바스크립트로 DOM 에 링크를 넣어도 괜찮다. |
발견 02
판단표 9가지 중 4가지는 그대로 두고, 5가지는 a href 로 고칩니다
| 코드 | 판단 | 고칠 것 |
|---|---|---|
| <a href="https://example.com"> | 권장 | 그대로 둡니다 |
| <a href="/products/category/shoes"> | 권장(상대 경로) | 그대로 둡니다 |
| <a href="/products/category/shoes" onclick="javascript:goTo('shoes')"> | 권장(href 가 있으면 onclick 을 함께 써도 됨) | 그대로 둡니다 |
| <a href="/products.php?id=123"> | 권장(매개변수 URL) | 그대로 둡니다 |
| <a routerLink="products/category"> | 비권장 | 렌더링 결과에 href 가 생기는지 보고, 없으면 href 를 출력하게 고칩니다 |
| <span href="https://example.com"> | 비권장 | <a href> 로 바꿉니다 |
| <a onclick="goto('https://example.com')"> | 비권장 | href 에 실제 URL을 넣고 onclick 은 남겨도 됩니다 |
| <a href="javascript:goTo('products')"> | 비권장(URL로 풀리지 않음) | href 를 /products 같은 실제 경로로 바꿉니다 |
| <button onclick="location.href='/products'"> | 스크립트 이벤트로만 움직이는 링크 | 이동이 목적이면 <a href="/products"> 로 바꿉니다 |
Not recommended (but Google may still attempt to parse this):
비권장(구글이 그래도 분석을 시도할 수는 있음):
비권장 모양도 구글이 읽어 보려 할 수는 있다고 적혀 있습니다. 다만 읽을지 말지를 크롤러에게 맡기는 셈이라, 중요한 메뉴는 권장 모양으로 둡니다.
onclick 자체가 문제는 아닙니다. href 에 실제 URL이 있으면 onclick 을 함께 써도 권장 예에 들어갑니다.
href 값도 봅니다. 크롤러가 요청을 보낼 수 있는 실제 URL이어야 하므로, javascript: 로 시작하는 값은 /products 같은 경로로 바꿉니다.
발견 03
확인 순서는 6단계이고, 판단은 소스가 아니라 렌더링된 HTML에서 합니다
| 순서 | 할 일 | 공식 문서 원문 |
|---|---|---|
| 1 | 중요한 페이지마다 사이트 안 다른 페이지에서 링크가 하나 이상 오는지 정합니다 | Every page you care about should have a link from at least one other page on your site.중요한 페이지마다 사이트의 다른 페이지 하나 이상에서 링크가 있어야 합니다. |
| 2 | URL 검사 도구로 렌더링된 HTML을 열어 메뉴·목록 링크를 찾습니다 | If you are using JavaScript to insert anchor text, use the URL Inspection Tool to make sure it's present in the rendered HTML.자바스크립트로 앵커 텍스트를 넣는다면 URL 검사 도구로 렌더링된 HTML에 그 글자가 있는지 확인한다. |
| 3 | href 가 없는 <a>, 클릭 이벤트로만 움직이는 요소를 표시합니다 | Google can't reliably extract URLs from <a> elements that don't have an href attribute or other tags that perform as links because of script events.href 속성이 없는 <a> 요소나, 스크립트 이벤트로 링크처럼 동작하는 다른 태그에서는 구글이 URL을 안정적으로 뽑아내지 못한다. |
| 4 | href 값이 javascript: 처럼 실제 URL로 풀리지 않는 것을 표시합니다 | Make sure that the URL in your <a> element resolves into an actual web address (meaning, it resembles a URI) that Google crawlers can send requests to, for example:<a> 요소의 URL은 구글 크롤러가 요청을 보낼 수 있는 실제 URL(URI 모양)로 풀려야 한다. 예: |
| 5 | 표시한 링크를 <a href="실제 URL"> 로 고칩니다. 자바스크립트로 넣어도 이 모양이면 됩니다 | Links are also crawlable when you use JavaScript to insert them into a page dynamically as long as it uses the HTML markup shown above.자바스크립트로 페이지에 동적으로 넣은 링크도 위 HTML 마크업을 쓰면 크롤링할 수 있다. |
| 6 | 이미지 링크에는 alt 를 적고, 고친 뒤 렌더링된 HTML을 다시 봅니다 | For images as links, Google uses the alt attribute of the img element as anchor text, so be sure to add descriptive alt text to your images:이미지 링크는 img 요소의 alt 속성을 앵커 텍스트로 쓰므로, 이미지에 설명하는 alt 를 넣는다. |
자바스크립트가 링크를 그리는 사이트는 처음 받은 HTML에 링크가 없을 수 있습니다. URL 검사 도구의 렌더링된 HTML이 구글이 실제로 보는 모양에 가깝습니다.
링크 문구 쓰는 법은 「앵커 텍스트」 편에, 링크 구조 전체는 「내부 링크」 편에 자세히 적었습니다.
발견 04
B2B·B2C·B2G 사이트마다 크롤러가 놓치는 링크 자리가 다릅니다
예시 ① 제품 카탈로그를 둔 장비 제조사 사이트(B2B)
제품군 메뉴가 <button> 이고 클릭하면 스크립트가 상세 페이지로 보냅니다. 렌더링된 HTML에 href 가 없어 상세 페이지 수백 개가 링크로 발견되지 못할 수 있습니다.
메뉴를 <a href="/products/pumps"> 로 바꾸고, 펼침 효과는 onclick 으로 남깁니다.
예시 ② 상품 목록을 무한 스크롤로 띄우는 쇼핑몰(B2C)
상품 카드를 누르면 onclick 으로만 상세 화면이 열립니다. 카드 전체를 <a href="상품 URL"> 로 감싸면 화면 동작은 그대로 두고 링크가 생깁니다.
카드 안 이미지가 링크라면 alt 에 상품 이름을 적습니다.
예시 ③ 게시판 목록을 스크립트로 여는 공공기관 누리집(B2G)
공지 목록의 제목이 <a href="javascript:view(123)"> 모양입니다. href 값이 URL로 풀리지 않는 모양이라, 공지 상세 페이지는 목록 링크로 발견되기 힘든 상태입니다.
유지보수 과업에 「목록 링크를 실제 상세 URL로」를 넣고, 납품 때 렌더링된 HTML 화면으로 확인합니다.
그럼 우리 사이트 링크는 어떤 순서로 확인하나요?
- 홈·메뉴·목록 페이지처럼 다른 페이지로 보내는 페이지를 먼저 고릅니다.
- 서치 콘솔 URL 검사 도구에서 그 페이지의 렌더링된 HTML을 엽니다.
- href 가 없는 <a>, <button>·<span> 링크, javascript: 로 시작하는 href 를 찾습니다.
- 위 판단표의 고칠 모양 5가지를 <a href="실제 URL"> 로 바꿉니다.
- 고친 뒤 같은 도구로 다시 렌더링된 HTML을 보고, 중요한 페이지마다 링크가 하나 이상 오는지 확인합니다.
조사 방법
- Google Search Central 「Link best practices for Google」 (문서 수정일 2025-12-10) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/links-crawlable
- Google Search Central 「Understand JavaScript SEO Basics」 (문서 수정일 2026-03-04) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics
- 판단표 9가지 중 8가지는 구글 문서의 예를 그대로 옮긴 것이고, <button> 줄은 문서 설명을 적용해 더한 편집 판단입니다.
- 확인 순서 6단계는 두 문서가 적은 내용을 확인하는 차례로 묶은 것입니다. 묶는 방식은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 원문은 영어판(hl=en)이고, 도구 이름은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다.