metadata와 SEO
metadata와 SEO
SSR vs CSR
웹 페이지의 제목과 내용을 담는 데이터이다.
Next.js에서는 객체 형태로 담고 있다.
구글이나 네이버 같은 검색 엔진은 우리의 페이지가 어떤 페이지인지 모르고, 웹 사이트의 코드를 통째로 읽어서 판단하는 것도 아니며, 이 metadata를 우선적으로 읽는다.
그런데 React.js는 CSR 방식이라 검색 엔진에 최적화하는 데 한계가 있었다.
리액트의 동작 방식을 보면, 초기 HTML은 root의 div 하나가 통으로 빈 상태로 클라이언트에게 전달이 되고, 웹사이트 구동에 필요한 JS 등이 하나의 덩어리로 번들링 되어 클라이언트에게 전달된다.
이렇게 하기 때문에 초반에 불러오는 속도는 느리다. 즉 Time To View가 느리다. 하지만 일단 클라이언트에서 렌더링 되고 나서는 타의 추종을 불허하는 속도로 쾌적함을 선사한다.
하지만 초기에 빈 div를 던지는 방식의 특성 상 검색 엔진이 웹 사이트를 제대로 인덱싱 할 수 없다.
따라서 검색 엔진에 잘 노출이 되어야 하는 비즈니스 웹 사이트는 검색엔진 최적화(SEO)에서 리액트는 불리하다.
반면 Next.js는 SSR 방식으로, 첫 로딩 시 이미 서버에서 HTML을 렌더링 해서 클라이언트에 전달하기 때문에 초기 로딩 속도가 빠르다. 하지만 이후 웹 사이트를 이용하며 전환할 때 리액트 대비 속도는 늦을 수 있고,
리액트에서는 클라이언트가 렌더링 했던 것을 넥스트에서는 서버에서 렌더링 하기 때문에 서버 부하가 상대적으로 높을 수 있다.
리액트에서도 SEO 최적화를 하기 위한 여러 기법이 있지만, SEO가 중요한 사이트를 제작하는 경우 넥스트가 더 나은 선택이다.
Next.js의 Metadata
// src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
layout.tsx 파일 안에 metadata가 객체 형태로 title과 description 형태로 기본 세팅되어 있다.
여기서 눈치 챌 수 있듯, 라우트마다 전부 다른 메타데이터를 생성할 수 있다.
import React from "react";
type Props = {
params: {
id: string;
};
};
export function generateMetadata({ params }: Props) {
return {
title: `Detail 페이지 : ${params.id}`,
description: `Detail 페이지 : ${params.id}`,
};
}
const TestDetailPage = ({ params }: Props) => {
return <div>Detail 페이지 : {params.id}</div>;
};
export default TestDetailPage;danymic route에서도 동적으로 변경되는 params를 이용해서 metadata를 라우트마다 설정해줄 수도 있다.
SEO 최적화 팁
주로 HTML, JSX와 관련된 태그를 성실하게 작성하는 데서 출발한다.
- meta title : 위에서 설명했다.
- meta description : 위에서 설명했다.
- meta keyword : 과거엔 많이 사용됐으나, 현재는 대부분의 검색엔진에서 무시한다. 하지만 알고는 있자.
- 헤딩 태그 : <h1>을 글씨 크기로 사용하면 곤란하다. 제목의 deps를 나타내는 것이 주 기능이므로 페이지에서 h1 태그를 남발해서는 안 되고, 구조화가 잘 되도록 h1~h6 잘 이용하도록 한다. 특히 h1 태그는 페이지에서 한 번만 사용하고 제일 중요한 제목에만 사용해야 한다.
- 이미지 대체 텍스트 : <img alt="..."> 이 이미지가 어떤 이미지인지 검색 엔진은 볼 수 없으므로, alt 속성으로 이미지를 판단한다. 옵셔널한 속성이기 때문에 귀찮다고 빼 먹으면 좋지 못한 습관이다.
- Anchor Text : 링크 텍스트를 말한다. <a href="https://wonyoung.com">클릭</a> 이런 단순한 메시지는 무슨 링크인지 모르기 때문에 구체적인 텍스트를 작성해야 한다.
'Programing > Next.js' 카테고리의 다른 글
| Tailwind CSS (0) | 2024.07.02 |
|---|---|
| 페이지 이동하기 :: a vs Link vs Router (0) | 2024.07.02 |
| not-found (0) | 2024.07.02 |
| layout과 template (0) | 2024.07.02 |
| App 라우팅 이해하기 (0) | 2024.07.02 |
댓글