Next.js 앱 라우터로 동적 사이트맵 및 SEO 메타데이터 생성하기
목차
- 사이트맵(Sitemap)이란?
- 사이트맵 생성하기
- 구글 서치 콘솔(Google Search Console)과의 연동
- 메타 태그(Meta Tags)란?
- 메타 태그 추가하기
- 오픈 그래프(Open Graph)와 트위터 카드(Twitter Card)
- 블로그 포스트에 메타 태그 적용하기
- 캐노니컬 URL(Canonical URL)이란?
- 캐노니컬 URL 추가하기
- 가독성과 검색 엔진 최적화(SEO)를 위한 주의사항
사이트맵 생성하기
사이트맵(Sitemap)은 웹 사이트의 모든 페이지를 구글과 같은 검색 엔진에게 알려주는 중요한 역할을 합니다. 사이트맵을 생성하면 구글은 사이트의 구조와 페이지의 정보를 파악하여 검색 결과에 포함시키게 됩니다.
Next.js에서는 사이트맵을 생성하는 방법이 제공됩니다. 소스 코드의 app 폴더 내에 sitemap.ts라는 새 파일을 생성하고, 여기에 사이트맵을 생성하는 코드를 작성합니다. 예를 들어, 인덱스 페이지와 어바웃 페이지, 그리고 포스트 페이지로 구성된 간단한 사이트의 경우, sitemap.ts 파일에 다음과 같이 코드를 작성할 수 있습니다.
import { GetServerSideProps } from 'next'
const generateSitemap = () => {
const routes = [
{ url: '/', lastModified: '2022-01-01', changeFrequency: 'daily' },
{ url: '/about', lastModified: '2022-01-01', changeFrequency: 'daily' },
{ url: '/post/example-post', lastModified: '2022-01-01', changeFrequency: 'daily' },
]
const hostURL = process.env.SITE_URL || 'https://www.example.com'
const sitemapXML = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${routes.map(route =>
`<url>
<loc>${hostURL}${route.url}</loc>
<lastmod>${route.lastModified}</lastmod>
<changefreq>${route.changeFrequency}</changefreq>
</url>`
).join('')}
</urlset>`
return sitemapXML
}
export const getServerSideProps: GetServerSideProps = async ({ res }) => {
res.setHeader('Content-Type', 'text/xml')
res.write(generateSitemap())
res.end()
return { props: {} }
}
위 코드는 간단한 사이트맵을 생성하는 예시입니다. routes 배열에 각 페이지의 URL, 최종 수정일자, 변경 빈도 등의 정보를 추가하고, 이를 템플릿 문자열을 통해 사이트맵 XML의 형식에 맞게 생성합니다. 이렇게 생성한 사이트맵은 getServerSideProps 함수를 통해 서버 측에서 동적으로 생성되며, Content-Type 헤더를 'text/xml'로 설정하여 XML 형식의 데이터를 반환합니다.
구글 서치 콘솔과의 연동
사이트맵을 생성했다면, 이를 구글 서치 콘솔(Google Search Console)에 등록하고 구글에 사이트맵을 알려주어야 합니다. 구글 서치 콘솔에 도메인을 등록한 후, Sitemaps 탭에서 사이트맵 URL을 입력하여 제출하면 구글은 사이트맵을 처리하고 웹 페이지를 색인화합니다.
구글 서치 콘솔에서 '도메인 추가' 버튼을 클릭하여 도메인을 등록하고, '사이트맵' 메뉴로 이동합니다. 등록한 도메인에 대한 사이트맵 URL을 입력하고, 제출 버튼을 클릭하여 사이트맵을 등록합니다. 이후 구글은 등록한 사이트맵을 처리하고 웹 페이지를 색인화하게 됩니다.
메타 태그란?
메타 태그(Meta Tags)는 HTML 페이지의 헤더 부분에 삽입되는 태그로, 웹 페이지의 정보를 검색 엔진이나 소셜 미디어에 제공하기 위해 사용됩니다. 메타 태그를 이용하면 웹 페이지의 제목, 설명, 키워드 등의 정보를 설정할 수 있으며, 소셜 미디어에서 웹 페이지가 공유될 때 썸네일 이미지와 같은 추가 정보를 제공할 수 있습니다.
메타 태그 추가하기
Next.js에서는 메타 태그를 추가하기 위해 layouts 디렉토리의 layout 파일에서 metadata 객체를 생성하고 사용할 수 있습니다. 이 객체를 이용하면 웹 페이지의 제목, 설명, 이미지 등의 정보를 설정할 수 있습니다.
// layout.js
import Head from 'next/head'
const Layout = ({ children }) => {
const metadata = {
title: 'Travel X Family',
description: '여행 블로그',
ogImage: 'https://www.example.com/og-preview.jpg',
canonicalURL: 'https://www.example.com',
}
return (
<div>
<Head>
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
<meta property="og:title" content={metadata.title} />
<meta property="og:description" content={metadata.description} />
<meta property="og:image" content={metadata.ogImage} />
<meta property="og:url" content={metadata.canonicalURL} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={metadata.title} />
<meta name="twitter:description" content={metadata.description} />
<meta name="twitter:image" content={metadata.ogImage} />
<link rel="canonical" href={metadata.canonicalURL} />
</Head>
{children}
</div>
)
}
export default Layout
위 코드는 layout 컴포넌트에서 메타 태그를 추가하는 예시입니다. metadata 객체에 웹 페이지의 제목, 설명, 이미지 URL, 캐노니컬 URL 등의 정보를 설정한 후, Layout 컴포넌트에서 Head 컴포넌트를 사용하여 메타 태그를 작성합니다. 이렇게 설정한 메타 태그는 각각의 페이지에서 사용되며, 공통된 정보는 Layout 컴포넌트에서 설정합니다.
오픈 그래프와 트위터 카드
오픈 그래프(Open Graph)와 트위터 카드(Twitter Card)는 웹 페이지가 소셜 미디어에서 공유될 때의 미리보기 정보를 제공하기 위해 사용되는 프로토콜입니다. 이를 이용하면 페이지가 어떻게 표시될지 더욱 예쁘고 다양한 내용을 보여줄 수 있습니다.
오픈 그래프와 트위터 카드는 메타 태그를 사용하여 설정할 수 있으며, 이미지, 제목, 설명 등의 정보를 포함할 수 있습니다. 또한, 트위터 카드의 경우 카드의 타입, 즉 미리보기의 크기와 스타일을 지정할 수 있습니다.
블로그 포스트에 메타 태그 적용하기
블로그 포스트 페이지에서도 메타 태그를 적용할 수 있습니다. 포스트의 제목, 설명, 이미지는 동적으로 가져와야 하기 때문에 매번 메타 태그를 작성하는 것은 번거로울 수 있습니다.
Next.js에서는 메타 태그를 동적으로 생성하는 createMetadata 함수를 작성하여 이를 해결할 수 있습니다. 예를 들어, 포스트 페이지에서 createMetadata 함수를 사용하여 메타 태그를 생성하는 방법은 다음과 같습니다.
import { createMetadata } from '../lib/metadata'
const Post = ({ post }) => {
const metadata = createMetadata(post)
return (
<Layout>
<Head>
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
<meta property="og:title" content={metadata.title} />
<meta property="og:description" content={metadata.description} />
<meta property="og:image" content={metadata.ogImage} />
<meta property="og:url" content={metadata.canonicalURL} />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={metadata.title} />
<meta name="twitter:description" content={metadata.description} />
<meta name="twitter:image" content={metadata.ogImage} />
<link rel="canonical" href={metadata.canonicalURL} />
</Head>
{/* 포스트 내용 */}
</Layout>
)
}
위 코드에서 createMetadata 함수는 포스트의 정보를 전달받아 메타 태그를 생성합니다. 생성된 메타 태그는 Head 컴포넌트에 추가되어 포스트 페이지의 정보를 설정합니다. 이렇게 작성한 메타 태그는 동적으로 포스트의 제목, 설명, 이미지 등을 생성하여 매번 메타 태그를 작성하지 않아도 되도록 합니다.
캐노니컬 URL이란?
캐노니컬 URL(Canonical URL)은 웹 페이지의 페이지 주소 중에서도 페이지의 원본 버전을 나타내는 URL입니다. 여러 페이지들이 동일한 내용을 가지고 있을 때, 캐노니컬 URL을 사용하여 동일한 내용의 페이지임을 검색 엔진에 알려줄 수 있습니다. 이를 통해 중복 콘텐츠가 발생하는 것을 방지하고, 검색 엔진이 올바른 페이지를 색인화할 수 있도록 도와줍니다.
캐노니컬 URL 추가하기
Next.js에서는 캐노니컬 URL을 추가하기 위해 createMetadata 함수에서 canonicalURL 정보를 설정할 수 있습니다. 이 정보는 Head 컴포넌트의 link 태그를 통해 캐노니컬 URL로 지정됩니다.
// metadata.js
export const createMetadata = (post) => {
const metadata = {
title: post.title,
description: post.description,
ogImage: post.ogImage,
canonicalURL: process.env.SITE_URL + post.slug,
}
return metadata
}
위 코드에서 createMetadata 함수는 포스트의 정보를 전달받아 메타 데이터를 생성합니다. 생성된 메타 데이터 객체에 canonicalURL 정보를 추가한 후, 이를 반환합니다. 이렇게 설정한 캐노니컬 URL은 Head 컴포넌트의 link 태그에 href 속성으로 추가되어 페이지의 원본 버전임을 검색 엔진에 알려줍니다.
가독성과 검색 엔진 최적화(SEO)를 위한 주의사항
- 제목과 내용은 명확하고 효과적으로 써야 합니다. 사용자가 검색한 키워드와 관련된 정보를 제공해야 합니다.
- 헤더 태그를 활용하여 구조적인 정보를 제공해야 합니다. h1 태그를 사용하여 중요한 제목을 설정하고, h2~h4 태그를 사용하여 하위 제목을 설정하면 검색 엔진이 페이지 구조를 파악하기 쉬워집니다.
- 이미지 태그의 alt 속성에는 이미지와 관련된 키워드를 넣어야 합니다. 검색 엔진은 alt 속성을 통해 이미지를 인식하고 콘텐츠에 대한 추가 정보를 파악합니다.
- 링크 텍스트에도 키워드가 포함되도록 해야 합니다. 링크 텍스트를 통해 해당 링크가 어떤 내용을 가지고 있는지 알 수 있습니다.
- 가독성을 높이기 위해 단락마다 줄바꿈을 적절하게 사용해야 합니다. 긴 문장이나 단락은 독자의 이해를 방해할 수 있으므로 간결하고 명료하게 작성해야 합니다.
FAQ
Q: 사이트맵을 생성해야 하는 이유는 무엇인가요?
A: 사이트맵은 웹 페이지의 구조와 정보를 검색 엔진에게 알려주는 역할을 합니다. 구글과 같은 검색 엔진은 사이트맵을 통해 웹 페이지를 더욱 효과적으로 색인화하고 검색 결과에 포함시킵니다. 또한, 사이트맵을 통해 중요한 페이지를 강조하거나 변경된 페이지를 빠르게 검색 엔진에게 알릴 수 있습니다.
Q: 사이트맵을 생성하는 방법은 무엇인가요?
A: Next.js에서는 서버 측에서 동적으로 사이트맵을 생성할 수 있습니다. 사이트맵 생성 함수를 작성하고 이를 getServerSideProps 함수에서 호출하여 사이트맵 XML을 반환하면 됩니다. 생성한 사이트맵은 Content-Type 헤더를 'text/xml'로 설정하여 XML 형식의 데이터를 반환합니다.
Q: 메타 태그는 어떤 역할을 하나요?
A: 메타 태그는 HTML 페이지의 헤더 부분에 삽입되는 태그로, 웹 페이지의 정보를 검색 엔진이나 소셜 미디어에 제공하기 위해 사용됩니다. 제목, 설명, 키워드 등의 정보를 설정할 수 있으며, 소셜 미디어에서 웹 페이지가 공유될 때 썸네일 이미지와 같은 추가 정보를 제공할 수 있습니다.
Q: 오픈 그래프와 트위터 카드는 어떤 역할을 하나요?
A: 오픈 그래프와 트위터 카드는 웹 페이지가 소셜 미디어에서 공유될 때의 미리보기 정보를 제공하기 위해 사용되는 프로토콜입니다. 메타 태그를 사용하여 페이지의 제목, 설명, 이미지 등의 정보를 설정하고, 웹 페이지가 소셜 미디어에서 공유될 때 예쁜 미리보기가 생성됩니다.
Q: 캐노니컬 URL은 왜 사용해야 하나요?
A: 캐노니컬 URL은 웹 페이지의 원본 버전을 나타내는 URL로, 중복되는 콘텐츠가 있는 경우 검색 엔진에게 어떤 페이지가 원본 버전인지 알려주는 역할을 합니다. 캐노니컬 URL을 사용하면 중복 콘텐츠로 인한 문제를 방지하고, 검색 엔진이 올바른 페이지를 색인화할 수 있도록 도와줍니다.
Q: 가독성과 검색 엔진 최적화를 위해 주의해야 할 점은 무엇인가요?
A: 가독성과 검색 엔진 최적화를 위해 제목과 내용을 명확하고 효과적으로 작성해야 합니다. 헤더 태그를 구조적으로 사용하고, 이미지 태그의 alt 속성에는 키워드를 넣어야 합니다. 링크 텍스트에도 키워드를 포함시키고, 가독성을 높이기 위해 적절한 줄바꿈을 사용해야 합니다.
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
