SEO 최적화 (feat. robots.txt, meta tag)

seonja kim·2022년 10월 3일

프로젝트 최적화

목록 보기

2/2

현재 유지/보수하고 있는 서비스의 LCP 개선에 이어서 SEO도 살펴보았습니다.

meta tag와 robots.txt 파일의 부재가 주된 원인이었는데요. meta tag와 robots.txt 파일에 대해 살펴본 다음 개선된 결과를 확인하도록 하겠습니다.

robots.txt란?

웹사이트에 웹 크롤러 같은 로봇의 접근을 제어하기 위한 규약입니다. 주로 검색엔진들의 인덱싱 목적으로 사용됩니다. 접근 기준을 조합해서 설정할 수 있으며 접근 기준을 설정하는 방식은 아래와 같이 쉽게 찾아볼 수 있습니다. 보통 루트 디렉토리에 위치하고 있으며 저는 /public 폴더에 작성했습니다.

모든 문서 접근 허락

User-agent: *
Allow: /

모든 문서 접근 차단

User-agent: *
Disallow: /

특정 디렉토리 접근 차단

User-agent: *
Disallow: /admin/

특정 파일 접근 차단

User-agent: *
Disallow: /admin/index.html

특정 로봇의 모든 접근 차단

예시는 naver 로봇인 Yeti 차단

User-agent: Yeti
Disallow: /

로봇 이름

네이버: Yeti
구글: Googlebot
다음: Daumoa

[추가 정보] sitemap이란

사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일로 검색엔진이 사이트를 더 효율적으로 크롤링할 수 있도록합니다. google developer 참고자료에 따르면 해당 프로젝트는 sitemap이 필요하지 않은 경우에 속하므로 추가하지 않았습니다.

sitemap이 필요한 경우

사이트가 매우 클 경우 사이트맵을 설정하면 최근 업데이트된 페이지도 제대로 크롤링될 수 있습니다.
콘텐츠나 페이지 간의 연결이 잘 되어있지 않거나 대규모 자료실이 있을 경우 페이지의 누락을 막을 수 있습니다.
웹 크롤러는 한 페이지에서 다른 페이지로 연결되는 링크를 따라 이동하며 웹을 크롤링하게 되는데 연결되는 외부 링크가 많지 않은 새로운 사이트의 경우 사이트맵을 설정하면 제대로 크롤링되는데 도움이 됩니다.
동영상, 이미지가 많을 경우 사이트맵의 추가 정보를 제공하면 검색에 적절하게 사용할 수 있습니다.

sitemap이 필요하지 않는 경우

페이지가 500개 이하의 크기가 작은 사이트
내부적으로 긴밀히 연결된 사이트
동영상, 이미지 또는 뉴스 페이지가 많지 않은 사이트

meta tag란?

문서를 설명하는 태그로 html 문서의 내용과 핵심 키워드, 만든 사람, 언어설정 등에 관한 정보를 담고 있는 태그입니다. head 태그 안에 위치하며 검색엔진이나 다른 웹 서비스에서 사용되게 됩니다.

Next js에서 meta tag 설정하는 방법

아래 예시와 같이 Next js의 next/head 내부에서 설정하게 됩니다.

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

프로젝트에서 발생한 문제

제가 유지/보수하고 있는 프로젝트에서는 일정한 nav와 footer를 제공하기 위해 Layout 컴포넌트를 만들어 모든 페이지에서 동일한 Layout을 렌더링하고 있었고 해당 Layout에서 next/head를 이용해서 meta tag는 제대로 설정이 되어있는 상태였습니다. _document.tsx에 오픈그래프도 잘 설정되어 있었고요.

export default function Layout({
  title,
  description,
  children,
}: LayoutProps) {
  return (
    <Fragment>
      <Head>
        <title>
          // some title
        </title>
        <meta name="description" content={description} />
         // some other meta tags
      </Head>
      <Nav />
      {children}
      <Footer />
    </Fragment>
  );
}

그럼에도 불구하고 lighthouse에서 Document does not have a meta description이 발생한 부분이 이상해서 살펴보니 LayoutProps에서 description이 optional로 설정이 되어있고 실제 Layout을 가져다 사용할 때, description을 넘겨주고 있지 않았습니다.

프로젝트에서 발생한 문제 해결

해당 문제는 간단하게 description을 넘겨주지 않을 경우 동일한 description을 보여주도록 설정해서 해결했습니다.

export default function Layout({
  title,
  description,
  children,
}: LayoutProps) {
  return (
    <Fragment>
      <Head>
        <title>
          // some title
        </title>
        <meta name="description" content={description || "여기에 프로젝트에 대한 기본 설명을 작성해요!!"} />
         // some other meta tags
      </Head>
      <Nav />
      {children}
      <Footer />
    </Fragment>
  );
}

결과

참고자료

https://developers.google.com/search/docs/advanced/sitemaps/overview?hl=ko
https://searchadvisor.naver.com/guide/seo-basic-robots
https://mmazzarolo.com/blog/2021-04-27-nextjs-robots-txt/
https://velog.io/@bluestragglr/%EC%A3%BC%EB%8B%88%EC%96%B4%EB%8F%84-%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-Next.js-SEO-robots.txt%EC%99%80-sitemap.xml-%EC%9E%90%EB%8F%99-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0
https://cheatcode.co/tutorials/how-to-handle-seo-metadata-in-next-js
https://mmazzarolo.com/blog/2021-04-27-nextjs-robots-txt/

seonja kim

Adventurer

이전 포스트

프로젝트 LCP 최적화 (feat. Font)

1개의 댓글

normanwolf

2022년 10월 11일

Function leads us to a higher function. My knowledge of them is limited. Here, I seem to be broadened with a new perspective. special thanks https://elasticman.co.

답글 달기