SEO와 Next.js

Dev 2022. 11. 15. 04:51

1. SEO

사람들은 모르는 것이 생기면 검색을 통해 답을 얻고 문제를 해결합니다.

그러므로, 모든 비즈니스 웹 사이트 소유주들은 검색 과정에서 자신의 사이트가 찾기 쉬운 위치에 놓이길 원할 것입니다.

방문자 수는 이내 수익과 직결되는 사항이기 때문입니다.

SEO(Search Engin Optimization)는 웹 사이트가 검색엔진 상위에 노출될 수 있도록 최적화하는 과정을 말합니다.

본 글은 프로젝트 과정 중 SEO와 관련한 작업을 거치며 읽은 문서들과 경험한 내용을 정리한 글 입니다.

사실 SEO를 이루는 데에는 기획을 포함하는 전반적인 관리가 필요합니다.

그 중, FE 개발자 관점에서 SEO와 관련한 내용을 디테일하게 작성하려 노력했습니다.

SEO를 이해하고 적용하는 과정에서 참고하기 좋은 글이 되었으면 좋겠습니다.

1.1 Google SEO

SEO 진행 과정에 있어 최우선으로 타겟이 되는 Google 검색엔진을 기준으로 글을 작성하겠습니다.

2021년 기준, 대한민국의 경우는 네이버가 가장 높은 검색 점유율을 보유 중입니다.

다만, 구글 검색엔진에 대한 이해가 뒷받침된다면 기타 검색엔진에서도 유효한 효과를 기대할 수 있다고 생각합니다.

검색엔진별로 SEO 점수를 측정하는 기준은 약간의 차이가 있습니다.

Google을 포함한 대부분은 검색엔진은 다음의 단계를 차례대로 수행합니다.

크롤링

검색엔진 로봇이 있는 웹에 대하여 데이터를 수집해가는 과정을 말합니다.

인덱싱

구글봇이 발견한 URL을 분석하고 내용을 파악합니다. 후에 정보를 가공해 자사 DB에 저장합니다.

랭킹

URL을 평가한 후, 사용자 검색어와 가장 관련성이 높은 페이지를 결정하고 SERP(Search Engin Result Page)로 구성합니다.

다음은 Google 검색엔진의 SEO 점수 중요도의 배점과 관련한 표입니다.

Keyword Relevancy

Search Engine Control

키워드 관련성과 검색엔진 제어를 나누어 점수를 측정함을 확인할 수 있습니다.

1.2 SEO 최적화 과정

상위 Google 검색엔진의 SEO 점수 측정 과정과 중요도 배점표 내용을 포함하는 SEO 과정의 작성을 이어나갑니다.

1.2-1 페이지 속도 개선

배점표에 존재하지 않지만, Google이 SEO 점수 측정에 고려하는 주요 요소 중 하나는 페이지 렌더링 시간입니다.

다음의 '구글 페이지 속도 테스트 도구'를 통해 모바일 환경과 데스크톱 환경을 나눠 속도를 수치로 확인할 수 있습니다.

https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect

제가 개발 과정에 참여했던 웹 사이트를 예시로 검진해보겠습니다. ( https://ozjejakso.com/ )

테스트 도구를 통해 검진 후 개선이 가능하지만, 제작 과정 중 다음의 사항들을 신경 쓰며 제작한다면 추후 수정할 부분이 적어질 것입니다.

이미지의 크기를 적절히 조절하기
script 무게 줄이기
데이터 캐싱 처리
리디렉션 최소화

웹 최적화와 관련하여서는 언급할 부분이 많아 조만간 다른 글에서 상세히 다루도록 하겠습니다.

1.2-2 Semantic Markup (메타태그 포함)

<header>, <footer>, <nav>
<main>, <article>, <section>, <aside> 
<ul>, <li>

상위 Google SEO 점수 배점표에 명시되어있지 않은 HTML Tag 들이 SEO 점수 측정에 영향이 있을까요?

이에 대해서는 실험적으로 테스트를 하신 분의 글이 존재하니 해당 블로그를 읽어주시면 되겠습니다.

(결론만 말씀드리자면 영향이 있습니다.)

<title>, <h1 / h2 / h3 / h4>, <strong>, <a>
'alt' attribute사용 지향, 'hidden' attribute사용 지양.

상위 태그들은 Google SEO 점수 배점표에도 명시되어 있는 태그들로, 명백하게 SEO 점수에 영향을 줍니다.

<meta>

웹페이지가 담고 있는 정보가 아닌 웹페이지 자체의 정보를 명시하기 위해 사용되는 HTML 태그입니다.

<head>요소 아래 배치되어 일반 사용자가 마주하는 웹페이지의 콘텐츠에는 아무 영향을 주지 않습니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

developer.mozilla.org

이중 OG(Open Graph)는 <meta>태그의 한 종류로, URL로 공유되는 대부분의 콘텐츠가 '보여지는 방식'을 결정합니다.

Facebook, KakaoTalk, Slack, Twitter 등의 SNS에서 공유될 때, 동작합니다.

하단 트위터 카드는 트위터에서 우선적으로 활용되는 meta 정보를 지정할 수 있는 방식입니다.

<meta property="og:title" content="땃쥐 1시간"/>
<meta property="og:description" content="땃쥐가 1시간동안 먹방을 합니다."/>
<meta property="og:site_name" content="Youtube"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://i.ytimg.com/vi/2IMabIUHnMQ/hqdefault.jpg?s…RhlIFAoQjAP&rs=AOn4CLDxmWtra4xrEZ-VNSu5CckM0tv9Mw"/>
<meta property="og:url" content="https://www.youtube.com/watch?v=2IMabIUHnMQ&t=65s"/>

<meta property="twitter:title" content="땃쥐 1시간"/> 
<meta property="twitter:description" content="땃쥐가 1시간동안 먹방을 합니다."/> 
<meta property="twitter:site" content="Youtube"/> 
<meta property="twitter:card" content="website"/> 
<meta property="twitter:image" content="https://i.ytimg.com/vi/2IMabIUHnMQ/hqdefault.jpg?s…RhlIFAoQjAP&rs=AOn4CLDxmWtra4xrEZ-VNSu5CckM0tv9Mw"/>
<meta property="twitter:url" content="https://www.youtube.com/watch?v=2IMabIUHnMQ&t=65s"/>

Open Graph의 동작을 개발 과정 중 확인하는 방법은 글의 뒷부분에서 다루고 있습니다.

1.2-3 robot.txt

robot.txt는 웹 크롤러에게 🚏교통 표지판🚏 같은 역할을 해줍니다.

크롤링 봇에게 웹 사이트 내 접근하지 말아야 할 부분을 알려 크롤링 트래픽을 차단해 성능 이슈의 발생을 방지하거나

페이지, 동영상, 기타 파일 등의 관계에 대한 정보를 제공하는 사이트맵 위치 같은 중요 정보를 포함합니다.

https://developers.google.com/search/docs/crawling-indexing/robots/intro

robots.txt 소개 및 가이드 | Google 검색 센터 | 문서 | Google Developers

robots.txt는 크롤러 트래픽을 관리하는 데 사용됩니다. robots.txt 소개 가이드에서 robots.txt 파일의 정의와 사용 방법을 알아보세요.

developers.google.com

기본 문법 및 작성 방식

robots.txt를 구성하는 요소는 다음과같이 크게 네 가지가 존재합니다.
"User-agent" 요소는 필수이며 나머지는 옵션입니다.

User-agent: robots.txt 에서 지정하는 크롤링 규칙이 적용되어야 할 크롤러를 지정합니다.
Allow: 크롤링을 허용할 경로입니다.
Disallow: 크롤링을 제한할 경로입니다.
Sitemap: 사이트맵이 위치한 경로의 전체 URL입니다.(https:// 부터 /sitemap.xml 까지의 전체 절대경로)

예시

다음은 Google 크롤링 봇에게는 nogooglebot 폴더 하단의 모든 파일에 대해 크롤링을 막고

그 외 모든 크롤링 봇에게는 모든 파일에 대해 크롤링을 허용하는 형식입니다.

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: http://www.example.com/sitemap.xml

1.2-4 페이지, 문서 제어 태그

캐노니컬 태그(Canonical tag)

캐노니컬 태그는 URL 주소만 다른 동일한 페이지에서 동작하며, 대표가 되는 URL을 알려주는 역할을 하는 태그입니다.

https://www.mysite.com/shop
https://www.mysite.com/shop?ct=1

가령 위의 주소는 URL은 다르지만 모두 동일한 페이지로 연결될 수 있습니다.

이 경우에 검색엔진은 해당 페이지들을 동일한 페이지의 중복으로 간주하여 크롤링 횟수가 적어지는 문제가 생길 수 있습니다.

이러한 문제를 해결하기 위해 <head>태그 사이에 캐노니컬 태그를 삽입합니다.

<head>
   <link rel="canonical" href="https://www.mytest.com/detail">
</head>

캐노니컬(Canonical) 태그 적용 시 주의사항

완전 동일한 페이지인지 명확히 구분해야 합니다.
캐노니컬 태그를 절대경로로 적용해야 합니다.
캐노니컬 태그가 중복으로 사용되서는 안됩니다.

1.2-5 반응형을 통한 모바일 대응

데스크탑 페이지보다 모바일 페이지를 우선적으로 크롤링하여 조금 더 높은 점수를 부여하고 있습니다.

SEO를 위해서 반응형 웹 구현은 선택이 아닌 필수가 되었습니다.

다음의 사이트에서 모바일 친화성을 테스트 할 수 있습니다.

https://search.google.com/test/mobile-friendly

모바일 친화성 테스트 - Google Search Console

Search Console 정보 Search Console에서는 해킹된 콘텐츠 감지와 같은 중요한 사이트 오류를 알리고 콘텐츠가 검색결과에 표시되는 방식을 관리할 수 있도록 돕습니다.

search.google.com

동일한 페이지로 테스트 해보았습니다.

크롤링 허용여부를 기준으로 판단하는 듯 합니다.

1.3 SEO점수 확인

마지막은 SEO 진단 사이트입니다. 진단 사이트는 구글에서 따로 제공하지 않습니다.

대신 SEO 관련 마케팅 에이전시에서 만든 사이트들이 존재합니다.

이 SEO Checker들은 해당 회사들만의 기준에 의해 만들어져, 같은 웹사이트를 넣어도 다른 점수가 나올 수 있습니다.

하지만 개선 대상에 대한 기준은 크게 다르지 않으므로 보기에 편리한 SEO Checker를 사용하시면 되겠습니다.

여기까지 SEO의 개본 개념과 적용과정을 살펴보았습니다.

하지만 개발환경이 백엔드와 함께 작업하지 않는 CRA환경이라면, SEO에 한계를 맞이할 수 있습니다.

크롤러 봇이 읽은 HTML문서는 서버 사이드에서 사전에 구성되어야 하기 때문입니다.

React 공식문서에는 ReactDOMServer를 사용하여 이 문제를 해결할 수 있다고 명시해놓았습니다.

하지만 해당 방법은 express서버를 구동하여 pre-render를 이루어야 하므로 과한 방법이라고 할 수 있습니다.

따라서 해당 방법은 적절한 해결 방법은 아닙니다.

2. Next.js

Next.js는 React로 만드는 서버사이드 렌더링 프레임워크입니다.

"최적화를 위한 기능이 잘 구현된 React.js를 사용하면서도 왜 추가적인 프레임워크가 필요할까?" 🤨
"오직 SEO때문이면 나는 사용할 일이 잘 없을 것 같은데?" 😞

SEO와 관련한 부분에서의 이점외에도 Next.js는 파격적인 장점들을 갖고 있습니다.

해당 부분을 잠시 언급하고 넘어가겠습니다.

2.1 Next.js의 장점

Next.js 사용시 얻을 수 있는 가장 큰 장점은 다음의 4가지입니다.

2.1-1 Automatic Routing

Next.js는 프로그램 최상단 pages폴더 밑의 파일 구조를 통해 자동 라우팅 처리를 구현합니다.

CRA환경에서 react-router-dom을 통해 경로를 일일히 지정해줘야 했던 것에 비하여 간편합니다.

2.1-2 Server Side Rendering

CSR보다 초기 렌더링이 빠른 SSR을 편리하게 구현할 수 있습니다.

CRA환경에서도 SSR을 구현할 수 있고, SSR없이 SEO적용이 불가능한 것도 아니지만, 이 역시 편리함의 영역입니다.

2.1-3 Automatic Code Splitting

next.js는 리소스가 임포트 된것들을 분석하여, 로딩한 페이지가 꼭 필요로하는 JS 파일만 로드합니다.

그래서 첫페이지 로드가 빠릅니다. 사이트 속도 개선 측면에서 유리하게 작용할 수 있습니다.

2.1-4 Dynamic Meta Tag (by. Next library)

기본적인 CRA환경에서는 구현이 어려웠던 동적 SEO의 구현을 가능하게 합니다.

이 중 SEO와 관련있는 Dynamic Meta Tag와 SSR의 일부와 관련하여 글의 작성을 이어나가겠습니다.

2.2 Next.js를 통한 SEO 과정

개발환경에서 Next를 사용한 동적 SEO 구현이 가능한 이유는 Next가 서버의 역할을 해주기 때문입니다.

과정이 정상적으로 진행되기 위해서는 'next build'를 거쳐 웹에 Next 서버를 먼저 동작시키는 것이 선행으로 이루어져야 합니다.

서버가 존재하지 않는다면 SSR 함수를 사용할 수 없게 되기 때문입니다.

2.2-1 Dynamic Meta Tag

Next.js에서는 _document.js 파일에서 <meta>를 선언하는 방식으로 dynamic SEO를 구현합니다.

_document.js파일은 next로 시작한 프로젝트 내에서 _app.js파일과 함께 각 페이지의 글로벌한 초기화에 관여합니다.

해당 파일 내에 DefaultSEO를 기본으로 동작시키며, 그 외 dynamic SEO는 SSR을 통해 넘어온 props로 처리합니다.

// pages/_document.jsx

import Head from 'next/head';
import { DefaultSeo } from 'next-seo';

import isEmptyObj from 'utils/isEmptyObj';

import { DEFAULT_SEO } from 'constants/defaultSEO';
import SEO from 'components/common/SEO';

function MyDocument({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>이_땃쥐의 SEO</title>
        <meta name="description" content="SEO 설명" />
        <link rel="icon" href="/땃쥐.jpeg" />
      </Head>
     
      {isEmptyObj(pageProps) ? (
        <DefaultSeo {...DEFAULT_SEO} />
      ) : (
        <SEO data={pageProps} />
      )}      
      
      <Component {...pageProps} />
    </>
  );
}

export default MyDocument;

// constants/defaultSEO.js

export const DEFAULT_SEO = {
  title: "title",
  description: "description",
  openGraph: {
    type: "website",
    locale: "ko_KR",
    url: `$url`,
    title: "title",
    description: "description",
    images: [
      {
        url: "url",
        width: 285,
        height: 167,
        alt: "alt",
      },
    ],
  },
  twitter: {
    handle: "@handle",
    site: "@site",
    cardType: "summary_large_image",
  },
};

// pages/detail/[id].jsx

import { NextSeo } from "next-seo";

const Detail = () => {
  return (
    <section>
	{/* ... */}
    </section>
  );
};

export default Detail;

// getStaticPaths()와 getStaticProps()를 통해 SSR으로 _document.jsx에 props 전달
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: "blocking",
  };
}

export async function getStaticProps(context) {
  const { params } = context;

  const res = await fetch("{API URL}", {
    method: "GET",
    headers: {
      "Content-type": "application/json",
    },
  }).then((res) => res.json());

  return {
    props: // ~ //
  };
}

이를 통해 동적으로 <meta>태그 할당이 가능해졌습니다.

사용된 next-seo는 next내에서 seo를 설정하는데 도움을 줄 수 있는 라이브러리 입니다.

https://www.npmjs.com/search?q=next-seo

next-seo - npm search

www.npmjs.com

2.2-2 디버깅 과정

저는 OG가 동작하는 SNS에서의 상호작용을 통해 SEO가 적용되었는지를 확인을 거쳤습니다.

로컬에서 작업하는 내용에 대해 meta 태그가 적용될 수 있도록, Ngrok같은 플랫폼을 통해 외부에서 접근할 수 있게 해줘야 합니다.

(Ngrok는NAT와 방화벽 뒤의 로컬 서버를 임의의 안전한 터널을 통해 공개 인터넷에 노출될 수 있도록 해주는 플랫폼입니다.)

로컬 클라이언트 서버 구동시키고, 터미널 하나 더 열어서 Ngrok 관련 작업을 시작합니다.

npm install -g ngrok

ngrok http 3000 (<- 본인의 포트)
안되면 npx ngrok http 3000

다음에서 마주하는 URL로 SNS에서 상호작용을 이루며 테스트 하시면 됩니다.

페이스북, 카카오 캐시 지우기

페이스북과 카카오톡에서 한번 적용된 data의 meta tag는 캐싱 되어, 만료되기 전까지 값이 바뀌어도 이전의 값을 사용합니다.

다음의 두 사이트에서 캐시를 초기화하면서 테스트를 진행해주시면 됩니다.

Facebook : https://developers.facebook.com/tools/debug/

KakaoTalk : https://developers.kakao.com/tool/debugger/sharing

참조

검색엔진 최적화(SEO), 가장 효율적인 방법은?

가비아 라이브러리

IT 콘텐츠 허브

library.gabia.com

구글 SEO 체크 리스트 항목,SEO사이트 점수 및 중요도 배점

구글 SEO 체크 리스트 및 SEO 사이트 점수 최적화 확인 항목 및 배점 | 노벨라소프트

구글 SEO 체크 리스트 항목 SEO 사이트 점수 확인 및 최적화 확인 배점 들을 기술하여 중요도를 점수화 로 보여줌

novela-soft.com

A Quick Guide to Increasing Your Website Speed (Step by Step)

It's a well-known fact that speed affects conversions. So increasing your website speed is one of the easiest ways to increase conversions.

www.jeffbullas.com

next.js 기본 개념 알아보기

next.js 기본 개념 알아보기, react, seo, ssr

kyounghwan01.github.io

The Next.js Handbook – Learn Next.js for Beginners

I wrote this tutorial to help you quickly learn Next.js and get familiar with how it works. It's ideal for you if you have zero to little knowledge of Next.js, you have used React in the past, and you are looking forward diving more into the React ecosyste

www.freecodecamp.org

---

'Dev' 카테고리의 다른 글

프론트엔드 깃허브 액션 CI 시스템을 이용한 버전관리 (3)	2025.07.17
React hook form과 zod로 form validation 처리 (0)	2025.06.16
tabIndex의 진실 (0)	2024.07.25
이전 페이지의 URL (0)	2023.03.27
json-server 라이브러리 (0)	2022.12.30

ABOUT ME

이상민 블로그 이상민 블로그

1. SEO

1.1 Google SEO

1.2 SEO 최적화 과정

1.2-1 페이지 속도 개선

1.2-2 Semantic Markup (메타태그 포함)

1.2-3 robot.txt

1.2-4 페이지, 문서 제어 태그

1.2-5 반응형을 통한 모바일 대응

1.3 SEO점수 확인

2. Next.js

2.1 Next.js의 장점

2.1-1 Automatic Routing

2.1-2 Server Side Rendering

2.1-3 Automatic Code Splitting

2.1-4 Dynamic Meta Tag (by. Next library)

2.2 Next.js를 통한 SEO 과정

2.2-1 Dynamic Meta Tag

2.2-2 디버깅 과정

참조

'Dev' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. SEO

1.1 Google SEO

1.2 SEO 최적화 과정

1.2-1 페이지 속도 개선

1.2-2 Semantic Markup (메타태그 포함)

1.2-3 robot.txt

1.2-4 페이지, 문서 제어 태그

1.2-5 반응형을 통한 모바일 대응

1.3 SEO점수 확인

2. Next.js

2.1 Next.js의 장점

2.1-1 Automatic Routing

2.1-2 Server Side Rendering

2.1-3 Automatic Code Splitting

2.1-4 Dynamic Meta Tag (by. Next library)

2.2 Next.js를 통한 SEO 과정

2.2-1 Dynamic Meta Tag

2.2-2 디버깅 과정

참조

'Dev' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바