← 전체 글로 돌아가기

서버 운영

도메인 연결 문제를 체계적으로 풀기

Next.js 앱에서 도메인 설정이나 메타데이터 문제를 신속하게 진단하는 방법.

도메인을 새로 연결했거나 메타데이터를 수정했는데 제대로 반영되지 않는 경우가 있다. HTML head 태그부터 실제 공개 URL까지 체계적으로 확인하면 대부분의 문제를 찾을 수 있다.

공개 URL에서 직접 확인

로컬 localhost에서는 완벽해도 실제 공개 주소에서는 다를 수 있다. 먼저 배포된 실제 URL에서 메타데이터를 확인한다.

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

이 명령으로 title, description, Open Graph 태그, Twitter 카드가 제대로 들어가 있는지 한눈에 본다. 속성명을 정확히 치면 해당 부분만 뽑을 수도 있다.

Canonical 태그 확인

Canonical 태그는 검색 엔진에 대표 URL을 알려주는 것이다. 잘못된 canonical이 설정되면 검색 결과가 꼬일 수 있다.

curl -s https://example.com | grep canonical

canonical은 반드시 절대 경로여야 하고, 현재 URL과 일치하거나 명시적인 의도가 있어야 한다. 상대 경로나 다른 도메인을 가리키면 SEO 문제가 생긴다.

Next.js 메타데이터 설정 확인

Next.js 14 이상이면 metadata 객체를 export하는 방식을 쓴다. 실제 코드에서 정의한 값들이 정확히 전달되는지 확인한다.

npm run build

빌드 시 경고나 에러가 있으면 메타데이터 설정이 잘못된 것이다. 특히 og:image 같은 소셜 미디어 이미지를 지정했다면 실제 URL이 유효한지 확인해야 한다.

HTML head 직접 검사

브라우저 개발자 도구에서 실제 HTML을 보면 서버에서 생성한 최종 head 태그를 확인할 수 있다. 동적으로 생성되는 메타데이터가 있다면 여기서 확인해야 한다.

  1. 브라우저에서 Ctrl+Shift+K (또는 Cmd+Option+K)로 개발자 도구 열기
  2. Elements/Inspector 탭에서 <head> 찾기
  3. 필요한 meta 태그가 모두 있는지 확인

Sitemap과 RSS 설정

SEO를 위해 sitemap.xml과 RSS 피드를 제공한다면 이들도 정상인지 확인해야 한다.

curl https://example.com/sitemap.xml | head -20
curl https://example.com/rss.xml | head -20

XML 문법 오류나 빈 목록은 SEO 크롤러를 혼동시킬 수 있다.

배포 후 실제 동작 확인

Google Search Console이나 Facebook Sharing Debugger 같은 도구를 사용하면 각 플랫폼에서 메타데이터를 어떻게 읽는지 볼 수 있다. 이미지가 미리보기로 제대로 뜨는지, 제목과 설명이 올바르게 표시되는지 확인하는 것이 최종 검증이다.