메타태그·OG 생성기

제목·설명·OG·트위터 카드 메타태그를 생성합니다.

메신저나 SNS에 링크를 붙였는데 썸네일도 설명도 없이 주소만 덩그러니 남은 적이 있을 겁니다. 대부분 페이지에 오픈그래프(OG) 태그가 없어서 생기는 일입니다.

이 도구는 제목·설명·주소·대표 이미지 같은 기본 정보 몇 개만 받아, 검색엔진용 태그와 SNS 미리보기용 태그를 한 덩어리로 만들어 줍니다. 입력하는 즉시 아래 상자의 결과가 갱신되고, 복사 버튼으로 그대로 가져갈 수 있습니다.

어떻게 계산되나요

어떤 태그가 만들어지나

입력한 값이 여러 규격의 태그로 동시에 퍼집니다.

입력 항목반영되는 태그
페이지 제목title, og:title, twitter:title
설명(description)meta description, og:description, twitter:description
페이지 URLlink canonical, og:url
대표 이미지 URLog:image, twitter:image
사이트 이름og:site_name
트위터 계정(@)twitter:site

이와 별개로 og:type은 website, twitter:card는 큰 이미지 형식(summary_large_image)으로 항상 들어갑니다. 비워 둔 항목은 해당 줄이 아예 출력되지 않으므로, 쓰지 않을 값은 빈칸으로 두면 됩니다.

값을 넣을 때 지킬 것

  • 페이지 URL과 이미지 URL은 https부터 시작하는 전체 주소로 적습니다. /img/og.jpg 같은 상대경로는 SNS가 읽지 못합니다.
  • 대표 이미지는 가로로 넓은 형태가 안전하며 1200×630픽셀 정도가 널리 쓰입니다.
  • 설명은 페이지 내용을 요약한 한두 문장으로 쓰고, 핵심을 앞쪽에 둡니다.

붙여 넣는 위치

만들어진 코드는 HTML 문서 맨 위 head 영역 안에 넣습니다. 이미 title이나 description 태그가 있다면 중복되지 않도록 기존 것을 지우고 교체하세요. 태그를 고쳐도 SNS가 예전 미리보기를 저장해 두고 있어 바로 반영되지 않을 수 있는데, 이때는 각 서비스가 제공하는 캐시 초기화·공유 디버거 도구로 다시 읽게 하면 됩니다.

용어 정리

오픈그래프(OG)
링크 미리보기를 위해 페이스북이 정한 규격. 카카오톡·네이버 등 국내 서비스도 이 규격을 함께 참고합니다.
canonical
같은 내용이 여러 주소로 열릴 때 어느 쪽이 원본인지 알려 주는 태그입니다. 중복 색인을 줄이는 데 씁니다.
twitter:card
X(트위터)에서 링크를 어떤 모양으로 보여줄지 정하는 값. 이 도구는 큰 이미지 형식으로 고정 출력합니다.
og:site_name
개별 글 제목과 별개로 사이트 전체의 이름을 알려 주는 값입니다.
description
검색결과에서 제목 아래에 보이는 설명문. 순위 자체보다 클릭 여부에 영향을 줍니다.

자주 묻는 질문

태그는 어디에 붙여넣나요?

HTML 문서 맨 위의 head 영역 안에 넣습니다. 이미 title이나 description 태그가 있다면 중복되지 않게 기존 것을 지우고 교체하세요. body 안에 넣으면 검색엔진과 SNS가 인식하지 못할 수 있습니다.

메신저에서 썸네일이 안 바뀌어요

각 서비스는 한 번 읽어 간 미리보기 정보를 일정 기간 저장해 둡니다. 태그를 고친 뒤에도 예전 이미지가 보인다면 카카오 디벨로퍼스의 캐시 초기화나 페이스북 공유 디버거 같은 도구로 해당 주소를 다시 읽게 하면 됩니다.

대표 이미지 크기는 어떻게 정하나요?

가로로 넓은 직사각형이 안전하며 1200×630픽셀 정도가 널리 쓰입니다. 너무 작은 이미지는 작은 정사각형으로 표시되거나 미리보기에서 아예 빠질 수 있습니다.

설명은 몇 글자가 적당한가요?

검색결과에 보이는 길이는 기기와 검색어에 따라 달라져 정답이 정해져 있지는 않습니다. 대체로 한글 80자 안팎이면 잘리지 않고 보이는 편이며, 앞부분에 핵심을 먼저 쓰는 것이 안전합니다.

메타태그만 넣으면 검색 순위가 오르나요?

메타태그는 페이지가 무엇인지 검색엔진과 SNS에 정확히 알려 주는 역할이지, 순위를 직접 올려 주는 장치는 아닙니다. 다만 제목과 설명이 정리되면 검색결과 클릭률과 공유 시 보이는 모양에는 차이가 납니다.