개발자 도구OG 메타태그 생성

OG 메타태그 생성기카카오톡·페이스북 링크 미리보기 태그 만들기

제목·설명·이미지를 넣으면 오픈그래프와 트위터 카드 메타태그를 만들고 링크 카드가 어떻게 보일지 미리 보여주는 온라인 OG 태그 생성기입니다. 빠지거나 긴 항목을 미리 알려줍니다.

OG 메타태그 생성 사용법

링크를 카카오톡·슬랙·페이스북에 붙였을 때 보이는 카드(제목·설명·이미지)를 정하는 메타태그를 만듭니다. 사이트를 열기 전이나 공유 카드가 이상하게 보일 때 씁니다.

  1. 제목·설명·이미지를 넣습니다

    이미지는 https:// 로 시작하는 절대 주소여야 하고 1200×630 크기가 가장 무난합니다.

  2. 미리보기를 확인합니다

    오른쪽에 메신저 카드 모양으로 보여줍니다. 빠지거나 너무 긴 항목은 아래에 경고로 알려줍니다.

  3. 태그를 복사해 <head> 에 넣습니다

    만들어진 태그를 그대로 복사해 HTML 의 head 안에 붙입니다.

자주 묻는 질문

태그를 넣었는데 카드가 그대로예요
메신저와 SNS 는 한 번 읽은 카드를 한동안 기억합니다. 카카오 디벨로퍼스의 캐시 초기화, 페이스북 공유 디버거의 다시 스크랩을 쓰면 바로 갱신됩니다. 주소 뒤에 ?v=2 처럼 쿼리를 붙여 새 주소로 만드는 방법도 있습니다.
og: 와 twitter: 를 둘 다 넣어야 하나요?
트위터(X)는 twitter: 태그를 먼저 보고 없으면 og: 를 씁니다. 대부분 og: 만으로도 되지만 카드 크기(summary_large_image)는 twitter:card 로만 정할 수 있어 함께 넣는 것이 안전합니다.
이미지 크기는 얼마가 좋나요?
1200×630 (1.91:1) 이 페이스북·카카오톡·슬랙에서 모두 잘립 없이 보입니다. 정사각형에 가까운 이미지는 큰 카드에서 위아래가 잘립니다. 파일은 1MB 아래로 두세요.

개발자 도구 다른 도구