[블로그 만들기 #3] 구글 서치 콘솔에 블로그 주소를 등록해보자 (feat. sitemap.xml)

들어가며

이전 포스팅에서 Vercel에서 제공해주는 도메인 대신 Cloudflare에서 싯가로 구매한 개인 도메인을 연결해봤습니다.

이제 인터넷 세상에 개인 도메인으로 등기 올렸으니, 전입 신고를 해야겠죠? 요즘 잘나가는 구글이라는 스타트업을 통해서 인터넷 세상으로의 전입 신고인 크로링 요청을 시작해봅시다.

구글 서치 콘솔(Google Search Console)

수십억개의 페이지가 있는 인터넷 세상에서, 작고 소중한 저희 블로그에 글 아무리 작성해도 누군가 발견해주지 않으면 도메인 주소 외우고 있는 블로그 주인 말고는 접근을 할 방법도, 이유도 없습니다.

구글에서는 크롤링 요청 보내는 방식이 촌스럽게 서류 작성해서 이메일, 전화로 요청을 보내는게 아닌, 누구나 쉽게 사이트 요청 할 수 있도록 Google Search Console이라는 페이지를 제공해주고 있습니다.

당연한 이야기지만 일단 구글 서치 콘솔에 로그인 한 다음에

저희가 소유한 블로그 주소를 입력해준 후에

저희 소유의 도메인이라는 것을 확인하기 위해 TXT 레코드 인증요청이 나오면

1. 안내대상: 모든 도메인 제공업체 (TXT 레코드 복사 & 붙여넣기가 가장 깔끔해서 직접 붙여넣겠습니다)
2. 레코드 유형: TXT
3. TXT 레코드: google-site-verification=xxxxx (그대로 복사해주시면 됩니다)

저희 도메인 관리하는 Cloudflare Dashboard 접속한 후, DNS - Records - Add Records 클릭.

1. Type: TXT
2. Name: blog (저희가 설정한 서브도메인)
3. Content: google-site-verification=xxxxx (구글 서치 콘솔에서 제공해준 TXT 값)

이렇게 레코드 추가해주시면

저희가 그동안 등록한 모든 레코드 확인한 번 해준 다음에, 개발자답게 괜히 nslookup 요청 한번 날려주고

nslookup -type=txt blog.day1swhan.com

Server:		168.126.63.1
Address:	168.126.63.1#53

Non-authoritative answer:
blog.day1swhan.com	text = "google-site-verification=xxxx-xxxx"

다시 구글로 돌아와서 인증 완료 눌러주시면 이렇게 소유권 확인되었다고 알려줍니다.

구글이 자동화는 잘 돼 있지만, 사이트맵은 저희가 직접 제출해서 블로그 내부에 뭐가 있는지 알려줘야 합니다.

새로운 글 발행하고 Github에 배포해서 Vercel에서 빌드할 때 자동으로 sitemap.xml 파일을 생성할 수 있도록 next-sitemap 모듈을 설치해줍니다.

npm install next-sitemap

설치 완료되면 프로젝트 루트 폴더에 next-sitemap.config.js 파일을 생성해 주시고

// next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: "https://blog.day1swhan.com",
  generateRobotsTxt: true, // robots.txt 생성
  generateIndexSitemap: false, // sitemap.xml 파일 하나만 생성
  autoLastmod: false, // true면 빌드마다 덮어씌워져서 꺼놨습니다.
  robotsTxtOptions: {
    policies: [
      {
        userAgent: "*",
        allow: "/", // 봇들이 열심히 긁어갈 수 있도록 모두 allow
      },
    ],
  },
  transform: async (config, path) => {
    return {
      loc: path,
    };
  },
};

package.json 파일에 postbuild 명령어 추가해주시면 됩니다.

// package.json
{
  ...,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "postbuild": "next-sitemap --config next-sitemap.config.js"
  },
  ...
}

폴더 구조는 이렇게 되어있어야 합니다.

blog-starter-kit
├── _posts
├── node_modules
├── public
├── src
├── package.json
├── next-sitemap.config.js # next-sitemap 설정 파일
├── ...기타 파일 및 폴더들

이제 구글에 알려주기전에, 로컬에서 npm run build 명령어 실행해서 sitemap.xml 파일이 잘 생성되는지 확인해보겠습니다. 우선 빌드 명령어 입력하면

npm run build

....

○  (Static)  prerendered as static content
●  (SSG)     prerendered as static HTML (uses generateStaticParams)


> postbuild
> next-sitemap

✨ [next-sitemap] Loading next-sitemap config: file:///xxxx/xxx/blog-starter-kit/next-sitemap.config.js
✅ [next-sitemap] Generation completed

이렇게 public 폴더 내부에 robots.txt, sitemap.xml 파일들이 생성되면 빌드가 정상적으로 작동한다는 뜻이니, Vercel 배포 준비가 완료된 것입니다.

public
├── assets
├── favicon
├── robots.txt
└── sitemap.xml # 이걸 구글에 알려줘야 합니다.

이제 Vercel이 프로젝트 빌드할 수 있도록 Github에 push 해주시고

git add . && git commit -m "xxxx" && git push origin main

Vercel Build Logs 확인해보면 로컬에서 build 할때와 동일하게 sitemap.xml, robots.txt 파일이 생성된 것을 확인할 수 있습니다.

마지막으로 구글 서치 콘솔에 sitemap 등록하기전에 curl 요청날려서 접근 잘 되는지 확인 한번 해준 다음에

curl -i https://blog.day1swhan.com/sitemap.xml
HTTP/2 200
...
server: Vercel
x-vercel-cache: HIT

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://blog.day1swhan.com</loc>
<url><loc>https://blog.day1swhan.com/posts/vercel-blog-01</loc>
<url><loc>https://blog.day1swhan.com/posts/vercel-blog-02</loc>
</urlset>

구글한테 sitemap.xml 파일 링크 던져주면 이제 구글에게 "이 집은 사람 살아요"라고 선언한 셈입니다.

이렇게 사이트맵 잘 제출되었는지 확인해보시면 아직 상태 가져올 수 없다고 나오는데 걱정 말고 느긋하게 기다리시면 Googlebot이 알아서 sitemap.xml 확인 후 표시된 링크들 크롤링해 줍니다.

몇시간 걸린다더니 30분만에 Googlebot이 블로그 방문해서 사이트맵 정보 업데이트 해놨습니다.

마무리

이렇게 구글 서치 콘솔에 블로그를 등록하고 sitemap.xml까지 제출함으로써, 이제 진짜 저희 블로그가 세상에 존재하는 웹페이지가 되었습니다.

검색 결과에 반영되기까지는 시간이 걸릴 수 있고, 사람들이 방문 할지 안 할지 아무도 모르지만 세상에 저희 블로그 존재를 알렸다는 것만으로도 의미있다고 할 수 있겠습니다.

다음 포스팅에서는 광고비 태우지 않고도 검색 노출을 더 잘 되게 만드는 SEO 기본 설정과 meta 태그 추가 방법에 대해 알아보겠습니다.