2022. 4. 16. 16:44ㆍLibrary,Framework
이번 포스트에서는 Next JS(서버사이드 랜더링)의 최대 장점 중 하나인 SEO를 처리하는 방법에 대해 알아보도록 하겠습니다.
SEO란?
이미 Next JS를 사용하고 있거나 사용하기로 마음 먹으셨다면 SEO에 대해 알고 있을 것이라고 생각되지만, 간단하게 설명드리자면 Search Engine Optimization의 약자로 웹에 올리는 컨텐츠가 구글, 네이버, 다음 같은 검색 엔진으로부터 제대로 인식이 될 수 있도록 최적화를 하는 작업입니다. 최적화 방법에는 양질의 콘텐츠를 제공하거나, 접근성이나 성능적으로 뛰어난 웹을 개발하는 방법 등이 있지만 가장 기본적인 방법으로는 해당 페이지에 적합한 메타태그를 삽입해서 크롤러가 웹을 잘 분석해서 인덱싱 하는데 도움을 주는 방법입니다. 구글에서는 최대한 많은 페이지가 인덱싱 되는 것이 검색엔진 최적화에 도움이 된다고 언급했기 때문에 각 페이지마다 해당 페이지의 용도를 잘 설명해주는 메타태그를 삽입해주는 것이 좋습니다.
CSR을 사용했을 경우에도 react-helmet이나 react-snap를 같은 컴포넌트를 사용해서 각 페이지 헤더에 메타태그를 삽입할수도 있지만 동적 콘텐츠를 처리하는 데에 있어서는 SSR를 따라가진 못합니다. 특히 Next js의 경우 자체적으로 Head 컴포넌트를 제공하는데 해당 컴포넌트를 사용하면 아주 손쉽게 메타태그를 삽입할 수 있습니다.
Next JS의 Head 컴포넌트로 메타태그 삽입
그럼 현재 필자가 진행중인 프로젝트에 Next JS의 Head 컴포넌트를 사용해서 메타태그를 삽입해보겠습니다.
필자는 각 페이지에 조금씩 다른 내용의 메타태그를 삽입할 것이기 때문에 재사용 가능한 컴포넌트를 만들었지만 HOC를 사용하는 방법도 있으니 원하는 방식을 채택해서 사용하도록 합시다.
components/HeadMeta.js
import Head from "next/head";
const HeadMeta = ({ title, description, url, image }) => {
return (
<Head>
<title>{title || "정리습관"}</title>
<meta
name="description"
content={
description ||
"집정리가 필요한 고객에게 정리전문가를 연결하고 정리습관을 만드는 대표 집정리 플랫폼 클린테크 기업"
}
/>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta property="og:title" content={title || "정리습관"} />
<meta property="og:type" content="website" />
<meta property="og:url" content={url || "https://jungleehabit.com"} />
<meta property="og:image" content={image} />
<meta property="og:article:author" content="정리습관" />
</Head>
);
};
export default HeadMeta;
필자의 경우 모든 페이지에 공통적으로 들어갈 favicon이나 charset 메타태그의 경우 _document (<head>또는 <body> 태그에 들어갈 내용들을 커스터마이징할때 사용되는 페이지)에 넣어두었고 각 페이지마다 다른 title 또는 description을 보여주기 위해 props로 값을 넘겨주면 해당 메타태그 내용이 삽입될 수 있도록 설계하였습니다. 만약 모든 페이지에 동일한 description 또는 og 태그를 보여주고 싶다면 굳이 해당 컴포넌트에 작성할 필요 없이 _document에 모두 작성해주시면 됩니다.
동적으로 불러온 컨텐츠의 제목을 title 메타태그로 사용하고 싶다면 getStaticPaths와 getStaticProps를 사용해서 Pre-rendering을 한 뒤에 title을 앞서 만들어둔 메타태그 컴포넌트에 전달해주면 됩니다. Pre rendering에 대해 아직 잘 모르시는 분들은 아래 포스트를 확인해주세요.
[NEXT.js] 넥스트 JS를 배워보자 1편 - Pre Rendering
예전부터 꼭 배워보고 싶은 Next JS 프레임워크에 드디어 입문했다. 여태까지 관리자 페이지나 랜딩페이지를 만들다 보니 CSR(Client Side Rendering)로도 충분했지만 현재 SEO과 원할하게 이루어져야 하
mingeesuh.tistory.com
service/[id]. js
const Service = ({ service }) => {
return (
<div>
<HeadMeta title={service.title} description={`${service.detail.split(".")[0]}.`} />
...생략
</div>
);
};
export async function getStaticPaths() {
const services = await fetchServices(); // 모든 서비스 불러오는 로직
const paths = services.docs.map((service) => ({
params: { id: service.id },
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const service = await fetchService(params.id); // 특정 서비스 데이터 불러와서 props로 전달
return {
props: {
service
},
};
}
}
export default Service;
적용 후 개발자 도구를 통해서 해당 페이지의 메타태그를 확인해보면 아래와 같이 title과 description이 잘 적용된 것을 확인하실 수 있습니다.
각 소셜미디어에서 어떻게 비쳐지는지 궁금하다면 해당 링크에 배포된 주소를 클릭하시면 확인하실수 있습니다.
메타 태그의 적정 길이라던지, 작성 방법에 대해 고민이라면 아래 포스트(영문)를 한번 확인해보길 추천합니다. 필자가 처음 메타태그를 접했을 때 많이 도움이 되었던 포스트로 어떤 태그들이 존재하고 어떤 방식으로 작성하면 좋은지 이해하기 쉽게 설명을 해주기 때문에 입문 자라면 한 번쯤은 읽어보시는걸 추천합니다.
Meta Tags for SEO: A Simple Guide for Beginners
Everything you need to know about meta tags in one easy guide.
ahrefs.com
'Library,Framework' 카테고리의 다른 글
| [Next.js] 커스텀 404 에러 페이지 만들기 (3) | 2022.05.07 |
|---|---|
| [Next.js] 페이지 이동시 로딩 처리하기 (0) | 2022.04.19 |
| [Next.js] Image 컴포넌트로 배경 처리하기 (0) | 2022.04.10 |
| [NEXT.js] 넥스트 JS를 배워보자 5편 - 배포하기 (feat. Vercel) (0) | 2022.04.03 |
| [NEXT.js] 넥스트 JS를 배워보자 4편 - API Routes (0) | 2022.03.20 |