01
공유 문구가 같다면 덮어쓰지 않기
공유 제목과 설명을 비워 두면 페이지 문구가 OG에 들어가고 X 카드도 이를 상속합니다. 검색과 공유의 표현을 다르게 해야 할 때만 별도 문구를 입력하세요.
웹사이트 및 SEO 개발
메타태그 생성기
페이지 정보를 태그로 만들고 검색 결과와 공유 카드의 대략적인 모습을 비교합니다.
메타태그 생성기
페이지와 공유 항목
미리보기와 코드
생성 후 표시됩니다
생성 후 표시됩니다
생성 후 표시됩니다
head에 넣을 HTML
입력과 HTML은 이 브라우저에서 처리합니다. 이미지를 직접 불러올 때만 이미지 호스트에 요청합니다.
태그 옵션
페이지 제목을 입력하거나 예시를 불러오세요.
검색에서는 분명한 제목도 카카오톡 링크 미리보기에서는 잘릴 수 있습니다. 메타태그 생성기는 페이지 문구와 공유 문구를 필요한 경우에만 나누어 작성하게 합니다.
OG 태그 생성기와 오픈그래프 미리보기를 한 화면에서 사용할 수 있지만, SNS 공유 카드의 실제 출력은 플랫폼의 캐시와 이미지 자르기에 따라 달라집니다.
메타태그 생성기를 쓰는 이유
하나의 페이지를 여러 카드로 확인
메타태그 생성기는 검색 스니펫과 Facebook, X, 카카오톡 링크 미리보기에 가까운 카드를 나란히 보여 줍니다. 긴 제목이 카드에서 어떻게 보이는지 살핀 뒤 공유용 제목을 따로 넣을 수 있습니다.
이미지 요청 시점을 직접 선택
og:image 주소를 적어도 이미지 서버에는 자동 접속하지 않습니다. 처음에는 로컬 자리 표시자만 보이고, 이미지 미리보기를 명시적으로 누른 뒤에야 해당 호스트에 요청합니다.
상속 규칙과 갱신 시점
02
이미지는 절대 URL로 작성
og:image에는 HTTP(S) 전체 주소가 필요합니다. 주소 입력 중에는 요청하지 않고, 이미지 불러오기를 눌렀을 때만 외부에 접속합니다. 이미지 없이 태그를 만들 수 있지만 OG 핵심 네 항목은 완성되지 않습니다.
03
수정한 뒤 새 결과 확인
자동 생성은 약 350밀리초 뒤 갱신됩니다. 끄면 생성 버튼이나 Ctrl/Cmd+Enter를 사용하세요. 입력이나 옵션이 달라지면 오래된 코드의 복사와 다운로드가 비활성화됩니다.
생성되는 태그와 확인 방식
검색 제목과 설명
검색 결과 예시는 제목, URL, 설명을 보여 줍니다. 글자 수 표시는 참고용이며 Google은 검색어에 따라 다른 문구를 선택할 수 있습니다.
오픈그래프의 핵심 속성
오픈그래프 미리보기에 쓰는 og:type과 og:title을 출력하고 입력한 설명, URL, 이미지, 사이트 이름을 추가합니다. 원격 이미지를 불러오기 전에는 자리 표시자를 유지합니다.
X 카드 유형
큰 이미지와 요약형 Twitter Card를 선택할 수 있습니다. twitter:card를 출력하고 나머지 제목, 설명, 이미지는 OG 값을 상속하므로 같은 문구의 태그를 중복하지 않습니다.
기존 head 가져오기
붙여 넣은 HTML에서 지원하는 태그를 읽어 폼에 반영합니다. 같은 태그가 여러 개면 첫 값을 사용하고 알립니다. 가져오기와 지우기는 바뀔 항목 수를 확인한 뒤 적용하고 한 번 되돌릴 수 있습니다.
이 미리보기가 검증하지 않는 것
- 실제 페이지를 검사하지 않음
- 페이지 URL은 og:url, canonical, 표시 도메인에만 사용합니다. 주소를 방문하거나 서버 응답을 확인하지 않으므로 배포된 태그의 상태를 증명하지 않습니다.
- 원격 이미지는 선택해서 불러옴
- 주소 입력, head 붙여 넣기, 코드 생성으로는 이미지 호스트에 접속하지 않습니다. 이미지 미리보기를 누르면 방문자의 IP와 브라우저 정보가 이미지 호스트에 전달될 수 있습니다.
- 플랫폼 출력은 다를 수 있음
- Google은 설명을 바꾸고 Facebook, X, 카카오톡은 예전 카드나 이미지를 캐시할 수 있습니다. 여기의 카드는 근사치이며 실제 크롤러나 최종 픽셀 배치를 검증하지 않습니다.
- 필수 제목과 URL 형식
- 페이지 제목은 필수입니다. 설명과 페이지·이미지 URL은 비워 둘 수 있습니다. 입력하는 URL은 절대 HTTP(S) 주소여야 하며 상대 경로와 인증 정보는 거부합니다.
- 다른 프로토콜은 다루지 않음
- 이미지를 만들거나 업로드하지 않으며 robots, hreflang, JSON-LD, 기사 확장 속성, meta keywords도 생성하지 않습니다. 기존 head는 URL 스캔 대신 붙여 넣어 가져옵니다.
메타태그 생성기 자주 묻는 질문
카카오톡 링크 미리보기가 왜 안 뜨나요?
공개 페이지에 OG 태그와 접근 가능한 이미지가 있는지 먼저 확인하세요. 이 도구의 카카오톡 카드는 근사치이며 실제 링크를 가져오거나 캐시를 지우지 않습니다.
OG 태그를 고쳤는데 미리보기가 그대로인 이유는 무엇인가요?
플랫폼이 이전 결과를 저장했을 수 있습니다. 새 태그가 배포됐는지 확인한 뒤 해당 플랫폼의 다시 가져오기 기능을 사용하세요. 이 페이지는 외부 캐시를 수정하지 못합니다.
제목은 뜨는데 이미지만 안 보이는 이유는 무엇인가요?
og:image가 비어 있거나 이미지 URL이 외부에서 접근되지 않을 수 있습니다. 주소를 입력해도 자동 로드하지 않으며 명시적으로 이미지를 불러와 브라우저 표시만 확인할 수 있습니다.
og:image URL에 상대 경로를 써도 되나요?
아니요. 공유 크롤러에 전달할 이미지 주소는 완전한 HTTP(S) URL이어야 합니다. 메타태그 생성기는 상대 경로를 거부하고 URL 자체를 자동으로 요청하지 않습니다.
X 공유 카드를 별도로 설정해야 하나요?
필요하면 twitter:card의 큰 이미지 또는 요약 유형을 선택하세요. 제목, 설명, 이미지는 기본적으로 OG 값에서 상속하므로 같은 내용을 별도 입력할 필요가 없습니다.
생성된 태그에 문제가 있나요?
메타태그 생성기로 태그 초안 만들기
메타태그 생성기에서 검색과 공유 문구를 비교한 뒤 HTML을 head에 넣고, 배포 후 각 플랫폼에서 실제 링크를 다시 확인하세요.