Next.js 앱의 SEO가 이상할 때 먼저 볼 것

Next.js로 만든 앱이 검색 엔진에 제대로 색인되지 않거나 소셜 미디어에서 링크를 공유할 때 미리보기가 이상하면, 먼저 HTML에 있는 메타 정보부터 확인해야 한다.

실제 HTML을 확인하는 방법

사용자가 보는 화면과 검색 엔진이 읽는 코드는 다르다. 브라우저에서 페이지 소스를 보면 실제로 검색 엔진이 읽는 것과 같은 메타 태그들을 확인할 수 있다.

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'

これ 명령은 특정 페이지의 핵심 메타 정보들을 추출해준다. 출력 결과에서:

• <title> 태그가 있는가
• og:title, og:description, og:image가 설정됐는가
• canonical 태그가 올바른 URL을 가리키는가

이런 것들을 빠르게 확인할 수 있다.

빌드 결과 확인하기

Next.js의 정적 생성(SSG) 방식을 쓸 때는 빌드 타임에 HTML이 생성되고, 배포 시점에 이미 메타 정보가 고정된다. 빌드 후 제대로 된 메타 태그가 생성됐는지 확인해보는 게 중요하다.

npm run build

빌드가 완료되면 .next/ 폴더에 생성된 HTML 파일들을 직접 열어서 메타 태그를 확인할 수 있다.

canonical 태그의 역할

canonical 태그는 "이 페이지의 정식 URL이 어디다"라는 것을 검색 엔진에 알려준다. 만약 같은 내용이 여러 URL에서 나타나면 검색 엔진은 어느 쪽이 원본인지 혼동할 수 있다. canonical 태그로 그런 혼동을 방지한다.

• 모든 페이지마다 해당 페이지의 URL을 가리키는 canonical이 있어야 한다.
• Next.js의 next/head에서 직접 설정할 수도 있고, next/seo 같은 라이브러리를 쓸 수도 있다.

배포 후 실제 URL에서 확인하기

ローカルで試しても実際のサーバーで確認해야 한다. 배포된 실제 서버에서 위의 curl 명령을 실행해서 현재 상황을 확인한다. 로컬 개발 환경과 실제 배포 서버에서 다르게 나타날 수 있기 때문이다.

1. 실제 공개 URL에서 메타 정보를 확인한다.
2. 소셜 미디어 공유 미리보기 도구(Facebook Share Debugger, Twitter Card Validator 등)에서 실제로 어떻게 보이는지 확인한다.
3. 필요하면 캐시를 초기화하고 다시 확인한다.

작은 확인들이 쌓이면 자연스럽게 어느 부분이 문제인지 보인다.