더북(TheBook)

22.4 react-helmet을 이용한 페이지 head 태그 작성

 

구글, 네이버 등 검색 엔진이 페이지의 제목과 페이지를 수집할 때, 페이지 기본 정보로 사용하는 title, description 등 메타 태그를 설정하려면 페이지의 head 태그를 작성해야 합니다.

리액트로 클라이언트 라우팅을 사용하는 프로젝트에서는 자바스크립트를 써서 직접 처리해 주어야 합니다. 페이지 제목은 document.title 값을 수정하여 반영할 수 있어 비교적 간단한 편이지만, meta 태그는 다음 형식으로 직접 주입해야 합니다.

예제 코드

const meta = document.createElement(‘meta’);
meta.name = “description”;
meta.content = "페이지 정보";
document.getElementsByTagName(‘head’)[0].appendChild(meta);

 

태그 종류가 많으면 꽤 복잡하겠지요? react-helmet 라이브러리를 사용하면 JSX로 직접 태그를 작성하듯이 페이지의 head를 설정할 수 있습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.