Dalam konteks SEO, menggunakan nama premalink “blog” ataupun “article”, dua duanya sama saja di mata google. Tapi yang lebih penting adalah keseluruhan rangkaian premalink, yang sebaiknya sama atau mencerminkan topik dan isi konten. Sehingga antara premalink, judul dan isi, semua relevan.
Google tidak memiliki preferensi khusus antara menggunakan “blog” atau “article” dalam permalink. Mesin pencari lebih fokus pada relevansi dan kejelasan konten halaman. Jadi, jika baik “blog” maupun “article” cocok dengan topik atau jenis halaman yang kamu miliki, keduanya bisa digunakan.
Alasan menggunakan “blog” dalam permalink
Identifikasi jenis halaman : Jika kamu memiliki beberapa jenis halaman di situs web kamu, menggunakan “blog” dalam permalink dapat membantu mengidentifikasi jenis halaman tersebut secara langsung. Misalnya, “www.example.com/blog/nama-artikel”.
Pengaturan arsitektur situs: Jika kamu ingin mengatur arsitektur situs web kamu secara terorganisir, menggunakan “blog” dalam permalink dapat memudahkan pengelompokan konten blog kamu dalam satu direktori.
Alasan menggunakan “article” dalam permalink
Deskriptif : Jika kamu memiliki artikel yang bukan hanya blog, tetapi juga berbagai jenis halaman konten, menggunakan “article” dalam permalink dapat menjadi deskriptif dan memberikan informasi tambahan tentang jenis konten halaman.
Keluwesan: Jika kamu ingin menghindari pembatasan hanya pada konten blog dan ingin memperluas jenis konten yang dapat kamu miliki di situs web kamu, menggunakan “article” dalam permalink memungkinkan fleksibilitas yang lebih besar.
Penting untuk dicatat bahwa keputusan antara menggunakan “blog” atau “article” dalam permalink tergantung pada konteks dan kebutuhan spesifik situs web kamu. Yang terpenting adalah menggunakan permalink yang relevan, deskriptif, dan mudah dipahami oleh pengguna dan mesin pencari.
Malam ini, saya nggak sengaja menemukan error di salah satu website saya, iseng akses dari HP, lah kok error? padahal beberapa hari belakangan ini normal-normal aja. Keterangan errornya seperti ini :
Warning: file_get_contents(http://wikikombucha.com/XXX/XXX/XXX/XXX/wiki-kombucha-logo.png): failed to open stream: HTTP request failed! in /home/XXX/domains/wikikombucha.com/public_html/wp-includes/class-wp-image-editor-imagick.php on line 154
Warning: file_get_contents(http://wikikombucha.com/wp-content/XXX/XXX/XXX/wiki-kombucha-logo.png): failed to open stream: HTTP request failed! in /home/XXX/domains/wikikombucha.com/public_html/wp-includes/class-wp-image-editor-imagick.php on line 154
Penyebabnya
Walaupun errornya ada di : “class-wp-image-editor-imagick.php on line 154”, tapi kalau dilihat, penyebabnya adalah file gambar ini : wiki-kombucha-logo.png.
Kalau dilihat dari errornya lagi, itu disebabkan karena urlnya masih pakai http. Gambar itu saya upload waktu diawal awal bikin website, sebelum menerapkan https. Sehingga, di database, terekam dengan alamat http.
Setelah saya cek gambar tersebut, sebetulnya itu gambar logo yang lama, dan sudah tidak dibutuhkan lagi. Solusi bodo bodoannya ya tinggal hapus aja gambar itu, ia nggak?
Tapi tidak ngefek apa apa.
Nah disinilah letak kebingungannya. Kenapa file gambar sudah terhapus permanen, tapi tetap muncul pada error? kan sudah di hapus? ia nggak?
Solusi
Seperti biasa, waktunya mengeluarkan jurus handalan 😅, yaitu matiin satu persatu plugin, karena saya curiga url gambar tersebut nyantol di database si plugin. Tapi dengan catatan, setelah kita pastian semua url ini tidak ada di file html atau php kita ya. Seperti di header.php, index.php, footer.php, functions.php, dll.
Setelah mematikan semua plugin, lalu menghidupkan lagi satu persatu. Jadi tiap menghidupkan satu plugin, kita refresh halamannya, memastikan errornya muncul atau tidak. Kalau setelah menghaktifkan satu plugin, lalu errornya muncul, berarti plugin itu yang bermasalah.
Daaaaan, akhirnya ketemulah si plugin bermasalah itu. Ada di “Markup (JSON-LD) structured in schema.org” ini adalah plugin untuk pengimplementasian struktur html dari schema.org.
Fungsinya untuk menstandardisasi tag HTML yang akan digunakan oleh webmaster untuk membuat mesin pencari mudah mengidentifikasi, website ini tentang topik apa, dll.
Setelah saya cek pengaturan pluginnya, ternyata benar aja, url gambar tersebut masih nyangkut disini.
Ya berarti tinggal ganti dengan gambar baru. ia kan? upload gambar baru, simpan perubahan, lalu coba refresh lagi.
Apakah berhasil?
Ternyataaaaa Tiidaaaaaaaaaaaak 😂
url gambar sudah ter-update ke file yang baru, tapi errornya tetap muncul. Untuk sementara saya simpulkan bahwa error terjadi, karena plugin mengakses konten menggunakan HTTP sedangkan server host saya menolak, sehingga terjadilah error tersebut.
Sebetulnya ada pengaturan untuk mengijinkan akses ke HTTP, tapi untuk alasan keamanan, saya mending pakai plugin lain saja. Karena saya cek, plugin ini sudah tidak ada update lagi sejak lama.
Jadi solusinya, saya lepas plugin “Markup (JSON-LD) structured in schema.org” ini.
Dan website saya kembali normal.
Ini kasus yang jarang terjadi, karena di google pun, cuman ada 1 kasus yang paling mendekati, dan itupun jenis masalahnya agak berbeda. Dan solusi yang ia ambil adalah mengubah pengaturan di server, pada bagian “allow_url_fopen”.
Saya sih nggak mau pakai cara itu, untuk alasan keamanan.
Dan ini hanya catatan pribadi, tapi kalau ini bermanfaat juga buat kamu, ya syukurlahhhh heheheh.
Ini masalahnya simpel banget, tapi lumayan bikin bingung. Kenapa? karena sebenarnya photoshop 2022, sudah menyediakan fitur export file gambar menjadi format *.WebP ini, tanpa menginstall plugin. TAPI, fiturnya tersembunyi.
Kronologi
Semenjak pindah dari windows ke mac, banyak aplikasi di laptop yang juga harus saya upgrade. Contoh photoshop, yang awalnya di windows, saya pakai photoshop 2011, tiba-tiba pindah ke mac, harus pakai photoshop 2022.
Di photoshop 2022, tampilannya baru, banyak hal – hal yang berbeda, termasuk fiturnya banyak yang baru juga.
Dulunya, tiap kali mau mengubah format gambar dari *.jpg atau *.png, ke format *.WebP (untuk gambar-gambar di website, biar ringan). Saya selalu convert di aplikasi external (bukan di photoshop). Biasanya saya ketik di google “JPG to WebP converter” muncul banyak pilihan. Saya pakai aja yang 3 teratas.
Masalah
Cuman, semenjak saya pakai foto atau gambar original berbayar, biasanya gambar vector yang saya pesan ke desainer untuk kebutuhan website. Saya merasa agak kurang nyaman kalau harus mengupload gambar original saya ke situs-situs seperti ini. Karena bisa saja, gambar kita akan terindex di google, dan orang lain bebas mendownload gambar kita dan digunakan secara bebas oleh orang lain tanpa ijin kita.
Mulailah saya berfikir, cari cara agar “Bagaimana cara agar di photoshop kita bisa langsung mengexport file gambar dengan format *.webP”.
Karena sudah lama saya coba – coba, di photoshop itu nggak bisa. Saat kita pilih “File –> Save as…”, Pilihan yang muncul cuman *.psd, *.psb, *.pdf, *.tiff,
Atau kalau di “File –> Export”
Yang muncul cuman *.png, *.jpg, dan *.gif
Padahal, dulu waktu pakai windows, photoshop saya disana, bisa tuh menyimpan file *.webP, tapi kenapa begitu pakai photoshop yang terbaru nggak ada pilhannya ya?
Solusi
Seperti yang saya bilang tadi, ini sebenernya masalah simpel banget. Remeh – temeh banget kakakakak. Untuk menyimpan / export file dengan format *.webP, tempatnya bukan di File –> Save as… atau File –> Export.
Saya lagi bikin website toko online, untuk produk affiliate. Dimana di toko tersebut, tidak benar-benar menjual barang, seperti toko online pada umumnya, mulai dari menstok barang, mengembas, dan sampai mengirimkannya ke kurir. Tapi hanya sebagai etalase produk, lalu kita pasang link produk affiliate disana.
Untuk pembahasan tentang bisnis affiliate, nanti kita bahas di artikel lainnya saja ya, biar nggak panjang.
Maunya gimana?
Nah di woocommerce, sebetulnya sudah ada fasilitas untuk produk digital, yang sebetulnya bisa mengakomodasi produk affiliate ini. Dan bahkan ada plugin yang dibuat khusus untuk website affiliate.
Tapi saya tidak pakai itu, karena ini kebutuhannya agak spesifik, jadi saya buat sendiri aja, biar bisa benar-benar sesuai kebutuhan saya.
Masalahnya apa?
Nah tapi, karena tidak pakai mode “produk digital” dan tidak pakai plugin tambahan, inputs/textbox qty prdouk, jadi tetap kelihatan.
Karena saya tidak begitu mahir woocommerce ataupun wordpress. Jadi sampai sekarang saya nggak nemu cara menonaktifkannya lewat dashboard wordpress.
Solusinya gimana?
Ya sudah, kita bypass pakai code aja. Berikut ini adalah code untuk menonaktifkan atau menghapus input/textbox qty (quantity) pada halaman single product woocommerce.
Buka file functions.php di folder theme wordperss kamu.
Edit, lalu kalau sudah ada baris kode disana, kamu cukup taruh di baris paling bawah, diatas tanda “?>”
Save (simpan)
lalu coba refresh halamannya lagi. Dan sekarang input/textbox qty sudah hilang.
Di artikel berikutnya, mungkin saya akan bahas juga, cara mengcustomize tombol “Beli Sekarang” agar saat di klik, muncul dropdown menu. Dalam kasus saya ini, akan muncul dua opsi, apakah beli lewat “Tokopedia” atau “Shopee”.
Saya lagi benerin website saya yang lama. Dimana di salah satu halamannya, saya nambahin tampilan list produk, yang produknya ditampilkan berjejer kesamping, secara horizontal.
Sehingga saat websitenya di buka lewat HP, list produk tersebut bukan lagi berjejer dari atas kebawah, tapi berjejer kesamping. dan bisa di scroll ke kiri dan kekanan.
Masalahnya apa?
Nah masalahnya, tampilan garis dari scrollbarnya itu, ganggu tampilan banget. Saat halaman pertama di load, scrollbarnya itu secara default tampil seperti digambar. Walaupun memang, begitu di geser/disroll sedikit, scrollbarnya akan hilang. Nah tapi saya tetep nggak mau seperti itu.
Maunya gimana?
Saya maunya, begitu halaman di load dari pertama kali, list produk akan tampil tanpa adanya penampakan scrollbar. Seperti gambar dibawah ini.
Solusinya apa?
Lumayan lama sih cari solusinya. Karena ini pertama kali saya menerapkan list produk yang ditampilkan sejajar menyamping seperti ini.
Awalnya, saya pikir perintah “overflow-x: hidden;” fungsi untuk menyembunyikan scrollbarnya. Walaupun memang benar, scrollbarnya jadi hilang. Tapi list produknya jadi nggak bisa di scroll. Pokoknya perintah “overflow-x:” udah saya otak atik valuenya. dari auto, hidden, scroll, dll.
Tapi tetep aja, tidak sesuai dengan yang saya mau.
Setelah ngulik-ngulik lagi, ternyata kuncinya ada di : “display: none;”
Tapi jangan sampai salah nempatinnya ya. Cara pakainya, bisa lihat di code CSS dibawah ini. Karena kalau salah tempat, list produknya yang display nya = none (alias hilang). Jadi perhatikan cara pakainya di code CSS di bawah ini.
<style type="text/css">
/* Misalnya ini class scrollbar kamu */
.nama_class_kamu {
display: flex;
flex-wrap: nowrap;
position: relative;
overflow-x: scroll;
}
/* Menyembunyikan scrollbar untuk Chrome, Safari dan Opera */
.nama_class_kamu::-webkit-scrollbar {
display: none;
}
/* Menyembunyikan scrollbar untuk Internet Explorer, Edge and Firefox */
.nama_class_kamu {
-ms-overflow-style: none; /* Internet Explorer dan Edge */
scrollbar-width: none; /* Firefox */
}
</style>
Kesimpulan
Perintah “overflow-x: hidden;” bukan solusi yang tepat dalam kasus ini, karena fungsi ini bisa bikin list produk tidak bisa di scroll. Perintah “display: none;” adalah yang paling tepat, tapi penempatannya harus diperhatikan agar ditujukan untuk menghilangkan “webkit-scrollbar” nya. Bukan list produknya.
Saya punya website, yang di salah satu halamannya, ada semacam informasi penjadwalan. Dimana di kotak informasi tersebut, user bisa melihat, “tanggal berapa sih jadwal proses selanjutnya?”
Awalnya, user harus catat manual di kertas, atau di notes HP.
Tapi saya pengennya, proses jadi otomatis. Dimana user bisa tinggal klik satu tombol, lalu informasi otomatis tercatat di google calender si user (HP ataupun Desktop). Sehingga user nggak perlu lagi mencatat jadwal ini secara manual.
Kebutuhan
Cukup satu kali klik, google calender akan otomatis terbuka, dan sudah langsung terisi judulnya, tanggalnya dari tanggal berapa, sampai tanggal berapa, bahkan ada informasi tambahannya juga, yang mengandung link url.
Sehingga saat jadwalnya tiba, user dapat notifikasi di HPnya (pengingat). Saat notifikasi pengingat tersebut muncul, user tinggal klik, kemudian tampilah informasi catatan di google calender, lalu user tinggal klik link url, dan langsung di arahkan ke halaman yang mereka harus kunjungi, saat hari dimana jadwal telah ia tentukan. (semoga paham maksudnya 😂 lagi ngantuk banget males mikir).
Masalahya apa?
Sebenarnya, sistem pencatatan otomatis ke google calender ini sudah saya terapkan di website ini, sejak tahun 2018 lalu. Dan semenjak itu, semua user pakai dan semua berjalan dengan normal.
Cuman beberapa hari ini, user banyak yang info, kalau calender otomatisnya tidak merespon. Dimana saat di klik, muncul konfirmasi “sinkronisasi gagal”. atau kadang “event tidak ditemukan”, dll… Setelah saya coba sendiri, ternyata benar.
Solusinya apa?
Akhirnya, saya coba cek codingnya. Lalu saya coba cari referensi. Siapa tau aja, metodenya sekarang sudah berubah. Karena udah dari 2018, pasti ada yang di update oleh google.
Setelah cari tau, saya menyelesaikan masalah ini dengan 2 solusi.
Solusi 1 : ubah struktur url
Dulu format url yang saya pasang di code php saya seperti ini :
Sekarang urlnya berubah jadi : calendar.google.com/calendar/render?
Jadi kemungkinan pertama, error terjadi karena struktur url salah.
Solusi 2 : biarkan baris text bersambung (jangan di enter)
Setelah saya coba solusi 1, memang ada perkembangan, dimana kalendernya tampil, tapi fieldsnya tidak terisi otomatis (seperti judul, tanggal, dan catatan).
Lumayan membingungkan, karena sudah ditulis dengan format/struktur sesuai dengan contoh di dokumentasi google, tapi hasilnya kok tetap salah atau nggak bisa.
Dan akhirnya nemu solusi 2.
Solusi 2 ini tidak sengaja saya temukan, karena saya bener-bener ubah satu persatu. dari judul dulu, dari tanggal, kemudian fields yang lainnya. Uji coba ini saya tidak rapikan, sehingga saya sambung textnya tanpa meng-enternya. Dan bisa.
Jadi ketemulah disana penyebabnya, bahwa itu disebabkan karena baris text urlnya, ternyata nggak boleh di enter. nggak boleh ada br (break).
Ini adalah episode yang merupakan bagian dari Podcast Series saya, yang berjudul Beli Followers.
Sesuai namanya, di Podcast Series ini, saya bakal ngebahas, hal-hal seputar Beli Followers. Beli followers itu seperti apa sih? asal usulnya seperti apa, tempat dan cara belinya, plus minusnya apa aja, resikonya, tips dan trik, hingga konsep cara kerjanya.
Di part 4 ini, saya akan ngebahas, apakah beli followers itu boleh nggak sih?
Boleh atau tidaknya, tergantung kamu bertanya ke siapa?
Kalau kamu tanya ke sosial media guru, maka pasti jawabannya tidak boleh. Kenapa? karena beliau-beliau ini, jualan buku, kelas, seminar. Untuk ngajarin orang, cara ngembangin akun sosmed secara organik. Jadi prinsip ilmu yang di ajarkan, sangat bertolak belakang dengan konsep beli followers.
Ini adalah episode yang merupakan bagian dari Podcast Series saya, yang berjudul Beli Followers.
Sesuai namanya, di Podcast Series ini, saya bakal ngebahas, hal hal seputar Beli Followers. Beli followers itu seperti apa sih? asal usulnya seperti apa, tempat dan cara belinya, plus minusnya apa aja, resikonya, tips dan trik, hingga konsep cara kerjanya.
Di part 3 ini, saya akan ngebahas, tempat beli followers dimana? Rekomendasi tempat beli followers : https://belifollowers.id
Saya belajar hal baru hari ini. Sekitar 2 jam lamanya, saya lagi ngulik bootstrap, cara agar bisa mengurutkan objek, mana yang di atas, mana yang dibawah. Saat halaman mengalami break point, dari mode desktop ke mode mobile.
Diketahui
Saat event break point terjadi, secara default bootstrap mengurutkan objek atau kolom grid, dimana yang berada dikiri, akan berada di atas, dan yang kanan akan berada di bawahnya.
Apa kebutuhan saya?
Dalam kasus ini, saya lagi bikin sebuah halaman, yang di halaman tersebut menampilkan 3 judul informasi (3 paket gambar dan text seperti video diatas). Tapi di tampilkannya dengan zig zag. Baris pertama gambarnya dikiri, baris kedua gambarnya di kanan, baris ketiga gambarnya di kiri lagi.
Apa masalahnya?
Dengan sifat default, objek kiri akan di atas, dan objek kanan akan di bawah, dengan di tumpuk secara zig zag seperti ini, saat kondisi break point terjadi, di mode mobile tumpukannya jadi berubah.
Tumpukan di mode desktop
Tumpukan di mode mobile
Sebelah kiri, menunjukan hasilnya setelah beralih dari mode desktop ke mode mobil, tapi yang saya mau seperti di kanan. Tumpukannya berurutan dari : urutan 1. gambar : text, urutan 2. gambar : text, urutan 3. gambar : text.
Penampakan aslinya seperti ini.
Solusinya
Ternyata di bootstrap sudah ada fungsi/class untuk mengurutkan secara custom, tiap objek, semau kita.
Nama classnya adalah “order” simak dokumentasi bootstrap tentang order disini.
Sebelum di manupulasi.
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 1</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 2</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 3</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
Sesudah di manipulasi
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 1</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center order-lg-1">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 2</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 3</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
Ada tambahan class : order-lg-1
Artinya, objek yang ada di bawah div tersebut, akan diurutkan nomor 1 atau di atas.
Lumayan lama nggak nemu – nemu, cara nampilin baris code html, php, javascript, ataupun css, di blog post, tiap lagi ngebahas yang ada hubungannya sama code. Sebenernya, gampang aja kalau di cari tau, cuman emang males aja nyari taunya.
Tapi tiap kali post blog baru yang ada codenya, bingung lagi… bingung lagi…. saking malesnya nyari, saya lebih sering screenshoot aja, lalu gambarnya saya tempel di blogpost. Biar cepet aja.
Sempat pakai plugin dari codepen embed, tampilannya bagus sih. cuman repotnya, tiap kali mau nampilin code di blogpost, kita harus login dulu ke codepen.io setelah itu bikin pen baru dulu. baru pen itu kita embed ke blogpost kita. Ahhhhhh ribet banget pokoknya.
Tadi sambil nyari nyari tutorial, ehhh ada blog yang tampilan baris kodenya ini rapi banget. Langsung kepikiran, karena selama ini saya sulit banget kalau mau bikin blogpost yang nampilin code seperti ini.
akhirnya saya inspect elements. lalu cari tau, element ini namanya apa. Ketemulah namanya CodeMirror.
Ya sudah, saya coba cari di wordpress plugins, ketemu.
Saya coba install, dan cobain.
Saya coba pakai sampel code dari bootstrap.
Dan hasilnya seperti ini.
Akhirnya, mulai sekarang bisa nampilin sampel code lebih profesional hehehehe.
