흔히 우리가 웹사이트 링크를 다른 사람들에게 공유하다보면
아래 사진과 같은 해당 링크에 대한 제목, 설명과, 썸네일 사진을 확인할 수 있을 것이다.
이러한 내용들 또한 배포하기 직전 웹에서 오픈 그래프를직접 설정해줘야한다!
오픈 그래프(Open Graph)란?
오픈 그래프(Open Graph, 이하 OG)는 웹사이트가 소셜 미디어 플랫폼에서 공유될 때 메타데이터를 제공하는 프로토콜이다. OG는 페이스북(Facebook)에서 처음 도입되었으며, 웹사이트의 콘텐츠가 소셜 미디어에서 미리보기로 제공되는 정보를 제어하기 위해 사용되고 있다. OG는 웹사이트의 <head> 태그 내에 메타태그(Meta Tags)를 추가하여 사용할 수 있는데, 이 메타태그는 웹페이지의 제목, 설명, 이미지 등과 같은 정보를 포함하며, 소셜 미디어 플랫폼이 이 정보를 활용하여 사용자가 웹사이트를 공유할 때 적절한 미리보기를 확인할 수 있도록 설정할 수 있다.
어떻게 사용할까?
생각보다 엄청 간단하다. React의 경우 Public 파일 안에 있는 index.html 코드 <head><head/> 안에 아래와 같은 코드를 커스텀 하여 작성하면 된다. 이렇게 설정한다면, 아래 사진과 같은 결과를 확인할 수 있을 것이다.
* 이때 image의 경우 public 파일 안에서의 사진 사용이므로 절대경로 설정을 해주어야한다.
<head>
<meta property="og:title" content="웹페이지 제목" />
<meta property="og:description" content="웹페이지 설명" />
<meta property="og:image" content="대표 이미지 URL" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 유형" />
<meta property="og:site_name" content="웹사이트 이름" />
<!-- 추가적인 OG 메타태그들 -->
</head>
만약 배포에 있어 개발자 도구 콘솔창을 관리하고 싶다면 아래 페이지로!
https://quddkflty.tistory.com/39
[React] 배포 전 console, warning 메세지 제거
개발을 하다보면 어쩔 수 없이 개발자도구 안에 콘솔에 warning과 console.log 메세지가 수도 없이 많을 수 있다. 배포 하기 전에 한 번쯤은 신경써야할 내용에 대해 써보겠습니다! 방법은 매우 간단
quddkflty.tistory.com
'코딩 > React' 카테고리의 다른 글
| [React] 배경화면 동영상/사진 - Safari 자동재생 안됨, Chrome 구분하여 자동재생 작동하기 구현 (0) | 2023.07.07 |
|---|---|
| [React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기(2편) (0) | 2023.07.06 |
| [React] date-fns와 style-components로 커스텀하기 쉬운 달력 만들기(1편) (2) | 2023.07.06 |
| [React] 배경화면 동영상 스크롤 제어 기능 코드 리뷰 (1) | 2023.06.07 |
| [React] Firebase CRUD 다양한 예시 코드! (0) | 2023.06.07 |
