OG 미리보기
주소를 넣으면 링크를 공유했을 때 어떻게 보이는지 확인해요. 빠진 태그도 짚어줘요.
입력한 주소만 서버를 거쳐요. 브라우저에서는 남의 사이트를 직접 읽을 수 없어요.
주소 확인
알아두기
남의 사이트는 브라우저에서 바로 읽을 수 없어서 입력한 주소만 우리 서버가 대신 받아와요. 파일이나 다른 입력값은 보내지 않아요.
미리보기 이미지는 원래 사이트에서 바로 불러와요.
카카오톡·슬랙은 한 번 읽은 주소를 한동안 기억해요. 태그를 고쳤는데 그대로면 각 서비스의 캐시 때문이에요.
OG 미리보기 소개
주소를 넣으면 그 링크를 공유했을 때 카카오톡·슬랙·트위터에서 어떻게 보이는지 나란히 확인해요. 빠진 태그가 있으면 무엇을 채워야 하는지 짚어 주고, 제목이나 설명이 길어 잘릴 위험도 알려줘요. 읽어 온 태그 원문도 함께 볼 수 있어요.
공유 카드는 무엇으로 만들어지나요
메신저나 SNS는 링크를 받으면 그 페이지의 HTML을 읽어 카드를 만들어요. 이때 보는 것이 og로 시작하는 태그들이에요.
og:title이 카드 제목, og:description이 설명, og:image가 그림이에요. og:title이 없으면 문서 제목을 대신 쓰고, og:image가 없으면 글자만 있는 밋밋한 카드가 돼요.
트위터는 twitter:card를 따로 봐요. 이게 없으면 큰 이미지 대신 작은 카드로 나와요.
길이와 이미지 규격
제목은 60자, 설명은 200자를 넘으면 뒤가 잘려요. 중요한 말을 앞쪽에 두는 편이 안전해요.
이미지는 가로세로 1200×630 비율이 대부분의 서비스에서 잘리지 않고 나와요. 정사각형 이미지를 넣으면 서비스에 따라 위아래가 잘릴 수 있어요.
이미지 주소는 https로 시작해야 해요. http면 메신저가 보안 문제로 이미지를 빼 버릴 수 있어요.
태그를 고쳤는데 그대로일 때
카카오톡과 슬랙 같은 서비스는 한 번 읽은 주소를 한동안 기억해요. 그래서 태그를 고쳐도 예전 카드가 계속 나와요.
각 서비스가 제공하는 캐시 초기화 도구를 쓰면 다시 읽게 할 수 있어요. 급하다면 주소 끝에 의미 없는 값을 붙여 다른 주소처럼 만들어 확인하는 방법도 있어요.
이 도구는 캐시를 거치지 않고 지금 페이지를 바로 읽어요. 그래서 "태그는 제대로 들어갔는지"를 확인하는 데 쓰면 좋아요.
OG 미리보기 사용 방법
- 확인할 페이지 주소를 넣어요.
- 카카오톡·슬랙·트위터 미리보기로 어떻게 보이는지 비교해요.
- 빠진 태그 목록에서 채워야 할 것을 확인해요.
- 태그 원문에서 실제로 읽힌 값을 봐요.
자주 묻는 질문
- 미리보기가 안 나와요.
- 로그인해야 보이는 페이지거나 외부 접근을 막아 둔 주소면 태그를 읽을 수 없어요.
- 태그를 고쳤는데 예전 이미지가 나와요.
- 공유한 서비스가 예전 정보를 저장해 둬서 그래요. 각 서비스의 캐시 초기화 도구로 다시 읽게 해 주세요.
- 이미지는 얼마 크기가 좋나요?
- 가로세로 1200×630 비율이 대부분의 서비스에서 잘리지 않고 나와요.
- 제목은 몇 자까지 쓸 수 있나요?
- 60자를 넘으면 뒤가 잘려요. 설명은 200자가 기준이에요.
- 내 서버 주소를 넣어도 되나요?
- 인터넷에 공개된 주소만 확인할 수 있어요. 내부망 주소는 보안상 차단해요.
- 주소가 어디로 전송되나요?
- 남의 사이트는 브라우저에서 바로 읽을 수 없어 입력한 주소만 서버가 대신 받아와요. 파일이나 다른 입력값은 보내지 않아요.
알아 두면 좋은 점
- 미리보기는 실제 화면과 조금 다를 수 있어요. 잘림과 빈 자리를 보는 용도로 써 주세요.
- 서비스가 업데이트되면 카드 모양도 조금씩 달라져요.