이번 포스팅은 진행중인 프로젝트의 핵심 기능들의 개발이 끝나면서, 프로젝트를 출시하게 됐을 경우 많은 사용자들이 알 수 있게 검색 엔진에 노출될 수 있도록 하는 과정은 필수적이기 때문에, 해당 프로젝트의 SEO를 최적화하는 과정에 대해서 소개하려고 한다.
SEO란?
- 해당 웹사이트가 구글, 네이버, 다음과 같은 검색 엔진에서 높은 순위를 차지하여 잘 노출될 수 있도록 최적화 하는 프로세스
- 검색 엔진은 사용자의 특정 키워드 검색을 결과로 반환하는데, 이 때, 웹 사이트를 검색 엔진에게 더 잘 이해시키고 노출시키는 방법
head 태그
일반적으로 html 파일 내의 <head> 태그 내에서 사용되는 <title> 태그, <meta> 태그등은 검색 엔진에게 웹 페이지의 메타 데이터와 페이지에 대해서 설명하는 역할을 담당하기 때문에 SEO를 구현하는데 있어서 중요한 역할을 수행한다. Nextjs에서는 개발자가 페이지 컴포넌트를 작성하고 해당 JSX 문법을 기반으로 서버에서 동적으로 html 파일이 생성되기 때문에 개발자가 직접 .html 파일을 직접 작성할 상황은 없다. 그렇다면 Nextjs에서 개발자가 head를 직접 조작하는 방법에 대해서 알아보자.
next/document
첫번째로 Nextjs는 내부적으로 <head> 태그를 자동으로 생성하여 관리하기 때문에, Nextjs에서 개발자가 head 태그를 직접 조작하는 방법은 _document.tsx 파일 내에서 커스터마이징을 통해 기본적인 애플리케이션 전체 페이지에 해당하는 공통적인 html 구조를 정의하는 방법이다. 이 때 _documents.tsx 파일은 서버측에서 실행되는 컴포넌트이기 때문에 애플리케이션의 공통적인 정적 메타 태그들을 추가하도록 구현했다.
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="ko">
<Head>
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<meta name="og:description" content="..." />
<meta property="og:type" content="website" />
<meta property="og:image" content="..." />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
next/head
서버 측에서 실행되는 _document.tsx 파일에서는 애플리케이션의 공통적인 html 구조를 정의하면서 next/document의 Head 컴포넌트를 통해 정적인 seo 관련 태그들을 추가했지만, 페이지 별로 동적으로 seo 관련 태그를 추가하기 위해서는 next/head의 Head 컴포넌트를 사용한다. next/head의 Head 컴포넌트는 클라이언트측에서 렌더링되기 때문에 페이지 컴포넌트가 렌더링된 이후에 동적으로 seo 관련 태그를 관리할 수 있다.
import Head from 'next/head';
type SeoProps = {
title: string;
url: string;
};
const Seo = ({ title, url }: SeoProps) => {
return (
<Head>
<title>{`${title} | 네컷지도`}</title>
<meta name="og:title" content={`${title} | 네컷지도`} />
<meta name="og:url" content={`https://photosmap.vercel.app/${url}`} />
<meta name="viewport" content="width=device-width" />
</Head>
);
};
export default Seo;모든 페이지마다 next/head의 Head 컴포넌트를 추가할 수도 있지만, 나는 위와 같이 Seo 컴포넌트를 분리해서 props를 전달하여 동적으로 구현했다.
import Seo from '@components/common/Seo';
...
const Home = () => {
...
return (
<Layout>
<Seo title="홈" url="home" />
...
</Layout>
)
}
export default Home;결과적으로 위와 같이 동적으로 페이지마다 구현되어있는 것을 확인할 수 있다.
SEO 점수
SEO를 구현함에 따라 결과적으로 lighthouse를 통해 웹페이지를 검사한 결과 SEO 점수가 크게 향상한 것을 볼 수 있었다.
'개발' 카테고리의 다른 글
| 애플리케이션 유저 로그인 상태 및 인증 로직 관리 (feat. Jotai) (1) | 2024.03.11 |
|---|---|
| promise를 사용한 전역 모달 관리 (feat. contextAPI) (0) | 2024.03.05 |
| [개발] Nextjs Link 컴포넌트와 <a> 태그 (feat. 이메일 링크걸기) (0) | 2023.05.28 |
| [개발] nextjs에서 모달 관리하기 (feat. recoil) (0) | 2023.05.08 |
| [개발] 페이지 접근 제한 구현 (0) | 2023.04.17 |
