Membuat Metadata Open Graph dan Twitter Card secara Dinamis di Blogger

Kita telah mempelajari cara menerapkan Open Graph secara otomatis dan Twitter Card secara manual. Sekarang, kita akan menggabungkan keduanya agar berjalan secara dinamis.

Seperti yang kita ketahui, pemanggilan bawaan <b:include data='blog' name='all-head-content'/> secara otomatis sudah memuat Meta Tag dasar dan Open Graph ke dalam blog kita, tetapi tidak termasuk Twitter Card.

Dalam panduan ini, kita akan membuat sebuah fungsi inklusi kustom (custom inclusion) bernama MetaCustom untuk menggantikan peran all-head-content. Fungsi baru ini dirancang lebih lengkap karena otomatis menyertakan struktur data Twitter Card yang dinamis mengikuti jenis halaman yang sedang diakses.

Kode Struktur Meta Kustom Utama

Silakan salin seluruh baris kode di bawah ini ke dalam template HTML blog Anda. Pastikan untuk mengganti teks berwarna jingga (@twitter_username) dengan nama pengguna Twitter/X Anda sendiri:

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    
    <b:includable id='MetaCustom'>
        <meta expr:content='"text/html; charset=" + data:data:blog.encoding' http-equiv='Content-Type'/>
        <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
        <link expr:href='data:view.url.canonical' rel='canonical'/>
        <data:blog.feedLinks/>
        <data:blog.meTag/>
        <b:tag cond='data:blog.googleProfileUrl' expr:href='data:blog.googleProfileUrl' name='link' rel='publisher'/>
        <b:tag cond='data:view.featuredImage' expr:href='data:view.featuredImage' name='link' rel='image_src'/>
        
        <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' name='description'/>
        </b:if>
        
        <b:include name='SocialMediaMetaData'/>
        
        </b:includable>     
    
    <b:includable id='SocialMediaMetaData'>
        <meta expr:content='data:blog.url.canonical' property='og:url'/>
        <meta expr:content='data:view.title.escaped' property='og:title'/>
        
        <b:if cond='data:view.isPost'>     
          <meta expr:content='data:view.description.escaped' property='og:description'/>
        </b:if>
        
        <b:if cond='data:view.featuredImage'>
          <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
        <b:elseif cond='data:widgets'/>
          <b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
            <meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/>
          </b:loop>
        <b:elseif cond='data:blog.postImageUrl'/>
          <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>     
        </b:if>
        
        <meta content='article' property='og:type'/>
        <meta content='@twitter_username' name='twitter:creator'/>
        <meta content='@twitter_username' name='twitter:site'/>
        <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
        
        <b:if cond='data:view.isPost'>
          <meta content='summary_large_image' name='twitter:card'/>
        <b:else/>
          <meta content='summary' name='twitter:card'/>
        </b:if>        
    </b:includable>
    
  </b:defaultmarkup>
</b:defaultmarkups>

Cara Memasang Kode di Template Blogger

Untuk menerapkan kode di atas ke dalam template blog Anda, silakan ikuti panduan peletakan berikut:

Langkah 1: Menaruh Blok Fungsi Utama

Buka editor HTML tema Anda, gulir ke bagian paling bawah kode template Anda, lalu temukan tag penutup </body>. Rekatkan (paste) seluruh blok kode ... kustom di atas tepat sebelum tag </body> tersebut.

Langkah 2: Melakukan Pemanggilan Fungsi (Call for Inclusion)

Gulir kembali ke bagian atas kode template Anda, lalu cari area di antara tag <head> dan </head>.

Jika Anda menemukan kode bawaan <b:include data='blog' name='all-head-content'/>, hapus kode tersebut dan ganti dengan kode pemanggilan baru di bawah ini. Jika tidak ada, letakkan kode baru ini tepat sebelum tag penutup </head>:

<b:include name='MetaCustom'/>
</head>

(Proses pemanggilan inklusi ini bekerja mirip seperti saat kita memanggil sebuah fungsi di dalam bahasa pemrograman JavaScript).

Penjelasan Logika Kode

Struktur kode di atas memanfaatkan tag <b:defaultmarkups> dengan tipe atribut 'Common'. Fitur ini digunakan untuk menciptakan sebuah fungsi penampung global baru bernama MetaCustom.

Di dalam fungsi baru ini, kita menyusun kembali kode penarik data meta bawaan Blogger (seperti encoding, alamat favicon, URL canonical, dan deskripsi blog).

Keunggulannya terletak pada bagian sub-fungsi SocialMediaMetaData, di mana kita menyematkan logika kondisional:

Paginasi Gambar Otomatis: Menggunakan fungsi resizeImage untuk memaksa sistem memotong gambar artikel menjadi rasio ideal 1200:630 piksel. Ukuran ini merupakan standar emas agar gambar pratinjau tidak terpotong saat dibagikan ke Facebook maupun Twitter/X.
Kondisi twitter:card Dinamis: Sistem akan mendeteksi jenis halaman secara otomatis. Jika pengunjung berada di halaman artikel (data:view.isPost), tipe kartu yang dimuat adalah summary_large_image (kartu dengan gambar besar). Namun jika berada di halaman utama atau halaman indeks, tipe kartu otomatis berubah menjadi summary (kartu standar dengan gambar kecil di samping teks).

Cari Blog Ini

Blogger Theme Tutorial