[ nextjs SEO 체크리스트 ] 1 - 메타데이터 , 메타 태그

nextjs,tailwindcss,vercel

[ nextjs SEO 체크리스트 ] 1 - 메타데이터 , 메타 태그

주영 🐱 2024. 5. 15. 15:16

728x90

목표 SEO (검색 엔진 최적화)를 통해 검색엔진에서 웹사이트가 상위 노출되도록 함

배경 : 구글은 구글봇이라는 웹 크롤러를 사용해서 여러 사이트를 정기적으로 돌아다니며 수집한다. 수집된 데이터들은 구글 서버로 전송되어 분석되고, 인덱스에 반영된다. 구글 검색시에는 이 인덱스를 사용해서 보다 적절한 페이지가 상위에 나타나도록 검색 결과를 제공한다.

구글봇은 자바스크립트를 처리할 수 있지만, SPA 등 자바스크립트를 중심으로 구축한 웹사이트에서는 주의가 필요하다.

CSR만 제공할 수 있는 라이브러리/프레임워크는 SEO에 문제가 있다. 화면을 그리는데 시간이 걸리면 크롤러는 처리를 멈추게 되어 콘텐츠를 올바르게 가져갈 수 없기 때문이다.

Next.js는 SEO에 강하다. SSR이나 SSG를 활용하면, 클라이언트에 초기에 화면을 그리는데에 시간을 쏟지 않아도 크롤러가 데이터를 잘 가져갈 수 있다. 검색엔진에 싣고 싶은 페이지는 SSR/SSG를 활용하도록 하자.

SEO 체크리스트 (키워드)

Meta tags

JSON-LD Schema

Sitemap

robots.txt

Link tags

Script optimization

Image optimization

하나씩 보도록 하자

1. Meta tags (메타 태그)

메타 태그는 <head> 안의 <meta>요소로, 웹사이트에 대한 정보를 검색 엔진과 소셜 미디어 플랫폼에 제공한다

메타데이터에 대한 자세한 설명 ; https://nextjs.org/docs/app/building-your-application/optimizing/metadata

[메타태그에 포함되는 사항]

title
description
- 각각 페이지의 제목과 개요를 기술
- 크롤러가 수집해, 검색엔진에 표시할 때 제목과 설명이 된다.
keywords
robots
viewport
charSet
- charSet과 뷰포트는 Next.js 앱 라우터에 의해 자동으로 추가되므로 정의할 필요가 없다.

Open Graph meta tags:

-property 속성인 og:로 시작하는 <meta> 태그는 OGP(Open Graph Protocol)용 메타데이터를 정의한다.

- 다시 말하면 , SNS에서 해당 페이지 링크를 공유했을 때 썸네일을 표시하는 내용을 정의한다.

og:site_name
- 페이지 사이트명
og:locale
og:title
- 페이지의 제목
og:description
- 페이지의 설명문
og:type
- 객체 타입 (video, movie, webpage, article,,)
og:url
- 페이지의 URL
og:image
- 썸네일 이미지의 URL
og:image:alt
og:image:type
og:image:width
og:image:height

static metadata의 경우 export const metadata
dynamic data의 경우 generateMetadata

import type { Metadata } from 'next'
 
// either Static metadata
export const metadata: Metadata = {
  title: '...',
}
 
// or Dynamic metadata
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}

static metadata

정적 메타데이터의 경우 page.tsx 혹은 layout.tsx 안에 export const metadata 로 정의하면 된다.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

title
- 제목 정의
- 문자열 혹은 template object 로 정의할 수 있다.

문자열

layout.js | page.js

export const metadata = {  title: 'Next.js',}

<head> output

<title>Next.js</title>

<template object>

app/layout.tsx

import type { Metadata } from 'next' export const metadata: Metadata = {  
title: {    
template: '...',    default: '...',    absolute: '...', 
},

}

팁)

app/layout.tsx 에 한번 적용해놓으면 하위 페이지에 다음 코드를 추가하면 자동 적용이 된다.

app/about/page.tsx 에 다음 삽입

import type { Metadata } from 'next'
 
export const metadata: Metadata = {}
 
// Output: <title>Acme</title>

viewport

서버 컴포넌트에서만 지원

//app/layout.tsx

import type { Viewport, Metadata } from "next";
 
export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#ffffff"
};

https://nextjs.org/docs/app/api-reference/functions/generate-viewport

Dynamic Metadata

[id]/page.tsx 와 같은 동적인 페이지에 사용한다.

generateMetadata function으로 수행

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { slug } = params;

출처 : https://nextjs.org/docs/app/api-reference/functions/generate-metadata#template-object

저작자표시 비영리 변경금지

'nextjs,tailwindcss,vercel' 카테고리의 다른 글

타입스크립트 기초 - 함수 , 함수 타입 (0)	2024.05.21
타입스크립트 배열과 객체 , any (0)	2024.05.21
cloudfare 도메인 vercel에 적용하고 배포할 때 오류 ( ERR_TOO_MANY_REDIRECTS 오류 수정 ) (0)	2024.05.14
[ 프론트엔드 ] 컴포넌트 , nextjs 설계 방식 (0)	2024.05.12
nextjs , typescript 활용한 프론트 개발 (0)	2024.05.12

현재글[ nextjs SEO 체크리스트 ] 1 - 메타데이터 , 메타 태그

TIL

티스토리챌린지, 특수문자이모티콘, 배당투자계산기, 오픽AL, 데이터시각화, 배당투자, 안드로이드개발, 오픽1주, 오픽, 1인개발자, 오픽IH, 오픽모의고사, 오블완, 오픽 모의테스트, 오픽기출, 오픽공부법, 딥러닝, 1인개발, 안드로이드앱개발, 오픽 AL,

Today :
Yesterday :

TIL