codinghatso

Learn Next.js 제 16장 : Adding Metadata 본문

WEB/Next.js

Learn Next.js 제 16장 : Adding Metadata

hatso 2025. 3. 13. 15:39

이번 장에서 배울 내용

* 메타데이터란 무엇인가.
* 메타데이터 유형.
* 메타데이터를 사용하여 오픈 그래프 이미지를 추가하는 방법.
* 메타데이터를 사용하여 파비콘을 추가하는 방법.

 

메타데이터란 무엇인가?

웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부 정보를 제공합니다. 메타데이터는 페이지를 방문하는 사용자에게 보이지 않습니다. 대신, 페이지의 HTML에 내장된 비하인드 스토리에서 작동하며, 일반적으로 <head> 요소. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요합니다.

메타데이터가 중요한 이유는?

메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할을 하여 검색 엔진과 소셜 미디어 플랫폼에서 더 쉽게 접근하고 이해할 수 있게 합니다. 적절한 메타데이터는 검색 엔진이 웹페이지를 효과적으로 인덱싱하여 검색 결과 순위를 향상시키는 데 도움이 됩니다. 또한 Open Graph와 같은 메타데이터는 소셜 미디어에서 공유 링크의 모양을 개선하여 사용자에게 콘텐츠를 더욱 매력적이고 유익하게 만듭니다.

 

*SEO는 Search Engine Optimization의 줄임말로, 검색 엔진 최적화를 의미.

메타데이터 유형

메타데이터에는 다양한 유형이 있으며, 각각 고유한 용도로 사용됩니다. 일반적인 유형에는 다음이 포함됩니다:

제목 메타데이터(Title Metadata): 브라우저 탭에 표시되는 웹페이지 제목을 담당합니다. SEO는 검색 엔진이 웹페이지의 내용을 이해하는 데 도움을 주기 때문에 매우 중요합니다.

<title>Page Title</title>

설명 메타데이터(Description Metadata): 이 메타데이터는 웹페이지 콘텐츠에 대한 간략한 개요를 제공하며 검색 엔진 결과에 자주 표시됩니다.

<meta name="description" content="A brief description of the page content." />

키워드 메타데이터(Keyword Metadata): 이 메타데이터에는 웹페이지 콘텐츠와 관련된 키워드가 포함되어 있어 검색 엔진이 페이지를 인덱싱하는 데 도움이 됩니다.

<meta name="keywords" content="keyword1, keyword2, keyword3" />

그래프 메타데이터 열기(Open Graph Metadata): 이 메타데이터는 제목, 설명, 미리보기 이미지와 같은 정보를 제공하여 소셜 미디어 플랫폼에서 웹페이지를 공유할 때 웹페이지를 표현하는 방식을 향상시킵니다.

<meta property="og:title" content="Title Here" /><meta property="og:description" content="Description Here" /><meta property="og:image" content="image_url_here" />

페이비콘 메타데이터(Favicon Metadata): 이 메타데이터는 브라우저의 주소 표시줄이나 탭에 표시되는 웹페이지에 파비콘(작은 아이콘)을 연결합니다.

<link rel="icon" href="path/to/favicon.ico" />

 

파일 기반 Next.js에는 메타데이터 목적으로 특별히 사용되는 다양한 특수 파일이 있습니다는 것도 알아두면 됩니다.

 

페이지 제목 및 설명

layout.js 또는 page.js 에 제목 및 설명과 같은 페이지 정보를 추가할 수 있습니다. 루트 layout.js 를 사용하면 모든 자식 페이지에 적용됩니다.

///app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}

이제 각 페이지마다의 설명을 추가하고 싶을 수 있는데 이럴 때에는

///app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

코드를 이렇게 변경해 주시면 됩니다.

마치 와일드카드를 사용하는 것처럼 template: '%s | Acme Dashboard' 에서 %s는 각각의 페이지에서 추가한 title이 들어갈 수 있습니다.

///app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
  title: 'Invoices',
};

이렇게 적용되는 모습을 볼 수 있다.

 

배운 내용으로 

  1. loginPage입니다.
  2. Page입니다.
  3. customers Page입니다.
  4. invoices create Page입니다.
  5. invoices editPage입니다.

다른 파일에도 적용시켜 주면서 마무리하겠습니다.

저작자표시

'WEB > Next.js' 카테고리의 다른 글

Next.js | Pages Router 1장 ~ 10장  (1) 2025.04.12
Learn Next.js 제 15장 : Adding Authentication  (0) 2025.03.13
Learn Next.js 제 14장 : Improving Accessibility  (0) 2025.03.13
Learn Next.js 제 13장 : Handling Errors  (0) 2025.03.12
Learn Next.js 제 12장 : Mutating Data  (0) 2025.03.12
'WEB/Next.js' Related Articles more
Comments