오픈그래프 미리보기

OG 태그를 입력해 공유 카드(카카오·페북·트위터) 미리보기를 봅니다.

og:title og:site_name

og:description

og:image (URL) og:url

제목이 여기 표시됩니다

공들여 쓴 글을 카카오톡에 공유했는데 제목만 나오거나 엉뚱한 이미지가 잡히는 일이 있습니다. 링크를 공유할 때 보이는 카드는 페이지의 오픈그래프(og) 메타태그를 보고 만들어집니다.

이 도구는 그 값을 직접 입력해 카드가 어떤 모습이 될지 화면에서 확인하고, 그대로 쓸 수 있는 메타태그를 만들어 줍니다.

어떻게 계산되나요

og:title(제목), og:site_name(사이트명), og:description(설명), og:image(이미지 주소), og:url(페이지 주소)을 채웁니다. 입력하는 즉시 아래 카드 미리보기에 반영됩니다.

제목과 설명은 서비스마다 잘리는 길이가 다릅니다. 제목은 짧게, 설명은 앞부분에 핵심을 두는 편이 안전합니다.

[메타태그 복사]를 누르면 아래 칸의 <meta property="og:..."> 코드가 복사됩니다. 페이지의 <head> 안에 넣으세요.

이 도구는 입력값으로 카드 모양만 그려 보는 미리보기입니다. 실제 주소를 읽어 오지는 않으므로, 적용 후에는 카카오·페이스북의 공유 디버거에서 캐시를 갱신해 확인하세요.

메타태그를 고쳤는데 카카오톡 미리보기가 그대로예요.

공유 서비스가 이전 정보를 캐시해 두기 때문입니다. 카카오 개발자 사이트의 공유 디버거, 페이스북의 셰어링 디버거에서 해당 주소를 다시 읽어들이면 갱신됩니다.

og:image는 어떤 크기가 좋나요?

가로가 긴 이미지가 안전하며 1200×630 정도가 널리 쓰입니다. 세로가 긴 이미지는 위아래가 잘릴 수 있고, 용량이 지나치게 크면 불러오지 못하는 경우도 있습니다.

이미지 주소를 상대경로로 넣어도 되나요?

안 됩니다. 공유 서비스는 외부에서 접근하므로 https://로 시작하는 전체 주소여야 합니다. 로그인해야 보이는 이미지도 표시되지 않습니다.

트위터(X) 카드는 따로 넣어야 하나요?

트위터는 og 태그도 참고하지만, 큰 이미지 카드를 원하면 twitter:card 같은 전용 태그를 함께 넣는 것이 확실합니다.

og:description을 안 넣으면 어떻게 되나요?

서비스가 본문 일부나 meta description을 임의로 가져다 쓰거나, 설명 없이 제목만 보여줍니다. 의도한 문장을 보여주려면 직접 지정하는 편이 좋습니다.