Twitter 카드 유효성 검사기란 무엇이며 어떻게 사용합니까?

게시 됨: 2022-04-08

그렇다면 Twitter 카드 유효성 검사기는 무엇입니까?

이를 알기 위해서는 먼저 트위터 카드가 무엇인지 이해해야 합니다.

기분 나빠하지 마세요. 당신은 트위터 카드에 대해 모르는 유일한 사람이 아닙니다.

Twitter는 콘텐츠 마케팅의 꿈을 실현할 수 있는 탁월한 플랫폼입니다.

소셜 미디어 통계에 따르면 트위터는 3억 5천만 명 이상의 활성 사용자를 보유하고 있습니다. 이는 콘텐츠 노력을 통해 전환을 기다리고 있는 엄청난 양의 고품질 트래픽 풀입니다.

그렇다면 어떻게 CTR을 유발합니까? 웹사이트, 블로그, 랜딩 페이지로 청중을 끌어들이기에 충분한 트윗을 만들려면 어떻게 해야 할까요?

유익하고 매력적이며 잘 구성된 트윗을 생성합니다. 자, 어떻게 280자 제한에서 이 모든 작업을 수행할 수 있습니까?

트위터 카드가 등장하는 곳입니다. Twitter 카드를 사용하면 글자 수 제한을 초과하지 않고 관심을 끄는 정보를 팔로어에게 전달할 수 있습니다.

이 블로그에서는 Twitter 카드, Twitter 카드 유효성 검사기에 대한 모든 것을 논의하고 이를 사용하여 Twitter 마케팅을 통해 들어오는 리드를 확장하는 방법에 대해 설명합니다.

뜯어보자!

트위터 카드란?

Twitter 카드는 링크 트윗에 보다 매력적이고 구조화된 모양을 제공 하여 청중과의 상호 작용을 더욱 매력적으로 만들도록 설계되었습니다. 몰입형 경험은 더 많은 트래픽을 공유 페이지로 이동할 가능성을 높입니다.

웹페이지에 몇 줄의 코드를 추가하기만 하면 됩니다. 그러면 누군가가 귀하의 콘텐츠 링크를 공유할 때마다 해당 링크가 모든 팔로워에게 Twitter 카드로 표시됩니다.

여기에서 Twitter 시스템 은 트윗의 URL을 인식하고 사이트를 크롤링하여 카드 유형과 콘텐츠를 가져와서 트윗을 구성합니다.

이전에 Twitter 카드에 대해 들어본 적이 없을 수도 있지만 Twitter 피드에서 매일 접하게 되는 카드입니다.

아래 트위터 카드 예시를 보세요. 여기 youtube 비디오에 대한 링크가 이 아름다운 플레이어 카드로 대체되었습니다.

jonathan-cipriano

트위터 카드는 새로운 것이 아닙니다. 많은 분들이 140자 제한을 넘어 더 많은 정보를 공유하기 위해 사용했습니다. 이제 글자 수 제한이 변경되었지만 카드는 여전히 사용 중입니다.

트위터 카드에 대해 자세히 알아봅시다.

트위터 카드의 종류

Twitter는 다양한 카드 옵션을 실험했으며 이전에 리드 생성 카드가 있었지만 나중에 중단되었습니다. 현재 4가지 종류의 트위터 카드를 생성할 수 있는 옵션이 제공됩니다.

각 카드는 지원 하는 미디어 유형에 따라 시각적 경험이 다릅니다 . 구현하려는 카드 종류를 선택해야 합니다.

참고: 페이지당 하나의 카드만 가질 수 있습니다.

1. 트위터 요약 카드

이름에서 알 수 있듯이 요약 카드는 축소판, 제목, 설명 및 페이지 URL을 포함하여 공유하는 웹 페이지에 대한 적절한 요약을 제공합니다.

twiiter-anniversary

요약 카드는 블로그 게시물, 뉴스 기사, 전자 상거래 제품 및 레스토랑 리뷰와 같은 다양한 종류의 웹 콘텐츠를 보여주는 좋은 방법입니다.

카드 자체에 있는 간단한 설명은 사용자가 트윗을 클릭하고 콘텐츠로 이동하도록 하는 훌륭한 클릭 유도문안 역할을 합니다.

Twitter 요약 카드를 사이트에 추가하는 방법은 무엇입니까?

요약 카드를 추가하려면 아래에 작성된 코드를 적절한 속성과 함께 웹사이트 헤더에 붙여넣어야 합니다.

  • 먼저 카드 유형을 정의합니다.
<meta name="twitter:card" content="summary" />
  • 그런 다음 카드가 귀속되어야 하는 계정의 @username을 제공하십시오.
<meta name="twitter:site" content="@username" />
  • 다음으로 콘텐츠 페이지의 선명한 제목을 작성합니다. Android 및 iOS 앱의 제목은 두 줄로 잘리고 웹 보기에서는 한 줄로 잘립니다. 따라서 70자 미만으로 유지하십시오.
 <meta name="twitter:title" content="Title of your webpage" />

콘텐츠 페이지를 적절하게 요약하기 위한 200자 설명. 제목을 설명으로 사용하지 마십시오. 그것은 낭비가 될 것입니다.

 <meta name="twitter:description" content="Description" />
  • 이제 Twitter 카드에 표시할 이미지의 URL을 지정하십시오.
 <meta name="twitter:image" content="image URL" />

최상의 결과를 얻으려면 다음 치수와 글자수 제한을 사용하십시오.

제목 : 70자

설명 : 200자

지원되는 이미지 크기 : 가로 세로 비율 1:1, 최소 크기 144X144 픽셀, 최대 4096×4096 픽셀.

이미지 크기 : 5MB 미만

2. 큰 이미지가 포함된 Twitter 요약 카드

요약 카드를 생각하지만 큰 이미지가 있습니다.

큰 이미지가 있는 요약 카드는 일반적인 요약 카드와 기능이 동일하지만 큰 이미지를 추가할 수 있다는 점만 다릅니다.

chandraveer-singh

브랜드는 웹 페이지의 시각적 요소를 강조하는 데 사용합니다. 복잡한 트위터 타임라인에서 구조화된 큰 이미지는 훌륭한 스크롤 스토퍼가 될 수 있습니다 .

큰 이미지가 포함된 Twitter 요약 카드를 사이트에 추가하는 방법은 무엇입니까?

다음은 트윗에 큰 이미지가 포함된 요약 카드를 구현하기 위해 사이트에 추가해야 하는 메타 태그입니다.

 <meta name=”twitter:card” content=”summary_large_image”> <meta name=”twitter:site” content=”@yourwebsite”> <meta name=”twitter:creator” content=”@yourtwitterhandle”> <meta name=”twitter:title” content=”your title”> <meta name=”twitter:description” content=”your description.”> <meta name=”twitter:image” content=”image URL">
<meta name=”twitter:card” content=”summary_large_image”> <meta name=”twitter:site” content=”@yourwebsite”> <meta name=”twitter:creator” content=”@yourtwitterhandle”> <meta name=”twitter:title” content=”your title”> <meta name=”twitter:description” content=”your description.”> <meta name=”twitter:image” content=”image URL">

큰 이미지가 있는 요약 카드의 크기:

제목 : 70자

설명 : 200자

지원되는 이미지 크기 : 최소 300×157 또는 최대 4096×4096 픽셀의 가로 세로 비율 2:1.

이미지 크기 : 5MB 미만

3. 트위터 앱 카드

웹사이트 콘텐츠를 홍보하는 것 외에도 Twitter는 설치를 유도하기 위해 애플리케이션을 홍보할 수 있는 놀라운 장소이기도 합니다. 결국 Twitter 사용자의 80%는 모바일 장치에서 플랫폼에 액세스합니다.

앱 카드 기능을 사용하면 애플리케이션 홍보가 더욱 흥미로워집니다. 앱 카드는 더 많은 다운로드를 위해 Twitter에서 앱을 홍보할 수 있는 좋은 방법입니다.

이름, 아이콘, 설명 및 애플리케이션의 가격 및 등급과 같은 정보까지 보여줍니다.

social-media-tool

참고로 앱 스토어에서 앱을 공개적으로 사용할 수 있는지 확인하세요. 그렇지 않으면 Twitter에서 앱 카드를 만드는 데 필요한 데이터를 가져올 수 없습니다.

사이트에 앱 카드를 추가하는 방법은 무엇입니까?

  • 앱 카드를 추가하려면 다음 코드를 웹페이지 HTML에 붙여넣습니다.
 <meta name=”twitter:card” content=”app”> <meta name=”twitter:site” content=”@yourwebsite”> <meta name=”twitter:description” content=”your description”>
<meta name=”twitter:card” content=”app”> <meta name=”twitter:site” content=”@yourwebsite”> <meta name=”twitter:description” content=”your description”>
  • 기본적으로 Twitter는 미국 스토어에서 데이터를 가져오므로 앱이 다른 국가에서 사용 가능한 경우 아래 태그를 사용하여 국가 이름을 정의합니다.
 <meta name=”twitter:app:country” content=”your country like US”>
  • 다음으로 앱 스토어에서 이름, 앱 ID 및 애플리케이션 URL을 정의합니다.
 <meta name=”twitter:app:name:iphone” content=”your iphone app name”> <meta name=”twitter:app:id:iphone” content=”your iphone app ID”> <meta name=”twitter:app:url:iphone” content=”your iphone app URL”>
<meta name=”twitter:app:name:iphone” content=”your iphone app name”> <meta name=”twitter:app:id:iphone” content=”your iphone app ID”> <meta name=”twitter:app:url:iphone” content=”your iphone app URL”>
  • iPad에 최적화된 앱에 대한 태그입니다. 앱이 iPad에 최적화되어 있지 않은 경우 iPhone에서와 동일한 방식으로 태그를 입력합니다.
 <meta name=”twitter:app:name:ipad” content=”your ipad app name”> <meta name=”twitter:app:id:ipad” content=”your ipad app ID”> <meta name=”twitter:app:url:ipad” content=”your ipad app URL”>
<meta name=”twitter:app:name:ipad” content=”your ipad app name”> <meta name=”twitter:app:id:ipad” content=”your ipad app ID”> <meta name=”twitter:app:url:ipad” content=”your ipad app URL”>
  • Google Play에 있는 앱에 대해 동일한 매개변수를 정의합니다.
 <meta name=”twitter:app:name:googleplay” content=”your googleplay app name”> <meta name=”twitter:app:id:googleplay” content=”your googleplay app ID”> <meta name="twitter:app:url:googleplay" content="your Google Play app URL ">
<meta name=”twitter:app:name:googleplay” content=”your googleplay app name”> <meta name=”twitter:app:id:googleplay” content=”your googleplay app ID”> <meta name="twitter:app:url:googleplay" content="your Google Play app URL ">

앱 카드에 대해 염두에 두어야 할 치수:

제목 : 앱 ID에서 가져옴

설명 : 200자

이미지 : iTunes/Google Play 스토어에 업로드되는 이미지는 1MB 미만이어야 합니다.

4. 트위터 플레이어 카드

비디오는 콘텐츠 마케팅의 왕이었고, 트위터 공간과 같은 오디오 플랫폼의 등장으로 오디오도 트위터 마케팅에서 앞자리를 차지하기 시작했습니다.

다행히 플레이어 카드는 두 가지 미디어 유형을 모두 지원하며 Twitter 사용자에게 더 풍부한 경험을 제공합니다.

그들은 무엇을합니까?

플레이어 카드 는 링크에 있는 비디오 또는 오디오를 자동으로 가져와 타임라인 또는 피드에서 바로 재생 하므로 사용자는 멀티미디어와 상호 작용하기 위해 앱을 종료할 필요가 없습니다.

cartier

이 카드는 신제품 비디오, 팟캐스트 스니펫, 비하인드 스토리 및 브랜드 이벤트를 홍보하는 훌륭한 방법입니다.

사이트에 플레이어 카드를 추가하는 방법은 무엇입니까?

아래는 샘플 코드입니다. 웹페이지 HTML에 붙여넣어야 합니다.

 <meta name="twitter:card" content="player" /> <meta name="twitter:site" content="@username" /> <meta name="twitter:title" content="Title of your video" /> <meta name="twitter:description" content="Description." /> <meta name="twitter:image" content="Image URL" /> <meta name="twitter:player" content="https://yoursite.com/container.html" /> <meta name="twitter:player:width" content="Width" /> <meta name="twitter:player:height" content="Height" />
 <meta name="twitter:card" content="player" /> <meta name="twitter:site" content="@username" /> <meta name="twitter:title" content="Title of your video" /> <meta name="twitter:description" content="Description." /> <meta name="twitter:image" content="Image URL" /> <meta name="twitter:player" content="https://yoursite.com/container.html" /> <meta name="twitter:player:width" content="Width" /> <meta name="twitter:player:height" content="Height" />

다양한 플랫폼에서 플레이어 카드 경험을 테스트하는 방법에 대한 더 깊은 이해와 지침을 얻으려면 여기를 방문하십시오.

Twitter 카드 유효성 검사기를 사용하는 방법은 무엇입니까?

카드를 선택하고 웹사이트에 태그를 게시한 후 다음 단계는 모든 것이 올바르게 작동하는지 확인하는 것입니다.

어떻게 합니까? Twitter 카드 유효성 검사기의 도움으로 단 두 단계만 거치면 됩니다.

card-validator

1단계 : Twitter 카드 유효성 검사기 웹페이지로 이동합니다.

2단계 : 메타 태그가 있는 페이지의 URL을 붙여넣습니다. "미리보기 카드" 버튼을 클릭합니다.

모든 것이 제대로 작동하면 카드 미리보기에서 Twitter 피드에 카드가 어떻게 표시되는지 보여줍니다 . 또한 메타 태그의 수, 카드 유형 및 카드가 성공적으로 로드된 성공 메시지에 대한 정보를 볼 수 있습니다.

card-preview

반면에 카드를 찾을 수 없거나 다른 문제가 있는 경우 로그 섹션에 오류 메시지가 표시됩니다.

log

결론

Twitter 카드가 오래되었다고 해서 작동하지 않는 것은 아닙니다. 미디어가 첨부된 트윗이 일반 트윗보다 더 잘 작동 한다는 것이 통계적으로 입증되었습니다. Twitter 카드가 당신을 위해 놀라운 일을 하도록 하십시오.

마케팅 전략에 맞는 올바른 Twitter 카드는 Twitter 프로필의 가시성, 참여도 및 전반적인 미학을 향상시킬 수 있습니다.

따라서 이 아이디어를 가지고 앉아서 팀과 논의하고 백엔드 개발자가 작업하도록 하십시오.

게다가, 저처럼 트위터가 당신의 브랜드를 만들 수도 있고 무너뜨릴 수도 있다고 믿고 있고, 당신의 방식대로 전세를 바꾸는 데 진지하다면; 오늘 SocialPilot을 사용해 보세요!