next.js를 사용해서 작은 프로젝트를 공부할 겸 만들어 보면서 SEO에 대해서도 공부하게 되었다.
next-seo라는 라이브러리를 이용하였다.
_document파일을 이용할 수 있다.
이 파일은 HTML의 head, body tag를 수정할 수 있는 페이지다. 전역적으로 적용된다.
//_document.tsx
<Head>
<title>Next.js 시작하기</title>
<meta name="description" content = "Next.js시작하기 설명" />
</Head>
그러나 이렇게 사용하게 되면 페이지마다 바뀌어야하는 title의 경우 전역적으로 바꾸는 _document파일이 적합하지않다.
그래서 import Head from "next/head"; 를 사용할 수 있지만, 많은 페이지마다 title을 하나씩 지정하는 것도 비효율적이기 때문에 라이브러리의 도움을 받을 수 있다.
//landingPage
import { NextSeo } from “next-seo”;
<NextSeo title="지도" description="Next.js프로젝트" />이렇게 설정해주면 비슷한 역할을 하는 Meta 태그들을 자동으로 만들어준다. 개발자도구에서 확인이 가능하다.
또한 title, description만 적어줘도 og:title, og:description을 생성해준다.
seo.config.js
전역적으로 SEO관련 meta tag들을 정의한다.
1. og와 관련된 것들은 openGraph라는 Key안에 작성한다.
export default{
openGraph:{
type: 'website',
site_name: 'Next.js 프로젝트',
images: [
{ url: 'https://nextjs.org/static/blog/next-13/twitter-card.png' },
],
}
},2.addictionalLink Tags : 추가로 필요한 Link tag에 대해서 나열 ex)favicon
additionalLinkTags: [
{
rel: 'shortcut icon',
href: '/favicon.ico',
},
],3.title Template
titleTemplate: '%s - Next.js를 이용한 프로젝트', //%s : title에 있는 문구가 들어온다.여기서 %s => 페이지에서 작성한 title이 위치한다.
아까 위에서 적어논 <NextSeo title="지도"/> 에서 "지도"부분이 들어온다는 것.
이렇게까지 설정한 것들을 _app파일에서 Import한다.
//_app.js
import {DefaultSeo} from "next-seo";
import SEO from "../seo.config";
//return문
<DefaultSeo {...SEO} /> //config파일을 props로 넘긴다.이렇게 해주면 전역적으로 사용 끝 😎
다음에 실전으로 프로젝트를 하게 된다면 적용 해볼 수 있겠다.ㅎ
'next.js' 카테고리의 다른 글
| SSG의 부족한 점을 보완한 ISR (0) | 2023.05.15 |
|---|---|
| 회원기능 (0) | 2023.05.07 |
| 서버로 데이터 전송 (0) | 2023.05.04 |
| next.js server (0) | 2023.05.01 |
| [next.js] getStaticPaths (0) | 2023.04.07 |
