Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder

Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder

Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder sangatlah penting. Salah satunya untuk menaikkan ranking SEO (Search Engine Optimization). Sekarang ada kurang lebih 2 Milyar website yang aktif. Dan kebanyakan dari website aktif tersebut tidak pernah diperbaharui struktur HTML-nya. Sehingga mesin pencarian seperti Google menghindarinya. Dan membuat membaca kesulitan dalam membaca konten.

Sebelum beralih bagaimana cara menerapkan Semantic HTML5 tags. Kita harus mengetahui apa yang dimaksud dengan Semantic pada HTML5. dan juga apa saja keuntungan yang didapatkan setelah memanfaatkan salah satu fitur penting HTML5 ini.

Semantic HTML 5 Tags

Semantics adalah salah satu fitur paling penting yang ada pada HTML5. Semantic HTML mengacu pada syntax yang membuat HTML lebih dalam atau lebih tepatnya lebih komprehensif. Untuk membedakan antara section dan layout pada halaman situs.

Sehingga membuat halaman situs lebih informatif dan lebih mudah beradaptasi. Membantu mesin pencarian melalui robotnya untuk menginterpretasikan sebuah konten.

Semantics juga mempermudah developer dan programmer untuk membaca HTML. Dengan adanya semantics ribuan kode HTML akan lebih muda dirangkum dan jauh lebih mudah untuk dibaca.

Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder 1
Perbedaan antara HTML4 dan HTML5

Selain mempermudah, Semantics HTML5 membuat kode HTML jauh lebih ringkas dibandingkan dengan HTML4. Daripada menuliskan <div id='header'> untuk menentukan header. HTML5 memudahkannya menjadi </header>

Keuntungan Memanfaatkan HTML5 Tags

Keuntungan yang paling terlihat adalah dapat membantu mesin pencarian untuk menginterpretasikan konteks pada konten situs Anda. Memudahkan situs Anda untuk crawling dari mesin pencarian.

Memanfaatkan dan memaksimalkan Semantic HTML5 Tags adalah salah satu optimasi SEO On-Page yang tidak banyak melakukan perhatian penuh disana.

Dalam hal ini Anda bisa memaksimalkan penggunaan Semantics HTML5 Tags untuk meningkatkan ranking situs Anda. Kemungkinan terbesar, kompetitor Anda belum memaksimalkan atau bahkan belum menggunakan Semantic HTML5 tags

Sebagai catatan tambahan HTML5 tidak support pada semua browser. Namun hal ini bisa diatasi menggunakan Modernizr.js. Sehingga browser lama dapat menikmati fitur-fitur yang ditawarkan oleh HTML5.

Beberapa tema WordPress sudah menerapkan semantic HTML5 tags. Jika kita berbicara Oxygen Builder. Apakah dapat menerapkan hal yang serupa?

Tentunya bisa. Dan malah kita diberikan keleluasaan untuk memberikan semantic tags. Bagaimana Cara Menerapkannya?

Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder
Ilustrasi HTML5

Cara Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder

Kita tahu bahwasanya Oxygen Builder merupakan salah satu builder yang eksentrik dibandingkan Page Builder[1] WordPress lainnya.

Salah satu kelebihan dari Builder ini adalah output atau keluaran dari HTML dan CSS yang kecil. Sehingga mempersingkat pengguna mengakses ke dalam situs. Situs WordPress yang dibangun menggunakan Oxygen Builder memiliki Page Load Time yang cepat dibandingkan dengan kompetitor Page Builder Lainnya.

Ada banyak sekali fitur-fitur dari Oxygen Builder yang ditawarkan. Namun semantics HTML5 seakan dilupakan. Padahal itu merupakan fungsi yang fundamental.

Oxygen Builder tentu berbeda dengan Page Builder lainnya. Bisa saya sebutkan bahwasanya Oxygen Builder merupakan Theme Builder[2]. Anda diberikan keleluasaan untuk membangun website Anda.

Ibarat sebuah canvas kosong Anda dapat melukis apapun yang Anda inginkan. Namun beberapa HTML tags pada Oxygen Builder tidak terpasang. Hanya beberapa saja yang sudah ada.

Menerapkan Pada Single Post

Ada beberapa HTML tag yang akan digunakan untuk Single Post[3] Berikut adalah tag-tag yang digunakan saya bedakan antara warna satu dan lainnya untuk mempermudah dalam mengingat:

  • Main digunakan untuk membedakan antara Header dan Footer pada halaman situs. Dan juga membungkus tag HTML lainnya seperti Article dan Aside. Biasanya pada tema-tema WordPress sudah terdapat tag ini.
  • Article untuk memberikan informasi bahwa yang dibungkus pada tag tersebut merupakan sebuah artikel. Pada penerapannya pada halaman situs yang kompleks seperti Pages atau Laman pada WordPress memerlukan berbagai tag Article yang banyak
  • Aside sedangkan aside digunakan untuk membungkus konten tambahan yang sifatnya hanya pendukung saja. Seperti contohnya: informasi penulis, artikel berkaitan, jumlah pembaca, waktu baca, dan bahkan bisa digunakan untuk sidebar.

Menyiapkan Main Template (Header, Inner Content, dan Footer)

  1. Buat Templates baru pada Oxygen. Klik Oxygen pada Dashboard WordPress(wp-admin) Anda. Kemudian klik Templates.
  2. Add New Templates atau tambahkan templates baru.
Add New Templates atau Menambahkan Templates
Add New Templates atau menambahkan templates baru
  1. Berikan judul pada templates yang Anda tambahkan
  2. Klik Others dan klik Catch All.
  3. Atur Priority menjadi 0
Membuat Header Footer Pada Oxygen
Menambahkan main templates (Header, Inner Content dan Footer)
  1. Kemudian Klik Publish atau terbitkan
  2. Klik Edit With Oxygen untuk melakukan editing dalam Oxygen
  3. Tambahkan Header Builder pada situs Anda. Rubah header sesuai keinginan Anda.
  4. Kemudian Tambahkan Div
  5. Rubah tag pada div menjadi Main. Lihat gambar dibawah ini
Menambahkan Main Tag untuk Main Templates Oxygen Builder
Menambahkan Main Tag untuk Main Templates Oxygen Builder
  1. Perhatikan struktur di kanan. Masukkan Inner Content pada Div yang diberi tag Main.
  2. Tambahkan CSS pada div yang diberikan tag Main. Agar menghindari masalah whitespace pada perangkat kecil (mobile devices). Klik Advanced pada div kemudian klik Custom CSS.
  3. Masukkan overflow-x:hidden;
Menambahkan CSS pada Main Div
Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder 10

Tips: Menambahkan CSS overflow-x:hidden; pada div yang memuat Inner Content dapat menghindari masalah space kosong putih yang biasa terjadi pada mobile devices.

  1. tambahkan div atau section untuk footer Anda. Atur tag dan rubah menjadi footer Lakukan hal yang sama seperti div atau section untuk Inner Content.

Membuat Single Post dan Menempatkan Semantics HTML5 tags

Setelah membuat Main Templates kemudian kita harus membuat Single Post Templates. Pengertian Single Post Templates bisa Anda baca pada catatan kaki artikel ini. Hal yang penting dalam Single Post Templates adalah memaksimalkan penggunaan Article tag dan Aside Tag yang sudah dijelaskan pada tulisan diatas.

  1. Buka Dashboard WordPress (wp-admin). Kemudian klik Oxygen.
  2. Kemudian Klik Templates dan tambahkan templates baru atau Add New Templates.
  3. Berikan Judul dan kemudian klik inherit design from other templates. Pilih Main Templates yang Anda buat tadi.
  4. Kemudian klik Singular dan klik Posts.
Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder 2
Memanfaatkan Semantic HTML5 Tags pada Oxygen Builder 11
  1. Atur priority menjadi 1
  2. Kemudian Publish dan Edit With Oxygen
  3. Kemudian buat Single Post Templates Anda. gunakan text untuk menampilkan konten Anda.
  4. Pada konten tersebut. Contoh saya menggunakan text untuk menampilkan konten. Masukkan tag Article pada text yang berisi konten tadi.
Memasukkan Tag Article pada konten
Memasukkan article tag pada konten
  1. Langkah terakhir adalah memasukkan tag aside pada informasi penulis, comment form, sidebar, comment list. kategori, dan post tag.
  2. Sebagai contoh saya memasukkan tag aside pada informasi penulis.
Memasukkan tag aside pada Oxygen Builder
Salah satu contohnya memasukkan tag aside pada informasi penulis, tanggal penerbitan dan lainnya
  1. Lakukan hal tersebut informasi penulis, comment form (jika ada), sidebar (jika ada), comment list. kategori, post tag, tanggal penerbitan, waktu baca (jika ada).

Intinya pada Single Post Templates dengan adanya tag article dan aside. Fungsinya untuk membedakan antara konten utama dan konten tambahan seperti: informasi penulis, comment form, comment list, related post, dan lain sebagainya.

Berikut cara memanfaatkan sematic HTML5 Tags pada situs Anda. Bagaimana mengimplementasikan hal tersebut pada Singular Templates seperti laman atau page. Dan bagaimana cara mengimplementasikannya pada Custom Post Type?

Jika Anda tertarik mengetahuinya. Kami Coolaborative akan membuka kelas "Basic Oxygen Crash Course". Tunggu tanggal rilisnya!

Catatan Kaki:

  • [1]Page Builder merupakan alat yang membantu dalam membangun sebuah halaman situs untuk menghemat waktu dalam membangun sebuah website. Page Builder dapat berupa dalam bentuk plugin, tema, maupun software yang terpisah. Umumnya Anda dapat membangun sebuah halaman situs secara visual.
  • [2]Theme Builder memiliki kesamaan terhadap Page Builder. Yang menjadi perbedaan pada fungsinya. Dengan Theme Builder Anda memungkinkan untuk membuat situs yang tidak bergantung dengan tema WordPress. Sehingga Anda lebih leluasa dalam membuat situs.
  • [3]Single Post Templates merupakan istilah pada WordPress. Single Post merupakan salah satu struktur penting pada WordPress. untuk memberikan kenampakan pada Pos atau Post. Singkatnya template untuk menampilkan artikel atau pos.

Referensi:

Freecodecamps: Semantic HTML5 elements

Pluralsight: Semantic HTML

Bagikan Artikel
magnifiercrosschevron-down