Twitter Card 메타 태그

Twitter(X)는 OpenGraph가 존재하기 전에 자체 미리 보기 카드 프로토콜을 정의했으며 지금도 이를 유지하고 있습니다. 최신 Twitter는 twitter:* 태그가 없을 때 OG 태그로 대체하지만, twitter:card를 명시하면 가장 예측 가능한 카드 레이아웃을 얻을 수 있습니다.

카드 유형은 네 가지입니다. summary는 제목과 설명 옆에 작은 미리 보기 이미지를 표시하고, summary_large_image는 전체 너비의 대표 이미지를 표시하며, app은 모바일 앱 설치를 위한 유형이고, player는 동영상 또는 오디오를 삽입하는 유형입니다. 콘텐츠 중심의 기사에는 summary_large_image를 선택하십시오.

이 값이 있으면 Twitter에서 og:title과 og:description을 덮어씁니다. 일반적인 OpenGraph 사용자를 위한 제목과 Twitter 사용자에게 보여 줄 제목을 다르게 지정하려는 경우 사용하십시오. 그렇지 않다면 Twitter가 OG 값을 사용하도록 두면 됩니다.

summary 카드에는 최소 144x144 크기의 1:1 정사각형 이미지를 사용하십시오. summary_large_image에는 2:1 이미지가 필요하며, 1200x600 이상이 이상적입니다. Twitter는 5 MB를 초과하는 이미지를 거부합니다. og:image와 마찬가지로 절대 URL을 사용하십시오. 상대 경로는 작동하지 않습니다.

카드 이미지의 대체 텍스트이며 최대 420자까지 사용할 수 있습니다. Twitter를 탐색하는 화면 낭독기 사용자에게 접근성을 높여 주고, 이미지 로드에 실패했을 때 대체 설명을 제공합니다. 항상 입력하십시오. 포용성을 높이는 데 30초면 충분합니다.

twitter:site는 @을 포함한 사이트의 Twitter 계정 이름입니다. twitter:creator는 개별 작성자의 계정 이름입니다. 이 값을 입력하면 Twitter에서 "from @yoursite"를 표시하고 작성자 표시를 실제 계정으로 연결할 수 있습니다.

OpenGraph는 property="og:..."를 사용하고 Twitter는 name="twitter:..."을 사용합니다. 이 차이는 RDFa와 HTML5 메타데이터의 역사적 차이에서 비롯되었습니다. 두 방식 모두 기술적으로 유효하지만 각 프로토콜에 맞는 속성을 사용하면 엄격한 검증기에서 발생하는 예외적인 문제를 피할 수 있습니다.

twitter:card="app"을 사용하면 twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay 및 twitter:app:url:* 딥 링크로 iOS/Android 앱을 홍보할 수 있습니다. 카드를 누르면 App Store나 Play Store가 열리고, 앱이 설치되어 있으면 앱이 바로 열립니다.

twitter:card="player"는 트윗 안에 동영상 또는 오디오 재생기를 바로 삽입합니다. HTTPS iframe의 URL인 twitter:player와 twitter:player:width, twitter:player:height가 필요합니다. Twitter는 악용을 방지하기 위해 플레이어 카드를 수동으로 승인합니다. developer.twitter.com을 통해 제출하십시오.

Twitter는 공개 Card Validator 화면을 종료했지만 카드 미리 보기는 여전히 초안 트윗에서 확인할 수 있습니다. 실제 트윗을 게시하기 전에 비공개 초안에 URL을 붙여 넣으면 어떤 카드 유형과 이미지가 렌더링될지 정확히 확인할 수 있습니다.

twitter:card와 전체 OG 태그를 항상 모두 포함하십시오. 대부분의 Twitter가 아닌 플랫폼은 twitter:* 태그를 무시하고, 최신 Twitter 클라이언트 대부분은 OG로 대체합니다. 따라서 두 가지를 함께 사용하면 중복을 최소화하면서 모든 곳에서 올바른 미리 보기를 제공할 수 있습니다.

twitter:title은 없지만 og:title이 있다면 Twitter 카드에는 무엇이 표시되나요?

twitter:card를 name="twitter:card"로 선언하면 X에서 페이지에 예측 가능한 미리 보기가 표시됩니다. 편집 콘텐츠에는 summary_large_image를 선택하고, 절대 URL을 사용하는 twitter:image와 twitter:image:alt를 추가하십시오. 계정 이름으로 사이트와 작성자를 표시하고, 직접 덮어쓰지 않은 태그에는 OG 값이 사용되도록 두면 됩니다.