Link태그 SEO

고백하자면, NextJS 환경에서 frontend 개발을 하고 있지만 React 라이브러리만을 사용할 때와 차이점을 명확하게 인지하고 있지 않고 있었다. 그 예로 페이지 이동 시 `window.location.href` 구문을 사용한다든지, 페이지 리로드 시 `window.location.reload()`구문을 사용하는 등이 그러하다. 요즘 다시 UI 개발을 하고 있는데 HTML의 `<a>`태그와 NextJS에서 제공하는 `<Link>` 태그가 혼동되어 정리해본다.

Link태그 SEO

---

<a> 태그

웹 페이지에서 하이퍼링크를 생성하는 데 사용되며, 검색 엔진 최적화 (SEO) 측면에서 아래와 같은 장점이 있다

 

• 크롤링과 인덱싱: 검색 엔진은 웹 페이지를 크롤링하여 색인화하는 프로세스를 수행하는데, `<a>` 태그를 사용하여 하이퍼링크를 정의하면 검색 엔진이 이를 감지하고 해당 링크를 따라가서 다른 페이지로 이동할 수 있고, 이를 통해 웹 페이지가 크롤링되고 인덱싱되는 데 도움이 된다.
• 내부 링크 구조: 웹 페이지에서 내부 링크 구조를 정의하는 데에 사용되며, 올바른 내부 링크 구조를 갖는 것은 검색 엔진이 사이트의 콘텐츠를 이해하고 사용자에게 더 좋은 경험을 제공하는 데 도움이 된다.
• 앵커 텍스트 (Anchor Text): 링크의 텍스트는 해당 페이지의 콘텐츠를 설명하는 데 사용되며, 검색 엔진은 이를 통해 링크가 가리키는 페이지의 콘텐츠와 관련성을 평가하기 때문에 적절하고 설명적인 앵커 텍스트를 사용하는 것이 SEO에 긍정적인 영향을 미친다.
• 외부 사이트로의 링크: `<a>`태그로 만들어지는 외부사이트의 링크는 사이트의 신뢰성과 연관성을 평가하는 데 사용되며, 이는 검색 엔진 순위에 영향을 미칠 수 있다.
• 페이지의 전체 구조에 대한 힌트: `<a>` 태그를 통해 페이지 간에 연결이 이루어지면, 검색 엔진은 이를 통해 전체 웹 사이트 구조를 이해하고 페이지의 중요성을 판단하기 때문에 사이트의 전체적인 품질과 사용자 경험에 긍정적인 영향을 미칠 수 있다.

<Link> 태그

• 빌드 후 `<a>`태그로 자동 변환되며, `<a>`태그가 갖는 장점(SEO 최적화, prefetch 등)을 모두 가진다.
• 내부 페이지로의 이동 시, SPA 방식으로 전체 html중 필요한 부분만 리렌더링 된다.
• NextJS 13버전 이전에는 <Link> 태그 안에 <a>태그를 사용해야 했지만, 13버전 이후부터는 그럴 필요가 없어졌다.

---

지금 생각해보면 왜 <Link> 태그가 <a>태그에 비해 SEO에 비효율적이라고 생각했는지 기억이 잘 안나지만 실무 프로젝트에서 만연하게 사용되고 있는 <a> 태그를 적절히 <Link> 태그로 전환시켜야 겠다,