SPA(Single Page Application)페이지 SEO 최적화 With React Helmet

최근에 Spot 운임 리스트를 보여주는 Ocean Freight 페이지를 개발할 때

React Helmet을 활용해서 페이지의 MetaTag(title, description, kewords)를 관리하고 이와 더불어 페이지의 URL 또한 신경 써서 페이지를 개발하였습니다.

const SEO = ({ title, description, keywords }: HelmetProps) => {
  return (
    <Helmet>
      <title>{title}</title>
      {description && <meta name="description" content={description} />}
      {keywords && <meta name="keywords" content={keywords} />}
    </Helmet>
  );
};

<Route path="contents/oceanFreight/*" element={<OceanFreightList />} />

 

 

자세한 코드는 보여드릴 수 없지만 위와 같이 최적화를 적용해서 배포하니 며칠 뒤 새로 만들어진 페이지에도 불구하고 SEO가 적용된 것을 확인할 수 있었습니다.

 

Ocean freight from Korea to winilogis

 

또한 Img Tag에 alt속성에 winiLogis를 입력하지 않았는데 어떻게 아래의 이미지들은 SEO가 되는 걸까? 의문이 들기도 해서 SEO 대해서 더욱 조사를 해봐야 할 것 같습니다.

Ocean freight from Korea to winilogis IMG

 

 

마지막으로 제 블로그 또한 Meta Tag를 변경하고, 글 마다 Tag를 추가하니 SEO가 조금씩 최적화되고 있는 것 같습니다.

프론트엔드 개발자 엄성준 블로그 SEO

 

 

기업들도 SEO 최적화를 필수로 하고 있고, 최근 많은 공고에서도 SEO 최적화를 경험한 사람을 필요로 하는 것 같습니다.

 

그렇기 때문에 앞으로도 SEO 최적화에 대해서 연구하고, 효율적으로 최적화를 시킬 수 있도록 공부해야겠습니다.