인프런 짐코딩 강의를 듣고 정리한 내용입니다.
javascript를 이용해 페이지를 이동시키는 것 보다 RouterLink를 사용하면 앵커링 되기 때문에 검색엔진 최적화가 된다고 강사님께서 말씀하셔서 그 내용에 대해 정리해 보겠습니다.
RouterLink와 일반 자바스크립트 페이지 이동 차이
일반적으로 자바스크립트를 이용해 페이지를 이동하는 방식은 window.location.href 또는 window.location.replace 같은 방법으로 페이지를 전환합니다. 예를 들어, 아래와 같은 코드가 있습니다.
window.location.href = '/new-page';이 방식은
- 서버 사이드 렌더링처럼 전체 페이지를 새로 고침하며 이동합니다. - 자바스크립트 기반의 페이지 전환은 검색 엔진 크롤러가 링크를 제대로 이해하지 못할 수 있습니다.
이는 검색 엔진의 동작 방식 때문입니다. 검색 엔진 크롤러는 자바스크립트를 실행하지 않거나 제한된 수준으로만 실행하므로 자바스크립트로만 페이지 이동을 처리하는 경우, 크롤러는 자바스크립트가 실행되기 전에 로드된 초기 HTML만 인식하게 됩니다.
RouterLink 사용의 장점
Nuxt.js에서 제공하는 RouterLink는 기본적으로 Vue Router의 router-link 컴포넌트를 사용하여 페이지를 이동시키며, 이 컴포넌트는 내부적으로 HTML의 a 태그로 변환됩니다.
예를 들어 아래의 코드가
<template>
<RouterLink to="/new-page">Go to New Page</RouterLink>
</template>아래의 형태로 렌더링 됩니다.
<a href="/new-page">Go to New Page</a>검색 엔진 최적화와 앵커링(Anchoring)
a 태그와 같이 링크가 있는 요소가 검색엔진 크롤러에 의해 앵커로 인식됩니다. 검색엔진 크롤러는 a 태그를 인식하여 해당 링크가 가리키는 페이지를 크롤링하거나 순위를 매기고, 페이지 간의 관계를 분석할 수 있습니다. 따라서, 자바스크립트를 이용한 화면 이동 보다 RouterLink를 이용한 링크 이동이 검색 엔진 최적화에 도움이 됩니다.
추가적인 이점
Nuxt.js는 기본적으로 서버사이드 렌더링(SSR)을 지원합니다. 이 때문에 RouterLink로 페이지를 이동할 때, 검색엔진 크롤러는 페이지의 전체 콘텐츠를 SSR을 통해 바로 읽을 수 있습니다. SSR을 통해 완전히 렌더링된 페이지는 검색엔진이 더 쉽게 이해하고 인덱싱할 수 있습니다.
