리액트 프로젝트 검색 상위노출 시키기 SPA-SEO

 

서론

 

누구든 내 홈페이지를 검색결과 상단에 띄워서 많은사람들에게 노출하고 싶어한다.

 

 

우리나라에선 구글과 네이버 검색비중이 높기때문에 두 검색엔진을 중점적으로 작업한다.

 

이 글에서는 SPA(Single Page Application)의 기본적인 SEO( Search Engine Optimizer / 검색엔진 최적화) 를 알아본다.

 

 

구글의 검색엔진 알고리즘은 다음 순서로 작동한다.

 

1. 크롤링 - 내 웹페이지의 콘텐츠 정보들을 모두 수집하여 가져온다.

2. 인덱싱 - 구글 봇이 수집한 정보들을 색인해서 데이터로 보관한다.

3. 랭킹 - 콘텐츠를 검색의도에 맞춰 순위를 부여한 다음 랭킹 순서대로 결과를 출력한다.

 

구글을 랭킹 산정에 약 200가지 이상의 측정 기준이 있다고 발표하였고 밝혀진 내용은 다음과 같다.

 

코딩룰 지키기, https 적용, 페이지 로딩속도, 백링크 등등 ...

 

 

---

 

 

목차

 

1. Meta Tag

2. robots.txt

3. sitemap.xml

4. Google Search Console

5. Naver Search Advisor

6. https 적용

7. Lighthouse 검사

 

---

 

예시 프로젝트

무료 꿈해몽 - 생각나는대로 모두 입력

 

---

 

1. Meta Tag

 

가장 기본적이면서 중요한 SEO의 요소이다.

 

메타태그는 내 웹페이지의 콘텐츠들을 검색 엔진에서 설명할수있는 정보를 제공한다.

 

리액트로 프로젝트를 만들었기에 index.html에 메타태그를 추가했다.

 

✅ 메타 타이틀

 

- 검색결과에서 링크의 제목으로 표시된다.

  <title>무료 꿈해몽 - 생각나는대로 모두 입력</title>

 

✅ 메타 설명

 

- 페이지의 간략한 요약을 표현한다.

  <meta name="description" content="무료 꿈해몽 - 생각나는대로 모두 입력" />

 

✅ 메타 키워드

 

- 키워드들을 표현한다.

<meta name="keywords" content="무료 꿈해몽, 꿈해석, 꿈해몽, 해몽, 상세한 해몽, 태몽">

 

✅ OG(Open Graph) 메타 태그

 

- SNS 등에서 웹페이지가 공유될때 미리보기 정보를 보여주는데 사용된다.

<meta property="og:title" content="무료 꿈해몽 - 생각나는대로 모두 입력">
<meta property="og:description" content="생각나는대로 모두 입력하면 상세한 꿈해몽을 무료로 제공합니다!">
<meta property="og:image" content="%PUBLIC_URL%/favicon.png">
<meta property="og:url" content="https://dreambook.click">
<meta property="og:type" content="website">
<meta property="og:locale" content="ko_KR">

 

---

 

2. robots.txt

- 검색 엔진이 웹페이지를 탐색할때 해당 robots 파일을 먼저 확인하고, 어떤 경로에 있는 것들을 크롤링할지 결정한다.

- 리액트 프로젝트에서는 public/robots.txt 에 작성한다. 

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Allow : /

 

---

 

3. sitemap.xml

- sitemap.xml은 사이트의 색인을 생성하는것을 돕는 파일이다.

- 아래 사이트에서 생성해서 public/sitemap.xml과 같이 위치시켜주면 된다.

- https://www.xml-sitemaps.com/

Create your Google Sitemap Online - XML Sitemaps Generator

 

---

 

4. Google Search Console

- 구글 검색 결과에 노출되기 위해서는 Google Search Console 의 힘을 빌려야 한다.

- 접속/로그인 후 속성추가 선택

 

- 소유권 확인 / HTML 태그 에 있는 meta name을 public/index.html 에 붙여넣어 주고 배포후  소유권을 확인한다.

 

---

 

5. Naver Search Advisor

- 네이버에 노출되려면 네이버의 콘솔을 따라야 한다

 

- 우선 웹마스터 도구에 접근한다.

 

 

- 아래와 같은 페이지에서 사이트를 등록해 준다.

 

 

- 아래의 HTML 태그를 복사 public/index.html 내에 복사붙여넣기 해준다.

 

- 접근해서 여러 작업을 수행해주면된다.

- 요청 > 웹페이지 수집

- 검증 > robots.txt

 

---

 

6. https 적용

 

- https 적용 여부도 가산점의 요인이다.

- 혹시나 페이지를 http로 배포한다면 인증서를 발급받아 https로 배포하길 권장한다.

 

---

 

7. Lighthouse 검사

 

- 페이지가 얼마나 가벼운가, 로딩은 빠른가 도 가점 항목이며, SEO 등을 한번에 체크해볼 수 있는 확장프로그램이 있다.

- 구글 확장프로그램중 Lighthouse를 검색해서 실행시켜 보자.

 

- 아래와 같이 결과를 보여주는데, 아직 보완할 점이 많다.

 

 

 

마무리

 

이렇게 기본적인 배포후 SEO 작업을 할수 있는 방법들을 알아봤다.

 

추후에는 좀 더 고도화 된 작업을 포스팅 해보려 한다.