SEO 메타 태그 (Open Graph) 생성기

사이트 제목, 설명, 썸네일 이미지만 입력하세요. 카카오톡, 페이스북, 트위터에 예쁘게 공유되는 메타 태그를 1초 만에 만들어 드립니다.

1. 사이트 정보 입력

사이트 제목 (Title)

사이트 설명 (Description)

사이트 주소 (URL)

썸네일 이미지 주소 (Image URL)

트위터 아이디 (선택사항)

2. 생성된 HTML 태그

아래 코드를 복사하여 <head> 영역에 붙여넣으세요.

index.html

<!-- Primary Meta Tags -->
<title>나만의 멋진 웹사이트 제목</title>
<meta name="title" content="나만의 멋진 웹사이트 제목" />
<meta name="description" content="여기에 웹사이트에 대한 매력적인 설명을 적어주세요. 검색 결과와 링크 미리보기에 노출됩니다." />

<!-- Open Graph / Facebook / Kakao -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com" />
<meta property="og:title" content="나만의 멋진 웹사이트 제목" />
<meta property="og:description" content="여기에 웹사이트에 대한 매력적인 설명을 적어주세요. 검색 결과와 링크 미리보기에 노출됩니다." />
<meta property="og:image" content="https://example.com/thumbnail.jpg" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com" />
<meta property="twitter:title" content="나만의 멋진 웹사이트 제목" />
<meta property="twitter:description" content="여기에 웹사이트에 대한 매력적인 설명을 적어주세요. 검색 결과와 링크 미리보기에 노출됩니다." />
<meta property="twitter:image" content="https://example.com/thumbnail.jpg" />

💡 함께 많이 쓰는 추천 도구

더 많은 도구 보기 →

🛡️

JWT (JSON Web Token) 디코더

복잡하게 인코딩된 JWT 토큰을 즉시 해독하여 Header와 Payload 데이터를 보여주고, 만료 시간(exp)을 읽기 쉽게 변환해 줍니다.

🔐

Base64 인코더 및 디코더

문자열(한글 깨짐 방지)이나 이미지 파일을 Base64 포맷으로 안전하게 인코딩하거나 원래 데이터로 디코딩해 줍니다.

⚡

JSON 포매터 및 유효성 검사기

한 줄로 된 지저분한 JSON 데이터를 보기 좋게 정렬(Pretty Print)하거나, 콤마 누락 같은 문법 오류(Syntax Error)를 찾아줍니다.

SEO 메타 태그와 오픈 그래프(Open Graph)가 도대체 뭔가요?

안녕하세요 여러분! 혹시 정성 들여 만든 웹사이트나 블로그 링크를 카카오톡이나 페이스북, 슬랙 같은 메신저에 공유했는데, 예쁜 썸네일 이미지나 설명 없이 덜렁 'URL 주소'만 텍스트로 나와서 당황하셨던 적 있으신가요? "분명히 블로그 스킨 설정에서 썸네일을 올렸는데 왜 안 뜨지?" 하면서 답답하셨다면, 그건 바로 여러분의 웹사이트에 오픈 그래프(Open Graph) 메타 태그가 제대로 설정되어 있지 않기 때문일 확률이 99%입니다.

스마트폰 화면에 띄워진 다양한 소셜 미디어 아이콘들, 오픈 그래프 메타 태그를 통한 링크 공유 미리보기의 중요성을 나타내는 컨셉 이미지

우리가 링크를 복사해서 채팅창에 붙여넣는 순간, 메신저 앱이나 SNS의 봇(Bot)들은 그 링크 안으로 빠르게 접속해서 "이 사이트는 제목이 뭐고, 대표 이미지는 이걸 쓰고, 대략 이런 내용이구나!"라는 정보를 긁어옵니다. 이때 로봇들이 가장 먼저, 그리고 가장 중요하게 찾아보는 곳이 바로 HTML 문서의 맨 위에 있는 <head> 영역의 메타 태그들입니다. 저희가 제공하는 이 'SEO 메타 태그 생성기'는 복잡한 HTML 코딩을 전혀 몰라도 누구나 빈칸만 채우면 즉시 복사해서 쓸 수 있는 완벽한 코드를 만들어 드리는 마법 같은 도구랍니다.

주요 메타 태그 종류, 확실하게 파헤치기!

웹사이트를 만들 때 꼭 들어가야 하는 메타 태그는 크게 세 가지로 나눌 수 있습니다. 각각의 역할이 다르니 한 번 가볍게 읽어보세요.

기본 메타 태그 (Primary Meta Tags): 구글(Google)이나 네이버(Naver) 같은 검색 엔진이 여러분의 웹사이트를 검색 결과(SERP)에 띄워줄 때 사용하는 가장 기본적인 정보입니다. <title>과 <meta name="description">이 여기에 속하는데요. 누군가 내 웹사이트와 관련된 키워드를 검색했을 때 클릭하고 싶게 만드는 아주 매력적인 문구를 적어주시는 게 핵심입니다. 여기서 클릭률이 결정되거든요!
오픈 그래프 (Open Graph / og: 태그): 페이스북에서 처음 만든 표준 규격입니다. 지금은 카카오톡, 네이버 블로그, 라인, 링크드인, 디스코드 등 사실상 거의 모든 플랫폼이 이 오픈 그래프 규격을 사용하여 '링크 미리보기 카드'를 생성합니다. og:title, og:description, og:image 이 세 가지만 잘 챙겨도 클릭률(CTR)이 폭발적으로 상승합니다. 사람들은 밋밋한 글씨보다 눈에 띄는 썸네일 이미지를 먼저 보니까요.
트위터 카드 (Twitter Cards): 트위터(X)는 자신들만의 독자적인 메타 태그 규격을 좋아합니다. 물론 오픈 그래프 태그가 있으면 트위터도 어느 정도 읽어오긴 하지만, 트위터 타임라인에 링크가 공유되었을 때 화면을 꽉 채우는 큼직하고 멋진 이미지를 띄우고 싶다면 twitter:card 속성을 summary_large_image로 설정해 주는 것이 요즘 국룰입니다.

어두운 배경의 모니터 화면에 작성된 HTML 코드, 웹사이트 구조와 SEO 메타 태그를 설정하는 프로그래밍 작업 환경

알아두면 무조건 이득! 실전 꿀팁과 자주 묻는 질문 (FAQ)

💡 카카오톡에서 이미지를 바꿨는데도 옛날 이미지가 계속 나와요! 어떻게 하죠?

아, 이 부분 정말 많은 분들이 스트레스받아 하시는 부분이죠! 안심하세요. 코드를 잘못 짜신 게 아닙니다. 카카오톡이나 페이스북은 수많은 사람들이 링크를 공유할 때마다 매번 사이트에 들어가서 정보를 긁어오면 서버가 견디질 못하기 때문에, 한 번 읽어간 링크 정보(이미지와 제목)를 자기들 서버에 며칠 동안 저장(캐시, Cache)해 둡니다.

이럴 때는 '카카오 디벨로퍼스(Kakao Developers)' 사이트에서 제공하는 '공유 디버거' 도구에 가셔서 여러분의 URL을 입력하고 '캐시 초기화' 버튼을 꾹 눌러주세요! 페이스북 역시 '공유 디버거(Sharing Debugger)'라는 도구에서 '다시 스크랩(Scrape Again)'을 누르시면 즉시 새로운 이미지와 제목으로 갱신된답니다. 정말 꿀팁이죠?

Q. 만들어진 HTML 코드는 어디에 붙여넣어야 하나요?

A. 생각보다 정말 간단합니다! 웹사이트의 소스 코드에서 <head>와 </head> 태그 사이 아무 곳에나 복사한 코드를 그대로 붙여넣기만 하시면 끝납니다. 워드프레스, 티스토리, 아임웹, 식스샵 같은 플랫폼을 쓰신다면 관리자 페이지의 'SEO 설정'이나 'HTML 헤더 편집' 메뉴를 이용하시면 아주 쉽게 적용하실 수 있습니다.

Q. 썸네일 이미지 URL은 어떻게 구하나요? 사이즈는 어느 정도가 좋나요?

A. 웹상에 이미지가 먼저 올라가 있어야 합니다. 여러분의 사이트 서버나 무료 이미지 호스팅 사이트(Imgur 등)에 이미지를 업로드하신 뒤, 해당 이미지를 우클릭하여 '이미지 주소 복사'를 누르시면 https://.../image.png 형태의 주소가 나옵니다. 이 주소를 생성기의 '썸네일 이미지 주소' 칸에 그대로 붙여넣으시면 됩니다.
참고로 권장하는 오픈 그래프 이미지 사이즈는 가로 1200px, 세로 630px 비율입니다! 이 비율을 맞춰주셔야 카카오톡이나 페이스북에서 이미지가 위아래로 잘리지 않고 가장 예쁘고 꽉 차게 보입니다.

Q. 메타 태그를 꼼꼼하게 다 적으면 구글 검색 상위 노출(SEO)에 무조건 유리한가요?

A. 구글이 메타 태그만 쓴다고 무조건 점수를 팍팍 올려주는 것은 아닙니다. 하지만 간접적인 나비효과가 어마어마합니다. 검색 결과나 SNS에서 매력적인 제목과 멋진 썸네일로 사람들의 시선을 사로잡으면, 당연히 다른 사이트들보다 클릭을 훨씬 더 많이 받게 되겠죠?
검색 엔진은 "오, 사람들이 똑같은 걸 검색했는데 이 사이트를 더 많이 클릭하고 오래 머무네? 좋은 사이트구나!"라고 판단해서 점차적으로 검색 순위를 상위로 끌어올려 주게 됩니다. 결국 SEO 메타 태그 설정은 디지털 마케팅과 사이트 성장의 가장 기본 중의 기본이라고 할 수 있습니다. 지금 바로 생성기로 태그를 만들고 적용해 보세요!