메타 태그 생성기·OG 미리보기

메타 태그 생성기·OG 미리보기 소개

이 페이지에는 두 가지 모드가 있습니다. 「생성」 모드는 제목·설명·이미지·URL을 넣으면 <head>에 붙일 기본 메타 태그, Open Graph 태그, X(트위터) 카드 태그를 한 블록으로 만들어 줍니다. 「미리보기 검사」 모드는 이미 배포한 페이지의 주소를 넣으면 그 HTML을 가져와 태그를 읽고, 페이스북·X·카카오톡·링크드인·디스코드·슬랙에서 카드가 대략 어떻게 보일지와 빠진 항목을 알려 줍니다.

보통 순서는 생성 → 배포 → 검사입니다. 다만 검사 모드가 보여 주는 카드는 각 플랫폼 규칙을 흉내 낸 그림이지 실제 서버가 만든 결과가 아닙니다. 공유했는데 예전 이미지가 계속 나온다면 태그 문제가 아니라 플랫폼 쪽 캐시 문제인 경우가 많고, 그건 아래의 각 플랫폼 도구로 풀어야 합니다.

메타 설명 길이에 공식 한도는 없다

「설명은 160자 이내」 같은 숫자가 널리 돌지만, Google 검색 센터 문서는 「메타 설명 길이에는 제한이 없으며, 검색 결과의 스니펫은 기기 너비에 맞게 필요에 따라 잘린다」고 적습니다. 또 스니펫은 주로 페이지 본문에서 만들고, 메타 설명이 본문보다 더 정확하게 페이지를 설명할 때 그것을 쓴다고 합니다. 즉 잘 쓴 메타 설명도 검색어에 따라 무시될 수 있습니다.

이 도구는 제목 60자·설명 200자를 넘으면 노란 경고, 제목 90자·설명 300자를 넘으면 빨간 경고를 띄웁니다. 이는 SNS 카드와 검색 결과에서 잘리기 시작하는 대략적인 지점을 잡은 경험치이지 Google 규칙이 아닙니다. 한글은 영문보다 글자당 폭이 넓어 같은 글자 수라도 더 일찍 잘린다는 점도 감안하세요. 실무적으로는 앞쪽 한 문장에 핵심을 넣고 뒤는 잘려도 괜찮게 쓰는 편이 숫자를 맞추는 것보다 효과적입니다.

keywords 메타 태그는 입력하면 만들어 주지만, Google은 이 태그를 검색 색인과 순위에 전혀 쓰지 않는다고 밝혔습니다. 다른 서비스가 쓰지 않는다면 비워 둬도 됩니다.

Open Graph에서 꼭 필요한 네 가지

Open Graph 프로토콜(ogp.me)이 필수로 정한 속성은 og:title, og:type, og:image, og:url 네 개입니다. og:image를 넣었다면 og:image:alt도 넣으라고 권하고, og:locale은 ko_KR처럼 「언어_지역」 형식이며 기본값은 en_US입니다.

생성 모드는 URL 칸에 스킴 없이 example.com/salary라고 적어도 https://example.com/salary로 바꿔 og:url과 canonical 링크에 같은 값을 넣습니다. 이미지 주소는 그대로 옮기므로 반드시 https://로 시작하는 절대 주소를 적어야 합니다. 상대 경로(/img/og.png)는 많은 크롤러가 해석하지 못하고, 검사 모드도 이를 「오류」로 표시합니다. og:image:width·height를 적어 두면 크롤러가 이미지를 내려받기 전에 레이아웃을 정할 수 있어 첫 공유 때 이미지가 빠지는 일이 줄어듭니다.

X 카드 종류와 Open Graph 대체

X는 twitter:title·description·image가 없으면 같은 역할의 Open Graph 값을 대신 읽습니다(X 개발자 문서의 Cards markup). 그래서 og 태그를 제대로 넣었다면 X 전용으로 꼭 필요한 것은 카드 모양을 정하는 twitter:card 하나입니다. 이 도구는 작은 정사각 썸네일의 summary와 큰 가로 이미지의 summary_large_image 두 가지를 고를 수 있습니다. X에는 앱 설치용 app, 동영상 재생용 player 카드도 있지만 추가 태그가 필요해 여기서는 만들지 않습니다.

공유 미리보기가 안 바뀔 때: 플랫폼별 캐시

메신저와 SNS는 링크를 처음 공유할 때 한 번 긁어 간 정보를 한동안 저장해 둡니다. 태그를 고쳐도 기존 카드가 계속 보이는 이유입니다. 캐시를 비우는 방법은 플랫폼마다 다릅니다.

• 카카오톡: Kakao Developers의 「공유 디버거」(developers.kakao.com/tool/debugger/sharing, 로그인 필요)에 URL을 넣고 캐시 초기화를 누릅니다. http와 https를 구분하므로 실제 공유하는 주소 그대로 넣어야 합니다.
• 페이스북: Meta의 Sharing Debugger(developers.facebook.com/tools/debug)에서 「다시 스크랩」을 누릅니다.
• 링크드인: Post Inspector(linkedin.com/post-inspector)에 URL을 넣으면 새로 가져옵니다.
• LINE: 예전에는 PagePoker(poker.line.naver.jp)라는 캐시 삭제 도구가 있었지만, 이 글을 쓴 2026년 9월에는 주소에 접속되지 않았습니다. 이럴 때는 ?v=2처럼 쿼리 문자열을 붙여 URL을 새 주소로 만들어 공유하는 방법이 흔히 쓰입니다.

검사 모드가 페이지를 가져오는 방식

브라우저는 다른 사이트의 HTML을 마음대로 읽을 수 없어서(CORS), 검사 모드는 먼저 직접 요청을 해 보고 막히면 cors.sh, allorigins, codetabs 같은 공개 프록시를 차례로 거칩니다. 따라서 검사한 URL은 그 프록시 운영자에게 전달됩니다. 로그인해야 보이는 페이지나 사내 주소, 공개 전 페이지는 가져올 수 없고, 넣지 않는 편이 맞습니다. 이런 페이지는 페이지 소스의 <head> 부분을 복사해 붙여 넣어 검사하세요.

또 플랫폼 크롤러는 각자 User-Agent로 접속하므로, 봇을 차단하거나 국가별로 다른 페이지를 주는 사이트는 검사 결과와 실제 카드가 다를 수 있습니다.

예시

사용 방법

1. 생성 모드에서 제목·설명·URL·이미지 주소를 넣고, 필요하면 og:type, 로케일, X 카드 종류를 고릅니다.
2. 만들어진 블록을 복사해 페이지 <head>에 붙이고 배포합니다.
3. 미리보기 검사 모드에서 배포한 주소를 넣어 빠진 태그와 플랫폼별 카드 모양을 확인합니다.
4. 이미 공유된 링크라면 카카오 공유 디버거 등 플랫폼 도구로 캐시를 비웁니다.

자주 묻는 질문