네이버&구글 서브링크 노출을 위해 시도한 것들

올해 초 회사 홈페이지 새로 만들면서 SEO 설정과 관련된 작업들도 했다.

그 중 특히 네이버/구글 검색 시 서브링크가 노출되지 않는 이슈가 꽤 오래 되었는데,

서브링크는 개발자가 설정할 수 있는 것이 아니라 각 브라우저에서 웹크롤링을 통해 사용자에게 도움이 되는 링크인지 자체적으로 생성되어  원인을 파악하기 어려웠다.  

 

 

서브링크란? 

메인링크 아래에 네비게이션 링크가 표출된다.

 

https://searchadvisor.naver.com/guide/faq-sublink

 

seo 도구로는 구글 서치콘솔과 네이버 서치어드바이저 사용했다.

 

---

1. Navigation tag에 <Link />  말고 "a" tag 넣기

seo를 위해 시멘틱태그를 사용하는 것은 가장 기본적이다.

우리도 navigation에는 nav tag를, 각 메뉴에는 Link(Next) tag를 사용했다.

 

그렇게 Navigation을 잘 구성했다고 생각했는데 네이버 서브링크 노출 가이드에는 javascript로 된 link사용을 피해달라는 말이 있었다. 

 

Next를 사용하다보니 자연스럽게 내장 컴포넌트를 많이 썼는데 이게 문제가 될지도 모른다는 생각이 들었다. 

Link를 사용하는 대신 <a> tag를 사용했다. 

 

 

 

 Next.js 에서 a tag 사용하기위해 아래와 같은 방법을 사용했다.

 

 

이 방법으로 사용해봤다. 

 

(참고 - Next.js 에서 a tag 사용하려면?)

https://nextjs.org/docs/app/api-reference/components/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag

 

Components: <Link> | Next.js

 

2. sitemaps과 page의 header Canonical Url 가 완전하게 일치 되었는가?

 

sitemap에는 "https://www.enerdot.co.kr/~"  형식으로 Url이 들어갔는데, 각 페이지 Header에  들어간 Canonical과 openGragh url이 일치하지 않는 url이 있었다. 예를들어 https를 제외하고 www부터 시작한다던가, 맨 뒤에 / 디렉토리가 들어가지 않는다던가의 문제였다.

이 문제는 서브링크 노출 문제 이전에 몇개 url 색인 생성이 제대로 되지않았는데 이 문제였다.

 

3. 크롬 브라우저에서는 모바일 Nav 신경쓰기

1번에서도 nav tag에 대해 이야기했지만 이건 구글에서 테스트하는 url 검사다.

캡쳐 이미지와 아래 파란색 화살표를 보면 google 검사 도구 스마트폰(으)로 렌더링 된것을 알수있다. 

따라서 반응형 웹 페이지를 만들고 nav를 조건에 따라 보여주면서 사용한다면 모바일 navigation이 랜더링 되는지, link tag는 잘 들어갔는지 신경쓰는 게 좋다. 

 

 

 

이 3가지 방법을 시도해보기 전에도 사소하지만 여러가지 선행된 작업이 있었다. 

 

4. 그 외에 SEO 향상을 위해 한 것들 

 

1) 각 페이지마다 h1 tag를 넣어 제목 설정해줌

 네이버 서브링크가 표시된 다른 사이트와 비교해봤을 때 메타키워드와 설명이 없는데도 노출된 곳이 있었다. 

 할 수 있는건 다 해보고있었어서 그 페이지에는 h1 tag가 있는걸 동료가 확인해서 넣어보기로 했다.

 

2) styled-component (CSS-in-js)를 사용하면서 나온 이슈 -> 'use client' 

https://github.com/styled-components/styled-components/issues/4025 이런 글들을 보면서 styled-component를 포기하고 테일윈드를 쓸까 고민했지만 seo 관련 정보는 각 page에서 layout으로 분리하는 방법으로 head만 분리해서 해결했다. 

 

 

next 프로젝트에서 tailwind를 추천하는 이유 중 하나인 듯 하다.

 

3) app layout에 head tag 설정 - 네이버 서치콘솔 소유권 인증 코드 meta tag 코드 넣기 

 

4) - https://www.name.com/ 이거(/) 맨 뒤에 붙이기 등

 

---

 

약 1달 간 서브링크가 노출이 안되었는데, 1번과 3번을 수정한 뒤 1주일이 안돼서 네이버와 구글에서 서브링크가 노출되었다.

그런데 왜인지 구글에서는 모바일에서만 서브링크가 보였다. 

 

 

 

 

 

 

---

https://searchadvisor.naver.com/guide/faq-sublink

서브링크 노출