개츠비(Gatsby) 구글 서치콘솔 등록 (Google Search Console)

[ 목차 ]

구글 서치콘설에 등록하기 위해서는 3단계를 거쳐야 합니다. 

1. sitemap.xml 

2. robots.txt

3. Google Search Console 등록

 

1. Sitemap.xml 생성

가장 먼저 sitemap.xml을 생성합니다. 생성 방법은 플러그인 추가로 쉽게 진행할 수 있습니다. gatsby-plugin-sitemap, gatsby-plugin-advanced-sitemap 플러그인을 추가해줍니다.

npm i gatsby-plugin-sitemap

// gatsby가 버전 5로 올라가면서 아래의 플러그인은 아직 설치가 안되고 있습니다.
npm i gatsby-plugin-advanced-sitemap

gatsby-config.js 에 플러그인을 추가해줍니다.

module.exports = {
	siteMetadata:{
    	siteUrl: 'https://......com/',
    },
    plugins: [
       ...
       'gatsby-plugin-sitemap'
       ...
   ],
};

build후 URL/sitemap-index.xml에 접속하면 sitemap을 확인할 수 있습니다.

 

2. Robots.txt 생성

robots.txt는 웹페이지 크롤링 봇들이 내 사이트를 크롤링을 할 때 어떤 부분을 허용하고, 어떤 부분을 제한할지 설정하는 파일입니다. 이 역시 gatsby-plugin-robots-txt 플러그인 추가로 간단히 해결할 수 있습니다.

npm i gatsby-plugin-robots-txt

gatsby-config.js 에 플러그인을 추가하고 설정해줍니다.

module.exports = {
	siteMetadata:{
    	siteUrl: 'https://......com/',
    },
    plugins: [
       ...
       'gatsby-plugin-sitemap',
       ...
       {
       	resolve: 'gatsby-plugin-robots-txt',
        options: {
        	host:'https://{my URL}.com/',
            sitemap: 'https://{my URL}.com/sitemap-index.xml',
            policy:[{ userAgent: '*', allow: '/'}],
        },
       },
       ...
   ],
};

 

3. Google Search Console 등록

서치 콘솔에서 새로운 사이트를 등록하는 방법은 [ 여기 ]포스팅을 참조하시기 바랍니다. 이제 <meta>태그를 적용시켜줘야하는데, 기본 Gatsby Starter로 시작했다면, src/components/layout.js파일을 수정하는게 편합니다. 우선 react-helmet이라는 플러그인을 설치해줍니다.

npm i react-helmet

그리고 아래와 같이 <Header /> 태그의 아래쪽에 <Helmet> 컴포넌트를 이용해서 코드를 추가해줍니다

import { Helmet } from "react-helmet"

// ...

return (
    <>
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      
      <Helmet>        
        <meta name="google-site-verification" content="{your google code}" />
      </Helmet>
      <div
        style={{
          margin: `0 auto`,
          maxWidth: `var(--size-content)`,
          padding: `var(--size-gutter)`,   
          
        }}
      >
  // ...

 

정상 적용되면 구글 서치콘솔에서 "확인" 등 다음단계 진행 시 소유권이 확인됩니다. 

(ps) 이 방법으로 적용이 안될 경우 seo.js파일에 직접 넣어주는 방법으로도 가능합니다.

return (
    <>
      <title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
      <meta name="description" content={metaDescription} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={metaDescription} />
      <meta property="og:type" content="website" />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:creator" content={site.siteMetadata?.author || ``} />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={metaDescription} />
      <meta
        key="google-site-verification"
        name="google-site-verification"
        content="인증코드" // 여기 추가
      />
      {children}
    </>
  )

 

다음으로는 서치콘솔 화면에서 sitemap.xml을 인식시켜줍니다.