모든 도구
가입 불필요 무료
개발 도구
Meta Tag Generator
제목, 설명, URL만 입력하면 SEO·Open Graph·Twitter 카드 메타 태그를 한 번에 만들어 드립니다. 완성된 코드를 복사해 <head>에 붙여넣으세요.
<!-- Primary Meta Tags --> <title>나의 멋진 프로젝트</title> <meta name="title" content="나의 멋진 프로젝트" /> <meta name="description" content="개발자를 위한 최고의 도구를 만듭니다" /> <link rel="canonical" href="https://example.com" /> <!-- Open Graph / Facebook --> <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:locale" content="ko_KR" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://example.com" /> <meta name="twitter:title" content="나의 멋진 프로젝트" /> <meta name="twitter:description" content="개발자를 위한 최고의 도구를 만듭니다" />
관련 도구
자주 묻는 질문
- 공개 전 페이지를 검색 결과에서 숨길 수 있나요?
- 네. 색인 허용을 해제하면 noindex, nofollow robots 메타 태그를 생성합니다. 공개 후 검색 노출이 필요하면 반드시 다시 허용으로 바꾸세요.
- 메타 태그는 어디에 붙여넣나요?
- 생성된 코드를 HTML 문서의 <head> 태그 안에 붙여넣으면 됩니다. Next.js라면 Metadata API, Nuxt라면 useHead 등 프레임워크별 메타 태그 설정 방식을 사용하는 것이 더 좋습니다.
- og:image에는 어떤 이미지를 넣어야 하나요?
- 1200×630 크기의 PNG 또는 JPG를 절대 URL로 넣는 것이 표준입니다. 이미지가 없다면 성구툴의 OG Image Generator로 바로 만들 수 있습니다.
- twitter:card의 summary와 summary_large_image 차이는 뭔가요?
- summary_large_image는 트윗에 큰 가로형 이미지 카드로, summary는 작은 정사각형 썸네일 카드로 표시됩니다. 일반적인 웹사이트·블로그는 summary_large_image를 권장합니다.
- 메타 태그가 잘 적용됐는지 어떻게 확인하나요?
- 배포 후 성구툴의 OG Preview에 URL을 입력하면 Open Graph·Twitter 카드가 어떻게 보이는지 바로 확인할 수 있습니다.