오픈 그래프 (URL 미리보기)

개요

오픈 그래프(Open Graph)는 웹페이지의 메타데이터를 활용하여 URL 공유 시 풍부한 미리보기를 제공하는 프로토콜입니다. Meta(구 페이스북)에서 처음 개발되었으며, 현재는 대부분의 소셜 미디어와 메신저 플랫폼에서 널리 사용되고 있습니다.

VChatCloud는 채팅 메시지에 포함된 URL을 감지하고 자동으로 미리보기를 생성하는 기능을 제공합니다. 사용자가 URL을 채팅방에 입력하면, VChatCloud 서버가 해당 URL의 웹페이지를 방문하여 오픈 그래프 데이터(제목, 설명, 이미지 등)를 수집하고 이를 미리보기 형태로 제공합니다.

주요 오픈 그래프 태그

태그	설명
og:url	공유될 웹페이지의 표준 URL
og:type	콘텐츠의 유형(website, article 등)
og:title	웹페이지의 제목
og:description	웹페이지의 간략한 설명
og:image	미리보기에 표시될 대표 이미지 URL

구현 방법

VChatCloud의 OpenGraph 라이브러리는 별도의 API 키나 CMS 설정 없이 즉시 사용할 수 있습니다.

1. 기본 설정

먼저 Overview의 내용에 따라 기본 채팅 환경을 설정합니다.

2. OpenGraph 라이브러리 초기화 및 사용

script.js 파일에 다음 코드를 추가합니다.

// OpenGraph 객체 생성
const openGraph = new OpenGraph();

// 채팅 메시지 수신 이벤트 처리
channel.onNotifyMessage = function (event) {
  // 메시지에서 오픈 그래프 데이터 추출
  openGraph.getOpenGraph(event.message, (html, url, data) => {
    // URL이 포함된 메시지일 경우만 실행됩니다
    // data 객체를 활용한 추가 처리도 가능합니다. 필요한 함수를 작성하세요.
    console.log("URL 미리보기 정보:", data);
  });
};

API 참조

OpenGraph 클래스 메서드

getOpenGraph(message, callback)

채팅 메시지에서 URL을 감지하고 오픈 그래프 데이터를 가져옵니다.

매개변수	타입	설명
message	String	사용자가 입력한 채팅 메시지
callback	Function	오픈 그래프 데이터를 처리할 콜백 함수

콜백 함수 매개변수

매개변수	타입	설명
html	Object	미리보기를 표시하기 위한 제이쿼리 객체
url	String	감지된 URL
data	Object	오픈 그래프 데이터 객체

data 객체 구조

{
  image: "https://example.com/image.jpg", // 미리보기 이미지 URL
  title: "웹페이지 제목",                 // 웹페이지 제목
  description: "웹페이지 설명",           // 웹페이지 설명
  host: "example.com"                    // 호스트 도메인
}

참고 사항

• URL이 포함되지 않은 메시지에서는 콜백 함수가 실행되지 않습니다.
• 웹페이지에 오픈 그래프 태그가 구현되어 있지 않은 경우, 제한된 정보만 표시될 수 있습니다.