미누에요

OG태그가 뭘까 ? 본문

개발이야기

OG태그가 뭘까 ?

미누라니까요 2025. 3. 5. 14:16
728x90
반응형
SMALL

우리는 링크를 카카오톡으로 공유하면 링크와 함께 미리보기 창이 뜨는 것을 많이 보았다.

이렇게 공유할 때 정보를 함께 띄우려면, OG태그라는 기술을 사용해야 한다.

 

 

OG태그(Open Graph Tag)

웹페이지가 소셜 미디어에서 공유될 때 어떻게 보일지를 정의하는 메타 데이터.

소셜 미디어에서는 이 태그 정보를 참조하여 미리보기를 구성하게 된다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>OG 태그 예시 페이지</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Open Graph (OG) 태그 -->
  <meta property="og:title" content="예시 페이지 제목">
  <meta property="og:description" content="이 페이지는 OG 태그를 적용한 예시 HTML 파일입니다.">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:url" content="https://example.com">
  <meta property="og:type" content="website">
  
  <!-- 추가 메타 태그 (필요에 따라 수정) -->
  <meta name="keywords" content="HTML, OG 태그, 예시">
</head>
<body>
  <h1>OG 태그가 적용된 예시 페이지</h1>
  <p>이 페이지는 소셜 미디어에서 공유될 때 OG 태그를 활용하여 미리보기 정보를 제공합니다.</p>
</body>
</html>

 

OG태그는 주로 HTML 파일의 <head> 내부에 <meta> 태그로 정의한다.

 

 

OG태그의 주요 구성 요소로는 아래와 같다.

  • og:title - 페이지의 제목
  • og:description - 페이지의 설명
  • og:image - 대표 이미지의 URL
  • og:url - 페이지의 URL
  • og:type - 콘텐츠의 유형, 웹사이트는 website

 

728x90
반응형
LIST
저작자표시 비영리 변경금지

'개발이야기' 카테고리의 다른 글

공유하기 기능 구현하기 (Web Share API)  (0) 2025.03.07
[React] React에서 어떨 때 화살표 함수를 사용하는걸까 ?  (0) 2025.03.04
'개발이야기' Related Articles more