구조·마크업 · 공식 문서
자바스크립트 메타 태그 변경, 태그별 구글 반영 기준
구글은 렌더링한 HTML로 색인하므로 자바스크립트로 넣은 title·메타 설명·캐노니컬도 읽습니다. 다만 캐노니컬은 원래 HTML과 다른 값으로 바꾸면 안 되고, 원래 HTML의 noindex 는 자바스크립트로 지워도 반영되지 않을 수 있어 서버 HTML에 두는 것이 안전합니다.
리액트·뷰 같은 프레임워크로 만든 사이트는 페이지 제목과 메타 설명을 자바스크립트가 나중에 채우는 경우가 많습니다. 페이지 소스 보기에는 비어 있는데 브라우저 탭에는 제목이 보입니다.
구글 문서는 이 경우를 태그마다 따로 적었습니다. 그대로 반영되는 태그가 있고, 원래 HTML 값이 우선하는 태그가 있습니다.
발견 01
구글은 렌더링한 HTML로 색인하지만, head 태그 4가지는 반영 조건이 서로 다릅니다
You can use JavaScript to set or change the meta description as well as the <title> element.
자바스크립트로 메타 설명과 <title> 요소를 정하거나 바꿀 수 있다.
| 태그 | 자바스크립트로 넣기 | 자바스크립트로 바꾸기 | 서버 HTML | 공식 문서 원문 |
|---|---|---|---|---|
| <title> | 반영(렌더링 뒤) | 반영(렌더링 뒤) | 페이지마다 서버 HTML에 둡니다 | You can use JavaScript to set or change the meta description as well as the <title> element.자바스크립트로 메타 설명과 <title> 요소를 정하거나 바꿀 수 있다. |
| 메타 설명(description) | 반영(렌더링 뒤) | 반영(렌더링 뒤) | 페이지마다 서버 HTML에 둡니다 | You can use JavaScript to set or change the meta description as well as the <title> element.자바스크립트로 메타 설명과 <title> 요소를 정하거나 바꿀 수 있다. |
| 캐노니컬(rel="canonical") | 반영, 원래 HTML에 없을 때만 | 원래 HTML과 다른 값으로 바꾸지 않음 | 가장 좋은 자리는 HTML | You can use JavaScript to set the canonical URL, but keep in mind that you shouldn't use JavaScript to change the canonical URL to something else than the URL you specified as the canonical URL in the original HTML. The best way to set the canonical URL is to use HTML, but if you have to use JavaScript, make sure that you always set the canonical URL to the same value as the original HTML.자바스크립트로 캐노니컬 URL을 정할 수는 있지만, 원래 HTML에 적은 캐노니컬 URL을 다른 URL로 바꾸면 안 됩니다. 가장 좋은 방법은 HTML로 정하는 것이고, 자바스크립트를 써야 한다면 늘 원래 HTML과 같은 값으로 정합니다. |
| robots 메타 태그(noindex) | 반영 | 원래 HTML의 noindex 를 지우는 것은 반영되지 않을 수 있음 | noindex 는 색인에서 뺄 페이지의 서버 HTML에만 둡니다 | When Google encounters the noindex tag, it may skip rendering and JavaScript execution, which means using JavaScript to change or remove the robots meta tag from noindex may not work as expected. If you do want the page indexed, don't use a noindex tag in the original page code.구글은 noindex 태그를 만나면 렌더링과 자바스크립트 실행을 건너뛸 수 있어, 자바스크립트로 noindex 를 바꾸거나 지워도 뜻대로 되지 않을 수 있습니다. 색인되길 원하는 페이지라면 원래 페이지 코드에 noindex 를 넣지 않습니다. |
구글은 렌더링된 HTML을 색인에 씁니다(원문: Google also uses the rendered HTML to index the page.) 그래서 <title> 과 메타 설명은 자바스크립트로 넣어도 읽힙니다.
그래도 서버 HTML에 두는 편이 낫습니다. 구글 스스로 서버 렌더링이나 프리렌더링을 권하고, 모든 크롤러가 자바스크립트를 실행하지는 못한다고 적었습니다.
Keep in mind that server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers, and not all bots can run JavaScript.
서버 렌더링이나 사전 렌더링은 여전히 좋은 방법이다. 사용자와 크롤러 모두에게 사이트가 빨라지고, 모든 크롤러가 자바스크립트를 실행하지는 못한다.
발견 02
캐노니컬과 noindex 2가지는 원래 HTML 값이 결과를 정합니다
| 상황 | 결과 | 공식 문서 원문 |
|---|---|---|
| 원래 HTML에 캐노니컬이 없고 자바스크립트로 넣음 | 렌더링할 때 읽음 | If you can't set the canonical URL in the HTML, then you can use JavaScript to set the canonical URL and leave it out of the original HTML. Google Search will pick up the injected canonical URL when rendering the page.HTML에 캐노니컬 URL을 넣을 수 없다면 자바스크립트로 넣고 원래 HTML에서는 뺄 수 있습니다. 구글은 페이지를 렌더링할 때 삽입된 캐노니컬 URL을 읽습니다. |
| 원래 HTML의 캐노니컬을 다른 값으로 바꿈 | 하지 말라고 적음 | You can use JavaScript to set the canonical URL, but keep in mind that you shouldn't use JavaScript to change the canonical URL to something else than the URL you specified as the canonical URL in the original HTML.자바스크립트로 캐노니컬 URL을 정할 수는 있지만, 원래 HTML에 적은 캐노니컬 URL을 다른 URL로 바꾸면 안 됩니다. |
| 자바스크립트가 캐노니컬을 하나 더 넣음 | 예상하지 못한 결과 | When using JavaScript to inject the rel="canonical" link tag, make sure that this is the only rel="canonical" link tag on the page. Conflicting or multiple rel="canonical" link tags may lead to unexpected results.자바스크립트로 캐노니컬 링크 태그를 넣을 때는 그 페이지에 캐노니컬 태그가 그것 하나뿐인지 확인합니다. 서로 다르거나 여러 개인 캐노니컬 태그는 예상하지 못한 결과를 낳을 수 있습니다. |
| 원래 HTML의 noindex 를 자바스크립트로 지움 | 렌더링을 건너뛰어 반영되지 않을 수 있음 | When Google encounters the noindex tag, it may skip rendering and JavaScript execution, which means using JavaScript to change or remove the robots meta tag from noindex may not work as expected.noindex 태그를 만나면 렌더링과 자바스크립트 실행을 건너뛸 수 있다. 그래서 자바스크립트로 noindex 를 바꾸거나 지우는 방식은 기대대로 동작하지 않을 수 있다. |
| 원래 HTML에 없던 noindex 를 자바스크립트로 넣음 | 반영 | You can use JavaScript to add a robots meta tag to a page or change its content.자바스크립트로 페이지에 robots 메타 태그를 넣거나 그 내용을 바꿀 수 있습니다. |
여기서 볼 것은 캐노니컬 값이 원래 HTML과 렌더링된 HTML에서 같은지, 그리고 하나뿐인지입니다. 두 HTML을 나란히 놓으면 바로 보입니다.
발견 03
네이버는 자바스크립트가 수집되어 있지 않으면 정적 HTML을 먼저 색인하고, 서버 렌더링을 권장합니다
자바스크립트가 수집되어 있지 않으면 정적인 HTML의 내용을 먼저 수집/분석하여 색인 처리합니다.
네이버는 SPA 사이트라도 HTML의 주요 영역은 서버에서 렌더링하라고 권장합니다(원문: 그러므로 SPA 사이트라도 HTML의 주요 영역 생성은 검색로봇이 잘 인식할 수 있도록 서버에서 렌더링 (Server Side Rendering)을 처리하는 것을 권장합니다.)
그래서 구글만 보고 자바스크립트로 head 태그를 채우면, 네이버에는 빈 제목이나 공통 제목이 먼저 들어갈 수 있습니다. 두 검색엔진을 함께 보려면 서버 HTML이 기준입니다. 렌더링 방식 고르기는 「SSR CSR SSG SEO 차이와 사이트별 선택 기준」 편에 자세히 적었습니다.
발견 04
같은 문제라도 B2B·B2C·B2G 는 어긋나는 태그가 다릅니다
예시 ① 솔루션 소개를 SPA 로 만든 B2B SaaS 사이트
모든 페이지의 서버 HTML <title> 이 회사 이름 하나이고, 자바스크립트가 기능별 제목으로 바꿉니다. 구글 결과에는 기능별 제목이 나오는데 네이버에는 회사 이름만 반복됩니다.
기능 페이지마다 서버에서 <title> 과 메타 설명을 내보내도록 바꿉니다. 자바스크립트의 제목 변경 코드는 같은 값을 쓰거나 지웁니다.
예시 ② 품절 상품에 noindex 를 거는 쇼핑몰(B2C)
상품 페이지 HTML에 noindex 를 기본으로 두고, 재고 API가 응답하면 자바스크립트로 지우는 구조입니다. 판매 중인 상품까지 색인에서 빠집니다.
기본값을 반대로 바꿉니다. 원래 HTML에는 noindex 를 두지 않고, 품절일 때만 서버나 자바스크립트로 noindex 를 넣습니다.
예시 ③ 게시판 글 URL에 파라미터가 붙는 공공기관 누리집(B2G)
공지 글 URL에 정렬·페이지 파라미터가 붙고, 자바스크립트가 캐노니컬을 하나 더 넣습니다. 렌더링된 HTML에 캐노니컬이 두 개입니다.
서버 HTML에서 파라미터를 뺀 URL 하나를 캐노니컬로 내보내고, 자바스크립트가 넣는 코드는 지웁니다.
그럼 우리 사이트의 head 태그는 어떤 순서로 점검하나요?
- 브라우저의 페이지 소스 보기로 서버가 보낸 HTML의 <title>·메타 설명·캐노니컬·robots 메타 태그를 적습니다.
- 서치 콘솔 URL 검사 도구의 실제 URL 테스트나 리치 결과 테스트로 렌더링된 HTML의 같은 태그를 적습니다.
- 두 값이 다른 태그를 위 판단 기준 표에 대 봅니다. 캐노니컬 값이 달라졌거나 원래 HTML에 noindex 가 있으면 먼저 고칩니다.
- 렌더링된 HTML에 rel="canonical" 이 두 개 이상이면 하나만 남깁니다.
- 네 태그를 서버 HTML에서 페이지마다 내보내도록 옮기고, 자바스크립트는 같은 값을 다시 쓰지 않게 정리합니다.
- 태그를 눈으로 확인하는 화면별 방법은 「메타 태그 확인 방법, head 태그 항목별 점검 순서」 편에 자세히 적었습니다.
조사 방법
- 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
- 네이버 서치어드바이저 「자바스크립트 검색 최적화」 · 최종 확인일 2026-10-25 · https://searchadvisor.naver.com/guide/seo-advanced-javascript
- 태그 4가지의 판단 기준은 위 문서들이 태그마다 적은 문장을 한 표로 묶은 것입니다. 묶는 방식은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 구글 원문은 영어판(hl=en)이고, 「URL 검사 도구」·「리치 결과 테스트」 같은 이름은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다. 네이버 원문은 한국어 그대로입니다.