Softonic

Open Graph 태그 생성기

단계 1 / 2
다음

제목, 설명, 표준(canonical) URL, 미리보기 이미지, og:type을 입력하면 이 생성기가 대응하는 Open Graph <meta> 태그를 작성하여 페이지의 <head>에 붙여넣을 수 있게 해줍니다. 비워 둔 필드는 그냥 생략되고, 텍스트의 따옴표와 앰퍼샌드는 마크업이 유효하게 유지되도록 escape 처리됩니다. 이 생성기는 핵심 og: 속성 다섯 개만 작성하며, Twitter Card나 article 태그는 작성하지 않습니다.

OG 태그를 만드는 방법

  1. 1

    og:type 선택

    홈페이지에는 website, 게시물에는 article, 쇼핑 페이지에는 product, 임베드에는 video.other를 사용하세요. 이 필드는 자유 텍스트이므로 유효한 og:type 값이면 무엇이든 동작합니다.

  2. 2

    핵심 필드 입력

    제목, 설명, 표준 URL, 그리고 절대 경로 이미지 URL. 비워 둔 필드는 결과에서 제외됩니다.

  3. 3

    태그 생성

    따옴표와 앰퍼샌드는 자동으로 escape 처리되며, 입력한 필드마다 meta 한 줄씩 생성됩니다.

  4. 4

    블록을 head에 복사

    페이지 템플릿의 `<head>` 안, 이미 있는 소셜 태그 위에 붙여넣으세요.

이 생성기가 만드는 태그

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

이것이 전체 출력입니다. og:type은 항상 작성되고, og:title, og:description, og:url, og:image는 입력했을 때만 추가됩니다. 이 다섯 개 속성은 Facebook, LinkedIn, Slack, Discord, WhatsApp, X가 가장 먼저 읽는 것이므로 일반적인 경우를 충분히 다룹니다.

이 생성기는 twitter: 카드 태그, og:image:width / og:image:height, og:site_name, og:locale, article: 태그는 작성하지 않습니다. 필요하다면 생성된 블록 옆에 직접 추가하세요.

중요한 og:type 값

유형 사용 시점
website 홈페이지, 랜딩 페이지, 정적 콘텐츠
article 블로그 글, 뉴스, 사설 페이지
product 이커머스 제품 상세 페이지
video.other 동영상 콘텐츠 및 임베드
profile 저자 또는 사용자 프로필 페이지
music.song 개별 트랙 페이지

직접 추가할 만한 태그

태그 하는 일 예시 값
og:site_name 사이트 전체의 이름 Example
og:locale 페이지의 언어와 지역 en_US
og:image:width 스크레이퍼가 카드를 더 빨리 배치하도록 도움 1200
og:image:height 스크레이퍼가 카드를 더 빨리 배치하도록 도움 630
twitter:card X에서의 카드 레이아웃 summary_large_image

X는 twitter: 태그가 없을 때 og: 태그로 대체하므로, 생성된 다섯 속성만 담은 페이지도 그곳에서 올바르게 미리보기됩니다. 특별히 X에서 다른 제목, 설명, 이미지를 원할 때만 twitter: 태그를 추가하세요.

이 생성기가 피하도록 돕는 흔한 실수

  • property 대신 name. Open Graph 속성은 property="og:..."에 들어갑니다. 이 생성기는 항상 올바른 속성을 작성합니다.
  • escape 처리되지 않은 따옴표와 앰퍼샌드. 제목에 있는 날것의 "나 &는 태그를 깨뜨립니다. 이 생성기가 대신 escape 처리합니다.
  • 상대 경로 이미지 URL. 소셜 스크레이퍼는 절대 URL만 허용합니다. 생성기가 도메인을 붙여 주지 않으므로 이미지의 전체 https:// 주소를 붙여넣으세요.
  • 잘못된 이미지 크기. 1200 × 630 px가 보편적으로 안전한 크기입니다. 200 × 200 px보다 작으면 이미지가 대개 거부됩니다.

자주 묻는 질문

HTML의 <head> 안, 위쪽에, 되도록 <title> 근처에 넣으세요. 스크레이퍼는 head를 읽다가 종종 일찍 멈추므로, OG 태그를 위쪽에 두면 매우 큰 페이지에서 누락되는 것을 막을 수 있습니다.

아니요. 핵심 og: 속성 다섯 개만 작성합니다. X는 twitter: 태그가 없으면 Open Graph로 대체하므로 미리보기는 그대로 동작합니다. X에서 다른 제목, 설명, 이미지를 원할 때만 twitter: 태그를 직접 추가하세요.

1200 × 630 px의 JPG 또는 PNG가 보편적으로 안전한 크기입니다. Facebook, LinkedIn, X 대형 카드, Slack, Discord, iMessage에서 동작합니다. 200 × 200 px보다 작으면 완전히 거부될 위험이 있습니다.

각 언어 버전마다 자체 og: 태그를 가진 자체 페이지를 두고, og:locale(예: en_US)과 다른 버전을 위한 og:locale:alternate를 직접 추가하세요. 이 생성기는 locale 태그를 대신 작성하지 않습니다.

관련 도구

메타 설명 길이 확인기

메타 설명의 문자 수와 예상 픽셀 너비를 측정하고 편집 기준 및 데스크톱·모바일 레이아웃 예시와 비교하세요.

외부 링크 추출기

원시 HTML을 붙여넣고 필요에 따라 기본 URL을 지정하면, 코드에 포함된 모든 외부 http/https 링크를 중복 없이 정리된 목록으로 제공합니다. 링크 감사와 SEO 검토에 유용합니다.

FAQ 스키마 생성기

질문과 답변 쌍으로 FAQPage JSON-LD 마크업을 생성해 Google의 리치 결과와 답변 상자 노출 자격을 얻으세요.

Google SERP 시뮬레이터

모바일과 데스크톱의 글자 수 제한으로 Google 스타일 검색 스니펫을 대략 확인하세요. 초안은 이 브라우저 세션에만 남습니다.

HTTP 보안 헤더 검사기

HTTP 응답 헤더를 붙여넣고 HSTS, CSP, 클릭재킹, MIME, 리퍼러, 교차 출처 정책을 브라우저에서 점검하세요.

hreflang 검사기

붙여 넣은 HTML의 hreflang을 로컬에서 검사합니다. 코드, 전체 URL, 중복, 위치와 선택적 자기 참조를 확인하세요.

이 도구는 다른 언어로도 제공됩니다