메타데이터는 SEO와 공유성에 매우 중요하다.
In this chapter
- 메타데이터의 정의
- 메타데이터 유형
- 메타데이터를 통해 Open Graph 이미지를 추가하는 법
- 메타데이터를 통해 favicon을 추가하는 법
What is metadata?
웹페이지에 대해 디테일을 제공한다. 메타데이터는 사용자가 페이지 방문시엔 보이지 않지만, 대신 뒤에서 페이지의 html 주로 head 요소 안에 임베드 되어 있다.
이 숨겨진 정보는 서치 엔진과 다른 시스템이 웹 컨텐츠를 더 잘 이해하는 데에 중요하다.
Why is metadata important?
웹페이지의 SEO를 향상시키고 서치엔진과 소셜 미디어 플랫폼이 접근 가능하고 이해 할 수 있게 만든다. 적절한 메타데이터는 서치 엔진이 웹페이지를 인덱싱 하게 하는 것을 돕는다.
게다가, Open Graph 같은 메타데이터는 sns에서 공유된 링크의 ㅠㅛ현을 향상시켜 더 정보를 얻게 만든다.
Types of metadata
Title 메타데이터 : 브라우저 탭에서 보여지는 웹페이지의 제목. 서치 엔진이 웹페이징=가 뭔지 이해하게 하는것을 도와서 SEO에 필수적이다.
Description Metadata: 웹페이지의 컨텐츠에 대한 간단한 개요를 제공하고 서치 엔진 결과에서 가끔 보인다.
Keyword Metadata: 웹페이지 컨텐츠에 관련된 키워드를 보함하고 서치 엔진이 페이지를 인덱스 하도록 한다.
Open Graph Metadata: 웹페이지에 sns 플랫폼에 공유되었을 때 제목, 설명, 프리뷰 이미지 등을 제공함으로써 표시되는 방식을 향상시킨다.
<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />Favicon Metadata: 웹페이지에 브라우저 바 | 탭에 표현되는 파비콘을 연결시킨다
Adding Metadata
Next.js 는 앱 메타데이터를 정의할 수 있는 메타데이터 API가 있다.
두 가지 방법이 있다.
- Config-based
- 정적 메타데이터 객체 혹은 layout.js or page.js 파일에서 동적 generateMetadata function을 추출한다.
- File-based
- Next.js는 메타데이터를 목적으로 특정하게 사용되는 특별한 파일들이 있다.
- favicon.ico, apple-icon.jpg, and icon.jpg
- opengraph-image.jpg and twitter-image.jpg: sns 이미지에 사용
- robots.txt: 서치 엔진 크롤링에 대한 정보 제공
- sitemap.xml: 웹사이트 구조에 대한 정보 제공
유동적으로 제작 | 사용 가능
Next.js 는 자동적으로 jead 요소에 제작
Favicon and Open Graph image
/public 폴더에 favicon.ico and opengraph-image.jpg가 있다.
/app 폴더로 옮긴다. 그 후, Next.js는 자동적으로 이 파비콘과 OG 이미지를 식별하고 사용한다. head 요소를 체크함으로서 확인할 수 있다.
Page title and descriptions
축적 페이지 정보를 위해 layout.js or page.js 로부터 메타데이터 객체를 추가할 수도 있다.
layout.js 내 메타데이터는 그것을 사용하는 모든 페이지에 의해 상속될 수 있다.
루트 레이아웃에서, 새 metadata 객체를 생성한다.
Next.js는 자동적으로 타이틀과 메타데이타를 추가한다.
하지만 커스텀 타이틀을 특정 페이지에 추가하고 싶다면?
페이지에 metadata 객체를 추가함으로써 할 수 있다.
중첩된 페이지의 메타데이터는 부모로부터의 메타데이터를 덮어쓴다.
/dashboard/invoices를 업데이트 해보자
작동하지만, 모든 페이지에서 타이틀을 반복하고 있다.
만약 변화가 생기면, 모든 페이지마다 갱신해야한다.
대신에, 페이지 제목 템플릿을 정의하기 위해 metadata 객체 안의 title.template를 쓸 수 있다.
이 템플릿은 페이지 제목, 모든 정보를 포함할 수 있다.
루트 레이아웃에서, metadata 객체를 갱신해보자
title: {
template: '%s | Acme Dashboard',
default: 'Acme Dashboard',
},%s는 특정 페이지 제목으로 대체될 수 있다.
/dashboard/invoices에서 페이지 제목을 추가해보자
이동 후 head 요소를 보면 제목이 Invoices | Acme Dashboard 인 것을 알 수 있다.
Practice: Adding metadata
- /login page.
- /dashboard/ page.
- /dashboard/customers page.
- /dashboard/invoices/create page.
- /dashboard/invoices/[id]/edit page.
Next.js Meatadata API는 유연하다.
오늘의 예시 외에도 keywords, robots, canonical 외 많은 추가할 수 있다.
