Apa Itu Semantic HTML? Fungsi dan Manfaat Untuk SEO

Semantic HTML adalah tag-tag HTML yang mendeskripsikan fungsinya dari nama tagnya sendiri. Berbeda dengan HTML yang versi lama, dengan berkembangnya teknologi tag HTML juga mengalami perubahan.

Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language dimana sebuah aturan penulisan untuk menyusun konten supaya dikenali oleh browser.

Contoh Non-Semantic HTML

Sebelum HTML menjadi seperti sekarang. Banyak tag-tag dengan nama yang sama tetapi untuk peruntukkan yang berbeda.

Ternyata perkembangan teknologi web sangatlah pesat. Sehingga penggunaan HTML menjadi sangat masif.

Berikut contoh Non-Semantic HTML:

<div class="header">
    Munculkan layout header
</div>
<div class="nav">
    Munculkan layout header
</div>
<div class="left-nav">
    Munculkan layout header
</div>
<div class="content">
    <div class="article">
        <div class="figure"></div>
        <p></p>
        <div class="section"></div>     
    </div>
</div>
<div class="footer">
    Munculkan layout footer
</div>

Contoh Semantic HTML

<header>
    Munculkan layout header
</header>
<nav>
    Munculkan layout header
</nav>
<aside>
    Munculkan layout header
</aside>
<main>
    <article>
        <figure></figure>
        <p></p>
        <section></section>
    </article>
<main>
<footer>
    Munculkan layout footer
</footer>

Perbedaan Non-Semantic dan Semantic

Perbedaan paling mencolok adalah tag Semantic HTML lebih menjelaskan fungsi dari tag tersebut. Sebenarnya ada banyak tag-tag baru, tetapi tag-tag inilah yang paling mempengaruhi struktur web.

• header: Informasi yang ditampilkan harus merepresentasikan header. Bisanya akan muncul disetiap halaman.
• nav: Informasi yang ditampilkan harus bersifat navigasi. Tag ini bisa masuk di bagian header tetapi tidak harus.
• aside: Informasi yang ditampilkan tidak begitu penting yang biasanya diletakkan di sebelah kiri atau kanan dari sebuah konten inti.
• main: Letak konten ini akan ada disini
• article: Informasi tentang konten sebuah halaman. Tidak harus sebuah artikel, tetapi penjelasan tentang sebuah halaman.
• figure: Menampilkan gambar beserta informasi tentang gambar tersebut. Umumnya menggunakan figcaption.
• section: Biasanya setiap artikel akan terbagi menjadi beberapa section untuk memudahkan pembaca memahami konteks konten.
• footer: Sama seperti header, biasanya berulang disetiap halaman.

Manfaat Untuk SEO

Dari sisi kita sebagai manusia jika membaca dua hal tersebut, jelas Semantic HTML lebih menjelaskan fungsi setiap tag nya tanpa harus dijelaskan dengan kata-kata.

Hal ini juga akan memudahkan search engine crawler seperti Googlebot dalam mengenali konten sebuah halaman website.

Hal ini akan meningkatkan kesempatan untuk muncul di SERP dengan tampilan yang paling maksimal.

Cara Tepat Penggunaan article Tag

Berikut ini salah satu contoh penggunaan Semantic HTML untuk tag article

<article>
    <h1>JUDUL UTAMA</h1>
        <h2>Sub Judul</h2>
            <p></p>
            <figure>
                <img />
                <figcaption></figcaption>
            </figure>
            <h3>Sub Topik</h3>
            <h3>Sub Topik</h3>
        <h2>Sub Judul</h2>
            <p></p>
            <figure>
                <img />
                <figcaption></figcaption>
            </figure>
            <h3>Sub Topik</h3>
            <h3>Sub Topik</h3>      
</article>

Lihatlah bahwa susunan article, h1, h2, dst sangat rapi dan sesuai dengan hirarkinya.

Jangan hanya meng-copy tampilan saja, tetapi juga struktur HTML-nya

Hal ini memang jarang sekali dilihat untuk SEO awam.