오픈그래프(Open Graph)는 페이스북이 처음 만든 표준 규격으로, 현재는 카카오톡, 인스타그램, 트위터를 비롯한 대부분의 SNS와 메신저가 이 규격을 참고해서 링크 미리보기를 만듭니다. "오픈그래프 태그"를 검색하시는 분들은 이 규격에 맞는 코드를 자신의 웹페이지에 직접 삽입하고 싶은데, 개발 지식이 부족해서 어려움을 겪고 계신 경우가 많습니다.
오픈그래프 태그는 HTML 문서의 head 영역에 특정 형식의 코드로 삽입됩니다. 예를 들어 제목을 설정하려면 `<meta property="og:title" content="제목 내용">` 형태의 코드가 필요합니다. 이런 코드 문법을 정확히 지키지 않으면(따옴표를 빠뜨리거나, property 이름을 잘못 쓰는 경우) 플랫폼이 태그를 인식하지 못하고 미리보기가 제대로 표시되지 않습니다.
블로그 플랫폼(네이버 블로그, 티스토리)이나 홈페이지 제작 툴을 쓰는 경우, 오픈그래프 태그를 직접 코드로 삽입할 수 있는 기능이 제공되기도 하고, 반대로 플랫폼이 자동으로 처리해서 직접 수정이 불가능한 경우도 있습니다. 어떤 방식이든, 정확한 코드를 미리 준비해두면 지원되는 플랫폼에서는 바로 적용할 수 있고, 지원되지 않는 경우라도 어떤 정보가 부족해서 미리보기가 이상하게 나오는지 원인을 파악하는 데 도움이 됩니다.
오피스툴의 OG 태그 생성기는 필요한 정보를 입력하면 정확한 문법의 오픈그래프 코드를 자동으로 만들어주기 때문에, 코드 문법을 몰라도 복사해서 바로 웹페이지에 붙여넣을 수 있는 형태로 결과를 얻을 수 있습니다.
오픈그래프 코드 문법 찾아보는 시간, 오피스툴 하나면 칼퇴할 수 있어요. 개발자에게 매번 요청하지 않고도 마케팅 담당자가 직접 처리할 수 있습니다.
OG 태그 생성기 입력과 결과 예시
아래 예시로 처리 방식을 먼저 확인한 다음 실제 자료에 적용해 보세요.
입력 예시
제목·설명·이미지 URL
결과 예시
OG·공유 카드 메타태그
확인할 점
생성한 태그는 사이트 head에 반영해야 하며 공유 캐시 갱신이 필요할 수 있습니다.
오피스툴에서 바로 사용해 보세요
오피스툴의 OG 태그 생성기은 회원가입 없이 무료로 사용할 수 있습니다. OG 태그 생성기 실행하기 →
로그인하면 지원되는 입력값과 결과 요약이 이용내역에 저장되어 이전 작업을 다시 확인하기 편합니다. 파일 원본은 별도로 보관해 주세요.