Apa itu tag semantik?

Semantik berarti 'berarti, berhubungan dengan makna'. Tag semantik bukan hanya mengubah ukuran atau bentuk huruf, tetapi memberikan makna yang jelas kepada browser dan mesin pencari tentang peran konten dalam situs web.

Tag semantik di Framer

Di Framer, tag semantik seperti h1 hingga h6, p secara otomatis diberikan saat membuat gaya teks.

Tag-tag ini dapat disesuaikan satu per satu untuk setiap elemen menggunakan panel Accessibility. Dengan cara ini, kalian bisa mengkustom struktur semantik situs sesuai kebutuhan.

Alasan menggunakan tag semantik

Layout yang terstruktur dengan baik dapat meningkatkan optimasi mesin pencari (SEO) dan aksesibilitas web secara bersamaan. Dengan penggunaan heading dan subheading yang tepat, membaca menjadi lebih mudah bagi pengguna dengan gangguan penglihatan atau kognitif. Selain itu, menciptakan lingkungan yang memudahkan pengguna yang menggunakan screen reader untuk mencari dan menavigasi informasi lebih mudah.

Menerapkan tag semantik

Menggunakan struktur heading yang jelas adalah proses yang sangat penting dalam pembuatan situs web.
Berikan tag <h1> pada judul utama yang paling penting, dan gunakan heading <h2> dan <h3> untuk mengatur konten berikutnya secara sistematis.

Pendekatan ini meningkatkan kemudahan penggunaan dan mencegah teks menjadi terlalu besar. Selain itu, membantu mesin pencari memahami dengan jelas hierarki dan pentingnya konten kalian.

Pertanyaan yang Sering Diajukan (FAQ)

P. Bisakah kita menggunakan banyak tag <h1> pada satu halaman?

• Ya. Secara teknis bisa, namun tidak disarankan. Menurut prinsip struktur semantik, <h1> mewakili tema paling penting dari halaman, jadi disarankan hanya menggunakan satu per halaman demi SEO.

P. Bisakah kita menetapkan tag semantik pada elemen Frame selain teks?

• Ya. Di FramerFramer, kalian bisa memilih lapisan frame, selain teks, dan menetapkan tag melalui panel Accessibility.

P. Apakah teks yang ada di dalam gambar juga dianggap sebagai tag semantik?

• Tidak. Teks yang tertanam dalam file gambar (JPG, PNG dll) tidak dapat dibaca sebagai data teks oleh mesin pencari atau screen reader. Informasi teks penting yang ada di gambar sebaiknya dimasukkan dalam bidang Alt Text agar mesin pencari dapat memahami makna gambar tersebut dan mencerminkannya dalam SEO.

Artikel ini adalah adaptasi terjemahan dari ‘Text styles and semantic tags’ di blog resmi Framer.