Metadata

브라우저를 열면 탭에 제목과 아이콘이 나오는 걸 볼 수 있습니다.

이런 것들에 대한 정보도 메타데이터로 전달할 수 있습니다.
layout.tsx나 page.tsx에서 메타데이터를 작성해주시면 적용됩니다.

title

app/layout.tsx

import type { Metadata } from "next";
export const metadata: Metadata = {
  title:{
    template: `%s | My Blog`,
    default: "My Blog",
  },
  //...
}

app/page.tsx

export const metadata = {
  title: 'Blog!'
}

// Output:
// <title>Blog!</title>

이런 식으로 보통 layout.tsx에 적어놓고 page.tsx에서는 변동되는 데이터만 적어주는 식으로 사용합니다. 이에 대한 정보는 metadata#merging에서 확인할 수 있습니다.

favicon, icon, apple-icon

아이콘에 대한 이미지를 적용하는 방식이 여러 개 있습니다. 하나는 메타데이터로 정의하는 것이고, 다른 하나는 이미지 파일을 정해진 이름에 맞춰서 app/ 위치에 넣어두는 것입니다.

코드로 적용하는 방법

export const metadata: Metadata = {
  //...
  icons:[
      { rel: 'icon', type: 'image/x-icon', url: 'img.png' },
      { rel: 'icon', type: 'image/png', sizes: '16x16', url: '16x16img.png' },
      { rel: 'icon', type: 'image/png', sizes: '32x32', url: '32x32img.png' },
      { rel: 'apple-touch-icon', sizes: '180x180', url: '180x180img.png' },
      { rel: 'mask-icon', url: 'icon.svg', color: '#ffffff' },
      { rel: 'msapplication-TileImage', url: '150x150.png' },
  ],
  //...
}

이미지 파일로만 구현하는 방법

파일 규칙	지원 파일	위치
favicon	.ico	app/
icon	.ico, .jpg, .jpeg, .png, .svg	app/**/*
apple-icon	.jpg, .jpeg, .png	app/**/*

더 자세한 내용은 app-icon여기서 확인해주시길.

그 외의 데이터들

export const metadata: Metadata = {
  //...
  description: "description",
  generator: "Next.js",
  applicationName: "My Blog",
  keywords: ["keyword1", "keyword2"],
  authors: [{ name: "My Name", url: "attic.with-1f.work" }],
  creator: "F",
  publisher: 'uwu',
  formatDetection: {
    email: "email :)",
    address: "address :D",
    telephone: "telephone number",
  },
  //...
}

간단한 페이지 설명이라던가
홈페이지가 뭘로 만들어졌는지
제작사는 어디고
이메일, 주소, 전화번호는 뭔지 등등...

이런 정보를 적어놓을 수 있습니다.

'Jeongho'님의 [HTML] 메타 태그(Meta Tag) 게시글을 찾았는데 메타데이터에 대한 정리가 잘 되어있습니다.

아니면 Next.js 문서의 Metadata Fields를 확인해보셔도 좋습니다.

---

generateMetadata

app/post/[...slug]/page.tsx 이런 라우팅에서는 각자 다른 메타데이터를 보여줘야 할 때가 있습니다. 이럴때 generateMetadata라는 것을 사용합니다.

app/products/[id]/page.tsx

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const { id } = await params
  // 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) {}

메뉴얼에서 긁어온 예시 코드입니다.
[id]에 해당되는 값을 params으로부터 얻어서 다른 메타데이터를 내보냅니다.

(searchParams을 이용해서 URL의 'search Params'을 읽어올 수도 있습니다.)

URL	searchParams
/shop?a=1	{ a: '1' }
/shop?a=1&b=2	{ a: '1', b: '2' }
/shop?a=1&a=2	{ a: ['1', '2'] }

---

Sitemap

사이트에 있는 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일입니다.
Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 크롤링합니다. 사이트맵은 내가 사이트에서 중요하다고 생각하는 페이지와 파일을 검색엔진에 알리고 중요한 관련 정보를 제공합니다.

한마디로 웹사이트의 구조를 크롤러가 알기 쉽게 정리한 파일입니다.

이것도 Next.js 문서의 sitemap을 참고하시면서 코드를 작성하시면 됩니다.

app/sitemap.ts

import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://acme.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://acme.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}

이런 식으로 작성한 코드는 아래와 같이 렌더링 됩니다.

app/sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://acme.com</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://acme.com/about</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://acme.com/blog</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>