Photo By Justin Morgan on Unsplash

Apakah Anda tidak yakin kapan harus menggunakan kategori dan kapan harus menggunakan tag? Karena dua hal tersebut sangat berbeda, Mamang bahas yah diartikel ini tentang Perbedaan Kategori dan Tag pada postingan WordPress.

Apakah perbedaan antara keduanya terlihat kecil dan tidak signifikan? Pelajari cara menggunakan kategori dan tag dengan baik di postingan WordPress Anda untuk meningkatkan SEO dan memungkinkan pembaca blog Anda menemukan apa yang mereka cari.

Kategori versus tag. Apa bedanya? Jika Anda baru mengenal blogging, Anda mungkin memperhatikan dalam pengaturan postingan ada dua opsi, kategori dan tag. Saat Anda mulai bereksperimen dengan kedua hal tersebut, keduanya akan tampak sangat mirip.

Kategori dan Tag adalah dua bentuk taksonomi WordPress. Keduanya digunakan untuk mengatur dan mengklasifikasikan konten di situs web Anda. Kemudian, keduanya membantu pengguna dan mesin pencari memahami dan menavigasi konten Anda dengan mudah.

Selain itu, kategori dan tag juga berperan dalam SEO dengan menyediakan konteks yang lebih baik kepada mesin pencari tentang fokus dan struktur konten. Di akhir artikel ini, Anda akan dapat menjelaskan perbedaan antara kategori dan tag untuk tujuan organisasi dan SEO.

Apa perbedaan antara kategori dan tag

Jawaban singkatnya adalah kategori memisahkan topik blog sehingga pembaca dapat menemukan apa yang paling menarik dan melewatkan apa yang tidak. Sementara itu, tag bergabung dengan topik blog yang memungkinkan pembaca menemukan konten terkait.

Bayangkan sebuah perpustakaan besar. Perpustakaan berisi berbagai jenis buku. Bagaimana kita menemukan buku yang kita inginkan? Sama seperti perpustakaan yang memiliki bagian berbeda untuk topik berbeda seperti komik, novel, puisi, dan sebagainya.

Kategori WordPress membantu mengelompokkan postingan Anda secara luas ke dalam topik utama seperti fiksi atau nonfiksi. Hal ini memungkinkan orang menemukan buku yang tepat. Misalnya, di blog memasak, Anda dapat memiliki kategori seperti makanan pembuka, hidangan utama, makanan penutup, dan minuman.

Seseorang yang haus akan hidangan penutup belum tentu ingin membaca setiap hidangan pembuka dan hidangan utama di blog tersebut. Jadi kategori semacam ini membantu mereka menemukan konten yang mereka inginkan dengan cepat, dan menghindari konten yang tidak mereka inginkan.

Bagaimana jika, misalnya, Anda ingin membaca semua buku di perpustakaan yang menyebutkan misalnya dinosaurus, buku tentang dinosaurus bisa berada di bagian yang berbeda, fiksi, nonfiksi, buku anak-anak, dll. Itulah yang dilakukan tag pada WordPress.

Tag seperti label terperinci yang memungkinkan orang menemukan konten serupa. Mereka tidak dimaksudkan untuk mengelompokkan postingan Anda, tetapi membantu menjelaskan detail spesifik postingan Anda menggunakan kata kunci. Misalnya, postingan resep yang dikategorikan dalam makanan penutup.

Hierarki dan Non Hierarki

Perbedaan lainnya adalah kategori bersifat hierarkis, sehingga Anda dapat membuat subkategori untuk mengatur lebih lanjut konten Anda ke dalam bagian yang lebih spesifik.

Misalnya, blog perjalanan ini memisahkan kontennya berdasarkan benua, namun Anda juga dapat menambahkan subkategori seperti berdasarkan negara atau wilayah, yang berada dalam setiap benua sehingga cocok untuk suatu subkategori.

Kategori paling cocok untuk topik yang luas, dan umumnya diperlukan saat membuat postingan di WordPress. Anda dapat mengganti nama kategori default Anda sesuai dengan kebutuhan Anda.

Sementara itu, tag bersifat non hierarki dan dapat digunakan di berbagai kategori. Tag bersifat opsional, meskipun disarankan, dan dapat ditambahkan ke postingan Anda untuk memberikan informasi yang lebih spesifik atau terperinci untuk konten yang lebih baik.

Tag berkemampuan untuk dapat ditemukan dan membantu mengidentifikasi topik konten yang mungkin tidak tercakup dalam kategori dan memungkinkan referensi silang terhadap konten terkait. Misalnya, postingan blog ini mungkin memiliki tag seperti air terjun, gunung, dan pendakian, sesuatu yang tidak tercakup dalam kategori wilayah.

Rancangan wordpress untuk kategori dan tag

Secara desain, WordPress membuat halaman untuk hanya menampilkan tag yang dipilih atau kategori yang dipilih seperti yang Anda lihat di sini. Hal ini memudahkan orang menemukan apa yang mereka cari. Sebelum Anda mulai menulis blog, apa saja yang boleh dan tidak boleh dilakukan dalam menulis kategori dan tag?

Pertama, gunakan satu kategori per postingan. Batasi jumlah kategori yang Anda gunakan pada setiap postingan dan pastikan setiap postingan dimasukkan ke dalam satu kategori saja jika memungkinkan. Hal ini mencegah konten tersebar di beberapa kategori dan mengurangi kemungkinan kebingungan mesin pencari.

Selanjutnya, gunakan subkategori dengan bijak. Bila diperlukan, Anda dapat membuat subkategori untuk mengatur lebih lanjut dan memisahkan konten dalam kategori utama. Hal ini dapat membantu menciptakan organisasi hierarki terstruktur yang lebih mudah dipahami oleh pengguna dan mesin telusur.

Selektiflah dalam menggunakan tag untuk memberikan detail spesifik atau kata kunci yang terkait dengan konten Anda. Jangan terlalu sering menggunakan tag atau membuat duplikat, lebih baik tag yang digunakan dengan baik dalam jumlah terbatas, daripada ratusan tag yang jarang digunakan.

Jangan menambahkan tag yang tidak relevan dengan konten Anda. Meskipun mungkin tergoda untuk memasukkan istilah pencarian populer, jika postingan tertentu tidak berhubungan, orang mungkin merasa frustrasi ketika mereka tidak dapat menemukan apa yang mereka cari.

Selain itu, mesin pencari mungkin memberi peringkat situs web Anda lebih rendah. Kemudian, hindari membuat kategori dan tag yang kosong. Pastikan semua kategori dan tag Anda memiliki tujuan dan hindari membuatnya tanpa konten sebenarnya.

Kategori dan tag yang kosong atau tidak relevan dapat berdampak negatif pada SEO situs Anda dan membingungkan pengguna. Selain itu, jangan membuat kategori atau tag duplikat, pastikan setiap kategori dan tag unik dan tidak memiliki padanan yang sama di situs Anda.

Hasil penggunaan kategori dan tag yang baik

Dengan menghindari kesalahan umum yang sudah dijelaskan diatas, Anda dapat mengoptimalkan situs web WordPress, kategori, dan tag untuk SEO dengan lebih baik serta meningkatkan pengalaman pengguna secara keseluruhan.

Jangan lupa untuk mengaudit dan membersihkan tag dan kategori Anda secara rutin. tinjau secara berkala untuk mengetahui istilah-istilah yang berlebihan atau ketinggalan jaman yang tidak lagi Anda gunakan.

Gabungkan atau hapus semuanya untuk menjaga taksonomi situs Anda tetap bersih, efisien, dan ramah pengguna. Selain itu, Anda sebenarnya bisa merubah meta box tag menjadi kategori, silahkan baca Cara merubah tag meta box default menjadi kategori meta box

Itulah artikel Perbedaan Kategori dan Tag pada Postingan WordPress yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Sumber : Perbedaan Kategori dan Tag pada Postingan WordPress

Photo by Jackson Sophat on Unsplash

CSS singkatan dari Cascading Style Sheets. CSS mendeskripsikan bagaimana elemen HTML ditampilkan pada halaman web atau media lainnya. CSS dapat mempermudah pekerjaan kita dalam mengontrol beberapa layar/blok secara keseluruhan dalam waktu bersamaan.

Kalo kita misalkan HTML itu adalah layout/struktur elemen dari suatu rumah, maka CSS ini adalah warna chat, jenis genteng, texture keramik, dan bahkan posisi lemari.

Dalam suatu kasus, misalnya tetangga sebelah sedang membangun sebuah rumah dengan 3 buah kamar. Kamar tersebut adalah milik Budi, Wati, dan Nina. dalam kasus ini kita memiliki blok/elemen yang bernama kamar. kamar-kamar itu punya id yg berbeda-beda yaitu nama pemilik kamar tersebut.

Dengan adanya penamaan tersebut, kita bisa memberitahu tukang bangunan bahwa kamar Nina dan budi pengen dicat warna biru sedangkan kamar wati pengen dicat warna cream.

Berangkat dari contoh kasus diatas, hal tersebut berlaku untuk pengaturan HTML dan CSS. Untuk memberikan style pada suatu blok/layer kita harus mendefinisikan elemennya terlebih dahulu dengan menggunakan selector.

CSS dapat kita sisipkan ke dalam sebuah tag/elemen HTML dengan 3 cara:

1. Inline CSS : sintaks CSS disipkan langsung pada tag/elemen yang kita buat dengan menggunakan attribute style
2. Internal CSS :  sintaks CSS disisipkan pada halaman yang sama dengan menggunakan Tag <style> </style>
3. External CSS : sintaks css disimpan pada file terpisah berekstensi .css misalnya style.css dan dihubungkan dengan menggunakan tag <link>

Untuk mempermudah memahami CSS diatas, mari kita bahas satu persatu.

Inline CSS

Seperti yang sudah kita sebutkan diatas, CSS dengan tipe ini langsung kita sisipkan pada tag HTML yang kita buat dengan menggunakan attribut style. (jika anda masih bingung apa itu tag dan apa itu attribut silakan masuk ke materi dasar HTML terlebih dahulu).

Contoh : saya mau membuat judul halaman dengan text warna biru dan bergaris bawah tipis. atau memberikan background pada suatu elemen. maka dengan menggunakan inline CSS anda cukup membuat seperti dibawah ini (lihat hasilnya pada tab result)

Contoh lainnya:

Penjelasan singkat :

color digunakan untuk membuat warna pada text yang berada pada elemen yang kita seleksi, diisi dengan kode warna. untuk mendapatkan kode warna yang mudah, anda bisa menginstall aplikasi Gpick (Open source) untuk pengguna Linux, atau Color scheme (berbayar) untuk pengguna windows, atau bisa juga dengan menggunakan software pengolah design seperti Gimp atau Adobe Photoshop. Kode warna bisa disii dengan:

• kode valid warna (dalam bahasa inggris) contohnya red, green, blue
• kode RGB rgb(255, 0, 0) atau rgba (255,255,255, 0.5) ditambah transparancy
• kode hexa warna 6 digit, contohnya #000000 (Hitam), #CCCCCC (Abu-abu) atau #FFFFFF (Putih), dsb.

border digunakan untuk memberikan garis pada suatu elemen, diisi dengan jenis border (solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden, mix silakan dicoba satu persatu), kemudian diikuti oleh lebar border (1px, 2px, dll) lalu diikuti oleh kode warna. selain itu, border pun bisa kita spesifikasikan secara khusus. misalnya border-left, border-right, border-bottom, atau border-top. untuk penjelasan lebih detail mengenai border anda bisa klik link ini,

text-align digunakan untuk memberikan pertaan pada text yang kita buat, diisi dengan left, right, center atau justify.

background digunakan untuk memberikan latar belakang pada elemen yang kita buat. background bisa langsung diisi dengan menggunakan kode warna seperti pokok bahasan diatas, atau bisa juga dengan menggunakan url gambar. khusus untuk backgorund gambar, kita bisa menambahkan repeater secara horizontal atau vertikal dengan pilihan repeat, no-repeat, repeat-x,repeat-y, initial, dan inhherit.

Teknik ini “dulu” sering kita gunakan untuk memberikan efek realism pada design yang kita buat sebelum masuk era flat design. teknik ini digunakan apabila elemen yang kita buat lebih besar dari gambar background yang tersedia, sehingga kita diberikan pilihan untuk melakukan pengulangan secara vertikal/horizontal atau tidak sama sekali.

Selain repeater, bg gambar juga bisa diatur posisinya misalnya saya pengen secara vertikal di tengah dan secara horizontal diatas. untuk memahami lebih lanjut mengenai background kita bisa temui disini

padding digunakan untuk memberikan jarak didalam suatu elemen konten. padding berbanding terbalik dengan margin, singkatnya padding kedalam sedangkan margin keluar. perhatikan gambar dibawah ini

Penjelasan mengenai sintaks-sintaks CSS lain akan kita temui pada bahasan-bahasan selanjutnya, atau bisa kita dapatkan penjelasan lengkapnya di https://www.w3.org/TR/CSS21/indexlist.html

Demikian penjelasan singkat untuk pengenalan CSS, mudah-mudahan bermanfaat. Sebetulnya, penggunaan CSS dengan menggunakan teknik inline tidak dianjurkan untuk sering digunakan, dikarenakan membuat struktur HTML jadi terlihat kurang rapi dan kita harus menyisipkan kode CSS satu persatu pada elemen yang akan kita buat.

Oleh karena itu, di pembahasan selanjutnya, kita akan belajar bagaimana CSS  di susun lebih rapi dengan menggunakan selector yang akan di impelementasikan pada internal dan external CSS.

Itulah artikel Pengenalan CSS bagian 1 yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Keep Learning ^_^ dan Semangat.

Photo by Gabriel Heinzer on Unsplash

Sebelum kita masuk ke bab ini, pastikan terlebih dahulu sudah memiliki text-editor seperti sublime text, notepad++, atau yang lainnya (silakan pilih salah satu). jika tidak, saya sarankan cek artikel sebelumnya untuk mengenal editor dan bagaimana cara menyimpan file html.

Elemen/Tag

Pada bab sebelumnya, kita sudah mengetahui bahwa html terdiri dari sekumpulan tag yang mewakili suatu konten. jadi, untuk membuat suatu konten kita harus mengetahui terlebih tag yang digunakan. suatu HTML biasanya terdiri dari tag pembuka, dan tag penutup dengan konten/isinya berada di kedua tag tersebut.

Bentuk baku :

<tagname>isi dari tag yang kita buat</tagname>

<h3>contoh tag pembuatan judul </h3>
<p>contoh pembuatan paragraf </p>

Attribute

Pada Umumnya semua elemen/tag HTML memiliki attribute. Attribut berisi informasi tambahan mengenai tag yang akan kita buat. contohnya kita akan membuat suatu judul dengan membuat H6. H6 ini ingin rata tengah maka kita bisa menambahkan align=”center”. Attribute pada html disimpan di tag pembuka dan biasanya bentuk umum dari suatu attribute adalah name=”value”.

<h6 align="center">Judul dengan rata tengah</h6>
<p align="left">Paragraph dengan rata kiri </p>
<a href="https://www.mangcoding.com" target="_blank">Klik disini</a>

Headings digunakan untuk membuat judul pada artikel atau paragraf yang akan kita buat. Heading terdiri dari h1, h2,h3, sampai dengan h6

<h1>ini heading 1</h1>
<h2>ini heading 2</h2>
<h3>ini heading 3</h3>
<h4>ini heading 4</h4>
<h5>ini heading 5</h5>
<h6>ini heading 6</h6>

Untuk membuat paragraf, kita cukup menggunakan tag p, jika kita menggunakan sublime text 3, kita cukup mengetikkan huruf p di keyboard kemudian pencet tab maka secara otomatis akan memunculkan tag pembuka dan tag penutup. untuk mendapatkan tulisan dengan dummy text lorem ipsum, kita cukup mengetikkan lorem kemudian pencet tab

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum esse inventore reiciendis voluptate, sapiente, perspiciatis minima et debitis dignissimos harum nisi ex? Odit non perspiciatis adipisci. Dicta nisi, cupiditate alias. </p>

Formatting text

Seperti halnya belajar software pengolah text, kadang kala kita membutuhkan tulisan berbentuk tebal, miring, dll. HTML menyediakan tag untuk formatting text, berikut adalah tag-tag yang dipakai untuk membuat format text

List

List terbagi menjadi 2, yaitu ordered list dan unordered list

Ordered List

1. ordered list digunakan untuk list dengan penomoran berurut
2. tag ol digunakan untuk membuka ordered list
3. tag li digunakan untuk isi list
4. tag ol memiliki attribute type “a”, “A”, “I”, “i”, “1”

Unordered List

• unordered list digunakan untuk list dengan tidak memandang urutan
• tag ul digunakan untuk membuka ordered list
• tag li digunakan untuk isi list
• tag ol memiliki attribute type “square”, “circle”, “disc”, “none”

untuk memahami Ol dan Ul silakan anda buat file dibawah ini kemudian save lalu buka di browser kesayangan anda.

<h2 align="center">Mengenal List</h2>
<p>List itu terbagi menjadi 2</p>
<h4>Ordered List</h4>
<ol>
  <li>tag ol digunakan untuk membuka ordered list</li>
  <li>tag li digunakan untuk isi list</li>
  <li>tag ol memiliki attribute type "a", "A", "I", "i", "1"</li>
</ol>
<h4>Unordered List</h4>
<ul>
  <li>tag ul digunakan untuk membuka ordered list</li>
  <li>tag li digunakan untuk isi list</li>
  <li>tag ol memiliki attribute type "square", "circle", "disc", "none"</li>
</ul>
<a href="dasar.html" target="_parent">Halaman dasar</a>

Hyperlink

Hyperlink digunakan untuk membuat link dari satu halaman ke halaman lain atau ke url diluar website kita. misalnya kita punya file index.html lalu dengan mengklik tombol tertentu maka akan menuju ke halaman about.html atau ketika kita klik lari ke halaman facebook kita. untuk melakukan semua itu diperlukan suatu hyperlink.
Contoh penulisan hyperlink adalah sebagai berikut :

<a href="url/link tujuan">link text</a>
<a href="https://www.facebook.com/mangcoding/" target="_blank">Lihat FB saya</a>

cara default, semua link html akan muncul seperti ini di smua browser :

• Link yang belum dikunjungi akan terlihat berwarna biru dan bergaris bawah
• Link yang sudah dikunjungi akan terlihat berwarna purple namun tetap bergaris bawah
• Link memiliki attribute target (“_blank”,”_self”,”_top”,”_parent”)

Menyisipkan Gambar

Tag yang digunakan untuk menyisipkan image dalam HTML adalah img. selain src img memiliki attribut width dan height untuk mengatur lebar dan tinggi gambar, serta alt untuk memberikan keterangan pada gambar

<img src="gambar.jpg" alt="gambar anda" width="200px" height="auto" />

Demikian penjelasan singkat untuk dasar HTML, mudah-mudahan bermanfaat. Keep Learning ^_^
Semangat.