Next에서 SEO 처리하기

Jinjer·2022년 2월 21일

next seo

1. 프롤로그

기업과 관계자들이 Next를 선호하는 이유에는 SEO도 포함된다
SEO가 왜?
🤔🤔🤔

2. SEO

검색 엔진 최적화(Search Engine Optimization)는
사이트를 검색 결과에 잘 노출될 수 있도록 하는 것인데

구글, 네이버와 같은 검색 엔진은 자체적으로 만든 검색봇을 이용해서
수 많은 웹페이지에서 검색 결과에 근접한 페이지를 최상위에 매칭해준다

3. NEXT-SEO

Next는 기본적으로 SSR을 지원하기 때문에 _document.js로
<head>안에 공통으로 들어가는 <meta>를 지정해줄 수 있는데

문제는 페이지마다 다른 메타, OG(오픈그래프)태그로
나눠서 처리해야 할 경우가 생긴다
다행히도 SEO를 더 쉽게 관리해주는 라이브러리가 존재한다

🌱 설치

npm install next-seo
or
yarn add next-seo

설치가 완료되면
next-seo를 컴포넌트에 적용해보자

📁 PageHome.js

import PageLayout from '../layout/PageLayout.js';
import {NextSeo} from 'next-seo';


const PageHome = ({}) => {
  return (
    <PageLayout>
       <NextSeo
         title="Title"
         description="Description"  
         openGraph={{
           title="OG Title",
           description="OG Description",
           images: [{"https://image.com/upload/og.jpg"}]  
         }}  
       />
    </PageLayout>  
  );
};

기본적인 설정은 이렇게 할 수 있고
공통 틀을 하나 가져와서 변경된 내용만 반영할 수 도 있다

📁 seo.js

export const generateMeta = ({
  title="공통 Title",
  description="공통 Description",
  images=[{"https://image.com/upload/og.jpg"}]  
  og={}
}) => {
  return {
    title,
    description  
    openGraph: {
      title,
      description,
      images,
      ...og  
    }
  };
};

📁 PageHome.js

import PageLayout from '../layout/PageLayout.js';
import {generateMeta} from '../util/seo.js';  
import {NextSeo} from 'next-seo';


const PageHome = ({}) => {
  return (
    <PageLayout>
       <NextSeo
         {...generateMeta({
           title: "",
           description: "",
           images: [{"https://image.com/upload/og.jpg"}] 	
         })}
       />
    </PageLayout>  
  );
};

5. 정리

✔ 웹 브라우저 렌더링 방식에 대해 알 수 있다
✔ next-seo 사용방법을 알아보았다

Jinjer

프론트엔드개발자

이전 포스트

React에서 SEO 처리하기

다음 포스트