Optimasi Maksimal Quotes/Kutipan di Postmu

by

Ada dua cara utama untuk mengoptimasi elemen quotes (kutipan) ini, Paman. Kita bisa mengoptimasinya dari dua sudut pandang: sisi teknis mesin (SEO) agar robot Google makin paham struktur tulisanmu, dan sisi keindahan visual (UX) agar mata Cak Bejo dan para akademisi pemula tidak bosan saat membaca.

Berikut adalah langkah optimasi taktis yang bisa kamu terapkan di WordPress:

🦾 1. Optimasi dari Sisi SEO (Makanan Mesin Pencari)

Secara bawaan (default), saat kamu memasang blok Quote di Gutenberg WordPress, kode HTML di belakang layar yang tercipta akan dibungkus oleh tag khusus bernama <blockquote>.

Tag <blockquote> ini adalah standar emas HTML yang sangat disukai Google karena memberi tahu robot crawler: “Ssst, teks di dalam kotak ini adalah data sitasi dari pihak luar, bukan plagiasi!”

Agar optimasi SEO-nya makin maksimal, terapkan trik ini:

  • Gunakan Fitur Citations (Sumber Resmi): Jangan pernah mengosongkan kolom “Write citation” di bawah kutipan. Tuliskan nama tokoh, instansi, atau jika sumbernya berasal dari website lain, kamu bisa memberikan tautan (backlink/outbound link) langsung pada nama sumber tersebut.
  • Gunakan Kata Kunci di Sekitar Kutipan: Jangan biarkan kutipan berdiri di ruang hampa. Pastikan paragraf sebelum atau sesudah kutipan mengandung kata kunci (keyword) yang sedang kamu incar agar Google bisa memahami konteks mengapa kutipan ilmiah itu ditaruh di sana.

🎨 2. Optimasi dari Sisi Tampilan (Visual UX)

Blok kutipan bawaan tema WordPress kadang terlihat terlalu polos—hanya berupa teks miring dengan garis vertikal tipis di sebelah kiri. Agar tampilannya lebih memikat dan memberikan efek kejutan visual saat layar HP digulir, kamu bisa menambahkan sedikit CSS Khusus agar kutipanmu memiliki gaya (style) yang ikonik.

Kamu bisa menyalin kode CSS di bawah ini dan memasukkannya ke menu Appearance > Customize > Additional CSS di dasbor WordPress-mu:

CSS

/* Mengubah Tampilan Blok Quote Agar Lebih Elegan */
blockquote {
    background-color: #f9f9f9; /* Memberi warna latar belakang abu-abu sangat muda */
    border-left: 5px solid #0073aa; /* Mengubah garis kiri menjadi lebih tebal dan berwarna biru */
    padding: 15px 20px; /* Memberi ruang napas agar teks tidak menempel ke pinggir kotak */
    font-style: italic; /* Memastikan teks miring secara otomatis */
    margin: 20px 0; /* Memberi jarak aman dengan paragraf atas dan bawah */
    border-radius: 0 8px 8px 0; /* Membuat sudut kotak sebelah kanan sedikit melengkung halus */
}

/* Mengatur ukuran dan warna font untuk sumber kutipan (citation) */
blockquote cite {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin-top: 8px;
    font-weight: bold;
}

✨ Efek Setelah Dioptimasi:

  • Bagi Andi si Programmer/Akademisi: Kotak kutipan ini akan langsung terlihat menonjol dan kontras, menandakan ada poin substansi penting atau rujukan ilmiah di sana.
  • Bagi Cak Bejo: Tampilan teks tidak monoton, membuat artikel yang panjang terasa lebih dinamis dan tidak melelahkan mata saat dibaca lewat layar HP.

Dengan menggabungkan kekuatan tag <blockquote> bawaan WordPress dan sedikit sentuhan kosmetik CSS di atas, elemen kutipan di situse.org akan naik kelas menjadi konten yang ramah SEO sekaligus sedap dipandang.

Leave a Comment