22sook00 logo
SookDev
✍🏻
SookDev/
사이트맵 + 구글 서치콘솔 연동

사이트맵 + 구글 서치콘솔 연동

tag
seo
date
Feb 16, 2024
 
💡
해당 사이트맵 적용 스택 react gatsby
 
배포된 내 블로그를 다른사람이 구글 또는 네이버에 검색하여 볼 수 있도록 하려면 사이트맵을 등록 해야한다.
대표적으로 구글의 서치콘솔, 네이버의 서치어드바이저가 있다.
등록할때 내 프로젝트에 sitemap.xml 과 robot.txt 를 추가해야 하는데 과정은 다음과 같다.

🤔 sitemap.xml 이란?

사이트 맵은 검색 엔진이 웹 사이트의 페이지들을 더 지능적으로 크롤링할 수 있게 도와주는 일종의 웹 사이트 지도라고 볼 수 있다.
또한 크롤러에게 내가 사이트에서 중요하다고 생각하는 페이지를 알리고 이에 관련하여 중요한 정보를 제공한다.
다음의 플러그인은 우리가 네이버, 티스토리 같은 블로그가 글을 올릴때마다 자동화 해주듯이, 내가 쓴글을 자동화하여 seo 에 노출시키는 역할을 한다.
 
npm i gatsby-plugin-advanced-sitemap 
//or
sudo npm i gatsby-plugin-advanced-sitemap
후에 yarn build 후 public 폴더안에 뭔가 변화가 생기는데, 여기서 sitemap.xml 을 찾아 볼 수 있다.
내 url주소/sitemap.xml 을 치면 다음과같이 나오는데 이는 성공적으로 사이트맵이 프로젝트에 적용된 것이다.
ex ) https://sook-dev.vercel.app/sitemap.xml
notion image
 

🤔 robots-txt 란?

npm i gatsby-plugin-robots-txt
robots.txt는 검색엔진 크롤러에게 우리 사이트의 접근 허용 범위를 알려주는 파일이다.
구글에 따르면 웹 페이지를 숨기는 데 사용하는 것이 아닌 크롤러에 의해 웹 사이트 서버가 오버로드 될 수 있는 페이지를 막는데에 주로 사용된다고 한다.
뿐만 아니라 크롤러 트래픽을 관리하고 내 사이트 맵이 어디에 위치해 있는지도 알려줄 수 있다.
이 파일에 대한 요구사항은 다음과 같다.
  • 최상위 디렉토리에 존재해야 한다.
  • UTF-8로 인코딩 되어있어야 하며 확장자는 .txt 이어야 한다.
내용의 대략적인 생김새와 의미는 다음과 같다.
User-agent: *
Allow: /please-crawl/
Disallow: /dont-crawl/
Sitemap: https://www.example.com/sitemap.xml
  • User-agent: 접근을 제어할 봇(크롤러)의 이름, * 은 모든 봇들을 의미함 ex) Googlebot, Yeti 등
  • Allow: 크롤링 해줬으면 하는 영역
  • Disallow: 이크롤링 하지 않으면 하는 영역
  • Sitemap: 내 사이트 맵의 경로
만약 최상위 디렉토리에 이 파일이 존재하지 않는다면 크롤러는 모든 파일을 Allow로 인식한다.
이 파일의 존재가 필수는 아니지만, 크롤러와 소통(?)할 수 있는 수단이므로 잘 활용한다면 웹 사이트를 운영하는데 도움이 될 수 있다.(자세한 활용방법은 아직 잘 모르겠다)
이 파일 또한 Gatsby 플러그인을 사용하면 따로 생성하지 않아도 빌드할 때마다 알아서 만들어진다.
 
//gatsby.config.js
module.exports = {
  siteMetadata: {
    title: `프론트엔드 벨라의 개발블로그`,
    description: `주니어 프론트엔드, 벨라의 고군분투 개발 블로그 입니다.`,
    author: `sookyoung lee`,
    siteUrl: 'https://sook-dev.vercel.app' 
  },

  plugins: [
    'gatsby-plugin-image',
    'gatsby-plugin-postcss',
    //'gatsby-plugin-sitemap', 해당 코드는 더이상 쓰지 않으며 advanced-sitemap으로 대체.
    'gatsby-plugin-advanced-sitemap',
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        host: 'https://sook-dev.vercel.app',
        sitemap: 'https://sook-dev.vercel.app/sitemap.xml',
        policy: [{ userAgent: '*', allow: '/' }], //모든 조건에 크롤링이 가능하도록 설정
      },
    },
다음과 같이 플러그인을 확인하고 빌드 시켜준다.
 
빌드 후 이제 본격 head 에 웹마스터 도구를 걸어줘야 한다.
대표적으로 구글의 서치콘솔과 네이버의 서치 어드바이저가 있는데, 나는 구글의 서치콘솔에 우선 연결 해보았다.

구글 서치콘솔

Google Search Console
Use Search Console to monitor Google Search results data for your properties.
Google Search Console
https://search.google.com/search-console/welcome?utm_source=about-page
notion image
URL 접두어 선택하여 배포된 내 사이트의 url 을 넣도록 한다.
그 후 소유권확인을 위한 모달이 생성되는데 그 중 다른확인 방법의 HTML 태그를 복사하여 <Helmet> 태그가 있는곳에 추가하도록 한다.
<Helmet>
				<title>{title}</title>
				<meta name="description" content={description} />
				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
				<meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
				...
				<meta
					name="google-site-verification"
					content="콘텐츠토큰"
				/>

				<html lang="ko" />
			</Helmet>
위와같이 작성 후 배포를 완료 한 후 (배포전에는 적용 x)
구글 서치콘솔에서 확인버튼을 누르면 서치콘솔의 대시보드로 이동하게 된다.
sitemaps 탭의 새 사이트맵 추가에 내링크/sitemap.xml 을 제출하고 짧게는 3일~일주일 정도 기다리면 승인이 되고 구글에서 내 블로그 글을 만날 수 있게 된다.
notion image