Next.js

[Next.js] SEO 개선하기

Hoo_Dev 2023. 2. 15. 16:53

현재 해당 프로젝트는 두가지의 SEO 감점 요인을 가지고 있다.

 

1. 문서에 title이 없음

2. description문서가 없음

 

이 두가지가 무엇인가?

빨간 원 - title

파란 네모 - description

 

두 가지를 해결 하기 위한 방법

 

description에 대한 해결 방법 (title 같은 경우는 document에서 지정 해주니 에러가 나왔다. 자세한 내용은 아래 링크 참고)

https://nextjs.org/docs/messages/no-title-in-document-head

 

no-title-in-document-head | Next.js

No Title in Document Head Prevent usage of with Head component from next/document. A element was defined within the Head component imported from next/document, which should only be used for any code that is common for all pages. Title tags should be define

nextjs.org

// __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 를 사용해보는 것도 좋은 방법인 것 같다.