Open Graph 메타 태그 생성기

웹사이트용 Open Graph 및 소셜 HTML 메타 태그를 생성합니다.

Open Graph와 Twitter 카드 메타 태그를 입력 항목으로 만들어 줍니다. 페이지 유형(website, article, book, profile, music, video)에 맞는 추가 항목도 함께 채울 수 있습니다.

사용 순서

유형 드롭다운에서 페이지 종류를 고릅니다.
General information 카드의 제목, 설명, 주소 같은 공통 항목을 입력합니다. Image와 Twitter 카드도 함께 있습니다.
유형에 맞는 추가 카드(예: Article 카드의 Publishing date)를 채웁니다.
오른쪽 결과의 HTML을 복사해 페이지의 head 안에 붙입니다.

예시

유형을 website로 두고 제목에 Hello를 입력하면 <meta property="og:title" content="Hello" /> 줄이 나옵니다. 제목에 큰따옴표나 &, <가 있으면 ", &, <로 바뀌어 태그가 깨지지 않습니다.

한계

생성되는 태그는 Open Graph와 Twitter 크롤러가 읽는 content 속성을 씁니다. 값의 큰따옴표, 앰퍼샌드, 여는 꺾쇠(<)는 HTML 엔티티로 바뀌지만 다른 문자는 그대로 나옵니다. 이미지 주소가 실제로 있는지, 크기가 맞는지는 검사하지 않습니다.

보안 주의

소셜 플랫폼은 공유 미리보기를 캐시하므로, 스테이징이나 로컬 주소를 og:url에 넣으면 그 값이 오래 남을 수 있습니다. 공개 전에 url과 image가 실제 운영 주소인지 확인하고, 비공개 페이지의 설명 문구는 넣지 마세요.

배경 지식

Open Graph 프로토콜은 페이지가 제목, 설명, 대표 이미지, 종류를 메타 태그로 알려 주도록 정한 규칙입니다. 메신저, 게시판, 검색 결과가 링크를 미리 보여 줄 때 이 태그를 읽습니다. og:title, og:description, og:image, og:url이 기본이고, article이나 video처럼 유형별로 추가 속성이 있습니다. 태그가 없으면 플랫폼이 본문에서 임의로 골라 보여 주므로 미리보기가 들쭉날쭉해집니다.

Twitter 카드는 og 태그와 별도로 twitter:card 같은 이름 속성을 씁니다. 플랫폼마다 어느 쪽 값을 읽는지 다르므로, 두 세트를 함께 넣어 두면 플랫폼이 어느 쪽을 읽든 같은 값을 보게 됩니다. 이미지 권장 크기는 바뀌기도 하므로, 실제 미리보기는 각 플랫폼이 제공하는 검사 도구로 확인해야 합니다.

자주 묻는 질문

og:image 주소를 상대 경로로 써도 되나요?

권장되지 않습니다. 크롤러는 메타 태그의 주소를 페이지와 별개로 요청하므로 https://로 시작하는 절대 주소를 쓰는 것이 안전합니다. 이 도구는 입력값을 검사하지 않으므로 직접 확인해야 합니다.

유형을 바꾸면 이전 입력값은 어떻게 되나요?

유형을 바꾸면 이전 유형의 항목이 빈 값으로 초기화됩니다. 다시 돌아가도 입력값이 복원되지 않으므로, 여러 유형의 태그가 필요하면 결과를 먼저 복사해 두세요.

description은 몇 글자가 적당한가요?

플랫폼마다 표시 길이가 다르지만 100자 안팎에서 잘리는 경우가 많습니다. 핵심 내용을 앞쪽에 두고, 실제 페이지와 다른 과장된 문장은 피하세요.