🔎 오픈 그래프 태그란?
- 페이스북이 만든 메타데이터 표준
- 웹페이지가 **SNS(카카오톡, 페이스북, 트위터, 디스코드 등)**에 공유될 때, 썸네일 이미지 / 제목 / 설명을 보여주기 위해 사용
예를 들면 이런 이미지?
썸네일 이미지, 제목 등이 잘 명시 되어있어서 카톡 메세지를 받는 사람들도 내가 유튜브의 무슨 영상의 링크를 공유했는지 알 수 바로 알수 있다.
현재 내 개인 포트폴리오 url은 오픈 그래프 태그를 추가해놓지 않아서 카톡에 url을 공유하면 이렇게만 나온다.
마치 누르면 큰일날 것 같은 url을 공유한것 같다...
🔎 오픈그래프 태그 자세히 알아보기
HTML의 <head> 안에 들어가는 <meta> 태그 형태로 작성
<head>
<!-- 페이지 기본 정보 -->
<title>내 블로그</title>
<meta name="description" content="개발 블로그입니다. 리액트, 타입스크립트, UI/UX 관련 글을 씁니다.">
<!-- Open Graph 태그 -->
<meta property="og:title" content="내 블로그">
<meta property="og:description" content="리액트, 타입스크립트, UI/UX 관련 글">
<meta property="og:image" content="https://example.com/thumbnail.png">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
</head>gpt가 알려준 예시는 이렇다.
💡 각각의 의미
- og:title → 공유될 때 보이는 제목
- og:description → 짧은 설명 문구
- og:image → 미리보기 썸네일 이미지
- og:url → 실제 페이지의 주소
- og:type → 페이지의 성격 (website, article, video.movie 등)
🚨 리액트 프로젝트에서 주의
- og: 태그는 보통 public/index.html 안의 <head> 태그 안에 작성
➡️ 왜냐하면 크롤러(카톡, 페북, 네이버 등)가 자바스크립트를 실행하지 않고 HTML만 읽기 때문. favicon 추가도 마찬가지!! - src 코드 안에서 Helmet 같은 라이브러리로 meta를 바꿔도 일부 SNS에서는 반영이 안 된다고 한다.
🔎 오픈그래프 태그 추가하기
그렇다면 이제 내 포트폴리오에 오픈그래프 태그를 추가해보자!
나는 리액트로 포트폴리오 프로젝트를 진행하고 있으므로 public/index.html 파일을 찾아준다.
public/index.html 파일을 열면 대충 이렇게 생겼다.
(참고로 <metaz name="description" ~~ /> 이부분 오타남...)
Open Graph 태그를 해당 파일에 적용시켜놓았다!
깃에 올리고 배포한다음 나의 포트폴리오 url을 카카오톡에 공유하니
정말 아까와는 다른 폼으로 전송이 되었다!
(이미지 조정은 좀 필요할듯!)
어쨋든!! OG태그 적용 성공!
반응형
'퍼블리싱 > HTML(Pug)' 카테고리의 다른 글
| 이미지를 a태그로 감쌌을 때 여백이 생기는 이유 (0) | 2024.11.11 |
|---|