Next가 13으로 버전 업데이트를 하면서 seo 기능이 개선되었다고 한다

현재 회사에서 진행중인 프로젝트를 NEXT13으로 개발하고 서버에 배포했는데, 검색엔진에 바로 결과가 표시되지 않는 다는 것은 알았지만 자세한 이유와 최적화 방법에 대해 알아봤다.

일단 SEO 설정을 해도 검색결과에 바로 표시되지 않는 이유와 고려해야할 최적화 요소들을 정리해보았다.

1. 기본적으로 시간이 필요하다. SEO가 바로 적용되지도 않으며, 새로운 웹사이트에 경우 Google 또는 다른 검색 엔진이 새 컨텐츠를 인덱싱하는데 길게는 몇주가 걸릴수도 있다.
2. 내용의 질과 양. 검색 엔진에서 인기있는 검색어와 관련된 컨텐츠가 많을 경우, 검색 결과에서 상위에 표시된다. 콘텐츠가 풍부하고 유용한 정보가 많은 검색엔진에서 더 잘 인식됨
3. 메타 데이터. 제목, 설명 및 키워드와 같은 메타 데이터를 작성하여 검색 엔진에서 웹 사이트의 내용과 목적을 명확하게 파악할 수 있도록 해야함
4. 백링크. 다른 웹사이트에서 웹사이트로 링크를 링크를 제공할수록 검색엔진에서 인기있는 웹사이트로 인식 됨
5. 기술적인 요소. 검색 엔진 최적화를 위한 웹 사이트의 기술적인 요소를 검토하여 웹 사이트가 빠르고 안정적인지 확인해야 함. 또한, 모바일 장치에서 적절하게 표시되는지도 확인.

기술적인 요소 검토 방법은?

1. 웹 사이트의 로딩 속도: 로딩 속도는 검색 엔진 순위에 영향을 미치는 중요한 요소 중 하나. 빠른 로딩 속도를 위해 이미지, 스크립트 및 CSS 파일의 크기를 줄이고, 웹 사이트를 최적화하면서 로딩 시간을 단축. 웹 사이트의 로딩 속도를 확인할 수 있는 도구로는 Google PageSpeed Insights, GTmetrix 등
2. 모바일 최적화: 모바일 기기에서의 웹 사이트 접근이 증가함에 따라, 모바일 최적화는 중요한 요소. 모바일 버전의 웹 사이트를 제공하거나, 반응형 웹 디자인을 구현하여 모바일 기기에서도 웹 사이트가 적절하게 표시되는지 확인
3. SSL 인증서: SSL 인증서는 웹 사이트가 안전하게 통신하도록 하는 보안 프로토콜. SSL 인증서를 사용하면 검색 엔진에서 웹 사이트를 안전하게 표시하고, 검색 결과에서 더 높은 순위를 받을 수 있음
4. 웹 사이트의 구조와 마크업: 웹 사이트의 HTML 구조와 마크업은 검색 엔진이 웹 사이트를 읽고 색인화하는 데 영향을 끼침. 적절한 HTML 태그와 구조를 사용하고, 웹 사이트 내의 중요한 키워드를 강조하는 방법을 고려해야 함.
5. 검색 엔진 로봇 접근: 검색 엔진 로봇이 웹 사이트를 쉽게 탐색할 수 있도록 robots.txt 파일을 수정하거나, sitemap.xml 파일을 제공하여 검색 엔진이 색인화할 수 있는 페이지를 지정.

생각보다 고려해야할 요소들이 많다.

next13 app 디랙토리에서 SEO 최적화하는 법은

// app/layout.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
};

이러게 metadata를 export 해주면 브라우저에서 html을 읽을 때 meta 태그에 담겨져서 표시된다.

// Static metadata
export const metadata = {
  title: '...',
};

// Dynamic metadata
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return { title: product.title };
}

generateMetadata를 export 해주면 빌드할 때 다이나믹 라우팅 된 페이지들을 미리 생성하여 검색엔진에 풍부한 콘텐츠를 제공할 수 있다.

Next13 이전

위 방법들은 Next 13.2 버전 이후 app 디렉토리에서 제공하는 Metadata API이고 이전 버전에 pages 디랙토리에서는 head.js를 사용하거나 next-seo를 사용했다