Share Blog ke Facebook dan Twitter Tampilkan Gambar, Judul, dan Deskripsi

Romeltea | Follow @romel_tea

MEMBAGIKAN atau share blog atau artikel blog ke media sosial Facebook dan Twitter bagian dari SEO, yakni Social Media Optimization (SMO). Berikut ini Cara Tampilkan Gambar, Judul, dan Deskripsi Blog Saat Share ke Facebook dan Twitter.

Share blog dishare ke Facebook dan Twitter, tentu tampilannya harus utuh: gambar, judul, dan deskripsi. Minima ada gambar dan judul postingan. Ini akan lebih menarik. 

Berikut ini contoh-contoh tampilan halaman depan dan halaman postingan blog.romeltea.com saat dishare ke FB dan Twitter.

Share Blog ke Facebook dan Twitter Tampilkan Gambar, Judul, dan Deskripsi

Gambar, Judul, dan Deskripsi Blog Saat Share ke Facebook dan Twitter

Gambar, Judul, dan Deskripsi Blog Saat Share ke Facebook dan Twitter

Gambar, Judul, dan Deskripsi Blog Saat Share ke Facebook dan Twitter

Gambar, Judul, dan Deskripsi Blog Saat Share ke Facebook dan Twitter
Share Blog ke Facebook dan Twitter Tampilkan Gambar, Judul, dan Deskripsi.

Sebelum memasang kode berikut ini, cek dulu tampilan blog Anda saat dibagikan ke FB dan Twitter di Debug Facebook dan Twitter Card Validator.

Jika tampilannya sudah oke, normal, maka hentikan mengikuti panduan ini. Tutorial ini hanya untuk blog yang masih belum menampilkan Gambar, Judul, dan Deskripsi Blog Saat Share ke Facebook dan Twitter.

Pasang Kode untuk Share Blog ke Facebook dan Twitter 

Kode berikut ini adalah kode meta tags Open Graph yang biasa digunakan untuk mendesain tampilan blog saat dibagukan ke media sosial Facebook dan Twitter.

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di bawah kode <head> 

<!-- Facebook and Twitter Open Graph Start -->
<meta content='XXXXXX' property='fb:app_id'/>
<meta content='XXXXXX' property='fb:admins'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT9Jeic3e8gHb93ICxVLg0JGLOmrPP6OZ4SkIiI1guj19qEm2Emp59mFuOhxBdSvpvJVluwgYRxSr0X5nbCVVbapRZXSZh6GqQvgprsthkVJrglhoJBO-GZWM2kLsJIbGnnO227UvO_tii/s640/mobile-friendly.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBS6-rbwbWTfInWJJz_Ec7rFLnmCXUAhuJIup_pT9E2nq8cbzNrRDoIkEDdb5JvQ8dvU6d9dw2bp8gm-Z27zqfqM16bxCkSJYN_W2ANGFfLTZqZPSM7JvQnd2AcPvy_s8rHb-yDqBf53AD/s1600/technopreneur.JPG' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
</b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!-- Facebook and Twitter Open Graph End -->


3. Ganti kode warna merah dengan versi Anda.
4. Save!

Test di Debug Facebook dan Twitter Card Validator. Semoga berhasil. 

Apa Apa itu Open Graph Meta Tag?

Open Graph Meta Tag atau OG Tags merupakan sebuah tag html khusus yang bertujuan agar social media mengenali sebuah page di website. 

Mirip seperti Meta Title dan Meta Description, namun Title dan Description ditujukan untuk search engine, meskipun secara default, social media juga meng-crawl tag ini untuk menampilkan di sosmed tersebut (jika OG Tag tidak ada).

Open Graph diperkenalkan oleh Facebook pada 2010 agar siapa pun yang ingin tampilan title, description, dan image yang ditampilkan di facebook berbeda dengan yang di search engine.

Gampangnya, OG Meta Tag ini berfungsi untuk membuat previewcustom yang menarik agar audience kita di social media tertarik untuk mengkliknya. Tag ini dapat menambah CTR dari social media.

Menurut Neil Patel, situs media sosial adalah pendorong utama sebagian besar lalu lintas website atau blog. Akibatnya, kemampuan untuk memanfaatkan kekuatan tag meta sosial adalah keterampilan penting bagi pemasar saat ini.

Yang terpenting: tag meta grafik terbuka dapat berdampak besar pada konversi dan rasio klik-tayang.

Pernahkah Anda membagikan tautan di Facebook hanya untuk menemukan bahwa gambar mininya hilang, atau ada gambar yang sama sekali berbeda dari yang Anda harapkan?

Mengetahui sedikit tentang tag Grafik Terbuka dapat membantu Anda mengatasi masalah ini dan meningkatkan pemasaran media sosial Anda.

"Menambahkan tag Grafik Terbuka ke situs web Anda tidak akan secara langsung memengaruhi SEO di halaman Anda, tetapi itu akan memengaruhi kinerja tautan Anda di media sosial, jadi itu berarti layak untuk dilihat," kata Neil.

Demikian cara menampilkan Gambar, Judul, dan Deskripsi Blog saat share ke Facebook dan Twitter.*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Share Blog ke Facebook dan Twitter Tampilkan Gambar, Judul, dan Deskripsi

Post a Comment

No Spam, Please!