오픈 그래프(OG) 태그 생성기
링크 공유 시 보여질 썸네일 이미지와 제목, 설명을 미리 보고 코드를 생성하세요.
미리보기 (Preview)
사이트 이름
나의 멋진 웹사이트
여기에 사이트에 대한 설명을 적어주세요. 사람들의 클릭을 유도할 수 있는 매력적인 문구가 좋습니다.
생성된 태그 (Copy & Paste)
내 링크가 '매력적'으로 보이나요?
친구에게 카카오톡이나 문자, 슬랙으로 링크를 보냈는데, 썸네일 이미지가 깨지거나 엉뚱한 제목이 뜬 적이 있나요? 이는 **오픈 그래프(Open Graph)** 설정이 제대로 안 되어 있기 때문입니다.
잘 정리된 미리보기 카드는 사람들의 호기심을 자극하여 **클릭률(CTR)을 확실히 높여줍니다.** 내 블로그 글, 쇼핑몰 상품, 포트폴리오 사이트를 알릴 때 필수적인 설정입니다.
주요 태그 설명
og:image(이미지): 가장 중요합니다! 사람들의 시선을 끄는 고화질 이미지(1200x630 권장)를 설정하세요.og:title(제목): 클릭하고 싶어지는 간결한 제목을 입력하세요.og:description(설명): 제목으로 다 못 한 이야기를 1~2줄로 요약해서 보여줍니다.
사용 방법
- 정보 입력: 제목, 설명, 그리고 썸네일로 띄울 이미지 주소(URL)를 입력합니다.
- 실시간 미리보기: 입력하는 즉시 아래 카드 미리보기 화면에 반영됩니다.
- 코드 복사: 생성된 HTML 코드를 복사합니다.
- 적용: 내 웹사이트의
<head>태그 안에 붙여넣기만 하면 끝!
자주 묻는 질문 (FAQ)
Q. 카카오톡에 이미지를 바꿨는데 반영이 안 돼요!
A. 카카오톡이나 페이스북은 한 번 가져간 이미지를 서버에 임시 저장(캐시)해둡니다. 각 서비스의 '캐시 삭제 도구(Debugger)'를 이용해 초기화하거나, 이미지 파일명을 바꿔서 다시 시도해보세요.
Q. 이미지 주소는 어디서 가져오나요?
A. 내 서버나 블로그에 업로드된 이미지 위에서 우클릭 후 '이미지 주소 복사'를 하면 됩니다.