14장: SEO와 링크 미리보기
만든 것을 찾을 수 있어야 한다
배포를 마치고 구글에 서비스 이름을 검색했는데 아무것도 안 나옵니다. 코드는 잘 돌아가는데, 세상이 이 서비스의 존재를 모릅니다.
이게 SEO를 챙겨야 하는 이유입니다.
SEO란 무엇인가
SEO는 Search Engine Optimization, 검색 엔진 최적화입니다. 구글 같은 검색 엔진이 여러분의 사이트를 잘 이해하고, 관련 검색어에 높은 순위로 노출하도록 만드는 작업입니다.
광고는 돈을 내는 동안만 노출됩니다. SEO는 한 번 올라간 순위가 꾸준히 방문자를 데려옵니다. 장기적으로는 광고보다 SEO가 훨씬 효율적인 유입 수단입니다.
검색 엔진이 사이트를 읽는 방식
구글은 크롤러(crawler)라는 봇을 보내서 웹사이트를 순회합니다. 페이지의 HTML을 읽고, 링크를 따라 다른 페이지로 이동하면서 내용을 수집합니다. 수집한 내용을 분석해서 색인(index)에 저장하고, 사용자가 검색하면 가장 적합한 페이지를 순위에 따라 보여줍니다.
이 과정에서 구글은 세 가지 질문에 답하려 합니다.
이 페이지는 무엇에 관한 것인가? — 제목, 설명, 본문 내용으로 판단합니다.
이 페이지는 믿을 만한가? — 다른 사이트에서 얼마나 많이 링크가 달렸는지로 판단합니다.
이 페이지는 쓰기 편한가? — 로딩 속도, 모바일 대응 여부 등으로 판단합니다.
바이브코딩으로 만든 프로젝트에서 당장 챙길 수 있는 것은 첫 번째, "무엇에 관한 페이지인지 명확하게 알려주는 것"입니다.
타이틀과 메타 디스크립션
검색 결과에서 가장 먼저 보이는 것이 제목과 설명입니다. 이걸 타이틀(title)과 메타 디스크립션(meta description)이라고 합니다.
구글 검색 결과 한 줄을 보면 파란 굵은 글씨가 타이틀, 그 아래 회색 두 줄이 메타 디스크립션입니다. 사람이 클릭할지 결정하는 게 이 두 가지입니다.
바이브코딩으로 만든 프로젝트는 기본적으로 Next.js App이라는 제목이 그대로 나오는 경우가 흔합니다. 이걸 바꾸는 것이 SEO의 첫걸음입니다.
좋은 타이틀의 조건:
- 페이지가 무엇인지 명확하게
- 30~60자 이내
- 서비스 이름 포함
좋은 메타 디스크립션의 조건:
- 이 페이지에서 무엇을 할 수 있는지 설명
- 70~155자 이내
- 검색자가 원하는 것을 담기
Next.js에서는 metadata 객체로 설정합니다.
이 프로젝트에 타이틀과 메타 디스크립션을 설정해줘.
서비스 이름: [서비스 이름]
설명: [이 서비스에서 무엇을 할 수 있는지 한두 문장]
배포 주소: [Vercel 주소]
app/layout.tsx의 metadata에 title과 description을 추가해줘.
title은 template 패턴으로 각 페이지 제목이 "페이지명 | 서비스명" 형태가 되게 해줘.
AI가 만들어주는 코드는 이런 형태입니다.
// app/layout.tsx
export const metadata: Metadata = {
title: {
default: "프리랜서 일감 관리",
template: "%s | 프리랜서 일감 관리",
},
description:
"프리랜서 일감을 등록하고 수입을 한눈에 관리하세요. 클라이언트별 히스토리와 미수금 현황을 쉽게 파악할 수 있습니다.",
};
title.template의 %s는 각 페이지에서 설정한 제목으로 대체됩니다. 대시보드 페이지에 "대시보드"를 설정하면 탭과 검색 결과에 "대시보드 | 프리랜서 일감 관리"라고 나옵니다.
페이지마다 고유한 제목과 설명 달기
기본값만 설정하면 모든 페이지가 같은 제목으로 나옵니다. 각 페이지마다 고유한 제목을 주는 것이 중요합니다. 검색 엔진은 페이지마다 다른 내용이라는 걸 명확히 알 수 있어야 하고, 사람도 검색 결과에서 어느 페이지인지 구분할 수 있어야 합니다.
각 페이지에 개별 메타데이터를 추가해줘.
- 로그인: "로그인", 설명: "이메일로 로그인해서 일감을 관리하세요."
- 대시보드: "대시보드", 설명: "등록된 일감과 수입 현황을 한눈에 확인하세요."
- 일감 등록: "일감 등록", 설명: "새 일감을 등록하고 클라이언트 정보를 저장하세요."
로그인이 필요한 페이지(대시보드 등)는 검색 결과에 나올 필요가 없습니다. 하지만 타이틀은 브라우저 탭 제목이기도 합니다. 검색 노출이 목적이 아니더라도 탭 제목이 명확한 것만으로 사용성이 좋아지니 설정해두는 게 낫습니다.
URL 구조
URL도 SEO에 영향을 줍니다. 구글은 URL만 봐도 "이 페이지가 무엇에 관한 것인지" 짐작합니다.
/p/123보다 /products/123이 낫고, /products/123보다 /products/running-shoes가 낫습니다. 사람이 읽을 수 있는 URL이 검색 엔진도 이해하기 쉽습니다.
Next.js App Router는 폴더 구조가 그대로 URL이 됩니다. 처음 프로젝트 구조를 잡을 때 AI에게 SEO를 고려한 URL 구조를 요청할 수 있습니다.
이 프로젝트의 URL 구조를 SEO에 유리하게 설계해줘.
사람이 읽을 수 있는 URL이 되도록,
숫자 ID 대신 의미 있는 경로를 쓰는 방향으로.
이미 만들어진 프로젝트라면 무리하게 바꿀 필요는 없습니다. 초기 설계 때 반영하는 게 가장 좋습니다.
링크 미리보기: Open Graph
카카오톡이나 슬랙에 링크를 붙여넣으면 제목, 설명, 이미지가 카드 형태로 나옵니다. 이걸 링크 미리보기라고 하고, Open Graph(OG) 태그가 이 정보를 제공합니다.
OG 태그가 없으면 링크를 공유해도 URL만 덩그러니 나옵니다. 제목과 설명이 보여야 사람들이 클릭합니다.
이 프로젝트에 Open Graph 메타 태그를 설정해줘.
서비스 이름: [서비스 이름]
설명: [한두 문장]
배포 주소: [Vercel 주소]
og:title, og:description, og:url을 설정하고,
og:image는 1200x630 크기의 기본 이미지를 만들어줘.
카카오톡, 슬랙, 트위터에서 미리보기가 잘 나오도록 해줘.
Next.js에서는 metadata 객체에 openGraph 필드를 추가하면 됩니다.
export const metadata: Metadata = {
title: "프리랜서 일감 관리",
description: "프리랜서 일감을 등록하고 수입을 한눈에 관리하세요.",
openGraph: {
title: "프리랜서 일감 관리",
description: "프리랜서 일감을 등록하고 수입을 한눈에 관리하세요.",
url: "https://myproject.vercel.app",
images: [{ url: "/og-image.png", width: 1200, height: 630 }],
},
};
설정 후 확인하는 방법은 카카오톡에 링크를 직접 붙여넣는 것이 가장 빠릅니다.
이미지 alt 텍스트
이미지는 검색 엔진이 직접 "볼" 수 없습니다. 대신 alt 속성에 적힌 텍스트를 읽습니다. alt 텍스트가 없으면 그 이미지는 검색 엔진에게 투명합니다.
이미지 검색에도 영향을 줍니다. 적절한 alt 텍스트가 있으면 이미지 검색에서도 노출될 수 있습니다.
이 프로젝트의 모든 이미지에
적절한 alt 텍스트가 없는 것을 찾아서 추가해줘.
단순히 파일명이나 "image"라고 쓰지 말고,
이미지가 무엇을 보여주는지 구체적으로 설명하는 텍스트로.
robots.txt와 sitemap.xml
robots.txt는 검색 엔진 봇에게 "어느 페이지는 크롤링해도 되고, 어느 페이지는 하지 말아라"를 알려주는 파일입니다. 로그인이 필요한 관리자 페이지는 크롤링할 필요가 없습니다.
sitemap.xml은 사이트의 모든 페이지 목록을 알려주는 파일입니다. 구글이 빠짐없이 모든 페이지를 색인하도록 도와줍니다. 페이지가 많을수록 중요합니다.
robots.txt와 sitemap.xml을 자동 생성하는 코드를 만들어줘.
배포 주소는 https://myproject.vercel.app 이야.
- robots.txt: /admin 하위 페이지는 크롤링 차단, 나머지는 허용
- sitemap.xml: 공개 페이지 목록 포함, 업데이트 주기는 weekly
Google Search Console에 등록하기
메타데이터를 아무리 잘 설정해도 구글이 크롤링하기 전까지는 검색 결과에 나오지 않습니다. 신규 사이트는 수일에서 수주가 걸립니다.
Google Search Console에 등록하면 두 가지를 할 수 있습니다. 첫째, sitemap을 직접 제출해서 크롤링을 요청할 수 있습니다. 신규 사이트가 빠르게 색인되도록 앞당겨줍니다. 둘째, 사이트가 어떤 검색어에 노출되는지, 클릭률은 얼마인지, 어떤 페이지가 색인되지 않았는지 확인할 수 있습니다.
Google Search Console에 이 사이트를 등록하는 방법을 단계별로 알려줘.
배포 주소는 https://myproject.vercel.app 이야.
도메인 소유권 인증은 HTML 태그 방식으로 해줘.
소유권 인증 방법은 여러 가지인데, HTML 태그 방식이 Next.js에서 가장 간단합니다. AI가 안내하는 대로 따라가면 됩니다.
등록 후 sitemap을 제출하는 방법:
- Google Search Console 왼쪽 메뉴에서 "Sitemaps" 클릭
https://myproject.vercel.app/sitemap.xml입력 후 제출
SEO는 콘텐츠가 전부다
기술적인 설정을 다 갖춰도, 결국 검색 순위를 올리는 건 콘텐츠입니다. 구글은 사람들이 실제로 찾고 있는 내용을 잘 담은 페이지를 높이 평가합니다.
바이브코딩으로 만든 서비스에서 콘텐츠 SEO를 챙기는 가장 실용적인 방법은 AI에게 묻는 것입니다.
우리 서비스는 [서비스 설명]이야.
이 서비스의 잠재 사용자들이 구글에서 어떤 검색어를 쓸 것 같아?
검색량이 있을 만한 키워드를 뽑아줘.
그 키워드가 자연스럽게 들어가도록 메인 페이지 텍스트를 다시 써줘.
과도하게 키워드를 반복하면 오히려 구글 페널티를 받습니다. 사람이 읽기 자연스러운 수준을 유지하면 됩니다.
✏️ 실습: SEO 기본 설정하기
1단계: 타이틀과 메타 디스크립션을 설정합니다.
이 프로젝트에 타이틀과 메타 디스크립션을 설정해줘.
서비스 이름: [서비스 이름]
설명: [한두 문장]
배포 주소: [Vercel 주소]
app/layout.tsx에 title template과 description을 추가하고,
주요 페이지마다 개별 타이틀도 추가해줘.
2단계: robots.txt와 sitemap.xml을 만듭니다.
robots.txt와 sitemap.xml을 자동 생성하는 코드를 만들어줘.
배포 주소: [Vercel 주소]
관리자 페이지(/admin)는 크롤링 차단해줘.
3단계: Open Graph 태그를 설정합니다.
이 프로젝트에 Open Graph 메타 태그를 설정해줘.
서비스 이름: [서비스 이름]
설명: [한두 문장]
배포 주소: [Vercel 주소]
og:title, og:description, og:url, og:image를 설정해줘.
4단계: 이미지 alt 텍스트를 점검합니다.
이 프로젝트에서 alt 텍스트가 없거나 부적절한 이미지를 찾아서 수정해줘.
5단계: 커밋하고 GitHub에 올립니다.
SEO 설정 완료됐어. 커밋하고 GitHub에 올려줘.
6단계: Vercel 재배포가 완료되면 직접 Google Search Console에 접속해서 사이트를 등록하고 sitemap을 제출합니다. 이 단계는 AI가 대신할 수 없으니 위의 "Google Search Console에 등록하기" 섹션을 참고해서 직접 진행합니다.
SEO는 단번에 효과가 나타나지 않습니다. 설정하고 나서 Google Search Console을 주기적으로 확인하면, 시간이 지나면서 어떤 검색어에 노출되기 시작하는지 보이기 시작합니다. 다음 장에서는 방문자 데이터를 수집하고 에러를 감지하는 분석과 모니터링을 다룹니다.
참고자료