← Blog

Open Graph란 무엇인가요? 완전한 초보자 가이드

소셜 미디어에 링크를 공유합니다. 예고편은 정말 끔찍한 것 같습니다. 그 이유와 Open Graph 태그를 사용하여 문제를 해결하는 방법은 다음과 같습니다.

링크가 실제로 어떻게 보이는지 보고 싶으십니까?

Proovd로 Open Graph 태그를 무료로 확인하세요. 공유하기 전에 URL을 붙여넣고 X, LinkedIn, Slack, Discord, WhatsApp 및 Reddit에서 미리보기를 확인하세요.

빠른 답변

  • Open Graph는 소셜 미디어에서 링크가 표시되는 방식을 제어하는 ​​HTML 메타 태그 세트입니다.
  • 핵심 태그: og:title, og:description, og:image, og:url
  • OG 태그가 없으면 플랫폼은 추측하고 추측은 잘못됩니다.
  • 전체 범위를 보장하려면 OG 태그 + Twitter Card 태그를 설정하세요.

Open Graph 실제로는 무엇인가요?

Open Graph는 2010년 Facebook가 개발한 프로토콜입니다. Open Graph 이전에는 누군가가 Facebook에서 링크를 공유하면 미리보기를 예측할 수 없었습니다. Facebook는 이미지와 텍스트를 찾기 위해 페이지를 긁어냈고 결과는 무작위인 경우가 많았습니다. 때로는 작은 파비콘, 때로는 페이지의 무작위 사진, 때로는 아무것도 없는 경우도 있었습니다.

Facebook는 다음과 같이 말했습니다. "웹마스터에게 무엇을 표시할지 알려주는 표준 방법을 제공합시다." 그들은 모든 웹사이트가 HTML에 추가할 수 있는 일련의 메타 태그를 도입했습니다. 다른 플랫폼(X, LinkedIn, Slack, Discord, WhatsApp, Reddit)도 동일한 표준을 채택했습니다. 현재 Open Graph는 인터넷 링크 미리보기의 보편적인 언어입니다.

그것은 당신이 설치하는 기술이 아닙니다. 페이지의 섹션에 있는 HTML 메타 태그일 뿐입니다. 그게 다야.

코어 Open Graph 태그

소셜 미디어에서 공유되는 모든 페이지에는 최소한 다음 네 가지 태그가 있어야 합니다.

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

각각의 작업은 다음과 같습니다.

og:type(일반적으로 "웹사이트" 또는 "기사"), og:site_name(브랜드 이름), og:locale(언어)와 같은 추가 선택 태그가 있습니다. 그러나 위의 네 가지는 링크 미리보기에 가장 중요한 것입니다.

Open Graph 작동 방식 — 단계별

누군가 링크를 공유하면 다음과 같은 일이 발생합니다.

  1. 누군가가 URL을 X, LinkedIn, Slack, Discord 등 어디에나 붙여넣습니다.
  2. 플랫폼의 봇이 URL을 가져오고 HTML을 위에서 아래로 읽습니다.
  3. 섹션에서 og: taggeds를 찾습니다.
  4. og:title, og:description 및 og:image 값을 사용하여 미리보기 카드를 만듭니다.
  5. 카드는 공유 링크를 보는 모든 사람에게 표시됩니다.

플랫폼이 og: 태그를 찾지 못하면 자체 경험적 방법(임의의 이미지 선택, </code> 태그 사용 등)으로 대체됩니다. 이러한 대체 동작으로 인해 많은 공유 링크가 끔찍해 보입니다.</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph 대 Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>트위터는 Open Graph가 존재하기 전에 "Twitter Cards"라는 자체 태그 시스템을 만들었습니다. Twitter Cards 대신 <code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> 및 <code>twitter:image</code> 속성을 사용하세요. <code>og:</code> 접두사.</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>오늘날 대부분의 플랫폼은 두 가지를 모두 지원합니다. 하지만 X/Twitter는 여전히 OG 태그보다 <code>twitter:card</code> 태그를 선호합니다. 그렇기 때문에 가장 좋은 방법은 <strong>둘 다</strong>를 설정하는 것입니다.</p> <pre><code><!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) --> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" /> <!-- Twitter/X (works on X/Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">이것이 귀하의 웹사이트에 중요한 이유</h2> <p data-i18n="b.what-is-open-graph.35">웹사이트가 있는 경우 소셜 미디어 어디에서나 콘텐츠를 공유하는 경우 링크 미리 보기가 첫인상을 결정합니다. 명확한 제목, 설득력 있는 설명, 좋은 이미지로 잘 만들어진 미리보기는 클릭률을 크게 높입니다.</p> <p data-i18n="b.what-is-open-graph.36">깨진 미리보기(이미지 누락, 잘린 제목, 잘못된 설명)는 콘텐츠를 전문적이지 않게 보이게 합니다. 사람들은 그것을 지나서 스크롤합니다.</p> <p data-i18n="b.what-is-open-graph.37">Open Graph 태그는 둘의 차이점입니다. 설정하는 데 5분이 걸리며 소셜 미디어에서 콘텐츠의 성능에 불균형적인 영향을 미칩니다.</p> <h2 data-i18n="b.what-is-open-graph.38">빠른 체크리스트</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>모든 페이지에 <code>og:title</code>, <code>og:description</code>, <code>og:image</code>, <code>og:url</code>를 추가하세요.</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>X/Twitter 호환성을 위해 <code>twitter:card</code> 및 <code>twitter:image</code>를 추가하세요.</li> <li data-i18n="b.what-is-open-graph.41">이미지 크기를 1200×630픽셀로 설정</li> <li data-i18n="b.what-is-open-graph.42">모든 이미지 경로에 절대 URL(https://...))을 사용하세요.</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html><a href="https://proovd.in/ko/">Proovd</a>로 테스트하여 페이지가 모든 플랫폼에서 어떻게 보이는지 확인하세요.</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">자주 묻는 질문</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">소셜 미디어에 공유하지 않는 경우 Open Graph 태그가 필요합니까?</h3> <p data-i18n="b.what-is-open-graph.46">링크를 어디에서나 공유하지 않으면 필요하지 않습니다. 하지만 웹사이트가 있고 소셜 미디어에 한 번이라도 공유한다면 OG 태그는 필수입니다.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">Open Graph 태그가 Google 순위에 영향을 미치나요?</h3> <p data-i18n="b.what-is-open-graph.48">직접적으로는 아닙니다. Google은 OG 태그를 순위 요소로 사용하지 않습니다. 그러나 검색 결과 및 소셜 공유의 클릭률에 영향을 미칠 수 있으며 이는 트래픽과 가시성에 간접적으로 영향을 미칩니다.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">페이지마다 다른 OG 태그를 설정할 수 있나요?</h3> <p data-i18n="b.what-is-open-graph.50">예. 각 페이지에는 해당 콘텐츠와 일치하는 자체 OG 태그가 있어야 합니다. 개에 관한 블로그 게시물은 고양이에 관한 페이지와 og:title 및 og:image가 달라야 합니다.</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">관련 기사</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/ko/blog/discord-link-preview-not-working">Discord 링크 미리보기가 작동하지 않나요? 시도해 볼 수 있는 7가지 수정 사항(2026년)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/ko/blog/how-to-add-open-graph-tags">웹사이트</a>에 Open Graph 태그를 추가하는 방법</li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/ko/blog/open-graph-vs-twitter-card">Open Graph 대 Twitter Card: 차이점은 무엇입니까?</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/ko/blog/og-image-size-guide">Open Graph 이미지 크기: 2026년 전체 가이드</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>몇 초 안에 Open Graph 태그를 확인하세요</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html><a href="https://proovd.in/ko/">Proovd</a>로 Open Graph 태그를 무료로 확인하세요. URL을 붙여넣고 X, LinkedIn, Slack, Discord, WhatsApp 및 Reddit에서 미리보기를 확인하세요.</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>