AnyTools
👁

열기 Graph 미리보기 도구

소셜 미디어 공유 카드를 위한 열기 Graph 메타 태그 미리보기 및 생성

메타 데이터 입력

제목
설명
이미지
URL

미리보기

페이지 제목페이지 설명이 여기에 표시됩니다example.com

생성된 메타 태그

❓열기 Graph 미리보기란

열기 Graph 미리보기 도구는 웹 페이지가 소셜 미디어에서 공유될 때 어떻게 표시되는지 시각화하고 테스트하는 도구입니다. 열기 Graph는 Facebook이 만든 프로토콜로 웹 페이지를 소셜 그래프의 리치 객체로 변환합니다. 메타 태그(og:제목, og:설명, og:image, og:url)를 통해 공유 카드의 모양을 제어합니다. 주요 기능: 실시간 공유 카드 미리보기(Facebook, Twitter, LinkedIn 등), 완전한 OG 태그 생성, 이미지 크기 검증, 태그 구문 검사, 다중 플랫폼 미리보기. 왜 중요한가: 적절한 OG 태그는 클릭률을 높이고, 브랜드 프레젠테이션을 개선하며, 소셜 미디어 참여를 증가시킵니다. 잘못된 태그는 깨진 이미지, 잘못된 제목 또는 누락된 설명을 초래합니다. 필수 태그: og:제목(제목), og:유형(유형 - 웹사이트/기사), og:image(이미지 URL - HTTPS, 1200x630px), og:url(표준 URL). 선택 태그: og:설명, og:site_name, og:locale, 이미지 메타데이터. 플랫폼별 태그: Twitter Cards(twitter:card, twitter:제목), Facebook 특정(fb:app_id). 이 도구는 OG 태그를 구성하고, 다양한 플랫폼에서 미리보고, 최적화를 위한 권장 사항을 제공합니다.

✨기능 특점

👁️

실시간 미리보기

여러 플랫폼에서 공유 카드가 어떻게 보이는지 미리보기
🏷️

완전한 OG 태그

모든 필수 및 권장 열기 Graph 태그 생성
📱

다중 플랫폼

Facebook, Twitter, LinkedIn 미리보기 지원
💾

태그 복사

생성된 메타 태그를 클립보드에 복사

📋사용 가이드

1️⃣
메타데이터 입력
콘텐츠의 제목, 설명, 이미지 URL 및 페이지 URL 입력
2️⃣
옵션 구성
열기 Graph 유형, 사이트 이름, Twitter 카드 유형 및 소셜 미디어 계정 설정
3️⃣
외관 미리보기
다양한 소셜 미디어 플랫폼에서 콘텐츠가 어떻게 표시되는지 확인
4️⃣
태그 생성 및 복사
메타 태그 코드를 생성하고 웹사이트의 <head> 섹션에 복사

📚기술 소개

🏗️열기 Graph 프로토콜

열기 Graph는 HTML <head>에 og: 접두사가 있는 메타 태그를 사용하여 페이지 메타데이터를 정의합니다. 핵심 속성에는 og:제목(페이지 제목), og:유형(콘텐츠 유형: 기사, 웹사이트, 비디오), og:image(미리보기 이미지 URL), og:url(표준 URL), og:설명(콘텐츠 요약)이 포함됩니다. 선택적 속성에는 og:site_name, og:locale, article:published_time, video:duration이 포함됩니다. 소셜 미디어 플랫폼은 URL이 공유될 때 이러한 태그를 파싱하여 리치 미리보기 카드를 만듭니다.

🐦Twitter Cards

Twitter Cards는 twitter: 접두사 태그로 열기 Graph를 확장하여 Twitter 특정 기능을 제공합니다. 4가지 카드 유형 제공: summary(기본값, 정사각형 이미지), summary_large_image(대형 직사각형 이미지), app(모바일 앱 프로모션), player(비디오/오디오 플레이어). twitter:card는 유형을 지정하고, twitter:site 및 twitter:creator는 Twitter @계정을 참조합니다. Twitter 특정 태그가 없으면 Twitter는 열기 Graph 태그로 폴백합니다.

📐이미지 요구 사항

다양한 플랫폼에는 특정 이미지 요구 사항이 있습니다: Facebook 권장 1200x630px(1.91:1 비율), 최소 200x200px, 최대 8MB; Twitter summary_large_image는 2:1 비율(권장 1200x600px), summary 카드는 1:1 비율(최소 144x144px); LinkedIn은 1200x627px(1.91:1); WeChat은 300x300px에서 1068x455px 요구. 이미지는 JPG, PNG 또는 WEBP 형식이어야 합니다. 폴백을 위해 여러 og:image 태그를 사용하세요.

🔍테스트 및 디버깅

플랫폼별 디버깅 도구는 열기 Graph 구현을 검증합니다: Facebook Sharing Debugger(https://developers.facebook.com/tools/debug/)는 Facebook이 페이지를 보는 방식을 표시하고 캐시를 지웁니다; Twitter Card Validator(https://cards-개발자.twitter.com/validator)는 Twitter 카드를 미리봅니다; LinkedIn Post Inspector(https://www.linkedin.com/post-inspector/)는 LinkedIn 공유를 테스트합니다. 이러한 도구는 누락된 태그, 이미지 로딩 문제를 식별하고 모범 사례 경고를 제공합니다.
❓

자주 묻는 질문

❓

열기 Graph란 무엇인가요?

열기 Graph는 Facebook이 개발한 프로토콜로 웹 페이지가 소셜 미디어에서 공유될 때 어떻게 표시되는지 제어합니다. og:제목, og:설명, og:image 등의 메타 태그를 사용합니다. 링크가 공유될 때 소셜 미디어 플랫폼(Facebook, Twitter, LinkedIn)은 이러한 태그를 읽어 리치 카드를 생성합니다. 적절한 OG 태그가 없으면 플랫폼이 임의의 콘텐츠를 선택할 수 있습니다.
💬

어떤 열기 Graph 태그가 필수인가요?

필수 OG 태그: og:제목(페이지 제목), og:유형(콘텐츠 유형 - 웹사이트, 기사 등), og:image(공유 이미지 URL), og:url(페이지의 표준 URL). 권장 태그: og:설명(페이지 설명), og:site_name(사이트 이름), og:locale(언어 - ko_KR, en_US). 이미지 태그: og:image:width, og:image:height, og:image:alt. 최소한 필수 4개 태그는 포함해야 합니다.
🔍

열기 Graph 이미지 요구 사항은?

Facebook: 최소 1200x630px, 권장 1200x630px(1.91:1 비율). Twitter: 최소 300x157px, 권장 1200x628px(2:1). LinkedIn: 최소 1200x627px. 파일 크기: <8MB(Facebook), <5MB(Twitter). 형식: JPG, PNG. 콘텐츠: 명확한 텍스트, 고대비, 브랜드 요소. 모든 플랫폼에는 1200x630px를 사용하세요. HTTPS URL을 사용해야 합니다.
💡

열기 Graph 태그를 어떻게 테스트하나요?

테스트 도구: Facebook Sharing Debugger(https://developers.facebook.com/tools/debug/), Twitter Card Validator(https://cards-개발자.twitter.com/validator), LinkedIn Post Inspector(https://www.linkedin.com/post-inspector/). 이러한 도구는 OG 태그를 스크랩하고 카드 미리보기를 표시하며 오류를 강조합니다. 변경 후 캐시를 새로 고칩니다. 이 도구는 배포 전에 로컬로 미리보기합니다.
📚

Twitter Cards와 열기 Graph의 차이점은?

열기 Graph는 Facebook이 만들었고 대부분의 플랫폼(Facebook, LinkedIn)에서 사용됩니다. Twitter Cards는 Twitter 전용입니다. Twitter는 OG 태그로 폴백하지만 Twitter Card 태그(twitter:card, twitter:제목)를 선호합니다. 모범 사례: 두 세트의 태그 모두 포함 - OG(광범위한 호환성) + Twitter Cards(Twitter 최적화). 이 도구는 두 가지 모두 미리보기합니다.

💡사용 방법

1️⃣

OG 태그 미리보기

웹사이트 URL을 입력하여 현재 열기 Graph 태그를 미리봅니다. 공유 카드가 Facebook, Twitter, LinkedIn에서 어떻게 보이는지 확인합니다. 누락되거나 잘못된 태그를 식별합니다.
2️⃣

OG 태그 생성

제목, 설명, 이미지 URL, 페이지 URL을 입력합니다. 도구가 완전한 OG 메타 태그를 생성합니다. HTML <head>에 태그를 복사하여 붙여넣습니다.
3️⃣

공유 카드 최적화

다양한 제목, 설명, 이미지로 실험합니다. 미리보기에서 카드가 어떻게 보이는지 확인합니다. 클릭률을 높이기 위해 최적화합니다. 이미지가 1200x630px인지 확인합니다.
4️⃣

다중 플랫폼 테스트

Facebook, Twitter, LinkedIn 미리보기를 확인합니다. 각 플랫폼이 태그를 다르게 표시합니다. 모든 플랫폼에서 카드가 잘 보이는지 확인합니다.
5️⃣

SEO 및 소셜 최적화

OG 태그를 SEO 메타 태그와 결합합니다. 제목과 설명이 SEO 및 소셜과 일치하는지 확인합니다. 소셜 미디어 참여를 위해 최적화합니다.

🔗Related Documents

📖열기 Graph 프로토콜-공식 열기 Graph 프로토콜 사양
🔧Facebook Sharing Debugger-Facebook의 공식 OG 태그 테스트 도구
🐦Twitter Cards 문서-Twitter 카드 메타 태그 가이드
💼LinkedIn Post Inspector-LinkedIn 공유 미리보기 도구
📚소셜 미디어 이미지 크기 가이드-모든 플랫폼의 이미지 크기 요구 사항

📝업데이트 로그

📌v1.11.251102
v1.0.251026열기 Graph 미리보기 도구 생성; 다중 플랫폼 미리보기 지원(Facebook, Twitter, LinkedIn); 실시간 메타 태그 생성; 이미지 검증 및 크기 확인; 완전한 열기 Graph 및 Twitter Card 태그 생성; 원클릭 복사 및 검증 기능(2025-10-26)

📦추천 구성 요소

User Comments

0 / 2000
Loading...