개발자

리액트에서의 오픈그래프 적용?

2024년 04월 09일조회 136

안녕하세요. 현재 리액트를 활용해서 대학축제에서 사용할 채팅앱을 개발하고 있습니다. 저희 앱에서는 학교 축제 정보(몇시에 어떤 행사가 있는지)와 학우 간 채팅 기능을 제공하는데요. 카카오톡 채팅방에 링크를 보내면 카드형태로 보여주는 링크 미리보기 기능을 저희 앱에도 구현하고자 합니다. 더욱 구체적으로 말씀드리자면, 서버로부터 받아온 대학 축제정보 게시물이 여러개가 있는데, 이 모든 게시물들에 오픈그래프를 적용하고 싶습니다. 그래서 채팅방에서 공유할 때 링크 미리보기가 출력되게 하고 싶습니다. 문제는 리액트 특성 상 클라이언트에서 렌더링하기 때문에 적용이 어렵다는 것입니다. 1. axios.get('festival/1')을 호출하여 스프링 서버에서 축제 정보를 JSON으로 받아온다. 2. 리액트에서 받아온 JSON을 바탕으로 렌더링한다. 이런 상황에서 오픈그래프를 적용할 수 있는 방법이 있을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

남 재민님의 프로필 사진

https://h-owo-ld.tistory.com/m/134 이 내용으로 안됐나요?

권혁진님의 프로필 사진

오픈그래프는 수집 봇이 사이트에 get 요청을 날렸을때 반환 되는 html 즉 사용자 측면에서는 접속했을때의 최초로 렌더링 되는 html 기반으로 수집하는걸로 알고 있어서 오픈그래프를 적용하기 위해선 서버사이드 렌더링을 사용하셔야 합니다 Nextjs 를 사용하시면 서버사이드 렌더링을 적용하기에 수월해서 오픈그래프 적용이 쉽습니다

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 04월 09일

리액트는 싱글 페이지 애플리케이션(SPA)이라 주로 클라이언트 사이드에서 렌더링을 합니다. 이 때문에, SEO나 Open Graph와 같은 메타데이터 설정에 제한이 있습니다. 왜냐하면 대부분의 크롤러들은 자바스크립트를 실행하지 않기 때문입니다. 그러나, 서버사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG)와 같은 기법을 사용하여 이 문제를 해결할 수 있습니다. 이런 기법들은 초기 로드 시에 서버에서 HTML을 전체적으로 렌더링해 주는 방식입니다. Next.js는 React 기반의 프레임워크로서 SSR과 SSG를 지원합니다. 따라서 각 페이지에 동적으로 Open Graph 태그를 적용할 수 있게 해줍니다. 추가로 아래와 같은 방법도 있습니다: - **react-helmet**: 리액트 컴포넌트 내에서 헤드 태그들을 변경할 수 있는 컴포넌트입니다. `react-helmet-async` 패키지는 SSR을 지원합니다 - **react-snap**: 프리렌더링 솔루션으로서 모든 경로를 순회하며 정적 HTML 파일을 생성합니다. 해당 문제는 '동적' Open Graph 태그 적용이 필요하므로 서버사이드 렌더링을 이용하는 것이 가장 효과적일 것입니다. 따라서 위의 방법 중, Next.js를 사용하거나 react-helmet-async와 같은 SSR을 지원하는 라이브러리를 사용하는 것을 추천드립니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!