오픈 그래프 (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 API를 이용하여 채팅 메시지 내 URL의 오픈 그래프 정보를 가져와 미리보기를 구현하는 방법을 안내합니다.

1. Pattern Matcher를 통한 url 유효성 검사

채팅 메시지에 URL이 포함되어 있는지 확인하고, 필요한 경우 "http://" 또는 "https://" 스키마를 추가하여 유효한 URL 형식으로 만듭니다.

Pattern pattern = Pattern.compile("([^/ ])+(\\.)(kr|com|net|io|co|org|biz|info|name|asia|tel|shop|ai|be)(:([^\\\\/]*))?([^#\\s\\?])(\\\\?([^#\\s]*))(#(\\\\w*))?");
Matcher matcher = pattern.matcher(message.getMessage());

if (matcher.find()) {
  String targetUrl = matcher.group();
  if (!targetUrl.startsWith("http")) {
      targetUrl = "http://" + targetUrl;
  }
}

2. 오픈 그래프 정보 요청

발견된 URL을 VChatCloudApi.getInstance().getOepnGraph() 메소드를 통해 서버로 전송하고, API 콜백을 통해 결과를 처리합니다.

VChatCloudApi.getInstance().getOepnGraph(targetUrl, new ApiCallback() {

    @Override
    public void onFailure(VChatCloudException e) {
        changedHandler.sendMessage(changedHandler.obtainMessage());
    }

    @Override
    public void onSuccess(JSONObject jsonObject) {
        if (jsonObject.get("data") != null) {
            JSONObject data = (JSONObject) jsonObject.get("data");
            if (data != null && data.get("image") != null && data.get("title") != null && data.get("description") != null ) {
                message.setOepnGraph(data);
            }
        }
        changedHandler.sendMessage(changedHandler.obtainMessage());
        scrollHandler.sendMessage(scrollHandler.obtainMessage());
    }
});

• JSONObject 리턴 데이터

값	서브	식별자	설명
result_msg	-	String	실패 시 사유
result_cd	-	int	성공 (1), 실패(0)
data	▽	Object	서버에서 받은 OpenGraph정보 - 없을경우 빈값으로 대체
	image	String	미리보기 이미지 URL
	host	String	호스트 주소
	description	String	웹페이지 설명
	ogUrl	String	OG 태그의 URL 링크 주소
	title	String	웹페이지 제목
	url	String	이동할 URL 링크 주소