SEO적용이 필요한 상황에서 이미 한참 진행되고 있던 프로젝트의 프레임워크 리액트를 next.js 로 마이그레이션 할 수가 없어 프레임워크는 유지하되 SEO 를 끌어내는 방안에 대해 찾아보게 되었다.
react-helmet-async
원래는 react-helmet을 공부해서 프로젝트에 적용하려 했으나 라이브러리의 마지막 업데이트가 4년전으로 체크되고 동기적으로 헤드가 업데이트 되기 때문에 렌더링 부분에서 차단이 일어날 수 있다는 설명에 같은 동작을 하는 react-helmet-async 로 변경하게 되었습니다.
언제 사용하면 좋은가?
SPA에서 메타데이터를 페이지별로 가져가고 싶을 때 (SEO)
파비콘등의 헤더 데이터를 동적으로 변경하고 싶을 때
헤더파일 동적으로 변환 시키기
파비콘을 동적으로 변경하는 부분에서 파비콘이 원하는 대로 변경되지 않아 하루 정도를 고민하며 서칭을 하였는데 혹시나 하는 마음에 이미지를 public 폴더안에 넣고 경로를 아래와 같이
${process.env.PUBLIC_URL/faviconTwo.png}지정하니 원하는 파비콘이 생성되었다.
파비콘 동적 변환 테스트 : https://github.com/Seokwoodang/react-helmet-async
메타데이터를 추가하여 SEO 만족시키기
react-snap
Share article