안녕하세요, 픽셀의 정렬만큼이나 검색 결과의 순위에도 진심인 집착가, 디자인 엔지니어 올리브입니다. 🌿
우리가 아무리 세이지 톤으로 아름답게 블로그를 깎고, 0.1초 만에 페이지가 뜨게 만들어도 구글 로봇이 우리 집 주소를 모르면 소용없겠죠? 보통 워드프레스는 플러그인만 깔면 SEO가 ‘알아서’ 되는 것 같지만, 머리를 떼어낸 Headless 환경에서는 이야기가 좀 다릅니다.
데이터는 워드프레스에 있고, 화면은 Next.js가 그리니 그 사이의 ‘메타 데이터(Meta Data)’를 직접 배달해줘야 하거든요. 오늘은 그 가교 역할을 하는 Rank Math 활용기를 소개합니다.
1. 헤드리스 SEO, 그냥 두면 구글은 까막눈이 됩니다
일반 워드프레스는 플러그인이 HTML 헤더에 SEO 태그를 자동으로 심어주지만, 헤드리스에서는 워드프레스가 HTML을 만들지 않습니다. 그저 데이터만 줄 뿐이죠.
우리가 따로 신경 쓰지 않으면, 구글 로봇은 제 블로그에 와서 “음, 여기 뭐가 있긴 한데 제목이 뭐고 이미지가 뭔지 하나도 모르겠네!”라며 돌아가 버립니다. 디자인 엔지니어로서 이런 ‘불친절한 설계’는 절대 용납할 수 없죠. 🙅♂️
2. Rank Math: 가장 가볍고 똑똑한 SEO 비서 📋
수많은 SEO 플러그인 중 제가 Rank Math를 선택한 이유는 명확합니다. 기능은 강력한데 놀라울 정도로 가볍거든요.
- 집착 포인트: 성능 점수에 민감한 저에게 서버 리소스를 적게 먹으면서도, 포스트별 키워드 분석과 스키마 설정을 완벽하게 지원하는 Rank Math는 최고의 선택이었습니다.
- 직관적인 UI: 워드프레스 관리자 화면에서 포스팅을 할 때, 마치 점수 채점을 받듯 실시간으로 SEO 가이드를 주는 위트 덕분에 글 쓰는 재미도 쏠쏠합니다. 💯
3. 데이터 배달 서비스: SEO 데이터도 GraphQL로! 🚚
이제 Rank Math가 만든 맛있는 SEO 데이터(타이틀, 설명, 오픈그래프 이미지 등)를 Next.js로 쏴줘야 합니다. 여기서도 우리의 유능한 통역사 WPGraphQL이 활약하죠.
전용 확장 플러그인을 설치하면, GraphQL 쿼리 한 번으로 해당 포스트의 모든 SEO 정보를 싹 긁어올 수 있습니다. Next.js의 generateMetadata 함수에 이 데이터를 쏙 넣어주기만 하면, 구글 로봇이 “와! 이 집 메타 데이터 맛집이네!”라며 엄지를 치켜세우게 됩니다. 👍
4. 마치며: 성능과 노출, 두 마리 토끼 잡기 🐇🐇
결국 디자인 엔지니어의 SEO란, 사용자에게는 보이지 않지만 로봇에게는 가장 완벽한 레이아웃을 제공하는 것입니다. Rank Math와 Next.js의 조합 덕분에 저는 성능 점수를 깎아먹지 않으면서도 검색 엔진에 최적화된 블로그를 가질 수 있게 되었습니다.
💡 6편 요약: 왜 Rank Math인가?
- 경량성: 성능 집착가도 만족할 만큼 가벼운 서버 점유율.
- 연동성: WPGraphQL을 통해 Next.js로 SEO 데이터를 쉽게 전달.
- 정교함: 상세한 키워드 분석과 소셜 미디어 미리보기 설정 지원.
구글 로봇과의 썸은 성공적으로 끝났습니다. 이제 다음 7편에서는 블로그의 뼈대를 더 튼튼하게 만들어줄 커스텀 데이터의 정석, ACF 활용법으로 돌아오겠습니다! 🦴🛠️
올리브의 한 줄 요약: “로봇도 예의 바른 사이트를 좋아합니다. Rank Math로 구글에게 먼저 인사하세요.” 🌿