Media Sosial Share dengan Meta Twitter Card dan Facebook Open Graph

rumpibanget.blogspot.com - Mungkin untuk para blogger pemula seperti saya ini, Meta Twitter Card dan Facebook Open Graph merupakan hal yang baru dan mungkin anda tidak tahu, apa itu, dan gunanya untuk apa. Secara garis besar Meta Twitter Card dan Facebook Open Graph sendiri merupakan teknik dalam dunia blogging untuk Meningkatkan SEO di sisi Media Sosial Share yang berfungsi untuk memberikan informasi data pada robot crawler jejaring sosial seperti Facebook, Google+,Twitter dan lainnya untuk menampilkan data Blog/Website sebuah halaman ketika di-share ke Media Sosial.
http://rumpibanget.blogspot.com/
Media Sosial Share dengan Meta Twitter Card dan Facbeook Open Graph itu penting yah, teman-teman, diamana media sosial sendiri adalah wadah untuk kita agar mendapat atau menjangkau visitor lebih luas dan lebih banyak. selain itu web/blog kita akan semakin SEO dari berbagai sisi.

Twitter Card dan Facebook Open Graph pun memiliki fungsi yang sama yaitu memberikan data halaman sebuah web kepada Twitter's maupun Facebook crawler untuk ditampilkan ketika halamannya di-tweet namun harus divalidasi terlebih dahulu agar bisa berfungsi.

Dengan Twitter Card dan Facebook Open Graph, kita bisa menampilkan image, video, judul postingan, deskripsi postingan, penulis, url halaman, dan lain-lain pada tweet dan status facebook. Twitter Card dan Facebook Open Graph mempunyai cara pemasangan yang berbeda yah.  Namun bagi anda yang templatenya sudah terpasang Facebook Open Graph, maka pemasangan Twitter Card bisa dikombinasikan dengan Facebook Open Graph, tapi tetap harus melalui tahap validasi Twitter agar Twitter mengenali meta tags Twitter Card dan Facebook Open Graph.

Situs untuk test Twitter Card dan Facebook Open Graph.

Twitter Card Validator : https://cards-dev.twitter.com/validator
Facebook Open Graph Validator : https://developers.facebook.com/tools/debug/og/object/

Artikel yang dishare di media sosial akan terlihat lebih menarik dan profesional, sehingga membuat si pembaca, teman atau follower kita akan merasa tertarik untuk menggklik dan membaca artikel tersebut, sadar atau tidak tampilan yang cantik dan profesional akan merangsang otak sipembaca untuk membacanya.

Macam-macam Jenis Twitter Card

Ada 7 macam Twitter Card yang bisa sobat pasang di blog sobat, yang nantinya disesuaikan dengan selera masing-masing dan struktur blog sobat, di antaranya:

Summary Card - Ini adalah default card untuk menampilkan judul, deskripsi, thumbnail, dan atribusi akun Twitter.
Summary Card with Large Image - Mirip dengan Summary Card, tetapi dengan menampilkan gambar yang lebih besar. Pilih ini jika postingan-postingan Anda menggunakan gambar yang besar.
Product Card - Hanya menampilkan photo saja.
Gallery Card - Menampilkan koleksi beberapa photo.
App Card - Untuk menampilkan detail aplikasi mobile dengan direct download.
Player Card - Untuk menampilkan video, audio, atau media lain.
Product Card - Menampilkan informasi produk.
Card Type - https://dev.twitter.com/cards/types

Memasang Meta Tags Twitter Card

Berikut contoh pemasangan meta tags Twitter Card yang menggunakan summary card with large image untuk artikel blog yang menggunakan gambar berukuran besar. Untuk blog yang tidak memiliki atau tidak menggunakan gambar berukuran besar, Anda tinggal mengganti type/content twitter:card saja.
<meta expr:content='data:blog.title' name="twitter:site"/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name="twitter:title"/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name="twitter:description"/>
<b:else/>
<meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' name="twitter:description"/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name="twitter:image:src"/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name="twitter:image:src"/>
<b:else/>
<meta content='[ganti dengan URL gambar favicon blog Anda]' name="twitter:image:src"/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='[@username twitter sobat]' name='twitter:creator'/>
Untuk blog yang tidak menggunakan gambar besar, kode summary_large_image pada name='twitter:card' silahkan ganti dengan summary. Nantinya image yang ditampilkan berupa thumbnail di samping deskripsi postingan, dan ganti tulisan yang terblok merah sesuai dengan keinginan dan akun sobat, tanpa tanda kurung siku "[kurung siku]"

Saran saya URL image pada name="twitter:image:src" dengan blok merah ganti dengan URL gambar favicon blog Anda namun dalam ukuran yang besar untuk digunakan ketika postingan tidak memiliki gambar atau ketika halaman homepage kita di-Tweet atau di share. Contoh salah satu artikel rumpibanget.blogspot.com yang telah divalidasi oleh Twitter Card
http://rumpibanget.blogspot.com/

Memasang Facebook Open Graph

Berikut contoh pemasangan meta Facebook Open Graph yang nantinya akan membuat share dan postingan artikel sobat di status facebook akan menjadi tambah keren dan terlihat profesinal, sehingga membuat pembaca menjadi percaya bahwa blog tersebut dikelola scara profesional dan teman anda tertarik untuk membaca artikelnya. contoh pemasangannya bisa dilihat seperti dibawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;Untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='[ganti dengan URL gambar favicon blog Anda]'property='og:image'/>
</b:if>
</b:if>
Untuk tulisan yang terblok merah silahkan anda ganti sesuai selera anda masing-masing, saran saya sesuaikan dengan penyampaian yang ingin anda sampaikan terhadap pembaca di sosial media. silahkan test dulu contohnya seperti pada gambar dibawah.
http://rumpibanget.blogspot.com/

Menggabungkan Twitter Card dan Facebook Open Graph

Dan jika Anda sudah memasang Facebook Open Graph tags sebelumnya, maka Anda bisa menggabungkan meta tags Twitter Card ini dengan Facebook Open Graph dengan cukup menambahkan beberapa Twitter Card yang tidak ada di Facebook Open Graph. Twitter's parser akan menggunakan data dari Open Graph jika data dari Twitter Card tidak ditemukan. Tambahkan Meta Tags dibawah ini tepat dibawah Meta Tags Facebook Open Graph diatas.
<meta content='100006644464463' property='fb:admins'/>
<meta content='480072895444481' property='fb:profile_id'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='[@username twitter sobat]' name='twitter:creator'/>
Setelah semuanya selesai, silahkan save template blog Anda.

Pastikan juga Anda sudah memasang URL rel canonical di blog Anda, misalnya seperti kode berikut: <link expr:href='data:blog.url' rel='canonical'/>.

Oke sobat, cukup mudah kan, Media Sosial Share dengan Meta Twitter Card dan Facebook Open Graph akan membantu anda dalam menjaring visitor di media sosial besar seperti Facebook, Twitter dan Google+

COMMENTS

BLOGGER

Yuk Tonton YouKuper Channel Di YouTube

Biar Kamu Gak Kuper
Name

Aa Gatot Aa Gym Abdul Rozak Adele Adrenalie Advertising Afie Kalla Agama Ahmad Dhani Ahok Air New Zealand Air Terjun Aktivis Al-Quran Alam Semesta Alami Alay Aldi Taher Alergi Alibaba Alis Tebal Amel Alvi Amerika Amerika Serikat Aming Ammar Zoni Anak Anak Kecil Anak Kucing Anak Muda Indonesia Anak Perempuan Anang Hermansyah Andik Vermansyah Andika Kangen Band Andika Pratama Andita Lela Karlita Andre Android Anggita Sari Anggrek Bulan Anjali Anti Mainstream Aplikasi Argentina Ariel Noah Ariel Peterpan Ariel Tatum Ario Kiswinar Teguh Aron Ashab Arsitektur Bangunan Art Artis Asesoris Rumah Ashanty Atlet ATM Aura Kasih Aurel Hermansyah Austria Awkarin Ayu Ting Ting B.J.Habibie Babi Ngepet Baby Margaretha Badak Indonesia Badak Sumatera Baju Muslim Bakteri Bali Ballon d'Or Bandung Bank Barcelona Bastian Steel Batas Negara Bayi Bayi Menangis Belgia Bella Sofie Berat Badan Berat Badan Ideal Berlibur Bersepeda Bersyukur Big Bang Billy Syahputra Bisnis Bitcoin Black Ultra Plus Blogging Bokong Bolivia Bolliwood Bra Bridgestone Buah Budaya Bukit Bulan Madu Bulan Puasa Bulu Tangkis Bumi Bung Karno Bunga Bunga Kelelawar Bunga Sakura Bunga Zainal Burung Burung Jalak Butet Cacing Pita Caisar 'YKS' Campak Candi Borobudur Cantik Captain America Carina Linn Casey Stoner Cat Dinding Celana Dalam Celine Evangelista Cerdas Cerita Chef Aiko Chelsea Islan Chili China Chong Wei Cinta Laura Ciuman Copa America Cristiano Ronaldo Cumi-Cumi Cupi Cupita Daddy Yankee Daging Mentah Dangdut Dani Pedrosa David Beckham Debu Deddy Corbuzier Dekorasi Ruangan Demi Rose Demian Desain Desain Bangunan Desain Minimalis Desain Ruang Membaca Desain Rumah Despacito Developer Developer Indonesia Dewasa Dewi Persik Dewi Soekarno Diabetes Dian Sastro Diet Dini Indrayani Diss DJ Butterfly Drag Race Dramatis Dress Duduk Duo Serigala ECU Magneti Marelli Egi John Eko DJ Entrepreneur Euro 2016 Evelyn Evolusi Exoplanet Extreme Facebook Facebook Ads Facebook Tool Facial Fahrani Pawaka Empel Fashion Femmy Permatasari Festival Film Trailler Final First Travel Flora & Fauna Fobia Formula 1 Foto Fotografi Fresh Gadget & App Gading Marten Gagal Gambar Game Game Developer Game Online Gangnam Style Psy Ganja Gareth Bale Gaston Castano Gaun Gendut Gerakan Sholat Germany Ghaib Gianluigi Buffon Glenn Fredly Google Map Google Street View Goresan Gossip Goyang Itik GP Argentina 2015 GP Jerman Gunung Gurita Guru Gusnur Hadist Hamish Daud Hantu Haram Harga Rokok Hewan Hindu Hoax Hologram 3D Home Coming Hot Hotel Alexis Hotman Paris Hungaria Ibrahimovic Ibu Hamil Ibu Rumah Tangga Ikan Paus Ilmu Hitam Imagine Cup 2016 Implan India Indonesia Indonesian Idol Indri Barbie Inovasi Inspirasi Rumah Instagram Interior Minimalis Interior Ruangan Inul Daratista Invite Fanspage Invite Group iPhone Ir Soekarno Irfan Bachdim Iron Man Irwansyah Islam Istri Pertama Italia Jakarta Jaman SMA Jamur Jamur Tiram Jantung Jarvis Jas Hujan Jawa Timur Jelajah Jenis Kelamin Jepang Jerapah Jerman Jessica Iskandar Jessica Mila Jet Li Joe Taslim John Cena Jorge Lorenzo Julia Perez Juventus Kalimantan Kanker Karang Gigi Karla Jacinto Karya Seni Katy Perry Kaya Raya Kecantikan Kecelakaan Kedewasaan Keindahan Alam Keluarga Kematian Kemerdekaan Kenya Keramas Keranda Terbang Kesehatan Gigi Kesehatan Ginjal Kesehatan Hidung Kesehatan Jantung Kesehatan Kuping Kesehatan Organ Reproduksi Kesehatan Rambut Kesehatan Usus Kezia Karamoy Kiamat Kim Kardashian Kitchen Set Kodok Kolam Renang Komedian Komedo Komeng Kompas TV Komunitas Kontoversial Kosmetik Kreatif Kriminal Krisdayanti Kroasia Kucing Kuliner Kulkas Lahan Kecil Lanjut Usia Laudya Cynthia Bella Layar Lemari Dapur Minimalis Lenovo Lewandowski LGBT Lia Chabe Klungkung Libido Lin Dan Lionel Messi Lipsync Lombok Lovebird Lucky Hakim Lucu Ludah Luis Fonsi Luna Maya Lupus Madura Madura United Mahasiswa Maia Estianty Majalah MakeUp Malaysia Maleficent Manchester United Mandi Manuel Neuer Manusia Marc Marquez Marcella Zalianty Maria Ozawa Mario Teguh Maroko Marshanda Marvel Maskapai Penerbangan Maverick Vinales Mawar Hitam Mbah Mijan Media Sosial Meggie Diaz Meksiko Meledak Mencuci Baju Meninggal Dunia Mesin ATM Mesra Mesut Ozil Mia Kang Mia Khalifa Michelin Mick Doohan Microsoft Mie Instan Mike Mohede Miley Cyrus Miniatur Bangunan Minum Air Hangat Mishca Chandrawinata Misteri Mitos Miyabi Mobile Game Model Montegi Motif Kayu Moto GP MotoGP 2016 MotoGP 2017 Movistar Yamaha Muay Thai Musim Dingin Nadia Vega Nagita Slavina Najwa Sihab Nangka NASA Nenek Neraka Neymar Jr Ngeres Niagara Nicky Minaj Nikita Mirzani Nikita Willy Nikki Bella Nou Camp Nyangkut Olahraga Old Trafford Olga Syahputra Olimpiade Olla Ramlan Online Game Operasi Plastik Orang Gila Orang Pintar Orang Tua Orgasme Orlando Bloom Otak Outdor Pacar Pacaran Pakistan Pamela Safitri Panas Dalam Pantai Paprika Paranormal Ulfa Parkir Parsel Paru-paru Basah Pasanagan Kekasih Pasta Payudara Peliharaan Pembunuhan Pemuda Indonesia Pendaki Gunung Pendidikan Karakter Penelitian Pengobatan Pengusir Nyamuk Penyakit Penyakit Rambut Penyanyi Perawatan Perbankan Perkosa Pernikahan Perokok Perpustakaan Persib Pertamina Peru Pesbukers Pesugihan Pevita Pearce Photography Piranha Pizza Planet Playstation 4 PNS Pokemon Go Pokemon Spy Polandia Polisi Politikus Ponsel Pintar Portugal Powerbank Pramuka Prewedding Pria Prilly Latuconsina Prisia Nasution Prostitusi PSK Pusaka Qandeel Baloch Rachel Racun Raffi Ahmad Rahma Azhari Raisa Ramadhan Ramalan Rambut Botak Rambut Rontok Ranting Pohon Rapper Real Madrid Rekor Republik Ceko Reza Artamevia Reza Rahadian Rhoma Irama Ria Ridwan Kamil Rio Haryanto Ritual Robby Abbas Rocker Rokok Rokok Elektrik Romantis Roro Fitria Roy Marten Ruang Dapur Ruben Onsu Rumah Rumah Minimalis Rusia Ryuji Utomo Sahabat Sakit Samsung Galaxy S6 Samsung Galaxy S7 Sana Saeed Sandiaga Uno Sangkar Burung Sarah Azhari Sarah Wijayanto Sarapan Sayur Search Engine Seattle Sehat Sejarah Seksi Seksualitas Sel Telur Selebgram Selebritis Selena Gomez Sepakbola Seram Serangga Sex Sexy Shampo Sholat Sianida Sindrom Singapura Sinta Bachir Siput Sky Burial Smack Down Smartphone Smokey Cat Eye Sophia Latjuba Sorban Spanyol Sperma Spider-Man SpiderMan Sports Stadion Star Trek Beyond Star Wars Stefan William Struk Suami Istri Sukses Suku Primitif Sule Sumenep Supercell Surga Susan Sameh Suster Suzuki Ecstar Swedia Syahrini Taman Taman Labirin Tanaman Tasya Kamila Tata Janeta Tata Surya Taufik Hidayat Tebing Teknologi Teliga Telinga Teman Tentara Terancam Punah Terminal 3 Ultimate Teuku Wisnu The Doctor The Voice Kids Indonesia Tiara Dewi Tibet Tidak Senonoh Tidur Tilang Tips TKW Tom Holland Tontowi Tour Tradisi Tradisional Travel Trekking Tren Trypophobia Tukul Arwana Tumbuhan Tumbuhan Karnivora Tumor Turki Tuyul Twitter Tyas Mirasih Uban Unik Universe Universitas Brawijaya Upil US Ustadz Ustadz Syam Uus Valentine Valentino Rossi Varises Via Vallen Vicky Prasetyo Vicky Shu VietJet Vietnam Virus Virus Zika Vitalia Sesha Wahana Permainan Wajah Wales wallpaper 3D Wallpaper Ruangan Wanita Warung Kopi Wasiat WhatsApp Windows Phone Wirausaha Wisata WWF Xiaomi Redmi 3 Yahoo! Yana Zein YouKuper Young Lex YouTube YouTuber Yuki Kato Zaskia Gotik Zaskia Sungkar
false
ltr
item
Rumpi Banget: Media Sosial Share dengan Meta Twitter Card dan Facebook Open Graph
Media Sosial Share dengan Meta Twitter Card dan Facebook Open Graph
http://4.bp.blogspot.com/-bknaFnwJKAQ/VfA3Z7b7trI/AAAAAAAABDA/LpLmDUbW2c0/s640/Meningkatkan%2BSEO%2BMedia%2BSosial%2BShare%2Bdengan%2BMeta%2BTwitter%2BCard%2Bdan%2BFaceook%2BOpen%2BGraph.jpg
http://4.bp.blogspot.com/-bknaFnwJKAQ/VfA3Z7b7trI/AAAAAAAABDA/LpLmDUbW2c0/s72-c/Meningkatkan%2BSEO%2BMedia%2BSosial%2BShare%2Bdengan%2BMeta%2BTwitter%2BCard%2Bdan%2BFaceook%2BOpen%2BGraph.jpg
Rumpi Banget
http://www.rumpibanget.com/2015/09/media-sosial-share-dengan-meta-twitter-card-dan-facebook-open-graph.html
http://www.rumpibanget.com/
http://www.rumpibanget.com/
http://www.rumpibanget.com/2015/09/media-sosial-share-dengan-meta-twitter-card-dan-facebook-open-graph.html
true
6675952127896832729
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy