호진방 블로그
기술

Next.js 블로그 SEO 개선해보기

# Google Search Console, Sitemap, Robots, 구글 애널리틱스를 이용하여 SEO를 개선해봅시다.

2024년 07월 01일

On This Page

개선 이전 SEO 전략

현재 Next.js 블로그 프로젝트에서 사용되고 있는 SEO 전략은 메인 페이지와 글 상세 페이지로 나뉘는데, 메인 페이지에서는 Layout에서 설정한 기본 메타데이터를 사용하고, 글 상세 페이지에서는 remark-frontmatter를 이용하여 Frontmatter 구문을 파싱한 후, 이를 remark-mdx-frontmatter로 넘겨주어 메타데이터를 생성한다.

Layout.tsx
export const metadata = {
  title: '호진방 블로그',
  description: 'banghojin.site',
  openGraph: {
    title: '호진방 블로그',
    description: '안녕하세요, 방호진의 기술 블로그입니다.',
    url: 'https://banghojin.site',
    siteName: '호진방 블로그',
    images: {
      url: './OG_IMAG.png',
    },
  },
  metadataBase: new URL('https://banghojin.site'),
};

글 상세페이지

---
title: Next.js 블로그 만들기 Ver.1
tag: experience
description: Next.js와 MDX를 이용하여 개발 블로그를 만들어보았습니다.
---


결과

메인 페이지와 글 상세 페이지 각각에 적합한 메타데이터를 설정함으로써, 검색 엔진 최적화(SEO)를 효과적으로 수행하고 있다.

❗ 하지만 나는 아직 배고프다. LightHouse SEO 100점이 목표가 아닌, 내가 만든 블로그에 내가 쓴 글을 구글 상위 검색창에 노출시켜보고 싶다는 목표를 가지고 최대한으로 SEO를 최적화 해볼것이다. (물론 좋은 글이 우선이긴 하다..)


필요한 사전지식

SEO

-> SEO(Search Engine Optimization)는 웹사이트나 웹페이지를 최적화하여 구글과 같은 검색 엔진에서 더 높은 순위를 얻기 위한 작업을 의미한다. 이는 사용자가 특정한 키워드를 검색할 때, 해당 웹사이트나 웹페이지가 검색 결과의 상위에 나타나도록 만드는 과정을 포함하는데, SEO 작업은 광고와는 달리 직접적인 비용이 들지 않으며, 시간이 걸리지만 최적화를 통해 자연스럽게 검색 결과의 상위에 노출될 수 있도록 해준다.

크롤러

-> 크롤러는 웹상의 웹사이트들을 자동으로 방문하여 페이지 정보를 수집하는 프로그램이다. 크롤러는 웹사이트를 방문하여 해당 페이지에 존재하는 다른 페이지나 사이트로 이동하는 링크를 찾아내고, 이를 통해 다음에 크롤링할 페이지 리스트를 작성한다. 이 리스트를 따라가며 크롤러는 계속해서 페이지와 사이트를 탐색하는데, 페이지를 방문할 때 크롤러는 HTTP 요청을 보내고, 서버로부터 받은 Response Body을 가져온다. 이렇게 받은 HTML에서 링크와 데이터를 추출하게 된다.

인덱싱

-> 어떠한 정보에 접근하기 위해 용이하게 만드는것이라는 의미를 갖는데, 크롤러는 크롤링 한 웹 페이지의 페이지를 각 단어로 분리하여 각 단어에 대해 weight와 relevance를 할당하고 최종 결과값을 인덱스한다. 우리가 구글에 검색하면 검색엔진은 일치하는 결과를 인덱스에서 검색한다.

Google Search Console 등록

Google Search Console?

https://goo.gle/searchconsole

현재 나의 블로그는 도메인을 구입하여 운영중이므로, 도메인 인증을 통해 서치 콘솔에 등록해주었다.

Sitemap, Robots 추가

sitemap.xml

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = getPosts();
 
  const baseUrl = 'https://www.banghojin.site';
 
  const postsSitemap: MetadataRoute.Sitemap = posts.map((post) => ({
    url: `${baseUrl}/${post.slug}`,
    lastModified: new Date(),
    changeFrequency: 'daily',
    priority: 0.7,
  }));
 
  return [
    {
      url: `${baseUrl}`,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    ...postsSitemap,
  ];
}

모든 블로그 글들은 /태그/글ID 형태의 주소를 갖기 때문에 post.slug 로 해당 주소를 매칭 시켜주었다.


위 사진처럼 주소/sitemap.xml 으로 이동 했을 때 해당 데이터 형식대로 나온다면 성공


마지막으로 google search console의 사이트맵에 업데이트한 사이트맵 url을 적용해준다.


robots.txt

import { MetadataRoute } from 'next';
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
      },
    ],
    sitemap: 'https://www.banghojin.site/sitemap.xml',
  };
}

txt 파일로 직접 만들 수 있지만, Next.js에서는 function robots 으로 간편하게 생성해준다. Disallow 으로 크롤러의 접근을 막을 수도 있지만, 현재 나의 블로그에서는 민감한 데이터가 없기에 따로 설정하진 않았다. 방금 작성한 sitemap 또한 적용시킨 모습이다.


구글 애널리틱스 적용

SEO 최적화를 위해 왜 구글 애널리틱스를 적용해야 할까?

💡 즉, SEO 최적화를 위해 구글 애널리틱스를 사용하는 이유는 자연 검색(광고가 아닌 순수 검색)을 통해 유입된 트래픽과 사용자 행동을 분석하여 더 효과적인 SEO 전략을 수립하기 위해서 사용된다.

#1

https://analytics.google.com/

구글 애널리틱스에서 기본 설정 및 도메인 연결

#2

function GoogleAnalytics() {
  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
   
     gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');
 `}
      </Script>
    </>
  );
}

구글 애널리틱스에서 기본으로 제공하는 코드는 script지만 NextScript로 변환해주었다.

#3

const GA_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
 
export const pageview = (url: URL | string) => {
  window.gtag('config', GA_ID as string, {
    page_path: url,
  });
};
 
type gtagEvent = {
  action: string;
  category: string;
  label: string;
  value: string;
};
 
export const event = ({ action, category, label, value }: gtagEvent) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value,
  });
};

페이지뷰와 이벤트 속성 함수를 작성해주었는데,

const pathname = usePathname();
 
useEffect(() => {
  if (pathname) {
    pageview(pathname);
  }
}, [pathname]);

페이지뷰는 GoogleAnalytics 함수에서 pathname 을 이용하여 특정 페이지 주소를 추출하여 페이지 분석한다

const handleClick = () => {
  event({
    action: 'click_toTop', // 예시. 위로 올라가기 버튼
    category: 'toTop',
    label: 'isClicked_toTop',
    value: postId,
  });
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

이벤트는 컴포넌트에서 사용 된 이벤트 핸들러 함수에서, event 속성에 맞게 작성해주어 이벤트를 연결해준다

#결과

me
@banhogu
안녕하세요 배움을 나누며 함께 전진하는 1년차 주니어 개발자 방호진입니다.