무료 메타 태그 & Open Graph 생성기

사용 방법

모든 태그 조합과 head 파싱은 브라우저에서 직접 이루어지며 서버는 관여하지 않습니다. 도구는 React의 useMemo로 HTML 문자열을 반응형으로 만들고, 가져오기/검사 기능에서는 브라우저 기본 DOMParser API로 기존 페이지 마크업을 읽습니다.

1. 1
   폼 입력으로 실시간 조합

   입력하는 즉시 useMemo 훅이 전체 태그 블록(제목, 메타 설명, Open Graph 속성, Twitter Card 속성)을 다시 조합하며, 특수 문자(&, <, >, ")를 이스케이프해 출력을 HTML에 바로 붙여 넣어도 안전하게 합니다.
2. 2
   브라우저 URL 생성자로 URL 검증

   각 URL 입력란(페이지 URL, 소셜 이미지)은 브라우저 내장 URL 생성자로 검증됩니다. 점이 포함된 호스트 이름을 가진 올바른 http:// 또는 https:// 주소만 통과하며, 잘못된 값은 복사 버튼을 막고 인라인 오류를 표시합니다.
3. 3
   가져오기: DOMParser가 기존 head 마크업을 읽음

   기존 <head> HTML을 붙여 넣어 검사하면 도구가 이를 비활성 모드의 DOMParser로 처리합니다. 스크립트는 실행되지 않고 네트워크 요청도 없습니다. 그런 다음 파싱된 문서에서 알려진 메타 선택자(og:title, twitter:description, canonical 링크 등)를 찾아 발견한 값으로 폼 입력란을 미리 채웁니다.
4. 4
   실시간 Google 및 소셜 카드 미리보기

   도구는 같은 폼 상태로 스타일이 적용된 Google 검색 결과와 Open Graph 카드 미리보기를 실시간으로 렌더링하므로, 출력을 복사하기 전에 제목과 설명이 정확히 어떻게 잘리는지 볼 수 있습니다.

관련 도구