OG/메타태그 미리보기 생성기

같은 제목이 곳마다 다르게 보이는 이유

구글, 페이스북 스타일 소셜 카드, 트위터/X는 각각 텍스트를 다른 길이에서 자르고 미묘하게 다른 태그를 읽기 때문에, 검색 결과에서는 딱 맞게 들어가는 제목이 채팅 앱 미리보기에서는 단어 중간에서 잘릴 수 있습니다. 게시 전에 세 가지를 다 확인하면 독자가 보기 전에 어색한 절단을 미리 잡을 수 있습니다.

Open Graph 태그와 Twitter Card 태그의 차이

Open Graph(og:title, og:description, og:image)는 Slack, Discord, 카카오톡, LinkedIn, Facebook을 포함해 거의 모든 플랫폼이 기본으로 읽는 태그 세트입니다. Twitter/X는 별도의 twitter: 태그를 쓰지만, 이게 없으면 Open Graph 태그로 대체되므로, 둘 다 명시적으로 설정하는 건 Twitter 전용 카드를 더 정밀하게 제어하고 싶을 때 의미가 있습니다.

summary와 summary_large_image 중 고르기

summary_large_image Twitter 카드는 텍스트 위에 넓은 이미지를 보여줘서 사진, 일러스트, 아티클 헤더 이미지에 잘 어울립니다. summary 카드는 대신 텍스트 옆에 작은 정사각형 썸네일을 보여줘서, 늘어나거나 잘린 사진보다는 로고나 아이콘 스타일 이미지에 더 잘 맞습니다.

FAQ

Open Graph 태그와 Twitter Card 태그를 둘 다 넣어야 하나요?

twitter: 태그가 없으면 Twitter/X가 Open Graph 태그로 대체하므로 Open Graph 태그만으로도 대부분의 플랫폼을 커버합니다. twitter: 태그를 따로 추가하는 건 Twitter 전용 카드를 일반 Open Graph 미리보기와 다르게 하고 싶을 때만 필요합니다.

링크를 공유했을 때 og:image가 안 뜨는 이유는 무엇인가요?

가장 흔한 원인은 https://로 시작하는 전체 URL이 아니라 상대 경로를 넣은 경우, 이미지가 오류를 반환하거나 보려면 로그인이 필요한 경우, 또는 태그를 추가하기 전의 예전 미리보기를 플랫폼의 캐시가 그대로 서빙하는 경우입니다.

og:image에는 어떤 이미지 크기를 써야 하나요?

최소 1200×630 픽셀이 일반적으로 권장되는데, 대부분의 큰 이미지 소셜 카드가 기대하는 약 1.91:1 비율을 플랫폼이 업스케일할 필요 없이 맞출 수 있기 때문입니다.

메타태그를 수정했는데 일부 앱에서 예전 미리보기가 캐시되어 남아있는 이유는 무엇인가요?

대부분의 플랫폼은 공유할 때마다 다시 가져오지 않고 스크랩한 Open Graph 데이터를 캐시합니다. Facebook의 Sharing Debugger처럼 현재 태그를 강제로 다시 스크랩하게 해주는 디버깅·캐시 초기화 도구를 제공하는 곳이 많습니다.

이 도구가 페이지나 이미지를 어딘가에 업로드하나요?

아니요. 입력한 값을 이용해 모든 처리가 브라우저에서 로컬로 이루어지고, 이미지는 미리보기를 렌더링하기 위해 브라우저가 직접 요청할 뿐이며, 이는 방문자의 브라우저가 제공한 이미지 URL을 불러올 때와 정확히 같은 방식입니다.

관련 도구

• JSON Formatter
• Regex Tester
• Query String Parser
• Text Counter