SEO(검색 최적화) 설정

[MinJeung-Kim]

🔎Optimizing Metadata

1. Static Metadata

• 객체({})형태로 작성.

  
  import { Metadata } from 'next';

export const metadata: Metadata = { title: '...', description: '...', };

export default function Page() {}

### 2. Dynamic Metadata 
- generateMetadata()함수 생성
- 사용자에게 페이지를 주기전에 generateMetadata()함수가 끝나고 메타데이터 정보가 완성된 후 사용자에게 페이지를 노출.

```ts
import { Metadata, ResolvingMetadata } from 'next';

type Props = {
  params: { id: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
  parent?: ResolvingMetadata,
): Promise<Metadata> {
  // read route params
  const id = params.id;

  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json());

  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || [];

  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  };
}

export default function Page({ params, searchParams }: Props) {}

3. JSON-LD

• 검색 엔진에서 이해가능한 구조화된 데이터 포멧.

• 다양한 정보(사람묘사, 단체, 영화, 요리법 등)들을 json형태로 제공해주면 SEO 최적화를 해줌.

  
  export default async function Page({ params }) {
  const product = await getProduct(params.id);
  
  const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: product.name,
  image: product.image,
  description: product.description,
  };
  
  return (
  <section>
    {/* Add JSON-LD to your page */}
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
    {/* ... */}
  </section>
  );
  }

// Use TypeScript

import { Product, WithContext } from 'schema-dts';

const jsonLd: WithContext = { '@context': 'https://schema.org', '@type': 'Product', name: 'Next.js Sticker', image: 'https://nextjs.org/imgs/sticker.png', description: 'Dynamic at the speed of static.', };

[MinJeung-Kim]

🧍Static Metadata 적용

1. app/layout.tsx

• 최상위 layout.tsx에 메타데이터를 적용하면 전 페이지에서 보여줌.

  // app/layout.tsx
  export const metadata: Metadata = {
  title: "멋진 제품 사이트",
  description: "멋진 제품을 판매하고 있는 사이트입니다.",
  icons: {
  icon: "/favicon.ico",
  },
  };

2. app/products/layout.tsx

• products 폴더안의 모든 페이지에서 보여줌.

  // app/products/layout.tsx
  export const metadata: Metadata = {
  title: "멋진 제품 사이트 | 전체 제품 확인",
  description: "멋진 제품을 확인해 보세요.", 
  }; 

[MinJeung-Kim]

🏃Dynamic Metadata 적용

• 각각의 페이지별로 title을 설정 가능.

  
  type Props = {
  params: {
  slug: string;
  };
  };

export function generateMetadata({ params }: Props) { return { title: 제품의 이름 : ${params.slug}, }; }

export default function PantsPage({ params }: Props) { return

{params.slug} 제품 설명 페이지

; }

export function generateStaticParams() { const products = ["pants", "skirt"]; return products.map((product) => ({ slug: product, })); }

![image](https://github.com/MinJeung-Kim/NextJS-Study/assets/79193369/93e3a710-9eef-4b37-9fe2-349f3bff06b3)