neeon의 TIL, [html] 기본 SEO / [react] SEO pre-rendering 방식으로 먹이기

728x90

오늘은 HTML의 기본 SEO 에 대해 알아보려고 한다.
사유는 몇일 전의 내가 TITLE 도 안 바꾸고 프로젝트를 올릴뻔한 적이 있어서
나는 HTML에 H도 모르는구나 라고 깨달았기 때문이다.

대참사는 눈치껏 막아냈지만..

또한 우리가 만든 아기 웹앱 👶은 보다싶이 링크를 추가해도 아무런 미리보기를 제공해주지 않는다.

노션도 마찬가지이다. 한참 로딩이 걸리다가 - 그냥 링크 이름만 걸어준다 😥

대강 이런 느낌이다.. 콩지야.. 난 더이상 안되개써 🐸

이 이유에 대해서는 심각한 건 아니고 아주 간단하게
HTML 기본 SEO에 대해 알면 해결할 수 있게 된다.

🐵🐵🐵

우선

0. SEO 란?

Search Engine Optimization의 약자로, 검색엔진최적화 를 의미하는데,

웹 사이트와 웹페이지를 검색엔진이 쉽게 1) 발견(discovery)하고, 2) 읽어가서(crawling), 3) 색인하고(indexing), 4) 상위 노출(ranking)시켜 자연 유입되는 트래픽의 양과 질을 높일 수 있도록 관련 검색 알고리즘의 특성을 고려해서 웹사이트의 구조나 콘텐츠를 개선하는 일련의 작업 을 말한다고 한다.

무조건 쉽게 발견하고 읽어가게 하는 그런 돈주고 사는 파워랭킹링크 같은 느낌이 아니라
검색 이용자의 검색 의도에 정교하게 잘 맞춘 콘텐츠를 제공하는 것에 집중한다 는 말이 검색엔진최적화(SEO)의 가장 중요한 핵심 포인트 일 것이다. (아마도)

0-1. SEO 의 요소

웹사이트 내외에 따라 온페이지 SEO 와 오프페이지 SEO가 있다.

온페이지SEO : 웹사이트 내에 있는 HTML요소, SERVER요소, 핵심 및 연관키워드를 대상으로 한다.

오프페이지 SEO : 웹 사이트 밖에서 활동을 하는 소셜 미디어, 타 웹사이트 링크 등을 말한다.

1) 테크니컬SEO(Technical SEO) : 웹사이트 속도, 구조 인덱싱, 태깅, 스키마 등 웹 개발에 관련된 영역

2) 온 페이지SEO(On-page SEO) : 페이지의 구성요소와 완성도, 즉 '글(키워드)'의 퀄리티와 관련된 영역

3) 오프페이지SEO(Off-page SEO) : 내 웹사이트 외부 영역, 타 사이트에서 내 사이트를 어떻게 평가하고 신뢰하는지 (domain authority) (외부사이트에서 내 페이지를 얼마큼 링크로 걸어주는지)에 관한 영역

나머지는 디자이너나.. 뭐 등등 사람들이 하겠지..
나는 테크니컬SEO를 중점으로 다룰 생각이다.

1. 테크니컬SEO

1.1 제목(Title/타이틀) 태그

웹페이지의 고유 제목이며 검색엔진이 웹페이지를 읽을 때 가장 먼저 읽는 내용
1) 웹브라우저 탭 메뉴에서 보여지며 2) 구글 네이버 검색결과 시 검색결과의 제목 을 의미한다.

<title></title>

에 해당하는 부분이다.

1.2 웹페이지 요약설명(Meta Description, 메타디스크립션)

작성 길이의 기준도 있다는데.. 1) 구글은 160자 미만, 2) 네이버는 80자 미만

<meta name="description" content="설명쓰삼">

이런 양식이고

이렇게 먹이면 된다.

1.3 제목태그(Heading Tags, h1~h2)

HTML 구조에서 제목, 소제목 및 단락을 기술하는 개념
웹문서를 잡아주는 '기본적인 골격'으로 치부되기 때문에 SEO 최적화에 가장 중요한 요소 중 하나.

[ 참고 ]
1) 페이지의 구조를 크기순으로 배치하는 것이 중요하며
2) H1 → H2 태그의 순으로 크기와 중요도가 낮아진다
3) 그런 의미로 H1 태그는 가장 큰 제목(대주제) 이기 때문에 반드시 적용해야 한다.
3-1) H1은 1개, H2는 3개까지만 작성하는 것이 키워드 밀도에 제일 좋다고 한다.

이외에도 여러가지가 존재하는 것으로 보이나 유료 서비스를 이용하라는 의미 같고,
개발자의 영역이 아니기에 패스한다.

1.4 웹사이트 내 링크 미리보기

* Naver 블로그, 카카오톡 미리보기 설정
<meta property="og:title" content="..."> : 콘텐츠 제목
<meta property="og:url" content="..."> : 웹페이지 URL
<meta property="og:type" content="..."> : 웹페이지 타입(blog, website 등)
<meta property="og:image" content="..."> : 표시되는 이미지
<meta property="og:site_name" content="..."> : 웹사이트 이름(URL과 다름)
<meta property="og:description" content="..."> : 웹페이지 설명(제목 아래에 표시)

*트위터 미리보기 설정
<meta name="twitter:card" content="..."> : 트위터 카드 타입(요약정보, 사진, 비디오)
<meta name="twitter:title" content="..."> : 콘텐츠 제목
<meta name="twitter:description" content="..."> : 웹페이지 설명
<meta name="twitter:image" content="..."> : 표시되는 이미지

나머지는 서비스 영역이기에
우리 게시판 👶은 먹일 필요가 정말 필요가 없어보여서...

추가로 참고하고 싶으면

SEO 총정리 가이드

를 참고하도록 하자.

인줄 알았으나... 세상.. 쉽게만 살아가면 재미없어 빙고
1.4 내용을 먹이고서 npm run build 를 하니까 html이 적용되기는 커녕
코드마저 싹 지워져버린다

🐵🐵🐵

어이가 없네..

2. React에서 SEO 먹이는 법

다시 시작하도록 한다.

1. pre-rendering
2. server side rendering

두 가지의 방법이 존재한다.

설명은 간단하게 다 적어 둘 것이나
1) 나는 next.js 를 사용하지 않았고 2) 동적으로 url에 대한 미리보기를 다르게 제공해줄 필요가 없다. (왜냐면 로그인을 안했을 때는 메인 밖에 못 들어가는데다가 사외망에서는 접속이 불가능하기 때문임)

고로 Pre-rendering 방법을 채택해보도록 할 것이다.
대부분 react로 개발한 경우에는 1.Pre-Rendering 을 채택하고 있더라 참고

1. Pre-Rendering

빌드를 할 때 미리 특정 페이지를 렌더링 해서 html 파일을 만들어 두는 방법
검색 엔진이 크롤링하러 사이트에 들어왔을 때, 빈 html 대신 내용을 가져 갈 수 있게..!

react-snap 라이브러리를 통해서 해당 라우팅 경로를 지정해주는 방법이다.
동적 페이지에는 적용하기가 힘들어보인다는 이야기가 있음...

기본 메타데이터(Meta Data) 는 위와 동일

<head>
......
<meta property="og:title" content="제목"/>
<meta property="og:type" content="데이터의 타입 (article, website, image...)"/>
<meta property="og:url" content="사이트 주소"/>
<meta property="og:description" content="데이터에 대한 설명"/>
<meta property="og:image" content="데이터의 썸네일/이미지 주소"/>
......
</head>

1. react-snap 라이브러리 사용

react-snap은 puppeteer 를 사용하여 정적 HTML 파일들을 pre-rendering 해주는 라이브러리
비슷한 라이브러리로는 react-snapshot 등이 있단다. 하지만 snap이 더 다운로드 수가 많으니까 절대 다수를 따라보도록 한다.

npm i react-snap -D

설치를 우선 해주도록 하자. 개발환경에서 사용하는 라이브러리이기 때문에 devDependency로 설치를 해줘야한단다.

app.js 에서 라우터 설정을 해주고

npm run build

를 하면 알아서 build 쪽에

이렇게 폴더가 생김...

ps. 추가하고 싶거나 제거하고 싶은 부분이 있으면 build 때리기 전에 include나 exclude 옵션을 줘버리면 된다...

// package.json

...
"reactSnap":{
	"include":[
    	"/"]
 }

2. hydrate 설정

// src/index.js

import React from 'react';
import { hydrate, render } from 'react-dom';
import App from './App';

const $root = document.getElementById('root');
const renderOrHydrate = $root.hasChildNodes() ? hydrate : render;

renderOrHydrate(<App />, $root);

설정은 여기까지

3. TEST 테스트

3.1 Build 빌드

npm run build

터미널에서 빌드를 해주면

무슨 페이지들을 크롤링해오는지도 확인할 수 있다

4. 브라우저에서 확인

npx serve build

를 해주고,

개발자 도구에 Network탭-Doc 에
pre-rendering 한 페이지들의 미리보기가 보이면 정상 작동이 된거라고 한다.

2. Server Side Rendering

동적 페이지의 경우 server side rendering을 많이 사용하는데...
server side rendering의 경우에는 next.js의 큰 장점 중에 하나기 때문에
next.js 로 개발을 했으면 상관이 없는데... 아닌 경우에는 next.js로 마이그레이션을 해줘야한단다.

자세한 방법

React로 Next.js 처럼 Server-side-rendering 구현하기

React에서 SNS 공유 미리보기, SEO 적용 방법

이 방법을 채택했다면 위 링크를 따라가 따라해보도록 하자.

이거 하면서 느낀 거지만 세상에는 능력자들이 많다...
공식 문서가 멈추거나 지원이 멈추거나, 혹은 원하는 기능이 없다고
원하는 확장 툴을 그냥 뚝딱 만들어버리는 사람들이 꽤 있더라
신기하다 신기해 나는... 반쪽짜리 개발자 ~