웹 개발
빌드 후 검색 노출이 어색할 때
Next.js나 정적 생성 프로젝트에서 빌드 후 SEO 메타데이터가 제대로 반영되지 않을 때 확인할 항목.
빌드하고 배포했는데 Google이나 SNS에서 보이는 미리보기가 이상할 수 있다. 로컬 개발 환경에서는 몰랐던 문제가 빌드 후에 드러난다.
빌드된 HTML 파일 직접 확인
정적 생성을 사용한다면 빌드 결과에서 직접 HTML을 본다:
cat out/index.html | grep -E 'title|description|og:'
또는 빌드된 파일을 브라우저에서 열어서 개발자 도구의 Elements 탭에서 <head> 태그를 본다. 메타 태그가 제대로 들어가 있나?
SSR을 사용한다면 서버에서 실제 응답을 본다:
curl -s https://example.com/ | head -50
메타데이터 태그 검증
필수 메타데이터:
<title>- 페이지 제목<meta name="description">- 페이지 설명<link rel="canonical">- 정규 URL<meta property="og:title">- SNS 공유 제목<meta property="og:description">- SNS 공유 설명<meta property="og:image">- SNS 공유 이미지
각 페이지에서 이들이 정확하게 입력되어 있나 확인한다. 특히 동적 페이지라면 변수가 제대로 치환되어 있나 본다.
동적 페이지 메타데이터
상품 상세 페이지처럼 동적으로 생성되는 페이지라면, URL 파라미터나 경로에서 올바른 데이터를 가져오고 있나 확인한다:
# 다양한 URL로 테스트
curl -s https://example.com/product/123 | grep og:title
curl -s https://example.com/product/456 | grep og:title
각 URL마다 다른 메타데이터가 보여야 한다.
SEO 도구로 검증
Google Search Console에서:
- URL 검사 도구로 실제 검색 엔진이 어떻게 보는지 확인
- "페이지 최적화" 보고서에서 메타데이터 누락 여부 체크
SEO 검사 도구(Lighthouse 포함)를 사용해서 메타데이터 누락을 찾는다.
SNS 공유 미리보기 테스트
Facebook의 Sharing Debugger나 Twitter Card 검증 도구에서 직접 URL을 입력해서 미리보기를 본다. 이미지가 제대로 로드되는가? 텍스트가 올바른가?
만약 이미지가 보이지 않는다면 og:image 경로를 확인한다. 상대 경로가 아닌 절대 경로나 전체 URL을 사용해야 한다.
배포 후 다시 확인
CDN이나 캐시를 사용한다면 배포 후 즉시 완벽해지지 않을 수 있다. 1-2시간 후에 다시 확인해본다. 그 사이에 캐시가 갱신될 시간을 준다.