fra3il

Twitter Cards

Introduction

fra3il

fra3il


LATEST POSTS

AWS Lambda 는 개뿔.. 하나도 모르겠다고! 03rd June, 2016

앱 아이콘에 앱 버전, 빌드 번호 등의 정보를 표시하는 방법 05th February, 2016

Web

Twitter Cards

Posted on .

트위터에서 카드 서비스를 공개했다. ( 위의 이미지가 카드를 이해하는데 도움이 될 듯.. )
카드는 현재는 트위터 공식 앱에서만 확인이 가능하며, 카드에는 제목, 작성자, 내용, 이미지, 링크 등의 내용이 포함된다.

카드를 만드는 과정은 다음과 같다.

1. Card Validator 의 Try Card 에 해당 항목을 채운다.
우측의 Card Preview 에서 생성될 카드의 모습을 확인할 수 있으며, Sample Embed Code 에 코드가 나타난다.

2. Standard Tags, Mobile App Integration 에 따라서 각각 Sample Embed Code 가 생성되며, 생성된 코드를 복사하여 임의의 파일에 붙여넣는다.

3. 생성된 meta 정보를 특정 페이지에 저장하고, 해당 페이지의 URL 을 Validate URLs 에 입력해서 확인할 수 있다.

링크 이외의 항목을 누르면 meta 정보를 저장해놓은 페이지로 이동하게 된다.
개인적으로는 블로그의 글로 이동하기를 원했고, 글에 meta 정보를 포함해봤으나 실패 -_-
대안은 meta 정보는 개인 서버에 올리고 해당 페이지에 접속했을 때 블로그로 리다이렉트 시키는 것이었다.

meta 정보 아래 다음의 코드를 추가하는 것으로 해결할 수 있었다.

주의할 점은 URL 인증 받을 때 사용한 이미지는 트위터 쪽에서 따로 보관을 하는지 바로바로 갱신이 안되는 것 같다.

덧.
카드에 사용하는 이미지는 투명 png 도 적용된다.

fra3il

fra3il

Navigation