SEO 개선 초심자 가이드

카카오엔터테인먼트 FE 개발그룹이 SEO 개선을 어디서부터 시작할지 막막한 사람들을 위해 정리한 가이드다. 구글 서치 콘솔 등록부터 sitemap 과 robots.txt, 메타 데이터, 스키마 마크업, 표준 URL 지정까지 단계별로 무엇을 왜 하는지 짚는다.

핵심 포인트

검색 결과와 랭킹을 결정하는 것은 크롤봇이므로, 그 알고리즘에 맞게 설정해주는 것이 검색엔진 최적화다.
첫 단계는 구글 서치 콘솔에 사이트 URL 을 등록하는 것이다. 소유권 확인은 HTML 파일 업로드나 태그 추가, 구글 애널리틱스, 태그 관리자 중 고를 수 있다.
구글 애널리틱스가 이미 설치돼 있다면 파일 업로드나 태그 추가 없이 간편하게 소유권을 확인할 수 있어 그 방법을 권한다.
sitemap 은 페이지와 파일, 그 관계 정보를 크롤봇에 알려 일반 크롤링에서 발견되지 않는 페이지까지 훑게 한다. 색인이 많아질수록 검색에 나타날 가능성이 커진다.
robots.txt 는 반대로 크롤링할 필요 없는 URL 을 알려 무의미한 크롤링 요청과 트래픽 낭비를 막는다.

상세 정리

sitemap 은 도구로 기본 파일을 만든 뒤 세부 사항은 직접 관리하는 편이 좋다. 구글은 priority 속성을 무시한다는 점도 짚는다.
Next.js 라면 pages 디렉터리 하위의 주요 링크를 넣는다고 생각하면 된다.
sitemap 은 계층 구조로 나눌 수 있다. 색인 파일 아래에 주요 페이지용과 글 목록용을 따로 두는 식이다.
주의할 점은 참조되는 sitemap 이 색인 파일과 같은 디렉터리에 있거나 사이트 계층에서 더 낮은 위치에 있어야 한다는 것이다.
업로드는 public 디렉터리 하위에 두어 URL 로 접근되게 하고, 서치 콘솔의 Sitemaps 메뉴에서 제출한다.
페이지 추가와 삭제를 반영하는 업데이트가 필요한데, 번거로우면 Next.js 의 getServerSideProps 로 동적으로 생성할 수 있다.
robots.txt 에서 특정 디렉터리를 disallow 하면 하위 디렉터리까지 전부 크롤링 불필요로 명시되며, 그 안에서 허용할 세부 페이지를 따로 적을 수 있다.
화이트리스트 방식으로 User-agent 를 관리한다면 Twitterbot 을 예외로 둬야 할 수 있다. 접근이 막히면 og:image 를 내부 링크로 제공할 때 이미지가 보이지 않는 문제가 생긴다.
메타 데이터는 두 측면에서 이득이다. 크롤봇에는 키워드 정보를 주고, 사용자에게는 검색 결과에서 정보를 더 보여줘 클릭률을 높인다.
title 은 제목만 쓰기보다 키워드를 함께 넣고, description 은 문장 형식으로 쓰되 주요 키워드를 포함하는 것이 좋다.
og:title 과 og:image 를 넣으면 소셜 미디어로 링크를 전달할 때 미리보기가 적용된다.
keywords 메타 태그는 구글을 포함한 일부 검색엔진이 무시한다.
스키마 마크업은 검색 페이지에 사이트 정보를 더 풍성하게 보여주는 수단이다. HTML script 태그에 JSON-LD 로 인코딩해 넣는다.
Organization 타입은 조직 정보를 요약해 보여줘 신뢰감을 주고, 사이트링크 검색창이나 breadcrumb 로는 검색 결과에서 바로 하위 페이지로 이동하게 하거나 계층 구조를 이해시킬 수 있다.
작성한 스키마가 유효하게 수집되는 상태인지는 검증 도구로 확인할 수 있다.
표준 URL 을 지정하지 않으면 중복 페이지 때문에 크롤링이 반복돼 색인 수가 줄고, 색인 상태가 제외됨으로 지정되며 SEO 점수가 분산될 수 있다.

왜 읽나SEO 를 해야 한다는 건 알지만 첫 삽을 어디에 뜰지 모르는 프론트엔드 개발자에게, 설정 항목마다 왜 필요한지와 함께 순서를 잡아주는 가이드.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

SEO 개선 초심자 가이드

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다