오늘은 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="..."> : 표시되는 이미지 나머지는 서비스 영역이기에
우리 게시판 👶은 먹일 필요가 정말 필요가 없어보여서...
추가로 참고하고 싶으면
를 참고하도록 하자.
인줄 알았으나... 세상.. 쉽게만 살아가면 재미없어 빙고
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 적용 방법
이 방법을 채택했다면 위 링크를 따라가 따라해보도록 하자.
이거 하면서 느낀 거지만 세상에는 능력자들이 많다...
공식 문서가 멈추거나 지원이 멈추거나, 혹은 원하는 기능이 없다고
원하는 확장 툴을 그냥 뚝딱 만들어버리는 사람들이 꽤 있더라
신기하다 신기해 나는... 반쪽짜리 개발자 ~
