Metadata

메타데이터란?

데이터에 대한 구조화된 데이터로, 다른 데이터를 설명해주는 데이터. 사용자가 서비스를 쉽게 찾아볼 수 있도록 인지도를 높이고, 사용자 유입을 증가시키는 데 중요한 역할

• Static Metadata

정적 메타데이터를 정의하려면 layout.js 또는 정적 page.js 파일에서 Metadata 개체를 내보냄

import { Metadata } from 'next';

export const metadata: Metadata = {
  metadataBase: new URL('<https://ventileco-blog.vercel.app/>'),
  title: {
    default: 'Title',
    template: `%s | Title`,
  },
  // title: {
  //  absolute: '템플릿을 무시하고 새로운 Title 설정',
  // },
  description:
    'Description',
  icons: {
    icon: '/favicon.ico',
  },
}

export default function Page() {}

• Dynamic Metadata

generateMetadata 함수를 사용하여 동적 값이 필요한 메타데이터를 가져올 수 있음

interface IParams {
  params: {
    id: string
  }
}

export async function generateMetadata({ params }: IParams): Promise<Metadata> {
  const posting = await getPosting(params.id)
  if (!posting)
    return {
      title: '404 페이지',
      description: '존재하지 않는 페이지입니다.',
    }

  return {
    title: posting.title,
    description: posting.description,
		openGraph: {
      title: posting.title,
      description: posting.description,
      url: `/detail/${posting._id}`,
      images: {
        url: posting.thumbnailURL,
      },
      type: 'website',
    },
    alternates: {
      canonical: `/detail/${posting._id}`,
    },
  }
}

export default function Page() {}

<aside> 💡 canonical 태그 - 웹페이지가 다른 URL에서 동일하게 접근 가능할 때, 어떤 버전이 원본(주요) 콘텐츠임을 검색 엔진에 알려주는 요소

예를 들어, 온라인 쇼핑몰에서 같은 상품을 여러 카테고리에서 보여주는 경우

• www.example.com/clothes/shirt/123 (1)
• www.example.com/sale/shirt/123 (2) </aside>

<aside> 💡 open graph 태그 - ****웹페이지의 링크가 카카오톡이나 기타 SNS에 공유될 때 어떻게 노출될 지 정의해주는 역할. 효과적으로 공유되는 장점이 있고, 얼마나 공유되고 있는지 판단하는 기준이 되어 검색 상위 노출을 위한 품질 평가에도 영향을 줌

og:image 권장 사항 - 1200 x 630 크기 / 8MB 이하

</aside>

Robots

검색 엔진 크롤러 봇에게 사이트에서 액세스할 수 있는 URL을 알려줌. 웹사이트의 어떤 영역을 색인화해서는 안되는지 지정할 수 있음

방법1. app 폴더에 robots.ts 파일 생성

import { MetadataRoute } from 'next'
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: '<https://acme.com/sitemap.xml>',
  }
}

방법2. 메타데이터 객체로 반환

export const metadata: Metadata = {
  title: {
    absolute: '마이페이지',
  },
  description: '내 정보 및 활동 내역을 확인해보세요',
  robots: {
    index: false,
    nocache: true,
  },
}