오픈그래프 (공유 미리보기)

오픈그래프 태그에는 무엇이 들어가나요?

오픈그래프 태그는 페이지의 머리 부분에 적는 짧은 설명표이고, 기본 네 가지는 제목 · 종류 · 대표 사진 · 주소예요. 오픈그래프 프로토콜 공식 문서(ogp.me)는 이 네 가지를 모든 페이지에 필요한 속성으로 정해 두었어요.

여기에 설명 · 사이트 이름 · 언어 · 사진 설명을 더하면 미리보기가 더 정돈돼요. 손님에게 보이는 건 주로 제목 · 설명 · 사진이지만, 나머지 값도 서비스가 링크를 정확히 이해하는 데 쓰여요.

이 태그들은 손님 눈에 보이지 않는 곳에 적혀요. 그래서 실제로 링크를 보내 보기 전까지는 빠졌는지 알기 어렵고, 공개 전 점검 목록에 꼭 넣어 두는 게 좋아요.

공유 미리보기 사진은 어떤 크기와 구성으로 만드나요?

가로로 긴 직사각형, 대략 1.91:1 비율(예: 1200×630)로 만드는 경우가 가장 많아요. 메타(페이스북) 개발자 문서는 고해상도 화면에서 잘 보이도록 너비 1080픽셀 이상의 사진을 권하고, 사진의 가로 · 세로 크기를 태그로 함께 적으라고 안내해요.

서비스마다 사진을 잘라 보여 주는 비율이 조금씩 달라요. 그래서 가게 이름이나 핵심 글씨는 가장자리를 피해 가운데에 모아 두는 게 안전해요.

사진 안에 글씨를 넣을 때는 열 글자 안팎의 짧은 문구 하나면 충분해요. 단체 대화방에서 미리보기는 손바닥보다 작게 보이니, 폰 화면에서 직접 확인해 보세요.

사진 용량도 너무 크지 않게 해 주세요. 공유 서비스가 사진을 가져오는 데 오래 걸리면 미리보기에 사진이 빠진 채로 보일 수 있어요.

페이지마다 미리보기를 다르게 해야 하나요?

네, 손님에게 자주 보내는 페이지라면 페이지마다 다르게 정하는 게 좋아요. 모든 링크가 똑같은 로고 사진으로 보이면, 받는 사람은 어떤 내용인지 눌러 보기 전에는 알 수 없어요.

적어도 첫 페이지, 메뉴 · 가격 페이지, 예약 페이지, 이벤트 페이지는 따로 정해 두세요. 제목은 그 페이지에서 손님이 얻을 내용을, 사진은 그 내용을 가장 잘 보여 주는 장면을 고르면 돼요.

새 글이나 상품을 자주 올리는 가게라면 하나하나 정하기 어려워요. 글의 첫 사진이나 상품 대표 사진이 자동으로 미리보기 사진이 되게 설정해 두면 편해요.

• 카페: 신메뉴 안내 링크에는 신메뉴 사진과 ‘가을 한정 밤라떼 출시’ 제목.
• 미용실: 이벤트 링크에는 ‘첫 방문 손님 클리닉 안내’ 제목과 매장 사진.
• 공방: 클래스 모집 링크에는 완성 작품 사진과 ‘11월 주말 클래스 모집’ 제목.
• 온라인 판매: 상품 링크에는 그 상품 사진과 상품 이름이 그대로 보이게.

공유 미리보기 제목과 설명은 어떻게 쓰나요?

공유 미리보기 제목은 받는 사람이 링크를 열기 전에 무엇을 얻을지 알 수 있게 쓰면 돼요. 검색 결과에 보이는 페이지 제목과 같게 써도 되지만, 대화방에서 읽히는 말이라는 점을 생각해 조금 더 말 걸듯 다듬어도 좋아요.

설명은 오픈그래프 공식 문서가 말하는 대로 한두 문장이면 충분해요. 영업시간 · 위치 · 예약 방법처럼 받는 사람이 궁금해할 정보를 앞에 두세요. 미리보기에서는 긴 문장이 잘려 보이기 쉬워요.

대표 사진을 정했다면 사진 설명(og:image:alt)도 함께 적어 두세요. 오픈그래프 문서도 이를 함께 적으라고 권하고, 화면 읽기 프로그램을 쓰는 사람에게도 사진 내용이 전해져요.

가게 이름만 반복되는 제목보다, 링크를 받는 사람이 할 일이 보이는 제목이 눌러 볼 이유를 더 분명하게 줘요. ‘○○ 공방’보다 ‘○○ 공방 · 11월 클래스 일정’처럼요.

• 제목 예: ‘카페 ○○ · 연남동 핸드드립, 매일 10시~22시’
• 설명 예: ‘창가 자리가 넓은 핸드드립 카페예요. 원두는 매장에서도 살 수 있어요.’
• 아쉬운 예: 제목 ‘홈’, 설명 ‘환영합니다’처럼 가게를 알 수 없는 문구

미리보기가 안 바뀌거나 이상하게 나올 때는 어떤 순서로 확인하나요?

대부분 태그가 빠졌거나, 사진 주소에 문제가 있거나, 서비스가 예전 미리보기를 기억하고 있는 경우예요. 아래 순서대로 확인하면 원인을 찾기 쉬워요.

메타(페이스북)는 공유 디버거로 다시 읽어 오게 하면 기본 갱신 주기(약 24시간)를 기다리지 않아도 된다고 안내해요. 카카오톡도 카카오 개발자 사이트의 공유 디버거에서 같은 일을 할 수 있어요.

같은 링크를 여러 서비스로 보낼 예정이라면 서비스마다 한 번씩 확인해 두세요. 같은 태그를 읽어도 서비스마다 사진을 자르는 방식과 글자 수가 달라 보일 수 있어요.

1. 01해당 페이지에 og:title · og:image 태그가 실제로 들어 있는지 확인해요.
2. 02사진 주소가 ‘https://’로 시작하는 전체 주소인지 확인해요.
3. 03사진 주소를 브라우저에 직접 넣어 로그인 없이 열리는지 확인해요.
4. 04사진 용량이 지나치게 크지 않은지 확인해요.
5. 05메타 공유 디버거나 카카오 공유 디버거에 주소를 넣어 미리보기를 다시 읽어 와요.
6. 06카카오톡 ‘나에게 보내기’로 다시 보내 결과를 확인해요.

오픈그래프에서 자주 하는 실수는 무엇인가요?

가장 흔한 실수는 모든 페이지에 같은 제목과 로고 사진을 넣는 거예요. 설정은 되어 있지만 링크마다 차이가 없어서, 공유했을 때 눌러 볼 이유를 주지 못해요.

사진을 바꾸면서 파일 이름을 그대로 두면 서비스가 예전 사진을 계속 보여 주기도 해요. 사진을 새로 만들었다면 파일 이름도 바꿔 두는 게 확실해요.

공유 미리보기는 사장님이 보내는 링크뿐 아니라 손님이 친구에게 보내는 링크에도 똑같이 쓰여요. 손님이 대신 홍보해 주는 순간이라, 첫 페이지와 예약 페이지만큼은 꼭 챙겨 두세요.

오픈그래프에 대해 제작사에 무엇을 물어보면 되나요?

공유 미리보기는 공개 뒤에 손보기 번거로우니, 시안 단계에서 아래 네 가지를 물어보세요.

• 페이지마다 제목 · 설명 · 사진을 따로 정할 수 있나요?
• 새 글이나 상품을 올릴 때 미리보기 사진이 자동으로 정해지나요?
• 공유 미리보기를 카카오톡에서 직접 확인해 주나요?
• 나중에 사장님이 관리자 화면에서 미리보기를 바꿀 수 있나요?