![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/4ae3df6c-7cac-4cbb-0cbb-5b111567cd00/public)

온라인 강의 사이트, 쇼핑몰, 블로그 등 많은 웹사이트가 검색엔진에 노출되기 위해 노력합니다. 사용자들은 검색엔진을 이용하여 필요한 정보를 검색할 것이고 검색엔진에 잘 노출되고 상단에 위치한 웹사이트가 많은 회원 트레픽을 확보하는 것이 당연하기 때문이죠. 그래서 저도 블로그가 구글에 노출되었으면 좋겠다는 생각이 들어 SEO 작업을 진행하기로 했습니다!

<br/><br/>

### <span style="color: #7360BD">SEO(Search Engine Optimization) 란?</span>

**SEO**는  Search Engine Optimization의 약자로 검색엔진 최적화라는 의미를 가지고 있으며 말 그대로 웹사이트를 네이버, 구글과 같은 검색 엔진의 동작에 적합하게 맞추어 관련 정보를 검색할 때 웹사이트 노출이 더 잘되게 만드는 작업입니다.
SEO 처리를한 웹사이트와 하지 않은 웹사이트의 유저 방문 트레픽 차이는 큰 차이가 날 것이고 같은 주제의 웹사이트가 있다고 하더라도 SEO 처리를 더 잘한 웹사이트가 상단 노출이 될 확률이 높습니다.
<br/>
SEO 최적화 방법에는 여러 가지 방법이 있지만 오늘은 그중 가장 기본이 되는 title, meta 태그를 사용하여 최적화를 진행하겠습니다.

<br>
***
<br>
### <span style="color:#7360BD">🔎 SEO 처리를 위한 title, meta 태그 사용하기</span>

html 문서를 작성한 경험이 있다면 \<head>태그 내에 있는 \<title>, \<meta> 태그를 본적이 있을 겁니다. \<title> 태그는 html 문서의 제목, \<meta> 태그는 html 문서에 대한 정보인 메타데이터를 정의할 때 사용합니다.
정의된 메타데이터는 검색엔진이 해당 문서가 어떤 문서인지 파악하는데 도움을 주기 때문에 관련 키워드를 검색할 때 노출이 될 확률이 높아집니다.

<br/>

> 블로그 title, meta 태그 사용 예시


```html
<head>
    <title>chanstory</title>
    <meta name="description" content="프론트엔드 이야기">
    <meta name="author" content="chan">
    <meta name="keyword" content="frontend, react">
</head>
```


<br/>

***
<br/>

### <span style="color:#7360BD">😥 React 환경에서의 SEO 처리 문제점</span>

위의 블로그 title, meta 태그 사용 예시와 같이 정적인 페이지에서의 SEO 처리에는 문제가 발생하지 않습니다. 하지만 블로그의 포스트 처럼 동적인 페이지에서는 SEO 최적화가 어렵습니다.
SEO 최적화가 어려운 이유는 React 환경에서 웹 렌더링은 CSR(Client Side Rendering)을 하기 때문입니다.

<br/>

CSR 과정을 보면 가장 먼저 사용자의 브라우저가 서버에서 html 문서를 받은 뒤, javascript 파일을 받고 그 후 API 요청을 하고 응답받은 데이터에 맞게 화면을 그립니다. \<title>, \<meta> 태그는 html문서의 \<head> 태그에 들어있는데 우리는 \<title>, \<meta> 태그에 담고 싶은 데이터들을  API 요청하고 응답받아야 표시할 수 있죠. 검색엔진은 이러한 과정을 진행하지 않고 API로 응답 받은 데이터가 반영되기 이전의 html문서만을 받아 판단하기 때문에 우리가 원하는 정보를 입력할 수 없습니다.

<br/>

***

<br/>

### <span style="color:#7360BD">😀 SSR을 활용하여 SEO 처리하기</span>

Next.js 프레임워크의 SSR(Server Side Rendering)을 이용하면 CSR(Client Side Rendering) 환경에서는 힘든 SEO 처리를 쉽게 할 수 있습니다.
CSR은 브라우저에서 html, javascript 파일을 받아 렌더링한다면 SSR은 브라우저에서 해야할 렌더링을 서버에서 렌더링하여 html 파일을 브라우저에 보내줍니다. API 요청을 서버에서 진행하고 브라우저가 받은 html 문서에는 SEO 처리에 필요한 정보가 들어있습니다. 이후 넘어온 데이터를 \<title>, \<meta> 태그에 담아주기만하면 SEO 처리는 끝납니다.

<br/>

먼저 SSR을 사용하기 위해서는 페이지를 렌더링하는 파일 내에 getServerSideProps 함수를 함께 사용해야하며 함수 내에서 api를 호출하여 데이터를 받아온 뒤 props에 데이터를 담아 리턴합니다.

<br/>

> getServerSideProps를 사용한 SSR 
```ts
// 렌더링 파트
export default function Post() {
  return (
    <div>
        // ... view
    </div>
  );
}

// SSR 파트
export const getServerSideProps = async function ({
  req,
  query,
}: NextPageContext) {

  const id = Number(query.id); // postId

  // 데이터 load api를 호출하여 post data load
  const post = await client.post.findUnique({
    where: { id: +id }
  });

  return {
    props: {
      post 
    },
  };
};
```

<br/>

다음으로 getServerSideProps 함수에서 리턴한 props를 페이지를 렌더링하는 함수에서 받은 뒤 'next/head'에서 가져온 \<Head> 태그 내에서 사용하여 SEO 최적화를 완료합니다.

<br/>

> SSR을 활용해 받은 데이터로 SEO 최적화하기
```ts
import Head from "next/head";

// 렌더링 파트
export default function Post({
    post
}: Props) {
  return (
    <div>
      <Head>
        <title>{post.title} | chanstory</title>
        <meta name="description" content={post.content} />
        <meta name="keywords" content={post.tags} />
      </Head>
      <div>
          // ... view
      </div>
    </div>
  );
}

// SSR 파트
export const getServerSideProps = async function ({
  req,
  query,
}: NextPageContext) {

  const id = Number(query.id); // postId

  // 데이터 load api를 호출하여 post data load
  const post = await client.post.findUnique({
    where: { id: +id }
  });

  return {
    props: {
      post 
    },
  };
};
```

<br/>

***

<br/>

### <span style="color:#7360BD">☺ OG 태그 적용하기</span>

카카오톡을 사용하시다가 URL을 공유하시면 나타나면서 URL과 관련된 이미지, 제목, 내용 등을 표시해주는 컨텐츠 박스가 나타나는 것을 본 적이 있으신가요?
OG(Open Graph) 태그는 카카오톡, facebook과 같은 SNS에 URL이 공유 될 때 표시될 콘텐츠를 명확하게 설정하고싶을 때 필요한 태그입니다.

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/37bb588f-7f21-4e8b-0ed6-e7b635d87500/public)

OG 태그를 설정한 뒤 SNS에 URL을 공유할 때 위 이미지처럼 원하는 이미지, 제목 등을 전송할 수 있습니다.

<br/>
>OG 태그 적용
```ts
export default function Post({
    post
}: Props) {
  return (
    <div>
      <Head>
        <title>{post.title} | chanstory</title>
        <meta name="description" content={post.content} />
        <meta name="keywords" content={post.tags} />
        <meta property="og:title" content={`${post.title} | chanstory`} />
        <meta property="og:image" content={post.thumbnail} />
        <meta property="og:description" content={post.content} />
      </Head>
      <div>
          // ... view
      </div>
    </div>
  );
}
```

<br/>

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/4ae3df6c-7cac-4cbb-0cbb-5b111567cd00/public)

온라인 강의 사이트, 쇼핑몰, 블로그 등 많은 웹사이트가 검색엔진에 노출되기 위해 노력합니다

Next.js 환경에서 SSR을 활용하여 SEO 처리하기