메타태그 생성기란?
메타태그는 웹페이지의 제목·설명·대표 이미지 같은 정보를 검색엔진과 SNS에 알려 주는 코드입니다. 이 도구는 입력한 내용을 바탕으로 일반 SEO 태그(title, description, keywords, canonical)와 오픈그래프(og), 트위터 카드 태그를 한 번에 만들어 줍니다. 완성된 코드를 그대로 복사해 붙여넣기만 하면 됩니다.
사용법
- 필요한 필드를 입력하면 즉시 메타태그 코드가 생성되고, 위쪽 미리보기로 검색 결과·SNS 카드 모습을 확인할 수 있습니다.
- 완성된 코드를 복사한 뒤 HTML 문서의
<head>...</head>안에 붙여넣으세요. - 대표 이미지는 1200×630px 이상의 절대 경로(전체 URL)를 권장합니다.
- 입력하지 않은 필드는 해당 태그가 자동으로 빠집니다.
어떤 태그가 만들어지나요
이 도구는 세 묶음의 태그를 한 번에 생성합니다. 첫째, 검색엔진용 기본 태그(title, description, keywords, canonical)로 검색 결과의 제목·설명과 대표 주소를 알립니다. 둘째, 오픈그래프(og) 태그(og:title, og:description, og:url, og:image, og:type, og:site_name)로 카카오톡·페이스북·슬랙 등에서 링크를 공유할 때 보이는 미리보기를 제어합니다. 셋째, 트위터 카드 태그로 X(트위터)에서의 미리보기 형태(작은 썸네일 또는 큰 이미지)를 지정합니다. 제목은 60자, 설명은 160자 안팎을 넘으면 카운터가 붉게 표시돼 잘림을 미리 알 수 있어요.
실무 활용 예시
- 새 페이지 배포: 랜딩 페이지나 블로그 글의 head에 넣어 검색·공유 미리보기를 정돈해요.
- 공유 카드 점검: 이미지 URL을 넣어 SNS 카드가 의도대로 보이는지 미리 확인합니다.
- 학습·템플릿: 표준 메타태그 구조를 빠르게 만들어 두고 프로젝트 템플릿으로 재사용합니다.
주의점·팁
대표 이미지와 페이지 URL은 https://로 시작하는 절대 경로로 넣어야 SNS와 검색엔진이 제대로 읽습니다. 상대 경로는 공유 시 이미지가 비어 보일 수 있어요. 제목·설명이 너무 길면 검색 결과에서 뒤가 잘리므로 권장 글자 수 안에서 핵심을 앞쪽에 배치하세요. 태그를 붙인 뒤 SNS에 이미 공유했다면, 각 플랫폼이 캐시한 미리보기가 바로 갱신되지 않을 수 있습니다.
자주 묻는 질문
메타태그는 어디에 넣나요?
생성된 코드를 복사해 HTML 문서의 <head> 태그 안에 붙여넣으면 됩니다. 검색엔진과 SNS가 이 정보를 읽어 검색 결과와 공유 미리보기에 활용합니다.
오픈그래프(og) 태그는 무엇인가요?
오픈그래프는 페이스북·카카오톡·슬랙 등에서 링크를 공유할 때 보이는 제목·설명·대표 이미지 미리보기를 제어하는 태그입니다. og:title, og:description, og:image 등으로 구성됩니다.
키워드 메타태그는 효과가 있나요?
구글 등 주요 검색엔진은 더 이상 keywords 메타태그를 순위에 반영하지 않습니다. 다만 일부 환경에서 참고용으로 쓰일 수 있어 선택적으로 입력할 수 있게 두었습니다.
대표 이미지 크기는 어느 정도가 좋나요?
가로세로 1200×630px 비율의 이미지를 절대 경로(전체 URL)로 지정하면 대부분의 SNS에서 큰 카드로 깔끔하게 표시됩니다. 너무 작은 이미지는 흐리게 보이거나 잘릴 수 있습니다.
제목·설명 글자 수 제한이 있나요?
강제 제한은 아니지만, 검색 결과에서 제목은 약 60자, 설명은 약 160자 이후가 잘릴 수 있습니다. 이 도구는 각 칸에 글자 수 카운터를 표시하고 권장치를 넘으면 붉게 알려 줍니다.
입력한 내용이 서버로 전송되나요?
아니요. 모든 태그 생성은 브라우저 안에서만 실행되며 입력한 내용은 서버로 전송되거나 저장되지 않습니다.