Cara Menggunakan Tag Heading HTML dengan Benar

Setiap situs web adalah monster uniknya sendiri, dengan pengembang dan desainer memasukkan suara khas mereka sendiri ke dalam kode. Tetapi satu elemen yang dimiliki oleh setiap situs web adalah tag heading HTML. Judul ini tidak hanya memecah konten Anda menjadi bagian yang lebih mudah dibaca, tetapi juga membuat garis besar semantik situs Anda sehingga mesin telusur dan perangkat lunak aksesibilitas dapat mengetahui dengan tepat konten apa yang membentuk situs tersebut. Terkadang ada beberapa kebingungan tentang penggunaan dan fungsi tag heading HTML yang tepat, jadi kami ingin membahas semua 6 tingkatan dan mendiskusikan bagaimana dan kapan menggunakannya dengan benar.

Berlangganan Saluran Youtube Kami

Mengapa Menggunakan Tag Judul HTML?

Seperti yang kami katakan di atas, tag ini membuat kerangka situs Anda. Tanpa mereka, tidak hanya judul dan tujuan situs Anda yang kurang jelas, tetapi konten terlihat bagi pengguna dan bot seolah-olah itu adalah satu dinding teks raksasa — bahkan jika Anda memecahnya menggunakan paragraf.

Selain itu, pembaca layar dan perangkat lunak aksesibilitas menggunakannya untuk menavigasi konten Anda (terkadang secara harfiah). Jadi, jika Anda tidak menyertakan tag heading HTML, situs Anda menjadi tidak dapat diakses oleh banyak orang karena mereka tidak dapat berpindah-pindah halaman dan konten.

Selain itu, mesin telusur dan perayap web lain yang masuk ke situs Anda juga menavigasi melalui judul Anda. Baru-baru ini, Google telah mempertimbangkan semantik kode dalam peringkatnya, yang berarti bahwa niat pencarian sangat ditimbang. Tag heading HTML Anda adalah bagian utama dari ini, memberi tahu Google dan pengunjung di mana pada halaman untuk menemukan informasi spesifik, diatur berdasarkan kepentingan hierarkis.

Dan setiap tag dalam halaman Anda membantu semua ini dengan caranya sendiri.

Hirarki Tag itu Penting

Hirarki tag heading HTML penting. Urutan penggunaan tag ini dapat membuat atau merusak SEO untuk situs Anda. Meskipun Anda dapat menatanya menggunakan CSS dan membuat tag H6 lebih besar, lebih berani, dan lebih terang daripada H2, Anda tetap harus mencoba mengaturnya agar tidak membingungkan perayap (dan pembaca).

Pikirkan tentang tag dalam urutan menaik seolah-olah itu adalah judul untuk garis besar posting Anda. Anda hanya harus (secara umum), menempatkan nomor yang lebih tinggi di bawah pendahulunya langsung. Anda dapat membuat sarangnya sedalam yang Anda inginkan, tetapi pastikan Anda hanya menempatkan yang berikutnya secara berurutan setiap kali.

Berikut ini contohnya:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

Mungkin ada kasus tertentu di mana Anda memiliki satu H6 di atas H4, tetapi sebagian besar, Google dan mesin pencari lainnya menentukan prioritas topik dan mengukur efektivitas konten untuk maksud pencarian dengan menggunakan judul untuk menavigasi konten Anda.

Tag H1

Tag H1 mungkin yang paling sederhana dari tag heading HTML, sementara juga menjadi salah satu yang paling disalahpahami. Dalam kebanyakan kasus, Anda akan melihat heading H1 sebagai judul halaman atau postingan tertentu. Itu yang akan (mungkin) ditampilkan oleh mesin pencari dalam hasil. Browser Anda kemungkinan juga akan menampilkan ini di bilah judulnya, meskipun banyak plugin SEO dan aplikasi serupa memungkinkan Anda mengubahnya untuk itu. Karena itu, meskipun frasa kunci target Anda harus ada di tag H1, itu tidak 100% diperlukan. Tulis judul dan judul Anda secara semantik untuk menutupi maksud pencarian pengunjung alih-alih memasukkan kata kunci ke tag heading HTML.

Gambar di atas menunjukkan tag H1 yang digunakan sebagai judul entri untuk artikel di blog Elegant Themes. Ini adalah satu-satunya tag H1 di halaman juga. Ini menunjukkan itu adalah topik konten di halaman.

Selama bertahun-tahun, praktik standar adalah memiliki satu (dan hanya satu) tag H1 per halaman. Untuk sebagian besar, ini masih merupakan saran yang bagus. Google dan mesin pencari lainnya merayapi halaman Anda dan mencari tag H1. Mereka kemudian menggunakannya untuk menentukan topik, judul, dan struktur.

Namun, Google telah mengatakan secara eksplisit bahwa memiliki beberapa tag heading HTML H1 di situs Anda tidak menimbulkan penalti SEO sama sekali. Itu tidak berarti menjadi gila menggunakannya di mana-mana di situs Anda, tetapi artinya adalah Anda dapat menggunakan lebih dari satu per halaman saat dibutuhkan.

Kapan Menggunakan Beberapa Judul H1

Satu-satunya tujuan H1 adalah untuk menunjukkan bagian penuh pada satu topik. Itu berarti bahwa jika Anda memiliki satu halaman yang memiliki lebih dari satu topik, Anda ingin menggunakan H1 untuk setiap topik baru di halaman itu. Melakukannya akan memberi tahu Google bahwa halaman Anda bukan hanya tentang topik dalam judul. Tetapi mungkin juga ada bagian tentang topik yang sama sekali berbeda (namun terkait) di bagian bawah.

Di situs web satu halaman, ini juga penting karena Anda mungkin memiliki bagian Tentang, Harga, Kontak, dan Portofolio di satu halaman itu. Jadi, bagaimana Anda memberi tahu Google bahwa konten yang ada di setiap bagian adalah unit otonomnya sendiri?

Tag H1, begitulah. Anda memperlakukan setiap bagian seolah-olah itu adalah halaman web mininya sendiri, menggunakan hierarki yang telah kita bahas di atas di masing-masingnya. Dengan begitu, Google melihat judul saat menavigasi di seluruh halaman, dan kemudian dapat menentukan bagian mana yang akan diambil cuplikan unggulannya (dan seterusnya) untuk menjawab pertanyaan pencari.

Anda juga dapat memilih untuk menggunakan tag H1 setiap kali Anda menggunakan tag bagian di situs Anda, tetapi kami menyarankan untuk melakukannya hanya jika itu adalah bagian yang paralel dengan judul halaman, bukan bagian bawahan.

Tag H2

Tag H2, sekarang, kemungkinan besar akan menjadi tag heading HTML yang paling banyak digunakan di halaman Anda. Dan untuk alasan yang bagus. Sebagian besar posting dan halaman di internet terdiri dari satu topik dengan hanya beberapa subpos. Kami menyarankan agar setiap konten yang Anda buat mengandung setidaknya satu tag H2. Yoast dan plugin SEO lainnya menyarankan judul kira-kira setiap 300 kata. Tergantung pada konten Anda, untuk itulah tag H2.

Mereka memisahkan subtopik (atau langkah) untuk kemudahan membaca. Misalnya, sebagian besar posting kami terutama terdiri dari judul H2 (dengan H3 bila berlaku). Itu karena artikel kami membahas satu topik, di mana kami mencoba memecahkan satu masalah. Kami akan memiliki judul seperti Cara Menggunakan OBS Studio untuk Streaming Langsung sebagai H1, tetapi subjudul seperti "Bagaimana Memulai dengan OBS Studio" akan ada di H2.

Tag H2 mewakili langkah-langkah individual yang berhubungan langsung dengan topik H1. Dalam posting khusus itu kami menggunakan struktur berikut:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

Tag heading H2 dalam posting ini membahas ide-ide utama, seperti memulai dan mengunduhnya, menyiapkan perangkat lunak yang sebenarnya, dan kemudian menyesuaikan tampilan layar Anda kepada pemirsa. Meskipun ada langkah-langkah yang terlibat di bawah langkah-langkah di H3 juga, judul H2 menunjukkan gambar skala besar dari artikel tersebut. Itu adalah tampilan tingkat tinggi yang dapat dipindai oleh perayap dan pembaca untuk melihat apakah artikel berisi informasi yang mereka cari.

Secara umum, Anda akan memiliki beberapa tag H2 per artikel, sementara Anda mungkin tidak memiliki subjudul yang bersarang di bawahnya. Jika halaman atau posting Anda berada pada satu topik yang tidak dipecah menjadi beberapa bagian dengan subbagian seperti contoh di atas, akan lebih baik untuk memiliki beberapa tag H2 daripada bersarang H2 -> H3 -> H4 karena itu menunjukkan kepada perayap Anda ' kembali menyelam lebih dalam pada suptopik daripada memperluas subjek utama posting.

Tag H3

Tag H3, di sisi lain, adalah tempat artikel Anda benar-benar dapat menggali detail topik Anda. Anda tidak boleh menggunakan tag H3 ini langsung di bawah H1. Googlebots dan mesin pencari melihatnya sebagai subpos. Sedangkan H2 diterima sebagai judul utama untuk bagian dalam satu artikel (dengan H1 menyatakan topik utama sebagai judul, ingat).

Jika Anda melihat lebih dekat pada gambar di atas, Anda akan melihat bahwa gaya dan ukuran sebenarnya antara tag H2 dan H3 kami tidak terlalu berbeda. Alasannya, kami tidak ingin Anda berasumsi dengan memindai bahwa setiap titik yang kami buat dalam H3 kurang penting daripada H2. Karena tidak.

Ukurannya hanya lebih kecil untuk menunjukkan bahwa itu adalah titik bawahan ke H2, daripada ikatan langsung dengan topik keseluruhan, yang paling penting dari sudut pandang struktural mengenai SEO untuk artikel Anda. Untuk pembaca manusia, bukan robot, perbedaan visual hanya membantu memindahkan mereka ke bawah halaman dan memecah informasi untuk mengurai lebih mudah.

H4, H5, H6 Tags

Kami telah menyatukan ini karena suatu alasan. Secara umum, Anda akan kesulitan menemukan situs yang memanfaatkan sepenuhnya tag heading HTML dari rentang H1 hingga H6. Sejauh ini, struktur yang paling populer adalah H1 hingga H3. Sama seperti Anda jarang melihat garis besar konten melampaui level bersarang kedua.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

Untuk sebagian besar, tag H4 akan melayani tujuan yang sama seperti H3. Anda akan menggunakannya untuk masuk ke detail langkah dan contoh, tetapi selalu bersarang di bawah judul utama Anda. Desainer umumnya menatanya dengan CSS yang lebih kecil dari H3. Mereka cenderung melihat penggunaan yang terbatas dalam pembuatan konten biasa. Sebuah topik cenderung sangat mendalam jika ide-idenya perlu dipecah sehingga diperlukan tag heading H4.

H5 dan H6

Anda dapat menggunakan judul H5 dan H6, dalam beberapa cara berbeda.

Cara Pertama

(Sebagai contoh, kami telah memecah bagian khusus ini menjadi beberapa bagian melalui heading, dan kami sekarang berada di bawah H4 karena ini adalah sub-subtopik dari artikel utama.)

Judul ini sering digunakan dalam daftar isi dan daftar serupa, meskipun fungsi utamanya secara teknis sama dengan yang lain, menggambarkan topik yang semakin penting di seluruh halaman. Akan sangat jarang menemukan dokumen dengan array lengkap heading hingga H6.

Cara Kedua

Beberapa orang menggunakan tag H5 dan H6 sebagai judul pemformatan "khusus". Mereka akan menerapkan CSS khusus ke dua tag heading HTML ini yang benar-benar berbeda dari H1 hingga H4. Anda kemudian dapat menggunakannya untuk menarik perhatian pada topik dan ide yang mungkin terlewatkan.

Ini bukan praktik terbaik secara teknis, karena judul bersifat hierarkis. Namun, jika situs Anda terstruktur dengan baik secara keseluruhan dan Anda menggunakan H5 dan H6 dengan hemat sebagai gaya khusus pada halaman atau posting individual tertentu, Anda hampir pasti tidak akan menerima pukulan SEO.

Ingatlah bahwa bahkan ketika Anda menggunakannya untuk pemformatan khusus, Anda tidak keluar dari hierarki. Jaga agar mereka tetap teratur. Jadi, jika Anda menggunakan H6 untuk menata subjudul, pastikan subjudul berikutnya yang Anda gunakan adalah H1 atau H2 untuk menunjukkan bahwa Anda telah kembali ke struktur standar.

Apa yang Tidak Boleh Dilakukan dengan Tag Heading HTML

Jangan menyusun satu halaman dengan seluruh hierarki judul ke bawah. Anda lebih baik dengan H1 untuk sebuah judul dan semua H2, daripada setiap judul yang berurutan menjadi bersarang.

Ya:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

Tidak:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

Selain itu, Anda tidak ingin menggunakan judul secara sembarangan. Gunakan hanya secara berurutan. Jika tidak, perayap tidak akan tahu cara menavigasi halaman Anda, begitu pula perangkat lunak aksesibilitas.

Tidak:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

Secara umum, Anda dapat berasumsi bahwa perayap akan mengetahui bahwa Anda telah keluar dari subbagian saat menemukan H1 atau H2 berikutnya. Dalam cuplikan kode di atas, perayap dan bot akan kesulitan menguraikan struktur informasi.

Membungkus dengan Tag Heading HTML

Dan lihat? Kami kembali ke pos H2 untuk menyelesaikan semuanya. Tag heading adalah elemen penting dari setiap situs web di luar sana. Menggunakannya dengan benar dapat meningkatkan peringkat mesin pencari Anda, serta UX situs Anda karena pengunjung akan lebih mudah menemukan informasi yang mereka cari di konten Anda. Ingatlah untuk memastikan untuk tidak memasukkan kata kunci terlalu banyak dari judul Anda. Meskipun merupakan ide yang baik untuk menyertakan kata kunci atau frasa yang Anda diskusikan untuk memastikan ide Anda jelas, Googlebots dan lainnya cukup cerdas dan dapat mengetahui kapan Anda bertukar topik atau berada di topik yang sama. Secara keseluruhan, menggunakan tag heading HTML sangat penting, tetapi jika Anda hanya mengingat beberapa hal, situs Anda akan bersinar dalam waktu singkat.

Sudahkah Anda menggunakan tag heading HTML dengan benar?

Gambar unggulan artikel oleh VectorV / shutterstock.com