1. SSR 페이지 작성
2. 시멘틱 태그
3. 이미지 Alt 속성
4. 메타태그
App Routing 방식을 사용중일 경우
13버전 이상부터는 app 디렉토리라는 개념이 생겼고 이를 사용할 경우 각 라우트에서 metadata 옵션을 통해 메타데이터를 설정할 수 있다.
export const metadata = {
title: '페이지 제목 - 사이트명',
description: '이 페이지에 대한 간략한 설명',
keywords: '키워드1, 키워드2, 키워드3',
openGraph: {
title: '페이지 제목',
description: '오픈 그래프 설명',
url: 'https://example.com/page-url',
images: [
{
url: 'https://example.com/image.png',
alt: '이미지 설명',
width: 1200,
height: 630,
},
],
},
twitter: {
card: 'summary_large_image',
title: '트위터 카드 제목',
description: '트위터 카드 설명',
images: ['https://example.com/twitter-image.png'],
},
};Pages Routing 방식을 사용중일 경우
만약 pages 디렉토리를 사용하는 경우, next/head를 사용하여 페이지별로 메타데이터를 설정할 수 있다. 보통은 Layout.tsx 에 다음 내용을 삽입하여 모든 페이지에서 메타데이터를 설정하는 방식을 사용합니다.
(App 라우팅 방식을 사용하고 있다고 하더라도 같은 방식을 사용하여 메타데이터 설정이 가능하다.)
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>페이지 제목 - 사이트명</title>
<meta name="description" content="이 페이지에 대한 간략한 설명" />
<meta name="keywords" content="키워드1, 키워드2, 키워드3" />
<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="오픈 그래프 설명" />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:url" content="https://example.com/page-url" />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<main>
<h1>홈 페이지</h1>
</main>
</>
);
}메타데이터 속성
설명
title
페이지의 제목으로, 브라우저 탭에 표시되고 검색 결과에 표시됩니다.
description
검색 엔진 결과에 표시될 페이지 설명입니다.
keywords
검색 엔진 최적화를 위한 키워드입니다. 현재 대부분의 검색 엔진에서는 중요성이 낮지만, 여전히 일부 SEO 도구에서 요구할 수 있습니다.
openGraph
소셜 미디어 공유 시 표시되는 메타데이터입니다.
트위터 카드 설정을 위한 메타데이터입니다.
