SEO 개선하기 React

[Dolphin-PC]

• [x] SEO 개선하기 React
  • Sitemap 만들기
  • robust.txt 설정
  • meta tag 설정
    • React Helmet 사용

[Dolphin-PC]

📏 Lighthouse 성능 측정

• 개선하기 전, Lighthous 보고서, SEO 83점
  • html 업로드가 되지 않아, 확장자를 txt로 바꿈
  • 파일 다운로드 후, html로 확장자 변환 뒤 열면 됨 localhost_5173-20240830T133407.txt

[Dolphin-PC]

⁉️ 사이트맵이란

• 검색엔진에게 제출할 웹사이트의 보고서라고 생각하면 된다.

  • 우리 사이트에 이런 페이지가 있어요~

• 이 사이트맵을 통해 검색엔진은 웹사이트를 방문하여 크롤링하는 과정에서, 모든 페이지를 빠짐없이 색인할 수 있도록 돕는 역할을 한다.

[Dolphin-PC]

✅ Sitemap 작성하기

• 많은 블로그들에서 react-router-sitemap 라이브러리를 활용해 만들곤 한다.

  • 하지만, 5년전의 마지막 publish로 react-router v4이 마지막이라, 최근 버전인 v6와 호환이 잘안되는 문제도 보인다.

• sitemap이란 결국 .xml파일로 작성하는 것 뿐인데, 호환도 잘 안되는 라이브러리랑 힘겨루기 하는 것도 싫었고, 결국 router에 있는 객체를 읽어서 .xml문자열로 만드는 것이다.

  그렇기에, 나는 라이브러리를 설치하지 않고 쌩 js파일을 만들어 xml파일을 작성하는 것으로 했다.

전체 코드

```javascript import fs from "fs"; const ROUTES = { HOME: { loc: "/", changefreq: "daily", priority: 1.0 }, SIGNIN: { loc: "/sign-in", changefreq: "monthly", priority: 0.8 }, SIGNUP: { loc: "/sign-up", changefreq: "monthly", priority: 0.8 }, SIGNUP__OAUTH: { loc: "/sign-up/oauth", changefreq: "monthly", priority: 0.8 }, PRODUCTS: { loc: "/products", changefreq: "daily", priority: 0.9 }, MY: { loc: "/my", changefreq: "daily", priority: 0.9 }, DASHBOARD: { loc: "/dashboard", changefreq: "daily", priority: 0.9 }, DASHBOARD__PRODUCTS: { loc: "/dashboard/products", changefreq: "daily", priority: 0.9 }, }; const DOMAIN = process.env.VITE_DOMAIN_URL; function generateSitemap() { let sitemap = ` \n `; // Iterate over the routes and generate sitemap entries for (const [key, route] of Object.entries(ROUTES)) { const { loc, changefreq, priority } = route; const url = `${DOMAIN}${loc}`; const lastModified = new Date().toISOString(); sitemap += ` ${url} ${lastModified} ${changefreq} ${priority} \n`; } sitemap += ``; // Write the sitemap to a file // Replace 'sitemap.xml' with the desired filename and path fs.writeFileSync("./public/sitemap.xml", sitemap); console.log("Sitemap generated successfully!"); } generateSitemap(); ```

---

사이트맵을 만들고나니, lighthouse에는 변화가 없었다.

• 검색엔진 로봇의 일반적인 크롤링 과정에서 발견되지 않을 수도 있는 점을 미연에 방지한다는 점밖에는 없다.

  사이드프로젝트에서는 별 필요가 없을 거 같다...

[Dolphin-PC]

✅ robots.txt 적용

• robots.txt를 generate하는 JS파일 생성
• 검색엔진 최적화 점수 : 9점 상승
• robots.txt

  
  User-agent: *
  Sitemap: http://localhost:5173/sitemap.xml

<img width="563" alt="image" src="https://github.com/user-attachments/assets/c902a99d-26dd-48ac-8966-1dc615f946d7">