검색엔진최적화(1/2) - 구글 서치 콘솔에 우리 사이트 등록하기😶‍🌫️

누가 우리의 조그맣고 사용자도 없는 사이트를 검색해서 들어올까 싶지만

경험을 위해 검색엔진 최적화를 해보려고 한다. !!

 

 

 

프로젝트에 기본 세팅하기

구글 서치 콘솔에서 우리 사이트를 검색엔진에서 찾아달라고 등록하기 전에

먼저 프로젝트 내에서 기본적인 세팅들을 해주어야 한다.

그 예로는..

 

검색엔진에 검색되었을때 페이지의 제목과 description 등을 나타내는 metadata 설정하기

robots.txt에 검색엔진 크롤러가 우리 사이트의 어떤 페이지를 읽을 수 있는지 규칙 제공하기

우리 사이트의 어떤 페이지들을 등록할건지 쭉 나열한 sitemap.xml 만들기

 

가 있다.

 

metadata의 title과 description은 이런 곳에 쓰인다.

 

sitemap.xml

robots.txt

 

 

블로그 글 하나하나가 검색엔진에 노출되듯,

모든 스킬 상세 페이지의 내용을 노출되도록 하기 위해 사이트맵을 동적으로 생성하는 로직을 추가하였다.

백엔드분께 스킬 id 목록을 내려받을 수 있는 API 구현을 요청하였고 이를 바탕으로 동적으로 스킬 상세 페이지 경로 리스트를 구성하였다.

 

import type { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_SERVER_URL}/market/sitemap`,
    { next: { revalidate: 3600 } },
  );

  const skills = (await res.json()).data as {
    skillId: number;
    modifiedAt: Date;
  }[];

  return [
    // 정적 페이지
    {
      url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/skills`,
      lastModified: new Date(),
    },

    // 동적 상세 페이지
    ...skills.map(({ skillId, modifiedAt }) => ({
      url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/skills/detail/${skillId}`,
      lastModified: new Date(modifiedAt),
    })),
  ];
}

 

사이트 규모가 매우 작기 때문에 스킬 목록 요청의 캐시를 1시간으로 설정하였다.

규모가 매우 커져 스킬이 빨리빨리 업데이트된다면 캐시 시간을 좀 더 줄여볼 수 있을 것이다.

 

 

 

 

 

구글 서치 엔진에 등록

그다음 우리 사이트의 도메인을 구글 서치 엔진에 등록하고,

우리가 만든 sitemap.xml을 등록해주어야 한다.

 

사이트을 등록하면 https://내 도메인/sitemap.xml에 접속이 가능함에도 불구하고

이렇게 "사이트맵을 읽을 수 없음"이라고 뜨는데,

이는 우리가 등록한 sitemap.xml에 접속할 수 없기 때문이 아니라

아직 크롤러가 사이트맵에 미방문했을 때도 이렇게 뜬다고 한다.

 

사이트맵 등록 즉시 구글 엔진에서 읽는 건 아니고,

첫 크롤링까지 한 1~2주 정도는 기다려야 한다고 한다.

 

관련 글: https://support.google.com/webmasters/thread/394107718?hl=ko

 

 

업데이트: 하루만에 처리가 완료되었다.

 

 

 

 

 

빨리빨리~ 미리 색인 생성 요청하기

원래는 구글 서치 엔진이 사이트맵을 읽어서 사이트맵에 등록된 경로들을 db에 올리는건데,

사이트맵을 아직 안 읽었더라도 특정 경로에 대해서 미리 색인 생성 요청을 할 수 있다.

그래서 대표적인 페이지(스킬 리스트 페이지(/skills))의 색인 생성 요청을 하였다.

 

이렇게 URL 검사 탭에서 원하는 페이지 경로를 검색하면 "URL이 Google에 등록되어 있지 않음"이라고 뜨고, 아래에 "색인 생성 요청" 버튼이 보인다.

이를 클릭하면 몇 분 내에 색인이 생성되어 구글에서 검색 가능한 상태가 된다. (물론 검색 순위는 저멀리일 수 있음)

 

 

 

 

 

구글 엔진에서 보는 우리 사이트의 모습 미리보기

나는 검색엔진 최적화를 위해 검색엔진에 노출되어야 하는 페이지를 서버컴포넌트로 구축하면서,

실제로 엔진에서는 내가 만든 화면의 HTML이 어떻게 보이는지, 

과연 페이지 내 의도한 내용이 잘 보일지 궁금했다.

 

URL 검사 페이지에서 이를 확인이 가능하다.

"실제 URL 테스트"를 클릭하고 나서 "테스트된 페이지 보기"를 클릭하면 오른쪽에 크롤러가 볼 수 있는 섹션이 나온다.

 

스크린샷 탭을 보면 우려했던 서버 컴포넌트에서 클라이언트로 전달했던 리스트 내용이 잘 조회됨을 확인할 수 있다. 

 

 

추가 정보의 페이지 리소스를 보면 로드하지 못한 내용들이 많은데,

아마 내가 robots.txt에서 모든 경로를 disallow하고 노출이 필요한 경로만 allow하는 형식으로 규칙을 세팅해서 그런듯하다. 

 

모든 경로를 allow하고 disallow할 경로를 지정하는 방법으로 수정할 수도 있겠지만...

차단된 리소스들을 보면 크롤링에 그다지 중요하지 않은 정보들이므로

일단 robots.txt는 그대로 유지하는 걸로 하겠다.

 

 

그다음 확인해야 할 것은 스킬 상세 페이지의 스크린샷 결과이다.

 

 

 

...아니 

"불러오는 중..." 다음에 있는 상세 내용이 보여야 되는데 "불러오는 중..."만 보인다.

이렇게 되면 모든 상세 페이지들의 크롤링 결과가 다 이렇게 보이게 되어서 사이트맵에 상세페이지 경로별로 등록해놓은 게 의미가 없다..ㅠㅠㅠ

 

 

 

 

 

다음 글에서는 이를 해결하는 내용을 작성해보도록 하겠다.