Open Graph 대 Twitter Card: 차이점은 무엇인가요?

두 가지 모두 소셜 미디어의 링크 미리보기를 제어합니다. 하지만 그것들은 같은 것이 아닙니다. 각각을 사용해야 하는 시기와 둘 다 사용해야 하는 이유는 다음과 같습니다.

Open Graph — Facebook 표준

Open Graph는 2010년 Facebook에 의해 도입되었습니다. OG 태그 이전에는 누군가가 Facebook에서 링크를 공유하면 플랫폼이 페이지에서 이미지와 텍스트를 무작위로 선택했습니다. 결과는 예측할 수 없었고 종종 매력적이지 않았습니다.

Facebook는 다음과 같이 말했습니다. "웹마스터에게 링크 미리보기를 제어할 수 있는 표준 방법을 제공합시다." 그들은 어떤 웹사이트라도 추가할 수 있는 메타 태그 세트를 만들었습니다.

<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />

다른 플랫폼은 Open Graph 표준을 채택했습니다. LinkedIn, Discord, Slack, WhatsApp 및 Reddit는 모두 og: 링크 미리보기를 렌더링하는 태그를 읽습니다.

Twitter Cards — 트위터 표준

트위터는 Open Graph가 널리 채택되기 전에 "Twitter Cards"라는 자체 시스템을 만들었습니다. Twitter Cards 다른 속성 명명 규칙을 사용합니다.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Twitter Cards 두 가지 주요 유형이 있습니다.

• summary — 트윗 오른쪽에 있는 작은 썸네일
• summary_large_image — 카드의 대부분을 차지하는 큰 이미지(권장)

플랫폼 호환성

어떤 플랫폼에서 어떤 태그를 사용하는지는 다음과 같습니다.

둘 다 설정해야 하는 이유

대부분의 플랫폼이 두 가지 태그 유형을 모두 지원하더라도 두 가지를 모두 설정해야 하는 데에는 다음과 같은 이유가 있습니다.

1. X/Twitter는 twitter:card 태그를 선호합니다. X는 OG 태그로 대체될 수 있지만 올바르게 렌더링되지 않을 수 있습니다. 두 가지를 모두 설정하면 X가 올바른 카드 유형을 표시합니다.
2. 미래 보장. 새로운 플랫폼이 출시되고 다른 표준보다 한 표준을 선호하는 경우 두 표준을 모두 사용하면 호환성이 보장됩니다.
3. 일관성. 두 가지를 모두 사용하면 어떤 플랫폼에서 어떤 태그를 읽는지에 관계없이 미리보기가 올바르게 표시됩니다.

전체 설정

모든 페이지에 권장되는 설정은 다음과 같습니다.

<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

빠른 수정 체크리스트

자주 묻는 질문