Next.js - SEO 적용 방법(Metadata)

SEO(Search Engine Optimization)?🤔

SEO는 "Search Engine Optimization"의 약자로, "검색 엔진 최적화"라고 한다.

 

SEO는 웹사이트나 웹 페이지를 검색 엔진에서 더 잘 검색되도록 최적화하는 과정을 의미하는데, 주요 목표는 검색 엔진의 검색 결과 페이지(SERP)에서 더 높은 순위에 오르는 것이다.

 

이를 통해 웹사이트로의 트래픽을 증가시키고, 궁극적으로는 비즈니스 성과를 높이는 데 기여할 수 있습니다.

 

요즘 워낙 SEO 적용을 중요시하게 생각하고 있으며 프론트엔드 면접 질문에도 단골 질문으로 많이 나올 정도로 SEO 적용은 정말 뗄레야 뗄수가 없다.

 

그 중 기본적으로 메타 태그를 활용하는 방법을 소개하려고 한다.

 

Metadata 😳

 

Next.js 12 버전까지는 Head Tage 에 메타 태그를 개별적으로 삽입했지만, 13 버전부터는 Layout 내에서 메타데이터를 직접 적용함으로써 메타 태그를 더욱 객체 지향적으로 쉽게 적용할 수 있게 되었다.

 

 

1. metadata 변수 선언.

 

Next.js 14 버전을 새로 설치하면 나오는 기본적인 Layout

 

next에서 기본적으로 metadata를 지원하며 물론 타입스크립트까지 지원을 하고 있다.

방법은 Layout위에 metadata를 선언해 주고 객체 안에 필요한 meta 데이터들의 값을 넣어주면 된다.

 

metadata를 적용한 결과.

 

metadata를 사용하여 적용한 description과 title이 meta tag에 잘 적용되있는 걸 볼 수 있다.

선언된 metadata는 다양한 옵션을 지원하며, 대표적으로 자주 쓰이는 description과 openGraph도 물론 지원한다.

 

공통적으로 Global 하게 적용할 Meta Tag들(예: keywords 등...)은 Root Layout에 적용해 전역적으로 적용해 주면 된다.

 

2. generateMetadata 선언.

 

Optimizing: Metadata ❘ Next.js (nextjs.org)

 

위 metadata의 변수를 선언하는 과정이 Static한 과정이였다면 Next.js 13버전 부터는 "generateMetadata" 함수를 통해 동적으로 meta tag를 적용해줄 수도 있다.

 

Static하게 metadata 변수를 layout에서 선언해줬다면 이번에는 page에서 함수로 선언한다는 점이 다르다.

물론 layout에서 Static하게 사용하면서 page에 동적으로 generateMetadata 함수를 통해 선언하는 것 둘 다 사용할 수 있다.

 

만약 둘 다 선언할 때 같은 option이 들어가있다면 page의 기준으로 Overwriting이 된다.

또한 layout에서 선언된 option이 page에는 없다면 page에서 layout의 metatag에 있는 값을 상속받는다.

 

위 예제는 Next.js 공식 홈페이지에서 가져온 예로 Data Fetch를 통해 가져온 title의 값과 openGraph의 이미지를 동적으로 가져오고 있다. 

 

마무리😳

Next.js를 사용하면서 13버전 이하의 버전 같은 경우에는 정말 한땀한땀 태그를 넣어줬던 반면 13 버전부터 meta Tag를 쉽게 적용해 줄 수 있는 방법이 생겨서 아주 편하게 되었다.

 

12버전으로 되어있는 프로젝트들을 이제는 page route를 사용하는 방식에서 13 버전부터 시작된 app route를 사용하는 방식으로 변경하지 않을 이유가 없어진 것 같다.😂