무료 변환기

OG 태그 발전기

Facebook, Twitter 및 LinkedIn에 대한 Open Graph 메타 태그를 생성합니다. 실시간 소셜 카드 미리보기가 포함된 무료 OG 태그 생성기.

0/95
0/200

페이스북 미리보기

YOURWEBSITE.COM
페이지 제목(최대 95자)
페이지에 대한 간략한 설명(최대 200자)

생성된 HTML

<!-- Open Graph Tags -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

이 도구에 대하여

오픈 그래프(OG) 태그는 소셜 플랫폼에서 공유될 때 페이지가 표시되는 방식을 제어합니다. Facebook, LinkedIn, Slack, Discord 등 많은 곳에서 OG 태그를 읽어 미리보기 카드를 구성합니다. 적절한 OG 태그가 없으면 공유 링크가 깨져 보입니다(일반 파비콘, 이미지 누락, 제목 잘림). 이를 통해 공유가 세련되게 보이고 클릭률이 크게 향상됩니다.

표준 OG 태그: og:title(미리보기에 표시되는 제목), og:description(텍스트 조각), og:image(미리보기 이미지, 이상적으로는 1200×630), og:url(표준 URL), og:type(일반적으로 '웹사이트' 또는 '기사'). 상단의 Twitter 카드 태그 레이어: twitter:card, twitter:title, twitter:description, twitter:image. Twitter 전용 태그가 없으면 대부분의 도구는 OG로 대체됩니다.

이 생성기는 입력에서 완전한 OG 및 Twitter 카드 태그 세트를 생성합니다. 결과 HTML을 페이지의 <head>에 붙여넣습니다. 그 결과 모든 주요 소셜 플랫폼에서 올바른 미리보기 렌더링이 이루어졌습니다.

OG 태그 생성기를 사용하는 이유

OG 태그가 없는 페이지는 공유 시 보기 좋지 않습니다. 빈 이미지, 일반적인 제목, 누락된 설명 — 미리보기는 피드에서 적절하게 태그가 지정된 페이지와 제대로 경쟁하지 않습니다. 콘텐츠 마케팅 및 링크 공유의 경우 이는 클릭률에 직접적인 영향을 미칩니다.

손으로 쓰는 OG 태그가 반복됩니다. 각 페이지에는 자체 세트가 필요합니다. 몇 가지 입력을 통해 올바른 태그를 생성하는 생성기는 소셜 미리보기를 방해하는 오타 및 누락된 속성을 방지합니다.

사용 방법

입력을 채우고 태그를 가져옵니다.

  1. 제목과 설명을 입력하세요: 공유 미리보기에 나타나는 내용입니다. 여러 플랫폼에서 깔끔하게 표시되도록 제목은 60자 미만, 설명은 200자 미만으로 유지하세요.
  2. 이미지 URL 제공: 1200×630픽셀이 표준 크기입니다. 절대 URL(https://example.com/og-image.png)을 사용하세요. 이미지는 공개적으로 액세스할 수 있어야 합니다. 인증된 이미지는 미리보기를 중단합니다.
  3. 표준 URL 설정: 페이지 자체의 URL입니다. og:url로 사용되며 플랫폼이 리디렉션 URL을 통해 공유되는 경우에도 표준 리소스를 식별하는 데 도움이 됩니다.
  4. 페이지 유형 선택: 일반 페이지용 웹사이트, 블로그 게시물 및 뉴스용 기사, 전자상거래용 제품. 일부 플랫폼이 미리보기를 렌더링하는 방식에 영향을 줍니다.
  5. 생성된 태그를 복사합니다.: 이 도구는 페이지의 <head>에 붙여넣을 수 있는 HTML 링크 태그를 생성합니다. CMS, 템플릿 엔진을 통해 또는 HTML로 직접 적용하세요.

일반적인 사용 사례

기술적인 세부사항

OG 태그는 메타 속성 속성(이름 아님)을 사용합니다: <meta property="og:title" content="..." />. OG에는 속성 속성이 필요합니다. 일부 파서는 이름을 대체 항목으로 허용하지만 속성은 정확합니다.

이미지 요구 사항: Retina 렌더링용 1200×630픽셀, 화면 비율 1.91:1. og:image:width 및 og:image:height 태그는 플랫폼이 이미지를 올바르게 캐시하는 데 도움이 됩니다. og:image:alt는 접근성 텍스트를 제공합니다.

Twitter 카드 태그는 이름 속성(<meta name="twitter:title" content="..." />)을 사용합니다. Twitter 관련 태그가 없으면 Twitter는 OG 태그로 대체되므로 잘 설정된 OG로 충분할 경우가 많습니다. twitter:card를 추가하면 카드 유형이 명시적으로 선택됩니다(summary_large_image가 가장 일반적임).

모범 사례

자주 묻는 질문

생성된 출력을 사용자 정의할 수 있나요?
예. 이 도구는 특정 요구 사항에 맞게 출력을 조정할 수 있는 다양한 사용자 정의 옵션을 제공합니다. 생성하기 전에 설정을 조정하거나 다른 옵션으로 재생성하세요.
생성된 콘텐츠는 무료로 사용할 수 있나요?
예. 이 도구를 사용하여 생성한 모든 항목은 제한이나 저작자 표시 요구 사항 없이 개인, 교육 또는 상업적 목적으로 사용할 수 있습니다.
계정이 필요합니까?
아니요. 이 도구는 가입이나 이메일, 등록 없이 즉시 사용할 수 있습니다. 페이지를 열고 생성을 시작하세요.
내 입력 데이터는 비공개로 유지되나요?
예. 모든 처리는 귀하의 브라우저에서 이루어집니다. 입력 데이터와 생성된 출력은 외부 서버로 전송되지 않습니다.
모든 페이지에 동일한 OG 이미지를 사용할 수 있나요?
가능하지만 차선책입니다. 페이지별 이미지는 클릭연결 측면에서 일반 사이트 전체 이미지보다 성능이 뛰어납니다. 대체에는 기본값을 사용하되 중요한 콘텐츠에 대해서는 페이지별 이미지를 생성합니다.
이미지 차원 선언이 필요합니까?
도움이 되지만 꼭 필요한 것은 아닙니다. og:image:width 및 og:image:height를 사용하면 크기를 결정하기 위해 다시 가져오지 않고도 플랫폼에서 이미지를 캐시할 수 있습니다. 후속 공유 속도를 높입니다.
내 데이터가 업로드되나요?
아니요. 생성은 브라우저에서 이루어집니다.
OG 태그를 어떻게 테스트하나요?
Facebook 공유 디버거, Twitter 카드 유효성 검사기 및 LinkedIn 게시물 검사기는 각각 가져오고 유효성을 검사합니다. 새 OG 태그를 배포한 후 사용하세요.