메타 태그 & OpenGraph 생성기

검색 엔진(SEO)과 페이스북, 트위터 같은 소셜 미디어 사이트에서 웹페이지가 잘 보이도록 HTML 메타 태그를 손쉽게 생성하세요.

웹사이트 정보 입력

생성된 HTML 태그

정보를 입력하면 여기에 메타 태그가 생성됩니다.

최신 SEO 메타 태그 최적화 가이드

내 웹사이트를 구글이나 카카오톡, 트위터에 공유했을 때 보이는 썸네일 카드, 설명문 등을 아름답고 표준에 맞게 생성하세요.

메타(Meta) 태그 및 오픈 그래프의 역할

홈페이지의 HTML 소스코드 `<head>` 블록 안에 삽입되는 안내 문구와 같습니다. 구글 검색 로봇은 `document.title` 과 `meta description`을 읽어 사용자에게 보여줄 검색 결과 요약문을 결정합니다. 또한 페이스북이 만든 오픈 그래프(`og:title`, `og:image`) 프로토콜은 채팅창이나 타임라인에 링크를 공유했을 때 뜨는 큰 썸네일 박스를 활성화시켜 사용자의 클릭률을 크게 유도합니다.

입력값 작성 시 유의점

제목(Title)은 약 50~60자 내외로 자르지 않고 직관적인 키워드를 넣는 것이 좋으며, 설명문(Description)은 보통 150자 미만으로 핵심 가치를 압축해 전달하세요. 썸네일 이미지(Image URL)는 1200 x 630 해상도를 갖춘 비율(약 1.9:1)의 명확한 브랜딩 에셋 이미지의 절대 주소를 사용하는 것이 모범적입니다.

추가 꿀팁

가장 최근에는 트위터(`twitter:card`) 뿐만 아니라 카카오톡 전용 스크랩 정보도 파싱되므로, 해당 생성기에서 배포해 주는 통일된 코드를 복사하여 Next.js/React 웹사이트 루트 스킨에 붙여 넣기만 하더라도 소셜 플랫폼 확산력을 바로 높일 수 있습니다.