[Next js]Metadata 추가하기

 

metadata추가하기 

 

metadata는 SEO와 공유가능한 곳에서 중요하다. 

 

메타데이터란?

메타데이터의 타입들

Open Graph image를 metadata를 사용해서 추가하는 방법

metadata를 사용해서 favicon을 추가하는 방법

 

1. 메타데이터란? 

웹페이지의 추가 상세내용을 제공한다. 

메타데이터는 페이지를 방문하는 유저에는 보여지지 않고 

페이지의 HTML내에 때때로 head 엘리먼트 안에 내장된다.

이 숨겨진 정보는 search engines와 웹페이지의 컨텐츠를 더 많이 알 필요가 있는 다른 시스템에 중요한 정보다.

 

왜 metadata가 중요한가? 

metadata는 페이지의 SEO를 강화하는 데  중요한 역할을 한다. 

적절한 metadata는 search engines가 효과적으로 웹페이지를 인덱싱 해주어

검색 결과의 랭킹을 올려주는 데 도움을 준다. 

 

 추가적으로 metadata는 유저에게 더 어필하고 정보제공을 해주는 Open Graph같은 공유 링크의 모습을 개선한다.

 

2. 메타데이터의 타입들

 

특별한 목적을 제공하는 다양한 타입이 있다. 

 

1) Title Metadata

브라우저 탭에 보이는 웹페이지의 타이틀의 역할을 한다.  

SEO에 중요하며 search engines가 해당 웹페이지에 대해 이해하는 데 도움을 준다. 

 

<title>Page Title</title>

 

2) Description Metadata

이 메타데이터는 웹페이지 컨텐츠의 짧은 개관을 보여주며 때때로 search engines의 결과가 게시된다.

 

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

 

3) Keyword Metadata

search engine이 페이지를 인덱싱하는데 도움을 주며 웹페이지 컨텐츠에 연관된 키워드를 포함한다.

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

 

4) Open Graph Metadata

 title, description, preview image를 함께 제공하면서 소셜 미디어플랫폼에 공유될 때 웹페이지를 대표한다.

 

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

 

5) Favicon Metadata

이 메타데이터는 제공된 브라우저의 주소창이나 탭의 파비콘을 웹페이지로 연결시킨다. 

 

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

 

 

metadata 추가하기 

 

두가지 방법이 있다.

config-based

정적 metadata 객체 또는 동적 generateMetadata 함수를 layout.js 또는 page.js파일에서 export한다.

file-based

next js는 metadata의 목적을 위해 사용되는 특별한 파일의 범위를 가지고 있다. 

 

- favicon.ico, apple-icon.jpg, icon.jpg : favicons와 icons를 위해 사용되는 것

- opengraph-image.jpg and  twitter-image.jpg : 소셜 미디어 이미지를 위해 사용되는 것

-robots.txt: search engine 크롤링에 제공해주는것

-sitemap.xml : 웹사이트의 구조에 대해 제공해주는 정보

 

 

편한대로 이 파일들을 static metadata를 위해 사용하면 된다. 

또는 프로젝트 내에서 프로그램적으로 생성할 수 있다. 

 

Favicon and Open Graph image

public folder에 두가지 이미지를 가지고 있다는 것을 알 수 있다. : favicon.ico and  opengraph-image.jpg

이것을 /app folder의 루트 경로로 옮긴다. 

그러면 Next.js가 자동으로 favicon과 OG image로서 이 파일들을 알아차릴 것이다. 

개발자도구의 application 탭에 head 엘리먼트를 체킹하면 확인해 볼 수 있다. 

 

알아두면 좋은 것 : 
ImageResponse constructor를 사용하여 OG images를 동적으로 만들 수 있다. 

 

 

Page title and descriptions

meatadata object를 layout.js또는 page.js 파일에 title이나 description같은

추가적 page 정보를 추가하기 위해 포함할 수 있다. 

 

root layout에서 metadata object를 아래의 필드와 같이 생성한다. 

 

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() {
  // ...
}

 

 

Next.js는 자동으로 타이틀과 metadata를 앱에 추가할 것이다. 

구체적 페이지의 custom title을 추가하려면 

metadata object를 페이지 자체에 추가할 수 있다. 

중첩 페이지에서의 metadata는 부모의 metadata를 override할 것이다. 

 

예를들어 /dashboard/invoces페이지에서 페이지 타이틀을 아래와 같이 업데이트할 수 있다. 

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

 

작동하지만 애플리케이션의 타이틀을 모든 페이지에서 반복힌디. 

만약 company name같은 것이 변한다면 

매 페이지마다 업데이트 해줘야 한다. 

 

그 대신 우리는 metadata object의 title.template필드를 사용하여 

 페이지 타이틀을 위한 template을 정의할 수 있다.

이 template는 page title을 포함할 수 있으며, 포함하고 싶은 다른 information도 가능하다. 

 

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'),
};

 

 이 템플릿의 %s는 구체적인 페이지 타이틀로 대체될 것이다. 

이제 /dashboard/invoices페이지에서 우리는 page title을 추가할 수 있다. 

 

 

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

 

/dashboard/invoices 페이지로 가서 head엘리먼트를 확인해보라. 

page의 타이틀이 이제 Invoices | Acme Dashboard가 되어있는 것을 볼 수 있을 것이다.