7 Tipe Twitter Cards Tweet Format Photo

merupakan format meta tags untuk twitter yang berfungsi untuk menampilkan otomatis tweet sesuai dengan isi konten.

7 Tipe Twitter Cards Tweet Format merupakan format meta tags untuk twitter yang berfungsi untuk menampilkan otomatis tweet sesuai dengan isi konten. Saat ini social networking memiliki peranan penting di dunia web development dan tweet otomatis pun sudah dikembangkan menggunakan software atau script. Dengan menggunakan software atau script yang berfungsi untuk me-manage auto-tweet untuk share web atau blog post, maka sangat diperlukan tweet cards untuk membuat tampilan tweet yang sesuai dengan isi konten.

Twitter Cards : 7 Tipe Twitter Cards Tweet Format

Twitter Cards adalah meta tags yang dikembangkan oleh twitter yang berfungsi untuk memberikan data detail seperti Rich Snippet pada search engine, sehingga dengan menggunakan twitter cards tweet URL yang kita masukan secara otomatis akan menampilkan format yang sesuai dengan isi konten. Ada 7 meta tags twitter cards yang di rilis oleh developer twitter, yaitu Summary Cards, Summary Cards with Large Image, Photo Card, Gallery Card, App Card, Player Card dan Product Card.

Summary Card

Summary Card merupakan twitter cards untuk tipe konten artikel, meta tags ini sangat simple dan mudah untuk dibuat. Meta tags Summary Card hanya berisi 6 meta tags, yaitu twitter card, twitter site, twitter creator, twitter title, twitter description dan twitter image. Tipe meta tags Summary Cards sangat cocok untuk digunakan pada blog yang berbasis artikel, seperti news, magazine, tutorial, dsb. Berikut ini adalah penggunaan meta tags untuk Summary Card :

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@eproduk">
<meta name="twitter:creator" content="@eproduk">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Meta Description maksimal 200 karakter">
<meta name="twitter:image" content="http://eproduk.com/images/gambar-konten.jpg">

Berikut ini adalah tampilan hasil dari twitter card tipe Summary Card untuk tampilan desktop dan iPhone :

7 Tipe Twitter Cards Tweet Format Photo

Summary Card with Large Image

Summary Card with Large Image merupakan twitter cards untuk tipe konten artikel dengan image yang besar, meta tags ini sangat simple dan mudah untuk dibuat. Meta tags Summary Card with Large Image berisi 6 meta tags, yaitu twitter card, twitter site, twitter creator, twitter title, twitter description dan twitter image. Perbedaan antara Summary Card adalah pada meta tags Summary Card with Large Image untuk gambar yang ditampilkan lebih besar, untuk penggunaannya gambar harus memiliki lebar (width) minimal 280 px, height (tinggi) minimal 150px dan ukuran gambar tidak boleh lebih dari 1 MB. Berikut ini adalah penggunaan meta tags untuk Summary Card with Large Image :

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@eproduk">
<meta name="twitter:creator" content="@eproduk">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Meta Description maksimal 200 karakter">
<meta name="twitter:image:src" content="http://eproduk.com/images/gambar-konten.jpg">

Berikut ini adalah tampilan hasil dari twitter card tipe Summary Card with Large Image untuk tampilan desktop dan iPhone :

7 Tipe Twitter Cards Tweet Format Photo

Photo Card

Photo Card merupakan twitter cards untuk tipe konten artikel dengan image yang besar, meta tags ini sangat simple dan mudah untuk dibuat. Meta tags Photo Card Image berisi 7 meta tags, yaitu twitter card, twitter site, twitter creator, twitter title, twitter image, twitter image width dan twitter image height. Untuk penggunaannya Photo Card untuk desktop gambar harus memiliki lebar (width) maksimal 435 px, height (tinggi) maksimal 375px, untuk mobile non-retina display gambar harus memiliki lebar (width) maksimal 280 px, height (tinggi) maksimal 375px, sedangkan untuk mobile retina desplay gambar harus memiliki lebar (width) maksimal 560 px, height (tinggi) maksimal 750px. Berikut ini adalah penggunaan meta tags untuk Photo Card :

<meta name="twitter:card" content="photo">
<meta name="twitter:site" content="@eproduk">
<meta name="twitter:creator" content="@eproduk">
<meta name="twitter:title" content="Title">
<meta name="twitter:image" content="http://eproduk.com/images/gambar-konten.jpg">
<meta name="twitter:image:width" content="610">
<meta name="twitter:image:height" content="610">

Berikut ini adalah tampilan hasil dari twitter card tipe Photo Card untuk tampilan desktop dan iPhone :

7 Tipe Twitter Cards Tweet Format Photo

Gallery Card

Gallery Card merupakan twitter cards untuk tipe konten artikel dengan jumlah gambar lebih dari satu, meta tags ini sangat simple dan mudah untuk dibuat. Meta tags Gallery Card berisi 9 meta tags, yaitu twitter card, twitter site, twitter creator, twitter title, twitter description, twitter image 0, twitter image 1, twitter image 2 dan twitter image 3. Berikut ini adalah penggunaan meta tags untuk Gallery Card :

<meta name="twitter:card" content="gallery">
<meta name="twitter:site" content="@eproduk">
<meta name="twitter:creator" content="@eproduk">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Meta Description maksimal 200 karakter">
<meta name="twitter:image0" content="http://eproduk.com/images/gambar-konten.jpg">
<meta name="twitter:image1" content="http://eproduk.com/images/gambar-konten1.jpg">
<meta name="twitter:image2" content="http://eproduk.com/images/gambar-konten2.jpg">
<meta name="twitter:image3" content="http://eproduk.com/images/gambar-konten3.jpg">

Berikut ini adalah tampilan hasil dari twitter card tipe Gallery Card untuk tampilan desktop dan iPhone :

7 Tipe Twitter Cards Tweet Format Photo

App Card

App Card merupakan twitter cards untuk tipe konten artikel aplikasi mobile, seperti aplikasi android, aplikasi blackberry, aplikasi iOS, dll, meta tags ini juga bisa digunakan untuk app store atau google play. Meta tags App Card berisi 4 meta tags, yaitu twitter card, twitter description, twitter app id iphone/ipad/googleplay dan twitter app url iphone/ipad/googleplay. Berikut ini adalah penggunaan meta tags untuk App Card :

<meta name="twitter:card" content="app">
<meta name="twitter:description" content="Meta Description maksimal 200 karakter">
<meta name="twitter:app:id:iphone" content="Nama Aplikasi">
<meta name="twitter:app:url:iphone" content="http://eproduk.com/url/1657681357">
<meta name="twitter:app:name:ipad" content="Nama Aplikasi">
<meta name="twitter:app:url:ipad" content="http://eproduk.com/url/1657681357">
<meta name="twitter:app:id:googleplay" content="Nama Aplikasi">
<meta name="twitter:app:url:googleplay" content="http://eproduk.com/url/1657681357">

Berikut ini adalah tampilan hasil dari twitter card tipe App Card untuk tampilan iPhone :

7 Tipe Twitter Cards Tweet Format Photo

Player Card

Player Card merupakan twitter cards untuk tipe konten video, dengan menggunakan meta tags ini akan menampilkan video pada tweet post. Meta tags Player Card memiliki 2 versi yaitu media video yang di-embed dari website lain atau video yang di simpan pada hosting website sendiri. Meta Tags Player Card untuk video yang di-embed berisi 8 meta tags, yaitu twitter card, twitter site, twitter title, twitter description, twitter image, twitter player, twitter player width dan twitter player height, sedangkan untuk video yang disimpan pada hosting sendiri berisi 10 meta tags, yaitu twitter card, twitter site, twitter title, twitter description, twitter image, twitter player, twitter player width dan twitter player height, twitter player stream dan twitter player stream content type. Berikut ini adalah penggunaan meta tags untuk Player Card :

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@eproduk">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Meta Description maksimal 200 karakter">
<meta name="twitter:image" content="http://eproduk.com/keyframe/video-thumbnail.jpg">
<meta name="twitter:player" content="https://eproduk.com/embed/a">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="251">
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@eproduk">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Meta Description maksimal 200 karakter">
<meta name="twitter:image" content="http://eproduk.com/keyframe/video-thumbnail.jpg">
<meta name="twitter:player" content="https://eproduk.com/embed/a">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="251">
<meta name="twitter:player:stream" content="https://eproduk.com/raw-stream/a.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs=&quot;avc1.42E01E1, mp4a.40.2&quot;">

Berikut ini adalah tampilan hasil dari twitter card tipe Player Card untuk tampilan desktop dan iPhone :

7 Tipe Twitter Cards Tweet Format Photo

Product Card

Product Card merupakan twitter cards untuk tipe konten produk khusus digunakan untuk webstore atau online store, dengan menggunakan meta tags ini akan menampilkan nama produk sekaligus dengan harganya pada tweet post.

<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@eproduk">
<meta name="twitter:creator" content="@eproduk">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Meta Description maksimal 200 karakter">
<meta name="twitter:image" content="http://eproduk.com/images/gambar-produk.jpg">
<meta name="twitter:data1" content="$125">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">

Berikut ini adalah tampilan hasil dari twitter card tipe Product Card untuk tampilan desktop dan iPhone :

7 Tipe Twitter Cards Tweet Format Photo

Category:

SEO

Tags:

,

Leave a Reply

Your email address will not be published. Required fields are marked *

*