Kode Open Graph Meta Tags Plus Twitter Card untuk Blogger

Baca Juga

Open Graph Meta Tags dan Twitter Card adalah sekumpulan elemen kode HTML (<meta>) yang diletakkan di bagian <head> pada suatu halaman web/blog. 

Kode ini berfungsi untuk mengontrol bagaimana tampilan pratinjau (link preview) saat tautan tersebut dibagikan di media sosial atau aplikasi pesan (seperti Facebook, X/Twitter, LinkedIn, WhatsApp, dan Discord).

Membagikan (share) link blog atau postingan blog ke media sosial merupakan bagian dari SEO, yakni Sosial Media Optimization (SMO) agar blog banyak pengunjung atau dikunjungi follower dan pengguna medsos.

Anda harus siapkan gambar logo khusus blog untuk medsos dan gambar default untuk cadangan jika postingan blog tidak menyertakan gambar/ilustrasi/foto.

Fungsi Utama Open Graph Meta Tags dan Twitter Card

Fungsi kode Open Graph Meta Tags dan Twitter Card adalah sebagai berikut:

1. Mengatur Tampilan Pratinjau: Memberi kontrol penuh kepada pemilik website untuk menentukan judul (og:title), deskripsi (og:description), gambar utama (og:image), dan jenis konten (og:type) yang muncul ketika link dibagikan.
2. Meningkatkan Click-Through Rate (CTR): Tautan yang memiliki gambar menarik dan teks rapi cenderung lebih dipercaya dan diklik oleh pengguna dibanding link yang menampilkan pratinjau acak.
3. Konsistensi Branding: Memastikan logo, nama situs (og:site_name), dan identitas visual tampil seragam di berbagai platform.

Kode Open Graph Meta Tags dan Twitter Card

Kode berikut ini disimpan di bawah kode <head> dalam template blog Anda. Pilih salah satu.

KODE 1

<!-- Open Graph Meta Tags Plus Twitter Tag BEGIN -->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:view.isHomepage'>
<b:if cond='data:view.isPost'>
<b:if cond='data:view.isPage'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.title' name='twitter:image:alt'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
</b:if></b:if></b:if></b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='URL IMAGE' name='twitter:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<!-- Open Graph Meta Tags Plus Twitter Tag END -->

KODE 2 (Alternatif)

<!-- Open Graph Meta Tags Plus Twitter Tag BEGIN -->

<!-- Open Graph Meta Tags (Facebook, WhatsApp, LinkedIn, etc) -->

<meta expr:content='data:blog.title' property='og:site_name'/>

<b:if cond='data:blog.pageType == "item"'>

  <meta expr:content='data:blog.pageName' property='og:title'/>

  <meta content='article' property='og:type'/>

  <meta expr:content='data:blog.url' property='og:url'/>

  <b:if cond='data:blog.postImageUrl'>

    <meta expr:content='data:blog.postImageUrl' property='og:image'/>

  <b:else/>

    <meta content='URL GAMBAR CADANGAN DEFAULT' property='og:image'/>

  </b:if>

  <meta expr:content='data:blog.metaDescription' property='og:description'/>

<b:else/>

  <meta expr:content='data:blog.title' property='og:title'/>

  <meta content='website' property='og:type'/>

  <meta expr:content='data:blog.homepageUrl' property='og:url'/>

  <meta content='URL GAMBAR LOGO BLOG' property='og:image'/>

  <meta expr:content='data:blog.metaDescription' property='og:description'/>

</b:if>

<!-- Twitter Card Meta Tags -->

<meta content='summary_large_image' name='twitter:card'/>

<meta content='@username' name='twitter:site'/>

<meta content='@username' name='twitter:creator'/>

<b:if cond='data:blog.pageType == "item"'>

  <meta expr:content='data:blog.pageName' name='twitter:title'/>

  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

  <b:if cond='data:blog.postImageUrl'>

    <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

  <b:else/>

    <meta content='URL GAMBAR CADANGAN DEFAULT' name='twitter:image'/>

  </b:if>

<b:else/>

  <meta expr:content='data:blog.title' name='twitter:title'/>

  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

  <meta content='URL GAMBAR' name='twitter:image'/>

</b:if>

<!-- Open Graph Meta Tags Plus Twitter Tag END -->

Demikian Kode Open Graph Meta Tags Plus Twitter Card untuk Blogger. Perhatian kode warna merah untuk Anda ganti dengan punya Anda.