개인 프로젝트 star-breaker-raid를 구글에 등록하여 사용자들이 더욱 쉽게 접근할 수 있도록 했습니다.
그 전에 꼭 알아야 할 개념이 있습니다. 바로 SEO(검색 엔진 최적화)입니다!
Lighthouse로 달성한 점수
SEO란?
SEO(Search Engine Optimization, 검색 엔진 최적화)는 검색 엔진이 웹사이트의 콘텐츠를 올바르게 이해하고, 사용자가 원하는 정보를 쉽게 찾을 수 있도록 최적화하는 작업입니다. SEO를 잘 활용하면 사이트가 검색 결과에서 더 높은 순위를 차지하고, 더 많은 방문자를 유치할 수 있습니다.
Google의 검색 방식
Google은 자동화된 검색 엔진으로, 크롤러(Googlebot)라는 프로그램을 사용하여 웹을 지속적으로 탐색하고, 색인에 추가할 페이지를 찾습니다
1. 크롤링(Crawling) – 웹페이지 탐색
Google은 페이지의 URL을 발견하면 해당 페이지를 방문하여 내용을 확인합니다. 이를 크롤링이라고 합니다.
- Googlebot은 웹사이트를 방문하여 콘텐츠를 수집하고, Chrome과 유사한 방식으로 페이지를 렌더링하며, 발견된 JavaScript를 실행합니다.
- 하지만 CSR(Client-Side Rendering) 방식으로 렌더링되는 페이지는 크롤러가 콘텐츠를 제대로 보지 못할 수 있습니다.
크롤러는 서버에서 렌더링된 콘텐츠는 볼 수 있지만, 브라우저에서 렌더링되는 React 기반의 페이지는 제대로 크롤링하지 못합니다.
star-breaker-raid 프로젝트에서는 SEO 최적화를 위해 Next.js의 Hydration 방식을 활용했습니다.
2. 색인 생성(Indexing) – 페이지 정보 저장
크롤링한 웹페이지의 내용을 분석하고, 검색 결과에 표시할 정보를 저장하는 과정을 색인 생성이라고 합니다.
3. 검색결과 게재
사용자가 검색어를 입력하면 Google 엔진은 색인에서 일치하는 페이지를 검색한 후,
가장 품질이 높고 검색어와 관련성이 큰 결과를 우선적으로 노출합니다.
검색 엔진에 사이트가 많이 노출되도록 하려면 SEO 최적화가 필수적입니다.
구글 검색엔진에 등록
star-breaker-raid 프로젝트는 배포 후 한 달이 지났지만, Google 검색 엔진에 나오지 않았습니다.
이 경우 Google에 수동으로 검색 엔진 등록을 요청할 수 있습니다.
- Google Search Console에서 사이트 등록
우선, Google Search Console을 검색하여 접속합니다.
- 속성 추가 – URL 접두어 선택
처음 시작하면 속성 추가 화면이 나타납니다.
속성 유형 선택에 대한 설명
- 소유권 확인 – HTML 태그 활용
소유권 확인 방식을 HTML 태그를 선택합니다.
제공된 메타데이터(meta tag)를 프로젝트의 head 태그 안에 추가한 후, 다시 배포합니다.
- URL 검사 및 색인 요청
Google Search Console에서 속성으로 이동하면 대시보드가 나타납니다.
왼쪽 메뉴에서 "URL 검사"를 선택한 후, 등록할 사이트의 URL을 입력합니다.
(등록 요청 후 하루가 지나야 검색 엔진에 반영됩니다.)
- 실제 Google 검색에서 확인하기
등록이 완료되면 Google 검색에서 사이트가 나타나는지 확인합니다.
제 star-breaker-raid 프로젝트는 Google에 등록되어 사용자들이 검색을 통해 쉽게 찾을 수 있습니다. 기존에는 웹사이트 주소를 알고 있는 사람들만 직접 URL을 입력해서 방문했지만, 이제는 검색만으로 쉽게 접근할 수 있어 사용자 접근성이 크게 향상되었습니다.
[참고]
