X의 Twitter Card와 Open Graph

실무에서는 “X의 OGP”라고 부르기도 하지만, 정확히는 X의 링크 미리보기는 Twitter Cards에서 이어진 X Cards에 가깝습니다. Open Graph 값을 fallback으로 읽을 수 있어서 둘이 혼동되기 쉽습니다.

Open Graph는 공통 기반

Open Graph는 페이지를 풍부한 링크 미리보기로 설명하기 위한 metadata입니다. og:title, og:type, og:image, og:url을 기본으로 하고, og:description이나 og:site_name을 함께 쓰는 경우가 많습니다.

twitter:*는 X용 override

X Cards는 twitter:title, twitter:description, twitter:image 같은 전용 tag를 먼저 봅니다. 값이 없으면 og:title, og:description, og:image를 fallback으로 사용할 수 있습니다.

<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="Page title" />
<meta property="og:description" content="Short description." />
<meta property="og:image" content="https://example.com/ogp.png" />

• 기본 OGP를 먼저 정리
• 큰 X 카드가 필요하면 twitter:card를 summary_large_image로 설정
• X에서만 다른 문구나 이미지를 쓰고 싶을 때 twitter:* 추가
• 이미지는 1.91:1과 2:1 크롭 모두에서 의미가 남도록 구성
• 최종 UI는 X의 실험과 캐시에 따라 달라질 수 있음