Ketika membangun sebuah blog, tampilan metadata sering kali menjadi bagian kecil yang terlupakan. Padahal, informasi seperti tanggal terbit, jumlah pembaca, dan waktu membaca bisa meningkatkan pengalaman pengunjung secara signifikan. Metadata yang rapi dan modern juga membuat blog terlihat lebih profesional dan terstruktur.
Pada tutorial ini, kita akan membahas langkah-langkah untuk menambahkan metadata modern di postingan WordPress mulai dari tanggal publikasi, tanggal update, view counter (jumlah pembaca), hingga estimasi waktu membaca. Semua bisa dilakukan tanpa plugin tambahan, hanya dengan menambahkan beberapa baris kode di Code Snippets atau langsung di file tema.
Daftar Isi
Apa itu Metadata Postingan?
Metadata adalah informasi tambahan yang muncul di bawah judul artikel, misalnya:
📅 Tanggal publikasi
🔄 Tanggal update
👁️ Jumlah views
⏱️ Estimasi waktu baca
Elemen-elemen ini memberikan konteks kepada pembaca dan membantu mesin pencari memahami struktur artikel Anda.
Kenapa Metadata Penting untuk Blog?
Ada beberapa alasan kenapa metadata wajib kamu tampilkan:
1. Pengalaman Pengguna Lebih Baik
Pengunjung ingin tahu apakah artikel masih relevan. Dengan melihat tanggal update, mereka bisa menilai keakuratan informasi.
2. SEO Lebih Optimal
Google menyukai halaman dengan struktur informasi yang jelas. Metadata membantu bot memahami konteks konten.
3. Meningkatkan Engagement
Fitur seperti jumlah views dan waktu baca dapat membuat artikel lebih menarik dan meningkatkan trust.
4. Tampilan Blog Lebih Profesional
Blog yang menampilkan metadata modern terlihat lebih rapi dan seperti media besar.
Langkah 1: Tambahkan Fungsi View Counter dan Reading Time
Agar WordPress bisa menghitung jumlah pembaca dan estimasi waktu membaca, kita perlu memasukkan beberapa fungsi ke dalam situs. Kamu bisa menaruhnya di:
Code Snippets (disarankan) atau functions.php (opsional)
Berikut kode yang digunakan:
// Hitung views
function setPostViews($postID) {
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count == ''){
$count = 1;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, $count);
} else {
$count++;
update_post_meta($postID, $count_key, $count);
}
}
// Ambil views
function getPostViews($postID){
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count == ''){
return "0";
}
return $count;
}
// Jalankan saat single post dibuka
function track_post_views ($post_id) {
if (!is_single()) return;
if (empty ($post_id)) {
global $post;
$post_id = $post->ID;
}
setPostViews($post_id);
}
add_action( 'wp_head', 'track_post_views');
// Hitung estimasi waktu baca
function reading_time() {
$content = get_post_field( 'post_content', get_the_ID() );
$word_count = str_word_count( strip_tags( $content ) );
$reading_time = ceil( $word_count / 200 );
return $reading_time . ' menit baca';
}
Setelah fungsi di atas aktif, WordPress otomatis mulai menghitung views dan estimasi waktu baca.
Langkah 2: Tambahkan Metadata ke file single.php
Pada langkah ini, kita akan memasukkan HTML yang berisi metadata lengkap: tanggal terbit, tanggal update, views, dan waktu membaca.
Tempatkan kode berikut tepat setelah <h1 class="post-title">.
<div class="post-meta-modern">
<div class="meta-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<span><?php echo get_the_date('j F Y'); ?></span>
</div>
<?php if ( get_the_modified_time() !== get_the_time() ) : ?>
<div class="meta-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
<span>Updated: <?php echo get_the_modified_date('j F Y'); ?></span>
</div>
<?php endif; ?>
<div class="meta-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
<span><?php echo getPostViews(get_the_ID()); ?> views</span>
</div>
<div class="meta-item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<span><?php echo reading_time(); ?></span>
</div>
</div>
Langkah 3: Tambahkan CSS Supaya Tampil Rapi & Modern
Masuk ke:
Appearance → Customize → Additional CSS
Tambahkan kode ini:
.post-meta-modern {
display: flex;
gap: 18px;
align-items: center;
margin-bottom: 25px;
flex-wrap: wrap;
opacity: .9;
}
.meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
}
.meta-icon {
opacity: 0.8;
}
Kini tampilan metadatamu akan tampil profesional seperti media besar, contohnya:
📅 30 November 2024
🔄 Updated: 12 Desember 2024
👁️ 1.234 views
⏱️ 4 menit baca
Kesimpulan
Menambahkan metadata modern ke postingan WordPress ternyata tidak sulit, dan hasilnya sangat besar bagi kualitas blog. Selain membuat tampilan lebih profesional, fitur ini meningkatkan pengalaman pembaca dan membantu mesin pencari memahami struktur artikel.
Dengan mengikuti langkah-langkah di atas, kamu sudah bisa membuat metadata ala portal berita profesional—lengkap dengan view counter dan waktu baca—tanpa plugin tambahan.
