[뽁] Next.js환경에서 SEO와 SITEMAP 적용

hansoom·2024년 4월 10일

BBOK React next

BBOK

목록 보기

4/6

Next환경에서의 뽁의 SEO와 SITEMAP을 적용해 뽁 서비스를 검색 결과 상단에 노출시킬 수 있도록 작업해 볼 것이다.

1. SEO 란?

SEO(검색 엔진 최적화, Search Engine Optimization)는 웹사이트의 검색 엔진 결과 페이지(SERP)에서 높은 순위를 차지하도록 웹사이트를 최적화하는 프로세스이다.

사용자가 검색 엔진에서 특정 키워드를 검색하면 상위 노출된 페이지를 먼저 열람하게 된다.
이때 웹 사이트 또는 웹 페이지의 상위 노출도를 높이는 작업이 SEO 작업이다.

2. SEO 최적화하기 위해서는?

2-1. 메타 태그 사용하기

메타 태그란 웹 페이지를 검색 엔진에 검색했을 때 노출되는 컨텐츠를 뜻한다.

메타 태그는 웹 사이트에 대한 정보를 제공하는 기능을 하고 있다. 그러한 정보를 메타데이터 라고 부른다. 메타데이터는 웹 페이지에 나타나지 않고, 검색 엔진이나 웹 크롤러를 통해 수집됩니다.

title tag
title tag 란 노출되는 제목이다. 단순히 검색 결과에만 노출되는 것이 아니라, 브라우저 탭 상에도 노출되므로 아주 중요한 태그라고 볼 수 있다.

default : default를 설정할 경우 하위 세그먼트에서 메타데이터 title을 설정하지 않을 경우 default 값으로 정의된다.
template : template은 하위 세그먼트에 정의된 title 앞이나 뒤에 추가되는 값이다.

description tag
description tag 는 웹 페이지의 설명을 한 두줄로 요약한 문장이다. 유저들은 이 description 을 보고 내가 찾던 정보 인지 아닌 지를 판단하므로 최대한 잘 읽히게 문장으로 작성하는 것이 중요하다고 볼 수 있다.

2-2. 오픈그래프 태그 사용하기

OG(Open Graph) 태그는 웹 사이트가 소셜 미디어에 공유될 때 미리보기에 사용되는 메타 데이터를 정의하기 위한 태그를 뜻한다.

친구와 카톡을 주고 받다가 어떤 URL을 공유했을 때 해당 웹페이지의 콘텐츠의 미리보기를 카드 형태로 나타나는 것을 본 적이 있을 것이다.

이렇듯 SNS와 메신저를 통해 웹페이지의 링크를 공유하는 일이 잦아지면서 메타 태그가 좀 더 넓은 분야에서 활용되고 있는데 이러한 서비스들은 Open Graph 프로토콜이라고 불리는 업계 표준을 따라서 웹페이지 콘텐츠 미리보기를 지원하고 있다.

따라서 우리도 Open Graph 프로토콜에서 정의하고 있는 메타 태그를 적절히 사용하면 소셜 미디어에서 공유되는 컨텐츠의 가시성을 높일 수 있고, 더 많은 트래픽을 유치할 수 있다.

og태그를 적용했을 때 뽁을 공유했을 때 모습이다.

3. Next 에 metadata 를 적용하기 위해서는?

Next 에서는 SEO 및 웹 공유성 향상을 위해 어플리케이션 메타 데이터 정의를 위한 Metadata API 가 있다.
여기서 어플리케이션 메타 데이터에는 meta 및 link 태그를 말한다.

어플리케이션에서 메타 데이터를 추가하는 방법은 총 2가지가 있다.

3-1. Config-based Metadata

layout.js 또는 page.js 파일에서 정적인 'metadata' 개체 또는 동적인 'generateMetadata' 함수를 내보낸다.

정적 메타 데이터

정적 메타데이터를 정의하려면 layout.js 또는 정적 page.js (Server Component 방식) 파일에서 메타데이터 개체를 내보낸다.

next에서는 최상위 layout.tsx에 metadata를 작성할 수 있는 기본 코드가 생성된다. 실제 정적 메타 데이터를 뽁 서비스에 적용해보았다.

뽁 서비스를 설명하는 title 및 descript 등 meta 데이터를 상수로 저장해주었다.

export const META = {
  TITLE: '뽁 | 나를 아프게 하는 가시를 뽁! 친구관계를 위한 나만의 일기장',
  SITE_NAME: '뽁',
  DESCRIPTION:
    '친구와 관계를 정리하고 싶었던 순간이 있으셨나요? 나를 아프게 하는 가시를 뽁! 친구관계를 위한 나만의 일기장, 뽁을 이용해보세요.',
  DOMAIN_URL: 'https://bbok-sigma.vercel.app',
} as const;

실제 최상단 layout.tsx 파일에 메타 데이터 객체를 내보낸다.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  metadataBase: new URL(META.DOMAIN_URL),
  title: {
    default: META.TITLE,
    template: `%s | ${META.SITE_NAME}`,
  },
  description: META.DESCRIPTION,
  openGraph: {
    title: META.TITLE,
    description: META.DESCRIPTION,
    siteName: META.SITE_NAME,
    locale: 'ko_KR',
    type: 'website',
    url: META.DOMAIN_URL,
  },
  icons: {
    icon: '/images/icon/bbok.png',
  },
  twitter: {
    title: META.TITLE,
    description: META.DESCRIPTION,
  },
};

이렇게 metadata 를 내보내주면 자동으로

head 컴포넌트 를 사용되어 메타태그가 삽입된 것을 볼 수 있다.

동적 메타 데이터

generateMetadata 함수를 사용하여 동적 값이 필요한 메타데이터를 fetch할 수 있다.

예시 코드

✅ /productDetail/[productId]/page.tsx

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

사용자가 상품 Card를 클릭해서 상품 상세 페이지로 이동한다면 해당 상세 페이지로 이동한 Card 상품에 대한 정보를 통신 fetch를 활용해 응답으로 동적 메타 데이터를 생성할 수 있다.

3-2. File-based Metadata

정적 또는 동적으로 생성된 특수 파일을 루트 세그먼트에 추가한다.

favicon.ico, apple-icon.jpg, and icon.jpg

opengraph-image.jpg and twitter-image.jpg

robots.txt

sitemap.xml

robots.txt란?

robots.txt 는 웹사이트에 대한 검색 엔진 로봇들의 접근을 조절해주고 제어해주는 역할, 그리고 로봇들에게 웹 사이트의 사이트 맵이 어디있는 지 알려주는 역할을 한다.

말하는 사이트 맵은 수집 로봇을 위한 XML 사이트 맵을 말한다. robots.txt는 html 이 아닌 일반 텍스트 파일로 작성하며 사이트의 루트 디렉토리에 위치해야 한다.

app/robots.txt

User-agent: *
Allow: /

Host: https://bbok-sigma.vercel.app

Sitemap: https://bbok-sigma.vercel.app/sitemap.xml

우리 뽁 서비스의 robots.txt 를 다음과 같이 추가해주었다.

robots.txt 는 웹사이트의 사이트 맵 위치를 포함하기 때문에 검색 엔진 로봇들에게 어디에서 웹 사이트 정보를 가져가야 할 지알려주는 역할을 합니다.

sitemap.xml 이란?

sitemap.xml 은 웹사이트 내 모든 페이지의 목록을 나열한 파일로 책의 목차와 같은 역할을 한다.

사이트 맵을 제출하면 일반적인 크롤링 과정에서 쉽게 발견되지 않는 웹페이지도 문제없이 크롤링되고 색인될 수 있게 해준다.
https://www.twinword.co.kr/blog/3-different-ways-to-generate-and-submit-sitemap/

무료로 생성해주는 온라인 사이트를 활용하여 뽁의 sitemap.xml 파일을 생성해주었다.

app/sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
  <url>
    <loc>https://bbok-sigma.vercel.app/landing</loc>
    <lastmod>2024-04-11T00:09:11+00:00</lastmod>
  </url>


</urlset>