안녕하세요, 픽셀의 정렬뿐만 아니라 구글 로봇의 ‘데이터 정렬’까지 완벽하게 통제해야 직성이 풀리는 집착가, 디자인 엔지니어 올리브입니다. 🌿
지난 7편에서 우리는 ACF를 이용해 “이 글은 ‘워드프레스 0.1초 컷’ 시리즈의 8번째 글이야”라는 데이터를 예쁘게 깎아두었습니다. 하지만 치명적인 문제가 하나 있습니다. 구글의 검색 로봇은 우리 블로그에 들어와서 “오, 글 좋네” 하고 그냥 나갈 뿐, 이게 거대한 10부작 시리즈의 일부라는 사실은 알아채지 못합니다.
Headless 환경에서는 워드프레스가 알아서 SEO를 챙겨주지 않거든요. 그래서 저는 백엔드(ACF)의 데이터와 구글 로봇 사이를 연결하는 ‘SEO 브릿지’를 Next.js 프론트엔드에 직접 건설했습니다.
1. “로봇님, 이건 그냥 글이 아닙니다” (메타데이터의 재구성) 🤖
보통의 워드프레스 유저라면 SEO 플러그인에 제목과 설명을 손으로 적어 넣었겠지만, 저는 프론트엔드를 다루는 엔지니어입니다. 수동 작업은 사양하죠.
저는 Next.js의 핵심 기능인 generateMetadata를 브릿지로 활용했습니다. 통역사(WPGraphQL)가 워드프레스에서 글의 본문과 함께 ACF 연재 데이터(시리즈 이름, 회차)를 가져오면, Next.js가 0.1초 만에 이를 조합해 구글 로봇 전용 명함을 만들어냅니다.
- 동적 타이틀 생성:
글 제목 | 시리즈 이름 [N편] - oliveves.blog - 이렇게 조합된 데이터가
<head>태그 안에 자동으로 꽂힙니다. 구글 로봇이 문을 열고 들어오자마자 “아, 이 글은 시리즈물이구나!” 하고 단번에 알아차리게 만드는 완벽한 환영 인사죠.
2. 디자인 엔지니어의 필살기: JSON-LD 스키마 주입 💉
타이틀과 설명만으로는 제 집착을 만족시킬 수 없습니다. 검색 결과 페이지(SERP)에서 제 글이 남들보다 더 전문적이고 구조적으로 보이게 만들고 싶었거든요.
그래서 저는 프론트엔드 코드에 JSON-LD(구조화된 데이터)라는 특별한 언어를 심었습니다. ACF에서 가져온 시리즈 정보, 작성자(올리브), 발행일 등의 데이터를 JSON 형태로 묶어 화면 뒤편에 은밀하게 배치한 것이죠.
사용자의 눈에는 0.1px도 보이지 않지만, 구글 로봇의 눈에는 이 블로그가 얼마나 체계적이고 신뢰할 수 있는 데이터 구조를 가졌는지 보여주는 ‘최고급 레스토랑 메뉴판’처럼 보이게 됩니다. 🍱
3. 자동화된 SEO가 주는 심리적 평온함 🧘♂️
이 브릿지가 완성된 후, 글쓰기는 완벽한 즐거움이 되었습니다.
저는 그저 워드프레스에 글을 쓰고 ‘연재 순서: 8’이라고 숫자 하나만 입력할 뿐입니다. 그러면 제 코드가 알아서 제목을 조합하고, 메타데이터를 만들고, 구조화된 스키마를 짜서 구글 로봇에게 바칩니다. 콘텐츠 생산자는 글에만 집중하고, 복잡한 SEO 아부는 시스템이 알아서 하는 구조. 이것이 바로 디자인 엔지니어가 시스템을 깎는 이유입니다.
4. 마치며: 진정한 연결은 눈에 보이지 않습니다 🌉
사람들은 화면에 그려진 예쁜 UI에 감탄하지만, 저는 검색 엔진의 봇들이 제 코드를 읽으며 감탄할 때 더 큰 짜릿함을 느낍니다. 프론트엔드는 사용자와의 접점이기도 하지만, 로봇과의 대화가 이루어지는 가장 중요한 브릿지이기도 하니까요.
💡 8편 요약: 왜 Next.js SEO 브릿지인가?
- 완전 자동화: ACF 데이터를 활용해 메타 타이틀과 디스크립션을 동적으로 생성.
- 구조화된 데이터: JSON-LD를 통해 검색 엔진에 시리즈물의 맥락을 정확히 전달.
- 통제권 확보: 무거운 플러그인 없이 프론트엔드 코드만으로 최고 수준의 SEO 구현.
보이지 않는 로봇과의 대화까지 완벽하게 마쳤습니다. 이제 이 모든 코드를 세상이라는 무대에 올릴 시간입니다. 다음 9편에서는 이 가볍고 빠른 블로그를 전 세계로 가장 빠르게 쏘아 올리는 Vercel 배포와 엣지 네트워크 이야기로 대망의 피날레를 준비해 보겠습니다! 🚀
올리브의 한 줄 요약: “디자인은 사람을 설득하지만, 완벽하게 짜인 메타데이터는 구글을 설득합니다.” 🌿