반응형
몇주전 회사 내부 플랫폼에 메타태그를 작성할 일이 있어서 app.tsx에 Helmet으로 메타태그를 작성했다.
그리고 어제 갑자기 연락이 왔다.
구글 검색엔진에서 untitled가 뜬다고
이유를 알게 되었다.
내가 React-helmet을 아주 단단히 잘못 알고 있었던 것이다.
React-helmet이 SSR로 <head>를 작성해주는 건 줄 알았는데 그게 아니었다.
(이래서 대충 알고 있는게 아예 모르는 것보다 무섭다고 하는 가보다)
index.html에 default <head>가 있어야 했다.
CSR을 통해 각 페이지가 그려질 때 react-helmet이 DOM을 변경한다.
크롤러는 페이지가 그려지기전의 index.html을 읽게 된다.
=> 검색 엔진 최적화를 하려면 항상 서버 사이드에서 만든 문서에 크롤러에게 노출할 내용을 담아야 한다.
(리액트의 경우 index.html)
참고문서
https://jeonghwan-kim.github.io/dev/2020/08/15/react-helmet.html
반응형
'개발 > React' 카테고리의 다른 글
| Suspense (0) | 2022.08.10 |
|---|---|
| lodash 이용해서 프론트에서 고유한 id 만들기 (0) | 2022.07.31 |
| try/catch : 렌더링중에 발생하지 않는 이벤트 핸들러에서의 에러처리 (0) | 2022.07.01 |
| JSX에서의 라벨링 (0) | 2022.06.30 |
| Fragment를 이용하면 HTML의 의미를 해치지 않을 수 있음 (0) | 2022.06.30 |
