Next.js - SEO 적용하기 1탄(정적 metadata)

SEO(Search Engine Optimization)

검색 엔진 최적화를 의미하며, 웹사이트나 웹 페이지가 구글/네이버 등과 같은 검색 엔진에서 더 잘 보이도록 최적화하는 과정.
이 과정을 통해 웹사이트는 검색 엔진 결과 페이지에서 상위에 노출되게 되어 자연스럽게 더 많은 방문자를 유도할 수 있다.

 

seo를 적용하게 되면,

• 검색 엔진 결과에서 높은 순위: 대부분의 사람들은 검색 결과의 첫 페이지에 표시된 사이트만 방문하는 경향이 있는데 SEO를 통해 사이트가 상위에 노출되면 더 많은 사람들이 사이트를 방문하게 된다.
• 자연 트래픽 증가: 광고에 의존하지 않고 검색 결과에서 유입되는 자연 트래픽을 확보할 수 있다.
• 브랜드 인지도 향상: 검색 결과 상위에 나타나면 사용자들이 사이트나 브랜드를 더 신뢰하게 되고, 브랜드 인지도가 상승할 수 있다.
• 사용자 경험 개선: SEO를 적용하는 과정에서 웹사이트의 구조, 속도, 콘텐츠 등을 최적화하기 때문에 방문자에게 더 나은 사용자 경험을 제공할 수 있으며 이는 사이트의 이탈률 감소와 전환율 증가로 이어질 수 있다.
• 경쟁 우위 확보: 동일한 주제나 서비스를 제공하는 경쟁사들 사이에서 높은 순위를 차지하면 더 많은 방문자와 잠재 고객을 끌어올 수 있다.

결과적으로 단순히 검색 엔진의 순위만을 고려하는 것이 아니라, 사용자와의 소통과 사이트의 효율적인 운영을 위한 필수적인 전략~!

---

리액트 프로젝트(CRA)나 클라이언트 측 렌더링(CSR) 환경에서 웹사이트를 배포했을 때, 다양한 페이지에 대한 동적 SEO구현이 까다롭다는건 다들 인지하고 있을 것이다! 이유는, JavaScript로 렌더링된 콘텐츠를 제대로 크롤링하지 못하기 때문이다.

 

검색엔진 크롤러는 초기 서버에서 제공된 HTML을 보고 사이트를 평가하게 되는데, CSR(Client-Side Rendering)은 웹사이트의 콘텐츠를 클라이언트(브라우저) 측에서 JavaScript로 렌더링 한다. 즉, 페이지가 처음 로드될 때 서버는 빈 HTML 틀만 보내고, 나머지 콘텐츠는 브라우저에서 JavaScript가 실행된 후에 렌더링 되기 때문에 페이지의 내용을 제대로 인식하지 못하게 되고 이는 검색 엔진 순위에 불리하게 작용할 수 있다. 

 

물론 CSR을 위한 SEO 라이브러리를 사용해서 개선시킬수도 있긴 하지만, 이번 프로젝트는 Next.js v14로 구현해봤기에 이런저런 이점 중 SEO에 초점을 맞춰 세팅한 과정을 정리해보도록 하겠따. (프로젝트 특성에 따라 동적 SEO 적용은 아직 안했슴니다.)

 

1. metadata 설정(정적)

메타태그는 웹페이지의 정보를 제공하는 태그이다. ex) 웹페이지 제목, 설명, 키워드, 저자, 최신버전 등등

Next.js App router에서는 메타태그를 다음과 같이 metadata객체로 설정한다. 나는 이렇게 설정해두었슴.

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_API_URL as string),
  title: 사이트 상단 제목,
  description: 사이트 설명,
  verification: {
    google: '...',
    other: {
      'naver-site-verification': '...',
    },
  },
  robots: {
    index: true,
    follow: true,
  },
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  openGraph: {
    images: [
      {
        url: './opengraph-image.png',
        alt: '썸네일 이미지',
      },
    ],
  },
};

metadataBase	사이트의 기본 URL을 설정
title	웹페이지의 제목. 한페이지에 하나만 존재해야 한다.
description	웹페이지의 설명. 역시 한 페이지에 하나만 존재해야 한다.
verification	사이트의 소유권을 검증하는데 필요한 key
robots	검색엔진 크롤러가 웹사이트를 인덱싱하는 지침 설정
formatDetection	웹 페이지에서 특정 형식의 콘텐츠(예: 전화번호, 이메일 주소, 주소 등)가 자동으로 인식되고 하이퍼링크로 변환되는 것을 제어할 수 있다.   -> HTML내에 이메일이나 핸드폰번호가 있을 때 자동으로 감지되어 원하지 않는 액션이 실행되었었는데, 해당 콘텐츠를 false값으로 설정해두었더니 해결되었다.
openGraph	웹페이지의 정보를 제공한다. 웹페이지의 제목, 설명, 이미지, url 등. 한페이지에 여러개 존재할 수 있다.

 

+ robots필드의 속성

https://recodelog.com/blog/seo/next-js#13-robots

 

+ openGraph필드의 속성

https://recodelog.com/blog/seo/next-js#14-opengraph

 

여기서 타 페이지의 상단에 metadata를 명시할때, url을 상위 layout metadataBase의 상대경로로 작성 할 수 있는 점이 꾸울~

// app/about/page.tsx
export const metadata = {
  title: 'About Us',
  openGraph: {
    title: 'About Us',
    description: 'Learn more about our company',
    url: '/about', // 상대 경로로 설정
    images: '/images/about-og-image.jpg', // 이미지도 상대 경로로 설정
  },
};

 

 

기타 메타데이터 필드들과 추가 속성들은 공식홈페이지에서 살펴보자!

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#title

Functions: generateMetadata | Next.js

스크롤이 길어지는 건 취향이 아니니 다음은 sitemap과 robot.txt, openGraph이미지를 만들고 설정하는 것을 작성하려고한다. 2탄으로 끝날 수 있길 . . .