Lighthouse 검색엔진최적화(SEO) 100점 만들기

안녕하세요!

오늘은 LG 유플러스 유레카 SW 교육과정에서 진행했던 융합 프로젝트를 리팩토링하면서,

검색엔진최적화(SEO) 100점 달성 과정을 정리해보려고 합니다.

 

우리 4조 나쵸팝콘콜라 프로젝트는 본선에 진출한 만큼, 서비스 품질을 높이는 리팩토링 과정을 진행하고있습니다..(금정이와 둘이..)

그중에서도 SEO 점수를 100점으로 올리는 것이 목표였고,

Google Lighthouse 기준 SEO 100점 달성을 위해 여러 가지 최적화를 진행했습니다.

 

우선 리팩토링 하기전 LightHouse 검색 엔진 최적화 점수 입니다 ㅠㅠ..

 

개선 전

 

홈

마이페이지

 

개선 후 

 

이미지가 너무 많으면 글이 조잡해보여서 조금만 이미지 첨부하겠습니다. 나머지 페이지에서도 전부 비슷한 점수가 나왔는데요.  어떻게 모든 페이지 100점을 적용 시켰는지 말씀 드리겠습니다.

 

우선 첫번째로

 

index.html head 태그안에 

<meta name="description" content="쿠키 V2.0 - 영화 리뷰 플랫폼 버전2" />

 

처럼 디스크립션을 넣어 주는 방법이 있었습니다.

 

두번째, 

 

검색 엔진 최적화를 위해 두 번째로 진행한 작업은 모든 페이지에 적절한 description 메타 태그를 추가하는 것이었습니다. 이를 위해 react-helmet-async 라이브러리를 활용하여, 페이지마다 고유한 설명을 제공하도록 설정했습니다.

 

설치 

# npm 사용 시
npm install react-helmet-async

# yarn 사용 시
yarn add react-helmet-async

 

HelmetProvider로 전체 앱 감싸기

ReactDOM.createRoot(document.getElementById("root")).render(
  <HelmetProvider>
    <App />
  </HelmetProvider>

 

Helmet을 사용하여 페이지별 메타 태그 설정

   <Helmet>
        <title>마이페이지 | Cookie-V2.00</title>
        <meta name="description" content="쿠키 서비스의 마이페이지입니다." />
      </Helmet>

 

추가를 잘 하셨다면, 위 이미지처럼 탭에서 잘뜨는것을 확인하실 수 있습니다.

 

마지막으로,

페이지 내에서 글자 크기가 너무 작거나, 글자와 글자 간의 간격(라인 간격, 자간)이 너무 좁을 경우, 접근성(Accessibility) 점수와 SEO 점수가 낮아질 수 있습니다. 이는 사용자의 가독성을 저해하고 모바일 및 데스크톱 환경에서 불편함을 초래할 가능성이 있기 때문입니다.

 

SEO 최적화는 단순한 점수 올리기가 아니라, 더 많은 사용자에게 도달하고 보다 나은 경험을 제공하기 위한 과정입니다. 작은 변화가 큰 차이를 만들 수 있으니, 앞으로도 지속적으로 신경 쓰며 개선해 나가면 좋겠습니다!