메타 태그 생성기
SEO·오픈그래프·트위터 카드 메타 태그를 생성합니다 — 페이지 유형 12가지, 이미지·트위터 계정 속성, 그리고 6개 사이트가 카드를 그리는 모습 미리보기. 100% 브라우저에서 실행됩니다.
미리보기 이미지 상세
추가 Open Graph 속성
트위터 계정
<title>초보자를 위한 Astro 완벽 가이드</title> <meta name="description" content="Astro로 빠르고 가벼운 정적 사이트를 만드는 방법을 예제와 함께 단계별로 설명하는 초보자용 안내서입니다."> <meta property="og:title" content="초보자를 위한 Astro 완벽 가이드"> <meta property="og:description" content="Astro로 빠르고 가벼운 정적 사이트를 만드는 방법을 예제와 함께 단계별로 설명하는 초보자용 안내서입니다."> <meta property="og:url" content="https://example.com/blog/astro-guide"> <meta property="og:image" content="https://example.com/images/astro-guide-cover.png"> <meta property="og:site_name" content="내 개발 블로그"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="초보자를 위한 Astro 완벽 가이드"> <meta name="twitter:description" content="Astro로 빠르고 가벼운 정적 사이트를 만드는 방법을 예제와 함께 단계별로 설명하는 초보자용 안내서입니다."> <meta name="twitter:image" content="https://example.com/images/astro-guide-cover.png">
미리보기
각 사이트가 이 카드를 그리는 방식입니다. 글자가 잘리는 지점은 보는 사람의 화면에 따라 달라지므로 정확한 값이 아니라 근사치입니다.
각 플랫폼의 공식 검사 도구로 실제 페이지 확인하기
Facebook · X (Twitter) · LinkedIn · Google Rich Results
🔒 태그는 브라우저에서 생성되며 업로드되지 않습니다.
이 메타 태그 생성기가 하는 일
페이지 title, 설명, 표준 URL, 미리보기 이미지, 사이트 이름을 입력하면 대응하는 HTML <head> 태그를 실시간으로 만들어 줍니다. <title>, meta 설명, 페이스북·링크드인 등 대부분의 링크 미리보기에서 쓰이는 오픈그래프 태그(og:title, og:description, og:url, og:image, og:site_name, og:type), 그리고 트위터 카드 태그(twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image)를 출력합니다. 오픈그래프는 고정된 목록이 아니라 유형이 있는 어휘라서 페이지 유형에서 12가지 유형(웹사이트, 글·기사, 책, 프로필, 음악 4종, 동영상 4종)을 고를 수 있고, 자체 속성을 가진 유형을 고르면 그 속성이 입력란으로 나타납니다 — 글·기사는 게시일·수정일·만료일·작성자·섹션·태그(태그는 쉼표마다 article:tag 하나씩), 책은 작성자·ISBN·출간일·태그, 프로필은 이름·성·사용자 이름·성별입니다. 미리보기 이미지에는 함께 가는 세 속성 og:image:alt, og:image:width, og:image:height가 og:image 바로 뒤에 붙습니다. 입력한 항목만 태그로 만들어지며, 모든 속성 값은 HTML 이스케이프되어 &, 따옴표, 꺾쇠 같은 특수문자도 유효하게 유지됩니다.
출력 결과 사용법
생성된 블록을 복사해 페이지의 <head> 안, 닫는 </head> 태그 위에 붙여 넣으세요. 미리보기 이미지는 절대 https:// URL을 사용하고(큰 카드에는 대략 1200×630 px가 잘 맞습니다), 설명은 검색 결과에서 잘리지 않도록 약 150–160자로 유지하는 것이 좋습니다. 큰 배너형 트위터 미리보기에는 summary_large_image, 작은 썸네일에는 summary를 선택하세요. 입력하는 동안 도구는 출력 아래에 흔한 실수도 짚어 줍니다 — 검색엔진에서 잘릴 만큼 긴 제목이나 설명, 너무 짧은 설명, 또는 소셜 크롤러가 해석할 수 있는 절대 https:// 링크가 아니라 상대 경로인 미리보기 이미지·URL 등입니다.
배포하기 전에 카드를 눈으로 확인
<meta> 열두 줄만 봐서는 내 제목이 구글에서 잘리는지 알 수 없습니다. 태그 블록 아래에서 같은 입력값을 Google, X, Facebook, LinkedIn, Pinterest, Slack이 그리는 대로 하나씩 보여 줍니다 — 구글은 이미지 없이 브레드크럼이 붙은 검색 결과로, X는 고른 카드 유형에 따라 배너 또는 정사각형 썸네일로, 링크드인은 피드 카드에 설명이 없으므로 설명 없이, 핀터레스트는 세로로 긴 핀으로, 슬랙은 언펄로 그립니다. 각 카드는 그 사이트가 자르는 지점에서 제목과 설명을 자르므로, 구글에서는 짧게 잘리는 제목이 X에서는 온전히 보이는 것을 눈으로 확인할 수 있습니다. 이미지는 입력한 주소에서 브라우저가 직접 불러오며 업로드되는 것은 없고, 열리지 않는 주소는 빈 틀로 표시됩니다. 글자가 잘리는 지점은 보는 사람의 화면에 따라 달라지므로 정확한 값이 아니라 근사치로 보아야 합니다.
자주 묻는 질문
어떤 메타 태그가 생성되나요?
페이지 제목, meta 설명, 오픈그래프 태그(og:title, og:description, og:url, og:image와 그 alt·width·height, og:site_name, og:type), 트위터 카드 태그(twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image)가 생성됩니다. og:type은 고른 오픈그래프 유형 12가지 중 하나이며(바꾸지 않으면 website), 글·기사·책·프로필을 고르면 article:published_time, book:isbn처럼 그 유형의 속성도 함께 생성됩니다. 비워 둔 항목의 태그는 생성되지 않습니다.
summary와 summary_large_image의 차이는 무엇인가요?
둘 다 흔히 쓰이는 트위터 카드 유형입니다. summary_large_image는 큰 배너형 미리보기 이미지를 보여 주고, summary는 텍스트 옆에 작은 정사각형 썸네일을 보여 줍니다. 이미지에 맞는 것을 선택하세요.
출력 아래의 경고는 무슨 뜻인가요?
SEO·소셜 공유를 위한 가벼운 점검입니다. 제목이 60자를 넘거나 설명이 160자를 넘으면 잘릴 수 있고, 설명이 50자 미만이면 대개 내용이 부족하며, og:image·og:url 값은 링크 미리보기가 해석되도록 절대 https:// URL이어야 하고, 이미지 너비·높이가 픽셀 정수가 아니면(예: 1200px) 조용히 사라지는 대신 태그에서 빠졌다고 알려 줍니다. 경고는 출력을 막지 않고 고칠 만한 점을 알려 줄 뿐입니다.
입력한 내용이 서버로 업로드되나요?
아니요. 태그는 브라우저 안에서 자바스크립트로 전부 생성됩니다. 제목, 설명, URL, 이미지 링크는 전송·저장·업로드되지 않습니다. 브라우저 밖으로 나가는 것은 미리보기 이미지 자체뿐인데, 이는 웹의 어떤 페이지가 그림을 불러오는 것과 같은 방식으로 입력한 주소에서 브라우저가 직접 불러오는 것입니다.
링크 미리보기가 어떻게 보이는지 볼 수 있나요?
네. 태그 블록 아래에서 같은 입력값을 구글·X·페이스북·링크드인·핀터레스트·슬랙이 그리는 대로 한 번에 하나씩 보여 줍니다. 사이트마다 다르게 그리는 점을 그대로 반영합니다 — 구글은 브레드크럼만 있고 이미지가 없으며, X는 고른 카드 유형을 따르고, 링크드인은 설명을 그리지 않고, 핀터레스트는 세로로 긴 핀입니다. 제목과 설명은 각 사이트가 자르는 지점에서 잘리므로 구글에서는 짧아지고 X에서는 온전한 제목을 눈으로 볼 수 있습니다. 잘리는 지점은 보는 사람의 화면에 따라 달라지므로 근사치로 보아야 합니다.
페이지 유형을 바꾸면 무엇이 달라지나요?
og:type이 달라지고, 폼에 나타나는 입력란이 달라집니다. 오픈그래프는 12가지 유형(웹사이트, 글·기사, 책, 프로필, 음악 4종, 동영상 4종)을 정의하며 일부는 자체 속성을 가집니다. 글·기사를 고르면 게시일·수정일·만료일·작성자·섹션·태그가, 책은 작성자·ISBN·출간일·태그가, 프로필은 이름·성·사용자 이름·성별이 추가됩니다. 각각 article:published_time처럼 자기 접두사 아래에 기록되고, 쉼표로 구분한 태그 목록은 태그마다 article:tag 하나씩으로 나뉩니다.