share Open Graph & 트위터 카드 생성기 star

작동 방식

Open Graph 프로토콜은 어떤 웹페이지든 자신을 풍부한 소셜 객체로 설명할 수 있도록 2010년 Facebook이 도입했습니다 — 누군가 링크를 피드나 채팅에 붙여넣었을 때 어떤 제목, 설명, 이미지, 사이트 이름이 나타날지를 정의합니다. 이 도구는 핵심이 되는 네 가지 태그(og:title, og:description, og:image, og:url)와 짝을 이루는 twitter: 태그 세트를 생성하고, 결과 카드의 실시간 미리보기를 렌더링해 주어, 무엇이든 게시하기 전에 Facebook, LinkedIn, WhatsApp, X가 실제로 어떻게 보여줄지 미리 확인할 수 있습니다.

og:type 필드(website, article, product...)는 단순한 장식이 아닙니다 — 일부 플랫폼은 이 값에 따라 카드의 동작 방식을 바꿉니다: article 유형은 저자/날짜 줄을 노출할 수 있고, product 유형은 Open Graph 커머스 확장을 지원하는 플랫폼에서 가격 표시를 유발할 수 있습니다. 구체적인 예: og:type=article로 설정하고 1200×630 og:image를 지정한 레시피 페이지는 X에서(twitter:card=summary_large_image를 통해) 전체 폭 사진 카드를, WhatsApp에서 그에 맞는 미리보기를 얻습니다 — 잘못 설정하거나 og:image를 생략하면 대부분의 플랫폼은 추측에 의존하게 되어, 보통 페이지의 첫 번째 이미지를 고르거나 아예 아무것도 보여주지 않습니다.

핵심 네 가지 태그를 넘어, 몇 가지 선택적 필드가 결과를 세밀하게 조정합니다: og:site_name은 일부 플랫폼에서 제목 옆에 브랜드명을 보여주고, og:locale은 언어/지역(en_US, tr_TR 등)을 설정해 다국어 사이트가 올바른 버전을 렌더링하도록 하며, twitter:site는 카드를 X의 특정 계정 핸들에 연결합니다. twitter:card 값 자체는 summary와 summary_large_image 외에 세 번째 옵션인 player도 있어 동영상이나 오디오를 타임라인에 직접 삽입할 수 있지만, 이 생성기가 다루지 않는 별도의 player 전용 마크업이 추가로 필요합니다. 캐시 유지 기간도 플랫폼마다 다릅니다: 어떤 디버거는 새로 스크랩한 지 하루 안에 갱신되지만, 다른 플랫폼은 크롤링 단위가 아니라 링크 단위로 캐시하기 때문에 낡은 미리보기를 일주일 이상 붙들고 있기도 합니다 — 그래서 디버거를 통한 강제 재스크랩이 흔히 유일한 빠른 해결책입니다.

알아두어야 할 사항

• 1200×630px(1.91:1 비율)는 모든 플랫폼에서 안전하게 통하는 범용 이미지 크기입니다. 파일은 약 1MB 이하로 유지해 안정적으로 로드되게 하고, 항상 절대 URL(https://...)을 사용하세요 — 상대 경로는 조용히 실패합니다.
• 캐싱은 가장 흔한 불만 사항입니다: 플랫폼이 한 번 URL을 스크랩하면, 태그를 고친 뒤에도 며칠 동안 예전 제목이나 이미지를 계속 보여줄 수 있습니다. Facebook의 Sharing Debugger, LinkedIn의 Post Inspector 같은 도구가 강제로 새 스크랩을 실행시켜 줍니다.
• X는 제목, 설명, 이미지 대부분을 Open Graph 값에서 그대로 가져오지만, twitter:card만은 별도의 설정(summary인지, 전체 폭 summary_large_image인지)이며 자동으로 추론되지 않습니다 — 반드시 명시적으로 설정하세요.
• 태그가 전혀 없다고 해서 미리보기가 없는 것은 아닙니다 — 플랫폼은 페이지에서 찾을 수 있는 것으로부터 추측하며, 그 추측은 좀처럼 보기 좋지 않습니다.
• og:url은 페이지의 정규(canonical) 버전을 가리켜야 합니다 — 추적 파라미터가 붙은 URL이나 리다이렉트 대상을 가리키면 공유 신호가 하나로 모이지 못하고 서로 다른 두 주소로 쪼개집니다.
• 배포하기 전에 두 개 이상의 플랫폼에서 테스트하세요: Facebook, LinkedIn, X는 각각 Open Graph를 조금씩 다르게 해석하므로, 한 곳에서 제대로 보이는 카드가 다른 곳에서는 이미지가 잘리거나 설명이 빠질 수 있습니다.