OG 메타 태그 생성기 - Open Graph 및 트위터 카드 미리보기
Open Graph와 Twitter Card 메타 태그를 시각 미리보기와 함께 생성. Facebook, X(Twitter), LinkedIn 공유 모습 확인.
자주 묻는 질문
Open Graph 메타 태그란 무엇인가요?
Open Graph(OG) 메타 태그는 Facebook, Twitter, LinkedIn, Slack 등 소셜 미디어 플랫폼에서 URL이 공유될 때 표시되는 방식을 제어하는 HTML 메타 요소입니다. 2010년 Facebook에서 처음 개발되었으며, 현재 소셜 공유 메타데이터의 표준이 되었습니다. 주요 태그로는 og:title, og:description, og:image, og:url 등이 있습니다. 이러한 태그가 없으면 소셜 플랫폼이 자동으로 정보를 추출하여 부정확하거나 보기 좋지 않은 미리보기가 생성될 수 있습니다.
이 OG 메타 생성기는 어떻게 사용하나요?
Open Graph 필드에 페이지의 제목, 설명, 이미지 URL, 페이지 URL을 입력하세요. 적절한 콘텐츠 유형(웹사이트, 기사, 제품 등)을 선택합니다. 선택적으로 Twitter Card 필드를 커스터마이징할 수 있으며, 기본적으로 OG 값이 상속됩니다. 실시간 미리보기에서 Facebook, Twitter, LinkedIn, Slack에서 링크가 어떻게 보이는지 확인하세요. 원하는 내보내기 형식(HTML, Next.js, Nuxt/Vue)을 선택하고 코드 복사를 클릭하여 페이지의 head 섹션에 붙여넣으세요.
데이터는 안전한가요? 서버로 전송되나요?
모든 메타 태그 생성과 미리보기 렌더링은 JavaScript를 사용하여 브라우저에서 100% 클라이언트 측으로 수행됩니다. 페이지 제목, 설명, URL, 이미지 참조 등이 서버로 전송되지 않습니다. 이 도구는 완전히 브라우저에서 작동하므로, 미출시 제품 페이지, 기밀 마케팅 캠페인, 사전 출시 콘텐츠에도 안전하게 사용할 수 있습니다.
Open Graph 태그와 Twitter Card 태그의 차이점은 무엇인가요?
Open Graph 태그(property="og:..." 사용)는 Facebook, LinkedIn, WhatsApp, Slack 및 대부분의 플랫폼에서 사용하는 범용 표준입니다. Twitter Card 태그(name="twitter:..." 사용)는 Twitter/X에 특화되어 트윗에서 링크가 표시되는 방식을 추가로 제어합니다. Twitter는 Twitter 전용 태그가 없으면 Open Graph 태그로 대체합니다. 모범 사례는 두 가지를 모두 포함하는 것입니다: 광범위한 플랫폼 지원을 위한 OG 태그와 Twitter 전용 맞춤 설정을 위한 Twitter Card 태그.
소셜 미디어 공유에 어떤 이미지 크기를 사용해야 하나요?
Open Graph(Facebook, LinkedIn)에 권장되는 이미지 크기는 1200 x 630 픽셀입니다. Twitter 큰 이미지 요약 카드의 경우 1200 x 628 픽셀(약 2:1 비율)을 사용하세요. Twitter 요약 카드(소형)의 경우 최소 120 x 120 픽셀(1:1 비율)이 필요합니다. 일부 플랫폼에서 HTTP 이미지를 거부하거나 우선순위를 낮추므로 항상 HTTPS URL을 사용하세요. 이미지는 대부분의 플랫폼에서 5MB 미만이어야 합니다.
메타 태그를 추가한 후 소셜 미디어 미리보기가 업데이트되지 않는 이유는 무엇인가요?
소셜 플랫폼은 링크 미리보기를 적극적으로 캐시합니다. 메타 태그를 추가하거나 업데이트한 후에는 각 플랫폼의 공식 디버거를 사용하여 캐시를 삭제해야 합니다: Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector. URL을 이 도구에 붙여넣으면 페이지의 메타데이터를 다시 가져옵니다.
코드 예제
// Generate OG and Twitter Card meta tags
function generateMetaTags({ title, description, image, url, type = 'website', twitterCard = 'summary_large_image' }) {
const escape = (s) => s.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
const tags = [];
if (title) tags.push(`<meta property="og:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta property="og:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta property="og:image" content="${escape(image)}" />`);
if (url) tags.push(`<meta property="og:url" content="${escape(url)}" />`);
tags.push(`<meta property="og:type" content="${escape(type)}" />`);
tags.push(`<meta name="twitter:card" content="${escape(twitterCard)}" />`);
if (title) tags.push(`<meta name="twitter:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta name="twitter:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta name="twitter:image" content="${escape(image)}" />`);
return tags.join('\n');
}
console.log(generateMetaTags({
title: 'My Page',
description: 'A great page about something.',
image: 'https://example.com/image.jpg',
url: 'https://example.com'
}));