Next.js에서 SEO 최적화를 하기 위한 방법들, 그리고 테스트를 위한 Light house 사용법

2024. 7. 28. 22:25

안녕하세요? 어느날 문득 운영단계로 넘어간 작년의 프로젝트가 잘 운영되고 있는지에 대해 살피던 중 SEO가 여전히 잘 안되고 있음을 느꼈습니다. 비록 지금은 제 손을 잠시(?) 떠난 프로젝트이지만, 이상한 애착이 생겼다고해야 할까요... 회사에서는 SPA를 지향하고 있고 팀에서 경험이 전무했던 Next.js를 과감히 도입 결정했던 이유도 SEO 때문이었는데 마음이 불편했습니다. 어쨌든 회사에서는 제 할 일이 주어져있기에 주말에 시간을 내어 스스로 알아보고 해결할 수 있는 방법을 모색해보기로 했습니다. 사족이 길었습니다만 궁금하잖아요?

SEO(검색 엔진 최적화)는 웹사이트의 가시성을 높이고 검색 엔진 결과 페이지에서 더 높은 순위를 차지하기 위해 중요한 요소입니다. Next.js는 React 기반의 프레임워크로, SEO 최적화에 필요한 다양한 기능을 제공하여 웹사이트를 더욱 검색 엔진 친화적으로 만들 수 있습니다. 이번 블로그 포스트에서는 Next.js를 사용하여 SEO를 최적화하는 방법에 대해 알아보겠습니다. 그리고 간단히 라이트 하우스라는 구글의 익스텐션 툴을 이용해 성능 확인하는 방법을 알아보겠습니다!

1. 동적 라우팅 및 정적 생성

Next.js의 강력한 기능 중 하나는 동적 라우팅(dynamic routing)과 정적 사이트 생성(SSG, Static Site Generation)입니다. 동적 라우팅을 통해 사용자 친화적인 URL 구조를 만들 수 있으며, 정적 사이트 생성을 통해 빠른 로딩 속도와 검색 엔진에 최적화된 페이지를 제공할 수 있습니다.

// pages/taehoBlog/[slug].js
import { useRouter } from 'next/router';
import { getAllPosts, getPostBySlug } from '../../lib/api';

export async function getStaticPaths() {
  const posts = getAllPosts();
  const paths = posts.map(post => ({ params: { slug: post.slug } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = getPostBySlug(params.slug);
  return { props: { post } };
}

const BlogPost = ({ post }) => {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
};

export default BlogPost;

상기 샘플소스코드는 동적 라우팅을 설정하고, 정적으로 페이지를 생성하는 것을 보여주며 이를 통해 SEO 최적화에 도움을 줍니다.

그렇다면 왜 동적 라우팅이 SEO에 도움이 될까요?

이 부분에는 여러가지 이유가 있겠습니다만 주된 이유로는 아래와 같습니다.

SEO 친화적인 URL 구조:
- 동적 라우팅을 사용하면 SEO 친화적인 URL을 쉽게 생성할 수 있습니다. 예를 들어, example.com/blog/post-title 같은 구조는 example.com/?id=123와 같은 구조보다 검색 엔진과 사용자 모두에게 더 이해하기 쉽습니다. 검색 엔진은 URL에 포함된 키워드를 분석하여 페이지의 주제를 파악하는 데 도움을 받습니다.
콘텐츠 조직화:
- 동적 라우팅은 콘텐츠를 카테고리나 태그 별로 정리하는 데 유용합니다. 이는 검색 엔진이 사이트 구조를 더 잘 이해하고 크롤링할 수 있도록 도와줍니다. 예를 들어, 블로그 포스트를 example.com/blog/category/post-title와 같이 구성하면 특정 주제에 대한 모든 관련 포스트를 쉽게 찾을 수 있습니다.

이어서 정적 생성이 SEO에 도움이 되는 이유 뭘까요?

빠른 로딩 속도:
- 정적으로 생성된 페이지는 빌드 타임에 HTML 파일로 생성되므로, 서버 요청 시 동적으로 생성되는 페이지보다 로딩 속도가 훨씬 빠릅니다. 페이지 로딩 속도는 검색 엔진 순위에 중요한 요소입니다. 구글은 빠른 로딩 속도를 사용자 경험의 중요한 요소로 간주하여 높은 순위를 부여합니다.
예측 가능한 크롤링:
- 정적으로 생성된 페이지는 빌드 시점에 모든 HTML이 생성되므로, 검색 엔진이 페이지를 크롤링할 때 동적 콘텐츠 로딩 문제 없이 페이지 전체를 쉽게 인덱싱할 수 있습니다. 이는 JavaScript를 통해 동적으로 로드되는 콘텐츠보다 SEO에 더 유리합니다.
페이지 안정성:
- 정적으로 생성된 페이지는 변경되지 않기 때문에, 검색 엔진이 크롤링할 때 일관된 콘텐츠를 확인할 수 있습니다. 이는 동적으로 생성되는 페이지에서 발생할 수 있는 다양한 변수와 변경 사항으로 인해 발생하는 크롤링 오류를 줄여줍니다.

2. 메타 태그 설정

메타 태그는 검색 엔진이 페이지의 내용을 이해하는 데 중요한 역할을 합니다. Next.js에서는 next/head를 사용하여 메타 태그를 쉽게 설정할 수 있습니다.

import Head from 'next/head';

const BlogPost = ({ post }) => {
  return (
    <>
      <Head>
        <title>{post.title} | My Blog</title>
        <meta name="description" content={post.excerpt} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:type" content="article" />
      </Head>
      <article>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </article>
    </>
  );
};

이 코드는 페이지의 제목과 설명을 메타 태그로 설정하여 검색 엔진이 페이지의 내용을 더 잘 이해하도록 돕습니다.

소스코드에 보시면 메타 태그 엘리먼트에 og라는 속성 값이 눈에 띄는데 이것은 무엇을 의미할까요?

메타 태그 설정에서 og는 "Open Graph"의 약자입니다. Open Graph 프로토콜은 페이스북이 개발한 표준으로, 웹 페이지가 소셜 미디어 플랫폼에서 어떻게 공유되고 표시되는지를 제어합니다. Open Graph 메타 태그를 사용하면 웹 페이지의 미리보기, 이미지, 제목, 설명 등을 지정할 수 있어 소셜 미디어에서의 콘텐츠 표현을 개선할 수 있습니다. 주요한 오픈 그래프 메타 태그를 아래에 기록해두겠습니다.

og:title:

웹 페이지의 제목을 정의합니다. 이 제목은 페이지가 소셜 미디어에서 공유될 때 표시됩니다.

og:description:

웹 페이지의 간단한 설명을 정의합니다. 이 설명은 페이지가 소셜 미디어에서 공유될 때 표시됩니다.

og:image:

소셜 미디어에서 공유될 때 표시할 이미지 URL을 정의합니다. 이미지가 시각적으로 매력적이면 더 많은 클릭과 공유를 유도할 수 있습니다.

og:url:

웹 페이지의 URL을 정의합니다. 이 URL은 페이지가 소셜 미디어에서 공유될 때 표시됩니다.

og:type:

웹 페이지의 타입을 정의합니다. 예를 들어, 웹 페이지가 기사라면 article로 설정합니다.

Open Graph 메타 태그는 웹 페이지가 소셜 미디어에서 어떻게 보이는지를 제어하는 중요한 도구입니다. Next.js 프로젝트에 이러한 태그를 적절히 설정하여, 콘텐츠가 소셜 미디어에서 더 잘 공유되고 더 많은 트래픽을 유도할 수 있도록 해봅시다..

3. 정적 사이트 생성(SSG) 및 서버 사이드 렌더링(SSR)

Next.js는 SSG와 SSR을 모두 지원하여 SEO 최적화에 유리합니다. SSG는 빌드 타임에 HTML 파일을 생성하여 빠른 로딩 속도를 제공하고, SSR은 서버에서 페이지를 렌더링하여 검색 엔진이 페이지 내용을 쉽게 크롤링할 수 있도록 합니다.

정적 사이트 생성

export async function getStaticProps() {
  const posts = getAllPosts();
  return {
    props: { posts },
  };
}

const TaehoBlog = ({ posts }) => {
  return (
    <div>
      <h1>TaehoBlog</h1>
      <ul>
        {posts.map(post => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaehoBlog;

서버 사이드 렌더링

export async function getServerSideProps() {
  const posts = await fetchPostsFromAPI();
  return {
    props: { posts },
  };
}

const TaehoBlog = ({ posts }) => {
  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <a href={`/blog/${post.id}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaehoBlog;

4. 사이트맵 및 robots.txt 설정

사이트맵은 검색 엔진이 사이트의 구조를 이해하고 모든 페이지를 크롤링하는 데 도움을 줍니다. next-sitemap 패키지를 사용하면 쉽게 사이트맵을 생성할 수 있습니다.

npm install next-sitemap

// next-sitemap.config.js
module.exports = {
  siteUrl: 'https://taeho.com',
  generateRobotsTxt: true,
};


// next.config.js
module.exports = {
  // ...기타 설정들
  generateRobotsTxt: true,
};

이 설정은 사이트맵과 robots.txt 파일을 자동으로 생성하여 검색 엔진이 사이트를 더 잘 크롤링하도록 합니다.

5. Light house로 성능 검증해보기

모든 설정을 마쳤다면, Light house를 이용해 서비스의 검색엔진 최적화 성능을 확인해보면 좋을 것 같아요

Lighthouse는 웹 페이지의 성능, 접근성, SEO, PWA(Progressive Web App) 등을 분석하여 개선할 수 있는 포인트를 제공하는 오픈 소스 도구입니다. Google Chrome의 개발자 도구에 내장되어 있으며, 별도의 CLI(Command Line Interface) 또는 웹 버전으로도 사용할 수 있습니다. 4장에서는 Lighthouse를 사용하여 검색 엔진 최적화(SEO) 기능을 활용하는 방법에 대해 설명하겠습니다.

Chrome 브라우저에서 Lighthouse 실행

페이지 로드: SEO 분석을 원하는 웹 페이지를 Chrome 브라우저에서 엽니다.
개발자 도구 열기: Ctrl + Shift + I(Windows) 또는 Cmd + Option + I(Mac)를 눌러 개발자 도구를 엽니다.
Lighthouse 탭 선택: 개발자 도구에서 Lighthouse 탭을 선택합니다.
SEO 선택: Lighthouse 탭에서 원하는 카테고리를 선택합니다. SEO 분석을 위해서는 Search Engine Optimization 옵션을 선택합니다.
분석 시작: Generate report 버튼을 클릭하여 분석을 시작합니다. Lighthouse는 페이지를 분석하고 보고서를 생성합니다.

SEO를 적용하기 전과 후를 한번 점검해보시기 바랍니다.

포스팅을 마치며...

Next.js를 사용하여 SEO를 최적화하는 방법을 살펴보았습니다. 동적 라우팅, 메타 태그 설정, 정적 사이트 생성, 서버 사이드 렌더링, 사이트맵 설정 등을 통해 검색 엔진에 최적화된 웹사이트를 구축할 수 있습니다. 개인적으로 공부하면서 느낀 점은 (1) 메타태그 잘쓰기, (2) 검색엔진을 위한 SSR의 적절한 활용, (3) robots.txt와 sitemap.xml 잘 작성해주기.. 가 핵심인 것 같아요. 아, 그리고 팁을 드리자면 요즘의 검색엔진은 메타태그의 keyword에 대해서는 그렇게 높은 점수를 주지 않는 것이 현실인 것 같다고 하네요(스팸등의 이유로...) 아무쪼록 Next.js의 강력한 기능을 활용하여 더 많은 트래픽과 더 높은 검색 엔진 순위를 달성해보세요. :)

'Develop Issue > Vue.js' 카테고리의 다른 글

Vue.js Spring boot 개발환경 셋팅 (374)	2020.01.03
vue.js에서 axios 사용 시 this 접근이 안돼는 문제 (1)	2020.01.02

Develop Destroyer