museck.com을 배포하고 Google Search Console에 등록했는데, 상태가 처참했다. robots.txt 없음, sitemap.xml 없음, 메타데이터 없음, 구조화된 데이터 없음. 검색 엔진 입장에서는 이 사이트가 뭘 하는 건지 전혀 알 수 없는 상태였다. 하루 만에 SEO 인프라를 전부 구현한 기록이다.
배포 직후의 상태를 정리하면 이렇다.
Next.js App Router의 메타데이터 API를 쓰면 이 문제들을 선언적으로 해결할 수 있다. 파일 기반으로 robots.txt, sitemap.xml을 자동 생성하고, 페이지별 메타데이터를 함수로 정의한다.
Next.js의 메타데이터 API로 robots.txt를 자동 생성한다. src/app/robots.ts 파일을 만들면 된다.
3줄이다. 모든 크롤러에게 전체 사이트를 허용하고, sitemap 위치를 알려준다.
정적 사이트맵은 금방 낡는다. 새 글을 쓸 때마다 수동으로 업데이트할 수는 없다. PayloadCMS에서 published 상태인 콘텐츠를 동적으로 읽어서 사이트맵을 생성한다.
posts, projects, pages 세 컬렉션을 동시에 조회한다. Promise.all()로 병렬 처리해서 속도를 챙겼다. slug: 'home'인 페이지는 루트 URL과 중복되므로 제외한다.
루트 레이아웃에 title.template을 설정하면 하위 페이지에서 제목만 지정해도 자동으로 패턴이 적용된다.
하위 페이지에서 title: '기술 블로그'만 설정하면 기술 블로그 | 무색으로 렌더링된다. 일일이 사이트명을 붙일 필요가 없다.
블로그 상세 페이지는 글마다 제목, 설명, 이미지가 다르다. generateMetadata 함수로 동적으로 생성한다.
OG 이미지가 있으면 SNS 공유 시 카드에 이미지가 표시된다. type: 'article'을 지정하면 Facebook/Twitter가 블로그 글로 인식한다.
JSON-LD는 검색 엔진에게 페이지의 의미를 알려주는 구조화된 데이터다. Google의 리치 결과(작성자, 발행일, 이미지 등이 검색 결과에 표시되는 것)를 위해 필요하다.
세 가지 스키마를 적용했다.
JSON-LD는 <script type="application/ld+json"> 태그로 페이지에 삽입한다. Next.js에서는 generateMetadata 안에 넣거나 컴포넌트에서 직접 렌더링할 수 있다.
sitemap.ts에서 PayloadCMS를 호출하는데, Docker 빌드 시에는 DB가 없다. try-catch로 감싸고 실패하면 정적 URL만 반환하는 패턴을 적용했다. 런타임에는 DB에서 동적으로 읽는다.
pages 컬렉션에 slug: 'home'인 문서가 홈페이지다. 사이트맵에 /home과 /이 둘 다 들어가면 중복이다. home 슬러그는 사이트맵에서 제외하고 루트 URL만 남겼다.
Google Search Console과 Naver Search Advisor의 소유권 확인 메타 태그를 루트 레이아웃의 verification 필드에 추가했다. 환경변수로 관리해서 코드에 인증 코드가 노출되지 않도록 했다.
하루 작업으로 SEO 인프라가 갖춰졌다. robots.txt, sitemap.xml, 페이지별 메타데이터, OG 이미지, JSON-LD까지. Google Search Console에서 사이트맵 제출이 성공했고, 색인 요청이 가능해졌다.
Next.js App Router의 메타데이터 API가 이걸 간단하게 만들어줬다. 파일 하나 만들면 robots.txt가 나오고, 함수 하나 정의하면 페이지별 OG 태그가 생긴다. 프레임워크의 컨벤션을 따르면 보일러플레이트가 최소화된다.