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.

cara open graph and twitter card seo friendly
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>


<!-- Facebook open graph -->

<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 == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' property='og:description'/>
</b:if>
</b:if>

<!-- end open graph -->

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

<!-- Twitter Cards -->

<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 == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='twitter:description'/>
</b:if>
</b:if>

<!-- end Twitter Cards -->


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 = "http://2.bp.blogspot.com/-dJsyHF8vkck/VDN63xCXasI/AAAAAAAABDU/UjRI5rAdfLE/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="http://2.bp.blogspot.com/-dJsyHF8vkck/VDN63xCXasI/AAAAAAAABDU/UjRI5rAdfLE/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 comments:

  1. Agak sedikit bingung juga memahaminya tapi informasi ini dipastikan bagus untuk newbie dalam SEO. Thanks.

    ReplyDelete
  2. Ini nih yang mesti dicoba pas preview share artikel di sosmed dah mulai berantakan :D

    Makasih min.

    ReplyDelete
  3. klo ketika share artikelnya, justru tidak terbaca oleh Facebooknya itu gimana yah suhu
    mohon pencerahannya

    terima kasih

    ReplyDelete

Powered by Blogger.