SEO( Search Engine Optimization ) 란?
SEO란, 검색엔진 최적화의 줄임말로, 검색엔진이 콘텐츠를 이해하도록 돕고, 사용자가 사이트를 찾고, 검색엔진을 통해 사이트를 방문할지 여부를 결정하도록 돕습니다. - 구글 검색 센터
즉, 구글이나 네이버 등의 검색엔진에 크롤링되어 상위노출되도록 내 프로젝트를 최적화하는 것을 의미합니다.
블로그를 써보셨다면 검색이 잘 되도록 찾아보신 경험이 있으실 텐데요,
저도 구글 서치 콘솔을 이용하다가 React 프로젝트를 진행하면서
블로그 말고, 애플리케이션은 어떻게 검색엔진을 최적화시키는지 관심이 생겨 찾아봤습니다.
SEO 최적화 방법으로는 다양한 방법이 있는데,
React 프로젝트에 적용하기 위해 찾아보았기 때문에
신경써야하는 부분은 공통적이지만, 적용법은 React에 초점을 두고 있습니다.
meta 태그 사용
티스토리 블로그를 구글 서치 콘솔에 등록할 때에도
meta태그를 추가해야 검색이 가능해지는 것과 마찬가지입니다.
사이트 제목인 title을 기본으로, meta 태그에서 메타 데이터를 제공할 수 있습니다.
meta 태그는 웹페이지의 컨텐츠가 아닌, 웹 문서의 정보를 포함하는 HTML 태그입니다.
meta 태그가 제공하는 메타 데이터는 4가지가 있으며,
이 중 name 속성은 content 속성과 함께 사용했을 때 key-value 형태로 제공됩니다.
아래는 MDN 문서에서 설명하는 메타 데이터 속성 4가지로,
코드블럭은 name 과 content 사용 예시입니다.
<meta name="color-scheme" content="dark light" />- name 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.
- http-equiv 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.
- charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.
- itemprop 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.
OpenGraph(OG) meta 태그
OG meta 태그는 Facebook이 발명한 메타 데이터 프로토콜입니다.
우리가 SNS 를 통해 웹 사이트를 지인에게 공유할 때,
미리보기로 제공되는 메타 데이터를 제공합니다.
마찬가지로 필수 속성은 4가지로, type / title / image / url 이 있습니다.
image 는 썸네일 이미지이며, 권장크기는 1200 X 630 입니다.
추가 설명을 작성하고 싶다면 description 속성을 작성하면 됩니다.
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Meta Keyword 가 SEO에 상관없는 이유
예전에는 keyword 를 지정해주는 것으로도 검색엔진에 최적화할 수 있었지만,
요즘은 meta keyword를 크롤링에 포함시키지 않습니다. 왜일까요?
검색엔진의 목적은 유저가 검색한 정보와 가장 관련있고 유용한 정보를 제공하는 것인데,
keyword 설정만으로 유저의 검색 결과를 가로챈다면
사용자들이 원하는 정보가 아닌, 스팸성 웹 사이트로 전락하기 때문입니다.
대신에, meta keyword 말고도 검색엔진 최적화하는 방법은 여전히 다양합니다.
robots.txt
크롤러가 사이트에서 엑세스할 수 있는 URL을 검색엔진 크롤러에게 알려주는 파일입니다.
React 에서는 public 폴더 내에 생성하면 되는데,
자동으로 생성된 파일이 있다면 해당 파일에 작성하시면 됩니다.
// 특정 봇이 아닌 모든 봇에 적용
User-agent: *
// 하나의 디렉토리 크롤링 차단
Disallow: /__mesa/
// 하나의 파일 크롤링 차단
Disallow: /learning/bots/what-is-a-bot/
// 전체 엑세스 허용
Disallow:
추가로 sitemap.xml 을 활용하면 더 효과적으로 색인화하고 검색 결과에 포함됩니다.
sitemap.xml은 robots.txt 에 포함하기도 하는데, 검색 우선순위를 강제하지는 않습니다.
자세한 내용은 다른 포스팅에서 다뤄보겠습니다.
Prerendering (SSR / SSG)
Prerendering을 위해서는 SSR / SSG 방식이 있습니다.
- SSR(Server-side Rendering) :
클라이언트에서 요청을 받을 때마다 서버에서 HTML 을 생성하여 제공하는 방식. - SSG(Static Site Generation / Static Rendering) :
배포 시점, 즉 빌드 시에 정적 파일을 생성하는 방식.
1) SSR - Next.js
React 프로젝트를 진행한다면, Server Side Rendering이 가능한 Next.js 사용을 권장합니다.
(React가 능숙하다면 Next.js 학습량이 크게 늘지 않습니다)
Next.js를 쓰지 않고 React 로만 프로젝트를 구성한다면
아직 페이지가 렌더링되기 전에 검색엔진이 크롤링하여
검색이 잘 되지 않기 때문에 서버에서 미리 HTML을 생성해서 내려주는
SSR방식이 가장 선호되고 있습니다.
2) SSG - React-Snap..? Puppeteer, Prerender
이전에는 SSG 방식으로 React-Snap이 많이 사용되었지만,
5년 넘게 업데이트가 되지 않았고, React 18에서 제대로 작동하지 않기 때문에
React 17 버전을 사용해야한다는 단점이 있습니다.
다른 분들의 블로그를 보니 Puppeteer와 Prerender를 설치하고
vite.config.ts 파일에 설정을 추가해 build 시 prerendering을 하도록
구현할 수 있다고 합니다. 참고 블로그들은 아래에 추가하겠습니다.
결론은, SSR 방식이 검증된 방식이고 IT기업들에서도
선호하는 기술스택이기 때문에 Next.js를 여전히 추천합니다.
마치며
이 외에도 구글봇은 # 뒤의 내용을 무시한다,
링크에 <a href=""> 태그를 사용해야 크롤링이 가능하다,
click이나 hover로 보여지는 컨텐츠는 검색에서 제외된다 등
검색엔진에 최적화하기 위한 방법은 다양하기 때문에
직접 프로젝트에 적용해보고 lighthouse로 SEO 테스트를
해보는 것이 가장 정확합니다.
그러나, SEO에만 치우쳐 사용자 경험을 낮추지 않도록
우선순위를 사용자 경험에 두고, 디벨롭하는 것이 좋겠습니다.
참조 블로그
[React] SPA 사이드 프로젝트 검색 엔진 최적화(SEO) 끝장내기
[사용자 친화 웹] React에서 검색엔진 최적화(SEO)하는 방법들