현재 해당 프로젝트는 두가지의 SEO 감점 요인을 가지고 있다.
1. 문서에 title이 없음
2. description문서가 없음
이 두가지가 무엇인가?
빨간 원 - title
파란 네모 - description
두 가지를 해결 하기 위한 방법
description에 대한 해결 방법 (title 같은 경우는 document에서 지정 해주니 에러가 나왔다. 자세한 내용은 아래 링크 참고)
https://nextjs.org/docs/messages/no-title-in-document-head
// __document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head>
<meta
name="description"
content="네이버 지도를 활용한 Next 토이 프로젝트"
></meta>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
짠!
title같은 요소는 매번 페이지마다 바뀌기 때문에 같은 코드를 반복해서 적을 일이 많을 것이다.
그럴 땐 Next 라이브러리인 https://github.com/garmeeh/next-seo 를 사용해보는 것도 좋은 방법인 것 같다.
'Next.js' 카테고리의 다른 글
[Next.js] 웹 접근성 개선 (0) | 2023.02.15 |
---|---|
[Next.js] 웹 성능 개선(Largest Contentful Paint (LCP) ) (0) | 2023.02.15 |
[Next.js] Lighthouse를 통한 웹 성능 검사 (0) | 2023.02.15 |
[Next.js] getStaticPaths와 getStaticProps를 사용하여 정적 페이지 만들기 (0) | 2023.02.15 |
[Next.js] 상태 관리 라이브러리 SWR이란? (0) | 2023.02.14 |