SEO(Search Engine Optimization, 검색 엔진 최적화)란?
- 검색 엔진은 웹사이트에서 사용자가 검색한 키워드와 관련된 가장 적절한 결과를 제공하기 위해 웹 사이트의 컨텐츠와 구조를 분석하
- 검색 엔진 최적화는 웹에 올리는 컨텐츠가 구글, 네이버와 같은 웹사이트의 검색 엔진에서 검색 결과에서 상위에 노출되도록 최적화하는 과정을 말한다.
문제정의
- You-Together 프로젝트의 기능을 구현하고 크롬 개발자 탭의 Lighthouse를 통해 웹 페이지의 성능을 측정해본 결과, SEO 항목에서 72점이라는 낮은 점수가 기록된 것을 확인했다.
- 기존에 CSR을 사용하는 React만을 사용했던 프로젝트에서는 SEO에 대해 단점을 가질 수 밖에 없다고 생각했지만, 이번 프로젝트는 nextjs를 도입했기 때문에 SEO 점수를 개선하고 싶었다.
- 먼저 SEO 개선 전의 Lighthouse 점수와 문제점은 아래와 같다.
- 점수는 총점 100점에서 75점으로 낮은 점수를 기록하고 있고, 문제점은 다음과 같다.
1. Document doesn't have a <title> element
- 이 문제는 위 이미지와 같이 <title> 태그가 없음을 의미하는데, <title> 태그가 하는 역할은 다음과 같다.
- 검색 엔진 최적화와 관련하여 <title> 태그는 검색 엔진 결과 페이지에서 페이지 제목으로 표시되고 페이지의 내용을 요약하고 사용자가 클릭할지 여부를 결정하는 중요한 요소이며, 관련 검색어에 대해 페이지를 상위에 랭크할 가능성을 높여준다.
- 또한, 시각 장애가 있는 사용자를 위한 화면 읽기 프로그램은 <title> 태그를 읽기 때문에 시각 장애가 있는 사용자에게 페이지를 이해하는 데 도움을 준다.
2. Document doesn't have a meta description
- 이 문제 역시 위 이미지와 같이 페이지에 metadata의 description이 없음을 의미하는데, 먼저 metadata란 다음과 같다.
- 메타데이터는 웹페이지의 HTML 문서의 <head> 섹션에 포함되어, 페이지에 대한 정보를 검색 엔진과 소셜 미디어 플랫폼에 제공한다.
- 메타데이터에는 제목(title), 설명(description), Open Graph 데이터(og, og, og) 등이 포함어 검색 결과와 소셜 미디어에서 페이지의 미리보기를 생성하는 데 사용된다.
- meta description은 검색 결과에서 페이지 제목 아래에 표시되는 요약문으로, 검색 엔진은 이 설명을 사용하여 페이지의 내용을 이해하고, 사용자가 클릭할지 여부를 결정하게 한다.
3. robots.txt is not valid
- 이 문제는 robots.txt 파일에 문법 오류가 있거나 파일이 유효하지 않다는 것을 의미하는데, robots.txt 파일이란 다음과 같다.
- robots.txt 파일은 검색 엔진 크롤러가 웹사이트를 크롤링할 때 어떤 페이지를 크롤링하고, 어떤 페이지를 크롤링하지 말아야 하는지를 지시할 수 있다.
- 이를 통해 검색 엔진이 중요하지 않은 페이지나 민감한 데이터를 크롤링하지 않도록 하여 서버의 부하를 줄이거나 웹사이트의 성능을 유지하는 데 도움을 줄 수 있고, 또한 검색 엔진에 사이트맵의 위치를 알려주어 검색 엔진이 웹사이트의 구조를 이해하는데 도움을 줄 수 있다.
- 위와 같은 세 가지의 이유로 내 프로젝트의 SEO 점수는 저조했고, 이를 수정해보기로 했다.
해결방안
1. <title>과 metadata 추가하기
- 먼저 웹 페이지의 HTML의 <head> 섹션에 <title> 태그와 meta description을 추가해보자.
- 나는 nextjs 버전 14를 사용하고 있고, layout.tsx 파일에 정적 metadata를 추가하기 위해 metadata 개체를 내보내는 방식을 선택했다.
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { NextUIProviders, ReactQueryProviders } from './providers';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'You Together - 친구와 함께 동영상 시청',
description:
'You Together는 친구와 함께 YouTube 동영상을 실시간으로 시청하며 채팅할 수 있는 서비스입니다.',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className="dark bg-application">
<body className={inter.className}>
<ReactQueryProviders>
<NextUIProviders>
<div className="flex flex-col gap-12">{children}</div>
<ToastContainer />
</NextUIProviders>
</ReactQueryProviders>
</body>
</html>
);
}
2. robots.txt 파일 설정
- robots.txt 파일은 루트 경로에 추가하였고 다음과 같은 내용을 작성했다.
User-agent: *
Allow: /
Disallow: /api/
Sitemap: https://you-together.site/sitemap.xml- 내용을 설명하면 다음과 같다.
- User-agent: *: 모든 크롤러에 적용
- Allow: /: 사이트의 모든 페이지를 크롤링하도록 허용한다.
- Disallow: /api/: /api/ 경로 아래의 페이지는 크롤링하지 않도록 한다.
- Sitemap: 사이트맵의 위치를 명시한다.
결과
- 먼저 SEO 점수는 100점을 기록했고, 문제점이 모두 사라진 것을 확인할 수 있었다.
- 또한, 이전의 웹페이지 HTML의 <head> 섹션과 달리 <title> 요소와 meta description이 추가된 것을 확인할 수 있다.
배운 점
- 이전에 React로만 진행했던 프로젝트에서는 고민해보지 못한 내용이었는데, 새로운 내용에 대해서 고민해볼수 있는 시간이어서 재미있었고 검색 엔진에서 프로젝트가 검색 결과의 상위에 노출될 수도 있다고 생각하니 뿌듯했다.
- 추후에는 소셜 미디에어 노출되는 내용에 대해서도 추가해보고 싶다.
'프로젝트 > You-Together' 카테고리의 다른 글
| next.js에서 Open Graph 적용하기 (1) | 2024.09.23 |
|---|---|
| Hydration API를 사용한 데이터 프리패칭을 통한 초기 로딩 속도 개선 (0) | 2024.08.29 |
| You-Together 회고 (0) | 2024.07.26 |
| 실시간 동기화를 위한 웹 소켓 사용: 영상 싱크 및 채팅 구현 (1) | 2024.07.26 |
| react-query 에러 중앙화 처리 (0) | 2024.07.26 |
