SEO

Metadata

SEO 설정에 필요한 설정은 appConfig.ts 파일에서 seo 객체에 정의합니다. defaultTitle, defaultDescription, metadataBase를 수정해주세요. metadataBase는 환경변수 NEXT_PUBLIC_BASE_URL를 사용하게 되어있습니다. .env.local 파일을 생성하여 NEXT_PUBLIC_BASE_URL을 사용하실 도메인으로 설정해주세요.

src/config/appConfig.ts

export const appConfig = {
  ...
  seo: {
    defaultTitle: "빨리 만들어야, 빨리 돈을 번다 - SaasMold",
    defaultDescription:
      "Saas를 위한 NextJS 보일러플레이트. 랜딩페이지부터 결제까지. 5분이면 세팅 끝 배포 완료",
    metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL!),
  },
};

.env.local

NEXT_PUBLIC_BASE_URL=https://saasmold.com

페이지마다 getMetaData를 이용해서, SEO Tag를 설정해주세요.

src/app/(legal)/tos/page.tsx

import { getMetaData } from "@/lib/seo";
 
export const metadata = getMetaData({
  title: "이용약관 | SaasMold",
  canonicalUrlPath: "/tos",
});
 
const TosPage = () => {
  ...

Schema Markup

구글에서 제공하는 구조화된 데이터를 이용하여, 검색엔진 최적화를 할 수 있습니다. 연관되는 페이지에 renderSchemaMarkup를 이용하여, 구조화된 데이터를 설정해주세요.

page.tsx

import { getMetaData, renderSchemaMark } from "@/lib/seo";
 
export default function Home() {
  // redirect("/products");
  return (
    <>
      {renderSchemaMark()}
      ...
    </>
  );
}

schema markup가 잘 적용되었는지 확인하려면 구조화된 데이터 테스트 도구를 이용해주세요.