Panduan Tipografi dan Gaya Penulisan Artikel yang SEO-Friendly (Part 2)
Halo Tappers, seebelumnya kita membahas Panduan Tipografi Part 1, sekarang kita lanjut lagi dengan pembahasan yang sama. Namun kali ini kita kupas cara menentukan dan menggunakan Judul Utama, Judul, Sub Judul, Judul Kecil, Paragraf, dan Normal dalam penulisan Artikel.
Tipografi dalam blogging bukan cuma soal mempercantik tampilan, tapi tentang keterbacaan (readability) dan SEO (Search Engine Optimization). Jika struktur tulisan Anda jelas, pembaca akan betah dan Google pun lebih mudah memahami isi artikel Anda.
Berikut adalah panduan tingkat dasar dan lanjut untuk mengatur tipografi di Blogger, serta cara menentukan penggunaan hierarki teks (Judul Utama hingga Normal).
Panduan Tingkat Dasar: Memahami Hirarki Teks Blogger
Blogger menyediakan menu drop-down pemformatan teks di editornya. Menu ini sebenarnya merepresentasikan tag HTML yang sangat penting untuk SEO.
Berikut adalah cara menentukan dan menggunakan masing-masing format:
1. Judul Utama (Heading / Tag <h1>)
Kapan digunakan: Hanya untuk Judul Artikel Tappers.
Aturan penting: Secara default, Blogger otomatis mengubah judul yang Tappers ketik di kolom judul menjadi
<h1>. Jangan pernah menggunakan format "Judul Utama" di dalam badan (isi) artikel, karena dalam satu halaman web sebaiknya hanya ada satu<h1>.
2. Judul (Subheading / Tag <h2>)
Kapan digunakan: Sebagai poin-poin pembahasan besar atau bab utama di dalam artikel Tappers.
Contoh: Jika artikel Tappers berjudul "Cara Merawat Kucing", maka
<h2>adalah "1. Memilih Makanan Kucing" dan "2. Menjaga Kebersihan Kucing".
3. Sub Judul (Minor Heading / Tag <h3>)
Kapan digunakan: Untuk memecah pembahasan dari
<h2>menjadi bagian yang lebih spesifik.Contoh: Di bawah
<h2>"1. Memilih Makanan Kucing", Tappers bisa membuat<h3>berupa "A. Makanan Kering (Dry Food)" dan "B. Makanan Basah (Wet Food)".
4. Judul Kecil (Sub-subheading / Tag <h4>)
Kapan digunakan: Untuk rincian yang lebih detil lagi di bawah
<h3>. Jarang digunakan kecuali artikel Tappers sangat panjang dan bersifat ilmiah atau tutorial teknis.Contoh: Di bawah
<h3>"A. Makanan Kering", Tappers memakai<h4>untuk "Kandungan Nutrisi yang Diperlukan".
5. Paragraf / Normal (Tag <p>)
Kapan digunakan: Ini adalah format untuk seluruh isi teks/body copy artikel Tappers.
Perbedaan Paragraf & Normal di Blogger: Format "Paragraf" biasanya memberikan jarak (margin) otomatis di bawah teks agar antar paragraf tidak menempel, sedangkan "Normal" adalah teks polos tanpa modifikasi jarak bawaan. Disarankan selalu gunakan format "Paragraf" untuk menulis isi artikel.
Panduan Tingkat Lanjut: Optimasi Tipografi & CSS di Blogger
Jika Tappers ingin blog terlihat lebih profesional dan unik, Tappers tidak bisa hanya mengandalkan pengaturan default Blogger. Tappers perlu masuk ke tingkat lanjut menggunakan CSS.
1. Gunakan Aturan Kontras Ukuran (Type Scale)
Jangan menentukan ukuran font asal-asalan. Gunakan rasio matematika (seperti Golden Ratio atau Perfect Fourth) agar ukuran font terlihat seimbang secara visual.
Paragraf/Normal: 16px - 18px (Ukuran ideal untuk membaca di HP dan Desktop).
Judul (
<h2>): 28px - 32px.Sub Judul (
<h3>): 22px - 24px.
2. Atur Line Height (Jarak Antar Baris)
Teks yang terlalu rapat bikin mata cepat lelah. Untuk teks Paragraf, idealnya gunakan line-height antara 1.5 sampai 1.7. Untuk Judul (<h2>), gunakan line-height yang lebih rapat, sekitar 1.2 atau 1.3.
3. Batasi Jumlah Font (Maksimal 2 Jenis)
Font 1 (Judul): Gunakan font yang berkarakter kuat untuk
<h2>dan<h3>(Contoh: Montserrat, Poppins, Playfair Display).Font 2 (Isi Teks): Gunakan font yang sangat mudah dibaca untuk Paragraf (Contoh: Inter, Roboto, Open Sans, Lora).
4. Kustomisasi Tipografi Lewat Tema Blogger (CSS)
Tappers bisa memformat semua tulisan secara otomatis tanpa perlu mengubahnya satu per satu di editor.
Pergi ke Dashboard Blogger > Tema (Theme) > Klik tanda panah ke bawah di sebelah "Sesuaikan" > Edit HTML.
Cari kode
]]body>atau</style>.Tempelkan kode CSS kustom Tappers di atas kode tersebut. Contoh:
/* Pengaturan untuk Isi Artikel/Paragraf */.post-body p {font-family: 'Inter', sans-serif;font-size: 17px;line-height: 1.6;color: #333333; /* Warna hitam keabuan lebih nyaman di mata dibanding hitam pekat */margin-bottom: 1.5rem;}/* Pengaturan untuk Judul Bab (h2) */.post-body h2 {font-family: 'Poppins', sans-serif;font-size: 28px;font-weight: 700;color: #111111;margin-top: 2rem;margin-bottom: 1rem;}/* Pengaturan untuk Sub Judul (h3) */.post-body h3 {font-family: 'Poppins', sans-serif;font-size: 22px;font-weight: 600;color: #222222;margin-top: 1.5rem;margin-bottom: 0.8rem;}
#333333 di atas latar putih #ffffff). Hindari menggunakan teks warna hitam pekat (#000000) dalam jumlah banyak karena bisa membuat mata cepat lelah saat membaca di layar gadget.