Meta Tag Social Media: Cara Pasang Open Graph dan Twitter Card

Apakah blog/website kalian terpasang meta description tag dan title tag?

Memasang Meta Tag tentu saja hal itu wajib di lakukan bagi seorang blogger, mengingat meta tag itu sangat membantu kita meningkatkan ranking dalam search engine.

open graph

pada kesempatan kali ini penulis ingin memberikan tips cara memasangan meta tag open graph facebook dan twitter card pada blog. cara ini di lakukan untuk mengontrol tampilan pada saat kita melalukan shared pada social media tersebut.

Dibawah ini adalah langkah-langkah pemasangan Open Graph Dan Twitter Card:

Login pada akun blogger
Cari menu Template, lalu klik
kemunidian klik pada menu edit html
Lalu pasang kode open graph dan card di bawah <head>

<meta content='id_id' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/pututtp' property='fb:admins'/>
<meta content='https://www.facebook.com/pututtp' property='fb:profile_id'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='data:blog.postImageUrl' property='og:image'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='ID Penulis Artikel Blog tentang Perjalanan Hidup dan Ilmu With Powerful SEO' property='og:description'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title' property='og:description'/>
</b:if>
</b:if>



================================================



<meta content='summary' name='twitter:card'/>
<meta content='Putut Pratama' name='twitter:site'/>
<meta content='@PututTPratama' name='twitter:creator'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<meta content='ID Penulis Artikel Blog tentang Perjalanan Hidup dan Ilmu With Powerful SEO' name='twitter:description'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title' name='twitter:description'/>
</b:if>
</b:if>

Berikut adalah code dan fungsi yang terdapat pada open graph dan card pilihlah sesuai keinginan kalian untuk memasang. code di bawah ini yang sering biasa dipasang pada blog.

og: title

dini sini kita akan menenpatkan judul konten. mirip dengan tag judul html yang dipakai oleh search engine. Ketika membuat og: title, pastikan jumlah karakter kurang dari 95 karakter.

Contoh: <meta property ="og: title" content ="SEO Friendly title blog"/>

og: description

ini juga mirip dengan html meta tag description, karena berfungsi untuk menjelaskan isi konten kita. mungkin kita bisa abaikan ini apabila keyword yang kita miliki sudah memenuhinya, tetapi tidak ada salahnya kita mendeskripsikan sesuatu disini untuk menarik dan menghasilkan lebih banyak klik. maksimal hingga 297 karakter untuk tag ini.

Contoh: <meta property ="og: description" content ="ingin tau cara optimasi meta tag agar lebih SEO Friendly? metode rahasia dibalik meta tag terbaik dan SEO Friendly."/>

og:type

disini kita akan menjelaskan isi konten yang ingin kita share. Apakah meliputi video, gambar, posting blog, dll. Berikut beberapa daftar untuk mendefinisikan jenis konten yang ingin di sharing:

Businesses: [company, cafe, hotel, restaurant]
Activities: [activity, sport]
Groups: [cause, sports_league, sports_team]
People: [actor, athlete, author, politician, director, public_figure, musician]
Organizations: [band, government, school, university, non_profit]
Websites: [article, website, blog]
Places: [landmark, country, city, state_province]
Products and Entertainment: [drink, movie, food, book, game, album, product, song, tv_show]

Contoh: <meta property ="og:type" content ="article" />

og: image

untuk menampilkan gambar pada Facebook setiap kali seseorang berbagi URL. Dengan menggunakan og: image, untuk memastikan bahwa gambar akan muncul pada konten saat melakukan sharing. akan tetapi tag ini harus melalui persyaratan Facebook. Sebuah gambar setidaknya memiliki ukuran 50px 50px, atau 200px 200px. dan gambar tidak bisa lebih dari 5 MB

Contoh: <meta property = "og: image" content = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5JyyHdRysA7TbvZsr2kQuaiqw8hElRBWwN_CeBLu2LkDlEiGJV5MxKRYHZyTkmlSnPkXVyLvnQIEtUJI66qZTMh8IyHg8BMJcexxXROiF4yS91BjLlptyYm74mYBI554g9BjBv0CPzuE/s1600/IdBpenulisBTipsBpemasaranBkonten.jpg" />

og: url

Dalam tag ini, kita harus menempatkan URL dari halaman yang di share. Tag ini mungkin tampak tidak relevan, tetapi penting karena kadang-kadang kita akan memiliki lebih dari satu URL untuk konten yang sama. Dengan menggunakan tag ini, kita akan memastikan bahwa semua share menuju ke salah satu URL, yang seharusnya membantu Facebook Edgerank.

Contoh: <meta property ="og: url" content="data:blog.url" />

og: site_name

Tag ini memberitahu Facebook nama blog/website kita. menurut gue tag ini tidak terlalu penting, namun tidak ada salahnya memasang tag ini.

Contoh: <meta property=:"og site_name" content="ID-Penulis Blogger" />

fb: admin

Jika Anda memiliki halaman penggemar di Facebook dan Anda ingin mendapatkan lebih banyak data di Facebook Insights, maka Anda harus menggunakan tag ini. Ini memberitahu Facebook Anda adalah pemilik situs, dan menghubungkan halaman fan Facebook Anda ke website Anda.

Contoh: <meta property ="fb: admin" content="800093011" />

Selesai dengan facebook open graph, kita akan lanjutkan memsang twitter card pada blog/website kita.

=======================Twitter Cards.=======================

twitter: Card

Meta tag ini menjelaskan jenis konten yang di share. ada tiga pilihan di Twitter: foto (untuk gambar), player (untuk video), dan ringkasan (untuk segala sesuatu yang lain). Jika tidak menentukan twitter: Card, Twitter akan default ringkasan.

Contoh: <meta name = "twitter: Card" content = "Summary"/>

twitter: description

Hal ini mirip dengan tag meta description pada google. Tapi jangan hal itu dengan kata kunci. Tujuan Anda harus membuat kalimat menarik yang mendorong orang untuk mengklik ke situs Web Anda.

Deskripsi Anda terbatas pada 200 karakter.

Contoh: <meta name="twitter:description" content="ingin tau cara optimasi meta tag agar lebih SEO Friendly? metode rahasia dibalik meta tag terbaik dan SEO Friendly"/>

twitter: title

Demikian pula gelar Facebook Open Graph, ini tidak boleh diisi dengan kata kunci. Buatlah menarik sehingga orang akan ingin klik di atasnya. Sekali lagi, seperti dengan Facebook, maksimal jumlah karakter sampai 70.

Contoh: <meta name="twitter:title" content ="SEO Friendly title blog"/>

twitter: image

untuk memmunculkan gambar saat tweet. Gambar Anda harus kurang dari 1 MB dalam ukuran file, dan tidak boleh lebih kecil dari 60px 60px. Potret lebih besar dari 120px 120px dengan akan diubah ukurannya.

Contoh: <meta name="twitter:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5JyyHdRysA7TbvZsr2kQuaiqw8hElRBWwN_CeBLu2LkDlEiGJV5MxKRYHZyTkmlSnPkXVyLvnQIEtUJI66qZTMh8IyHg8BMJcexxXROiF4yS91BjLlptyYm74mYBI554g9BjBv0CPzuE/s1600/IdBpenulisBTipsBpemasaranBkonten.jpg">

Setelah menerapkan meta tag Twitter Card ke blog/situs, kita perlu menerapkan program Twitter card. Setelah Anda diterima, URL dari website Anda akan ditampilkan dalam format kartu.

kesimpulannya

Meta tag tidak hanya untuk mesin pencari. pada media sosial juga memanfaatkannya. Sama seperti bagaimana kita akan mengoptimalkan meta tag untuk peringkat Google dan klik, dan kita perlu melakukan hal yang sama untuk Facebook dan Twitter.

Jadi, apa yang kalian pikirkan tentang Open Graph dan Card?

3 Responses to "Meta Tag Social Media: Cara Pasang Open Graph dan Twitter Card"

Bahasacorner.comMay 31, 2015 at 12:41 PM
Agak sedikit bingung juga memahaminya tapi informasi ini dipastikan bagus untuk newbie dalam SEO. Thanks.
Nonton Film Cinema Terbaru Sub IndoDecember 27, 2015 at 9:12 PM
Ini nih yang mesti dicoba pas preview share artikel di sosmed dah mulai berantakan :D

Makasih min.
Artikel IndonesiaMarch 28, 2016 at 11:45 AM
klo ketika share artikelnya, justru tidak terbaca oleh Facebooknya itu gimana yah suhu
mohon pencerahannya

terima kasih

Meta Tag Social Media: Cara Pasang Open Graph dan Twitter Card

3 Responses to "Meta Tag Social Media: Cara Pasang Open Graph dan Twitter Card"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel