[React] sitemap으로 SEO 작업하기

파드 동아리원들의 여러가지 성과가 생기면서 성과페이지를 추가로 만들게 되었다. 새로운 기수를 뽑기 위한 홍보 과정에서 성과가 유용하게 작용해야했기에 SEO가 불가피했다. SEO에 대한 경험이 없어서 좋은 기회라고 생각했고, 개발로 끝나는 것이 아닌 기록으로 남기며 공부를 해보려고 한다.

---

1. 검색엔진 결과 페이지(SERP)

검색엔진은 SERP를 만들기 위해 아래와 같은 과정을 거친다.

1. 크롤링 : 구글봇(웹 크롤러)이 웹페이지의 콘텐츠를 복사해서 모든 정보를 수집한 정보를 검색엔진으로 가져온다. 
2. 인덱싱 : 구글봇이 가져온 정보를 주제별로 색인해서 데이터를 보관한다.
3. 랭킹 : 색인된 콘텐츠를 검색 의도에 맞춰서 순위를 부여한 다음 사용자가 해당 키워드로 검색했을 때 랭킹 순서대로 결과를 제공한다.

2. 사이트맵

SERP를 만들기 위해 크롤링의 과정을 거친다고 했다. 사이트맵은 웹사이트에서 발행한 모든 웹 페이지를 긴 리스트로 정리한 지도와 같은 것인데, 사이트맵은 검색엔진이 웹사이트를 방문하여 크롤링을 하는 과정에서 모든 웹페이지를 빠짐없이 색인해갈 수 있도록 도와준다.

 

다시 말하자면, 사이트맵이란 웹사이트에서 구글이나 네이버와 같은 검색 엔진에 색인할 모든 페이지를 나열한 XML 파일이다.

 

사이트맵이 웹사이트가 검색엔진에서 상위 랭킹을 차지하는 데 직접적으로 영향을 주진 않지만, 검색엔진에게 웹사이트에서 크롤링 되고 색인이 되어야 할 중요한 페이지들에 대한 정보를 제공함으로써 웹사이트가 더 효율적으로 크롤링 되는데 도움을 주기 때문에 SEO에 긍정적인 영향을 끼친다.

3. 리액트에서 사이트맵 사용하기

결국 사이트맵을 사용하여 SEO를 진행한다는 것은 사이트맵이라는 XML파일을 만들어서 검색엔진에게 제출해야한다는 것이다.

리액트에서는 react-router-sitemap이라는 라이브러리를 사용하여 sitemap.xml 파일을 생성할 수 있다.

3-1. react-router-sitemap

라이브러리 설치

npm install react-router-sitemap

3-2. sitemapRoutes.js 생성

src폴더 안에 기존 라우트를 관리하는 컴포넌트파일의 내용을 동일하게 담은 sitemapRoutes.js파일을 생성한다.

3-3. sitemapGenerator.js 생성

sizemap.xml을 생성하는 sitemapGenerator.js를 생성한다.

require("babel-register")({
  presets: ["es2015", "react"]
});
 
const router = require("./sitemapRoutes").default; // 좀 전에 만든 sitemapRoutes 파일
const Sitemap = require("react-router-sitemap").default;

function generateSitemap() {
    return (
      new Sitemap(router)
          .build("https://www.example.com") // 도메인 이름으로 변경
          .save("./public/sitemap.xml") // sitemap.xml 파일이 생성될 위치
    );
}

generateSitemap();

 

3-4. sitemapGenerator.js 실행

3-4-1. dependency 설치

npm install --save-dev babel-cli 
npm install --save-dev babel-preset-es2015 
npm install --save-dev babel-preset-react 
npm install --save-dev babel-register

3-4-2. package.json 수정

... 
  "scripts": {     
    ...     
    "sitemap": "babel-node src/sitemaGenerator.js"   
  } 
...

3-4-3. robots.txt

public/robots.txt 파일은 크롤러가 크롤링해도 되는지 혹은 하면 안되는 페이지가 무엇인지 알려주는 파일이다.

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

sitemap:도메인주소/sitemap.xml

 

여기까지 했을 때 결과는 다르지 않았다. pagespeed insights에서 제공하는 코어 웹 바이탈에서 검색엔진 최적화 수치는 휴대전화와 데스크톱에서 모두 92로 동일했다.

SEO 이전 휴대전화의 성능 결과

SEO 이전 데스크톱 성능 결과

번외 적용사항

pagespeed insights에서 제공하는 코어 웹 바이탈을 돌렸을 때, 검색엔진 최적화부분을 보면 문제가 무엇인지 나온다. 나의 경우는 img 태그에 alt 속성이 없어 해당 태그들이 무시된다는 경고가 떴다. 이에 모든 img 태그를 살펴보며 alt 속성을 적용해주었다. 그렇게 하니 검색엔진최적화는 100점이 뜰 수 있었다.

 

사실 이렇게 최적화를 한다고 해서 검색순위가 오르지는 않는다. 해당 부분은 기획자와 논의하며 순위를 올릴 수 있는 방법에 대해 서치해볼 생각이다.

참고
https://seo.tbwakorea.com/blog/seo-guide-2022/

SEO (검색엔진 최적화)란? - 구글, 네이버 가이드 총정리

https://seo.tbwakorea.com/blog/how-to-create-and-submit-a-sitemap/#part1

사이트맵 만들기부터 제출하기: 쉬운 단계별 가이드 | TBWA 데이터랩

https://ujeon.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%B5-%EB%A7%8C%EB%93%A4%EA%B8%B0-1116ff8b6c2a

[React] 리액트 웹사이트 사이트맵 만들기

https://pagespeed.web.dev/

PageSpeed Insights