SEO(Search Engine Optimization)
검색 엔진 최적화. 네이버나 구글같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 보이게 하기 위한 과정이다.
SEO 과정
1. 크롤링 : 웹 크롤러를 이용하여 웹 페이지 정보를 가져온다. 웹 크롤러는 사이트를 방문한 다음 모든 링크를 타고 다니며 새로운 페이지들의 정보를 수집한다. 텍스트만 읽기 때문에 이미지, 동영상 정보는 읽을 수 없다. (alt text요소 추가 필요)
2. 인덱싱 : 웹 크롤러가 수집한 정보를 구글 검색 색인에 저장한다. 검색엔진에 의해 색인이 완료되면 검색 결과에 노출될 수 있다.
3. 랭킹 : 검색엔진은 사용자가 검색하는 키워드를 색인 내에서 가장 일치하는 페이지를 찾아 검색 결과에 노출 시킨다. 이때 각 검색 엔진의 알고리즘에 따라 페이지들의 순위를 매긴다. 일반적으로 HTML title, meta description 태그를 사용해야 검색 주제와 콘텐츠에 적합한 관련 페이지로 인식하여 결과에 노출될 수 있으며, 또한 타 페이지 링크횟수, 클릭 수, 트래픽 등이 랭킹에 영향을 주는 요소가 된다.
개발할 때 신경써야하는 SEO 항목들
- 문법에 맞는 HTML 작성하기
- 시맨틱 태그를 이용하여 홈페이지를 마크업한다.
- 잘못된 마크업을 사용했는지 Google Rich Result Test를 이용해서 디버깅한다.
- 고유하고 정확한 페이지 제목 만들기
- 클릭률을 높일 수 있도록 눈길을 사로잡는 문구를 사용한다.
- 페이지마다 고유한 title 태그를 작성한다.
- 제목의 시작이나 끝에 사이트 이름을 포함하고 나머지 제목은 하이픈
-, 콜론:, 막대|을 사용한다.
- 메타 태그 사용하기
- 가능하면 특정 페이지를 정확하게 나타내는 설명을 작성한다.
- 모든 페이지를 작성할 수 없는 상황이라면, 홈페이지 내 각 페이지에 우선순위를 두어 주요 페이지들만 작성해야한다.
- 설명에 콘텐츠 관련 정보를 포함한다.
- anchor 태그를 활용한 적절한 키워드 배치하기
- div, button 태그 보다는 a 태그를 이용한다.
- a href 요소가 없으면 Google은 URL을 크롤링하지 않는다.
- 이미지 최적화하기
- img 또는 picture 태그를 사용한다.
- CSS를 사용하여 색인을 생성하지 않는다.
- alt 속성을 사용한다.
- 사이트를 모바일 친화적으로 만들기
- 반응형 웹 디자인을 적용한다.
meta name="viewport" 태그를 사용하여 브라우저에 콘텐츠 조정 방법을 알린다.
- Google Mobile Friendly로 모바일 페이지를 테스트해서 내 홈페이지가 휴대기기와 원활히 호환되는지 확인한다. - HTTPS 적용하기
- 동일 사이트일 때, http보다 https 보안 프로토콜을 사용하는 웹 사이트에 SEO 점수를 추가적으로 부여한다.
- 페이지 로딩 속도 높이기
- 속도가 느리면 잠재 고객을 유지시킬 수 없으며 이는 이탈률이 높아지는 결과를 초래하므로 페이지 로딩 속도를 높다.
- 올바른 상태 코드 사용하기
👉 React에 검색 엔진 최적화(SEO) 적용하기
다음과 같은 방법을 사용하여 SEO를 적용할 수 있다.
- meta-data 넣기
- pre-rendering
- Sever Side Rendering(SSR)
React는 HTML 파일이 딱 1개인 SPA이고, 렌더링이 되기 전까지(자바스크립트를 실행하기 전까지)는 빈 껍데기 html 내용만 나오기 때문에 기본적으로는 검색 엔진에 올라가기가 어렵다.
그래서 pre-rendering을 사용하여야 한다.
👉 pre-rendering
빌드할때 미리 특정 페이지를 렌더링해서 html을 만들어 두는 것을 말한다. 빌드할 때 html 파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 접근했을 때, 내용물을 보여줄 수가 있게 된다.
다만, 빌드 시에는 정적 파일만 가져오기 때문에 서버측에서 가져오는 데이터는 포함되어 있지 않는다.
pre-rendering을 사용하기 위해서는 react-snap 라이브러리를 사용할 수 있다.
// 1. 라이브러리 설치
yarn add --dev react-snap
// 2. package.json에 "postbuild": "react-snap" 스크립트를 추가
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postbuild": "react-snap"
},
// 3. pre-rendering할 페이지를 package.json에 추가
"reactSnap": {
"include": [
"/index","/"
]
}
// 4. 이후 yarn run build를 하면 자동적으로 reat-snap 라이브러리가 실행
// 5. serve로 서버 실행하기
yarn add -g serve
// 6. /build/server.json을 생성해 아래와 같이 작성한다
{
"rewrites": [
{ "source": "/", "destination": "/200.html" },
{ "source": "/index", "destination": "/index.html" }
]
}
// 7. 아래 명령어로 서버를 실행한다.
serve -c server.json build