웹사이트에 Twitter 카드를 설치하는 5가지 쉬운 방법

Twitter에서 누군가가 자신의 웹사이트에 대한 링크를 게시하면 Twitter에서 미리보기 이미지, 제목, 설명 및 대상 페이지의 URL이 포함된 상자를 만드는 방법을 알고 있습니까? 정말 흔한 일입니다. 표준 링크 게시물을 타임라인에서 훨씬 더 잘 보이게 하고 링크의 대상에 대해 약간 보여주고 더 많은 사용자 상호 작용을 장려합니다.

트위터 카드입니다. 특히 웹사이트 요약 카드는 웹사이트에 통합할 수 있는 여러 유형의 Twitter 카드 중 하나입니다. 다른 유형에는 어떤 것이 있습니까?

• 요약 카드는 언급한 대로 웹사이트의 미리보기입니다. 사용자가 링크를 클릭할 때 표시되는 내용을 미리 볼 수 있도록 메타 정보에서 가져온 사용자 지정 이미지 및 텍스트입니다.
• 요약 카드(큰 이미지 포함)는... 요약 카드와 동일합니다. 왜 차이가 나는지 솔직히 모르겠습니다. 각 링크를 클릭하고 미리보기된 트윗을 보고 내가 의미하는 바를 확인하십시오. Twitter의 최신 재설계 전에는 다르게 보였을지 모르지만 오늘날에는 모든 것이 큰 이미지 카드처럼 보입니다.
• 선수 카드는 야구 또는 다른 스포츠 카드와 혼동되어서는 안됩니다. 이미지가 일종의 애니메이션 미디어라는 점을 제외하면 기본적으로 큰 이미지 카드입니다. 표시 방법에 따라 미디어로 확장되는 작은 미리 보기 및 설명 상자 또는 미디어 자체만 재생할 수 있습니다. 일반적으로 이들은 YouTube 동영상과 같은 포함된 동영상이지만 webms는 점점 더 인기를 얻고 있습니다.
• 앱 카드는 앱 스토어 페이지에서 데이터를 가져와 맞춤형 앱 프로모션 창을 만드는 상자입니다. 트윗에 링크된 앱의 두드러진 세부 정보와 사용자가 앱을 바로 설치할 수 있는 CTA 버튼을 보여줍니다.

Twitter 카드는 훨씬 더 복잡했습니다. 이미지 갤러리, 제품 및 기타 옵션을 위한 특정 유형의 카드가 있었지만 이후 Twitter에서 제거했습니다. 향수를 느끼고 싶다면 여기에서 그들이 어떻게 생겼는지 볼 수 있습니다. 너무 집착하지 마십시오. 오늘 만들 수 없습니다.

트위터 카드의 기본

모든 페이지에 대해 개별 코드를 지정하려는 경우 웹사이트당 또는 최소한 웹페이지당 한 종류의 Twitter 카드만 가질 수 있습니다. 대부분의 사람들은 기본 대형 이미지 요약 카드를 선택하고 사이트 템플릿의 헤더에 코드를 입력하여 모든 페이지에 표시되도록 합니다. YouTube와 같은 일부 사이트는 헤더에 플레이어 카드를 넣습니다. 여기서 중요한 점은 주어진 페이지의 헤더 메타 데이터에 한 세트의 카드 정보만 가질 수 있다는 것입니다.

카드는 전달할 수 있는 데이터가 매우 강력합니다. 카드가 콘텐츠를 만든 사람과 페이지를 소유한 사람을 자동으로 알 수 있도록 할 수 있습니다. 둘 다 다른 경우에도 마찬가지입니다. 로드할 미디어를 지정하고 이름과 추적 코드 등을 지정할 수 있습니다. 사실, 이 페이지를 읽고 구체적으로 카드에 사용할 수 있는 속성에 대한 아이디어를 얻을 수 있습니다. 보다 강력한 데이터를 위해 Open Graph 속성을 연결할 수도 있습니다.

오늘 여기에서 할 일은 사이트에 Twitter 카드를 추가하는 방법을 알려드리는 것입니다. 모든 단일 속성을 다루지는 않을 것입니다. Twitter 문서는 충분합니다. 다양한 CMS에 대해 수행하는 방법에 대한 개요를 제공할 뿐입니다.

시작하기 전에 모든 설치 방법에 대해 유효성 검사가 필요합니다. 제대로 했는지 확인하려면 카드를 활성화한 후 URL을 이 유효성 검사기로 복사하세요. 이것은 카드가 실제로 작동하는지 여부를 알려줍니다.

1: 워드프레스

워드프레스는 트위터 카드를 구현하는 가장 쉬운 플랫폼일 것입니다. 거의 내장되어 있는 방법을 포함하여 다양한 방법이 있기 때문입니다.

Twitter 카드를 구현하는 권장 방법 은 공식 Twitter 플러그인을 사용하는 것 입니다. 다른 플러그인과 마찬가지로 설치할 수 있으며 여기에서 Twitter 카드를 자동으로 생성할 수 있습니다. 또한 공유 및 트윗/팔로우 버튼, 포함된 트윗 처리 및 분석 추적을 위한 단축 코드를 활성화합니다. 여기에서 설명서를 읽고 여기에서 플러그인 자체를 다운로드할 수 있습니다.

공식 Twitter 플러그인을 사용하고 싶지 않거나 호스팅된 WordPress.com에 있는 경우 Jetpack을 사용할 수 있습니다. Jetpack에서 공유 섹션을 찾아 구성하려고 합니다. 웹사이트에 대한 Twitter 계정을 인증하는 Twitter 섹션이 있습니다.

세 번째 옵션은 JM Twitter 카드 플러그인을 사용하는 것입니다. Julien Maury의 이 플러그인은 일부 기본 설정과 함께 Twitter 카드 호환성을 추가합니다. 추천 이미지가 아닌 페이지의 첫 번째 이미지를 사용하도록 선택할 수 있고, Twitter 카드 렌더링을 미리 볼 수 있으며, 게시물을 작성할 때 각 게시물에 대한 카드를 사용자 정의할 수 있습니다. 플러그인을 구성하려면 사이드바로 이동하여 관리자 대시보드에서 플러그인 패널을 클릭합니다. 카드 유형을 선택하고 나머지 상자에는 Twitter 계정, 사이트 계정, 설명 길이 및 추가하려는 모든 항목을 입력합니다.

그 중 어느 것도 귀하의 요구에 맞지 않거나 이미 가지고 있는 경우 Yoast의 WordPress SEO는 Twitter 카드도 처리합니다. 관리자 패널에서 SEO로 이동하고 소셜 섹션을 클릭합니다. 상자에 Twitter 사용자 이름을 추가할 수 있는 Twitter 탭이 있습니다. 불행히도, 마지막으로 읽은 Yoast는 요약 카드만 지원합니다. 다른 유형의 카드를 원하면 고급 플러그인이 필요합니다.

2: 텀블러

Tumblr는 놀라울 정도로 인기 있는 블로깅 플랫폼으로 많은 사람들이 깨닫지 못하고 있습니다. Tumblr 네트워크는 .tumblr.com으로 표시된 블로그를 넘어 확장됩니다. 실제로 일부 유명 사이트에서는 Tumblr를 기본 아키텍처로 사용하고 있습니다. 사용자 정의 도메인이 있으면 다른 백엔드 아키텍처와 같습니다. 아니면?

사실 Tumblr의 아키텍처는 WordPress와 같이 광범위하거나 사용자 정의할 수 없습니다. 블로그에 특정 맞춤형 Twitter 카드를 구현 하려면 몇 가지 맞춤형 코드를 사용해야 합니다. 여기 Quora에서 Dan Leveille이 제공한 답변에서 코드와 그 뒤에 있는 설명을 읽을 수 있습니다.

이 코드는 카드를 수동으로 사용자 정의하는 데 필요합니다. 요약 카드만 있으면 되는 것은 아닙니다. Twitter는 링크 게시 시 자동 카드 생성을 위해 이미 Tumblr.com을 허용 목록에 추가했으므로 특정 데이터가 포함된 특정 카드를 원하거나 사용자 정의 도메인을 사용하지 않는 한 기본적으로 구현된 것을 사용할 수 있습니다. Tumblr 사이트에 대한 사용자 지정 도메인이 있거나 Twitter가 자연스럽게 수집하지 않는 데이터를 원하는 경우에만 그의 코드에 의존할 것입니다.

3: 블로거

Blogger 블로그에 Twitter 카드를 설치하는 것은 템플릿에 달려 있습니다. 일반적인 지침을 알려 드리겠습니다. 그러나 사이트 템플릿이 표준과 너무 많이 다른 경우 제가 제공하는 단서를 기반으로 스스로 알아내야 합니다.

만일의 경우를 대비하여 템플릿을 변조하기 전에 항상 템플릿을 백업하는 것이 좋습니다. 대시보드로 이동하여 템플릿을 클릭하고 백업 버튼을 클릭하여 나중에 복원을 위해 복사본을 저장합니다.

그런 다음 블로그 템플릿의 실시간 미리보기 아래에 있는 "HTML 편집" 버튼을 클릭합니다. 해당 코드 내에서 "<b:includable id='post' var='post'>" 검색을 실행합니다. 해당 줄은 그대로 유지하되 바로 아래에 다음을 붙여넣습니다.


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


물론 위의 데이터를 직접 편집 해야 합니다. @yourname을 Twitter 사용자 이름으로 변경하고 www.yoursite.com을 사이트 URL로 변경한 다음 정확한지 확인하십시오.

물론 필요에 따라 이 코드를 사용자 정의할 수 있습니다. 다른 종류의 카드를 선호하는 경우 "요약"이 아닌 다른 것으로 맨 윗줄을 변경하고 나머지 코드를 필요한 데이터에 적용하십시오.

위에 붙여 넣은 코드가 작동하지 않는 경우 이것은 내가 가져온 페이지입니다. 내가 제대로 복사했는지 또는 복사했는지 다시 확인하고 업데이트가 되었고 내 게시물에 업데이트가 반영되지 않은 경우 거기에서 확인할 수 있습니다. 말하자면, 작동하지 않으면 알려주십시오. 최선을 다해 수정하겠습니다.

4: 줌라

Joomla는 Tumblr 또는 Blogger와 같은 외관 향상 기능이 있는 제한된 플랫폼보다는 확장을 통한 사용자 정의에 중점을 둔 CMS라는 점에서 WordPress와 공통점이 많습니다. 따라서 다양한 Joomla 확장을 사용하여 Twitter 카드를 구현할 수 있는 몇 가지 다른 방법이 있습니다.

트윗 카드는 대부분의 사람들이 선호하는 확장 기능 중 하나입니다. 무료로 다운로드하여 사용할 수 있으며 Joomla 기반 웹사이트에 Twitter 카드를 추가합니다. 그게 다야; 구성에 멋진 것은 없으며 기능이나 구현에 예외적인 것은 없으며 주석에 표시된 대로만 수행합니다.

두 번째 옵션은 프로 확장 Open Graph 및 Twitter 카드 태그입니다. Twitter와 Facebook 모두에 태그를 추가하는 보다 강력한 확장 기능입니다. 게시물에 원하는 특정 이미지와 데이터를 선택할 수 있는 다양한 사용자 정의 옵션이 있습니다. Open Graph의 Facebook 통합은 훌륭하며 Twitter와 Google이 두드릴 때 추가 메타 데이터를 추가합니다. 유일한 단점은 프로 확장으로서 비용이 많이 든다는 것입니다. 하지만 저렴합니다. 라이센스 비용은 단 7유로입니다. 원하는 경우 추가 지원을 구입할 수 있지만 솔직히 말하겠습니다. 이것은 단지 메타 데이터이며 코드를 두려워하는 사람들을 위한 영광스러운 복사 및 붙여넣기 작업입니다. 지원이 필요하지 않습니다.

세 번째 옵션은 Joomla 사이트에서 기사를 만들고 게시하기 위한 프런트 엔드 포스트 편집기인 TEXTman을 사용하는 것입니다. Twitter 카드가 작동하도록 구성할 필요가 없습니다. TEXTman을 편집기로 사용하면 기능이 자동으로 제공됩니다. 여기서 단점은 프로 도구이기도 하고 훨씬 더 비싼 도구라는 것입니다. 전체 텍스트 편집기 및 관련 도구이기 때문에 여러 확장이 추가된 큰 라이선스입니다. 모든 것이 포함된 구독의 경우 99달러, TEXTman 자체 및 제한된 지원 및 업데이트 라이선스만 40달러입니다. 트위터 카드만 있으면 매우 비쌉니다.

마지막으로 아래 방법이나 이 게시물에 설명된 방법을 사용하여 수동으로 구현할 수 있습니다.

5: 맞춤형 콘텐츠 관리 시스템

위의 코드에서 메타 데이터의 예를 이미 게시했습니다. 이는 기본적으로 사용 중인 아키텍처에 관계없이 사이트 헤더에 붙여넣는 것과 동일한 코드입니다. 사이트 요구 사항에 따라 조정하고 코드를 사이트 헤더에 복사합니다. 사이트 상단의 <head> 태그와 </head> 태그 사이에 있는 한 특별히 어디에 있는지는 중요하지 않습니다.

태그를 사용자 정의하는 것을 잊지 마십시오. 주의해야 할 주요 사항은 카드, 사이트, 작성자 및 도메인 태그입니다. 원하는 카드 유형, 사이트 및 콘텐츠 작성자의 Twitter 핸들, 도메인 URL을 입력해야 합니다. 그런 다음 변경 사항을 구현한 후 카드를 확인합니다.

유효성 검사 후에도 카드가 작동하지 않으면 Twitter의 문제 해결 가이드를 읽어야 합니다. 몇 초 안에 수정할 수 있는 간단한 오류가 있을 수 있습니다.