React SNS 공유용 메타 태그 적용

React SNS 공유용 메타 태그 적용

2021. 8. 23. 18:39ㆍ서버 프로그래밍

1. react-meta-tags를 이용하면 렌더링 시에 메타 태그를 동적으로 적용해준다. 문제는 이것만으로는 SNS에서 공유시 제대로 메타 태그가 적용되지 않는다는 것. (타이밍 이슈)

react-meta-tags

Handle document meta/head tags in isomorphic react with ease.

www.npmjs.com

2. 따라서 react-snap을 이용하여 빌드시 메타 태그가 필요한 페이지에 대한 프리렌더링을 해주어야 한다. build가 수행된 다음 postbuild로 지정한 페이지의 index.html을 생성해준다.

[React] 검색엔진 최적화(SEO):: Prerendering (react-snap)

React는 대표적인 SPA제작 라이브러리이다. SPA가 사용감이나 개발적인 측면에서는 유리하지만, 빌드된 결과물을 보면 는 텅 비어있고 js가 body를 바꾸기 때문에 검색엔진은 이 사이트를 비어있는

satisfactoryplace.tistory.com

3. 로컬에서 윈도우로 빌드시에는 정상 동작하는데, 우분투 서버에 올려서 빌드를 하면 라이브러리가 없다고 오류가 발생한다.

이커머스IT

온라인쇼핑 업무 관련 IT

skyksit.tistory.com

다음은 기타 참고용 - 역시 동적 처리시에는 도움이 안된다

[React] 페이지별 메타 태그 추가

서치엔진이 웹 품질을 판단하는 데는 여러 기준이 있는데, 그 중 하나는 페이지별 적절한 메타 태그가 있느냐다. 리액트에서 해당 스펙을 구현하는 방법에 대해 소개할 것이다. 우선 /public/index.h

satisfactoryplace.tistory.com

나숑의 법칙