Sekedar kilas balik bahwa postingan ini tetap mengacu pada panduan umum Search Engine Optimization (SEO)& merupakan kelanjutan dari beberapa posting sebelumnya tentang judul dan deskripsi blog serta memperbaiki struktur blog. Hal ini kami lakukan agar informasi yang pengguna dapatkan tidak sepotong-sepotong, melainkan satu kesatuan posting yang tidak terpisahkan satu dengan lain.
Konten secara umum merupakan informasi yang tersedia melalui media dalam berbagai format. Apabila kita kaitkan dengan sebuah blog, maka ia meliputi semua isi yang terkandung dalam struktur markah pada suatu blog, baik dari kepala hingga kaki. Sedangkan penyempitan makna konten itu sendiri lebih tertuju pada aktivitas blogging, yakni posting. Hal itu tidaklah menjadi keliru sebab posting merupakan bagian dari isi konten utama dalam sebuah blog. Namun pada uraian ini, kita akan membicarakan konten dalam pengertian yang menyeluruh & tidak terbatas pada posting saja. Bagaimana konten yang dapat dikategorikan berteman dengan SEO (Search Engine Optimization)? Penting ditekankan bahwa konten Anda untuk pengguna, sedangkan faktor lain merupakan dampak yang dihasilkan.
Kualitas & Layanan Konten
Apa yang terpikirkan dari sub judul di atas? Ketika sebuah blog memiliki karakter unik, kesamaan topik dari awal sampai akhir maka ia akan mendapat pengakuan dari pembacanya. Selanjutnya tidak jarang akan menjadikan rekomendasi, apalagi jika posting yang diterbitkan merupakan sebuah informasi segar & menarik. Ilustrarsi singkat, pengguna ingin membaca tentang tips blogging. Ketika ia menemukan sebuah blog yang menyajikan informasi tersebut, ia akan mulai memindai apa saja isi yang terkandung di dalamnya, mungkin judul posting lain yang terdapat dalam widget, tata bahasa, markah, dan sebagainya. Disaat mata & pikiran pengguna telah menerima bentuk tampilan pada layar peramban, pada saat itu pula mereka mulai membacanya. Apabila antar posting memiliki keterkaitan dengan topik yang dibacanya, bukan mustahil pengguna akan ‘mengacak-acak’ seluruh konten serta akan menanti pembaharuan di blog tersebut. Dan ini boleh kita namakan sebagai kata kunci tertarget.
Kemudian perhatikan pula tata bahasa yang digunakan, oleh karena tidak semua pengguna berasal dari daerah atau negara kita, kecuali jika memang blog ditarget untuk pembaca tertentu. Dan bukan itu saja, pemahaman antar pengguna satu dengan lain mungkin akan berbeda pula. Coba teliti tentang pemahaman “markah” & “kode”. Satu pengguna mungkin akan mengetikkan “markah HTML”, sedangkan pengguna lain mengetik “kode HTML”. Meskipun informasi yang dimaksudkan sama, tetapi hasil yang didapatkan akan berbeda dalam mesin penelusur. Akan lebih baik jika kita memadukan frase tersebut, sehingga mengantisipasi perbedaan pemahaman pengguna. Hal ini integral dengan pemanfaatan ungkapan bahasa yang baik & benar dalam isi konten. Siapa yang menduga — walaupun ditarget untuk pembaca tertentu — pengguna lain dari berbagai daerah atau negara akan mengunjungi blog kita, sehingga merupakan upaya logis untuk mendukung sebuah konten agar dapat diterjemahkan dengan benar (hampir benar). Intinya maksud yang disampaikan oleh author serupa/sama dengan penerimaan yang didapat oleh pengguna.
Konten yang original, segar, & menarik tanpa memperhatikan tanda-tanda di dalamnya mungkin akan menimbulkan kesalah-pahaman bagi pembacanya. Untuk mengurangi hal itu kita dapat belajar menerapkan kode & markah yang semantik. Saya tidak menjelaskan detail tentang semantik, namun jika ingin mempelajari lebih lanjut, Anda dapat membaca pada tautan berikut:
Bagaimana menerapkan semantik dalam konten blog? Mungkin kita telah mengenal CSS dan struktur HTML, tetapi dalam posting jarang kita perhatikan. Sedikit tips untuk penerapan semantik dalam posting, saya biasa merangkum beberapa markah umum sebelum menulis dan menggunakan metode post editor “HTML” (bukan “Compose”).
Teks jangkar tidak selalu berhubungan dengan kata kunci (keywords), ia merupakan sekumpulan teks atau kata yang mendeskripsikan sesuatu sehingga menjadi jelas seperti URL (Uniform Resource Locator), singkatan, gambar (detail pada sub judul “Optimalisasi Penggunaan Gambar”), dan sebagainya.
Demi sebuah kata kunci, saya rasa tidak perlu selalu ditunjukkan dengan memperinci kata kunci dalam berbagai gaya (style) seperti teks tebal, miring, pewarnaan dan lain-lain. Bahkan tidak jarang ditemui sejumlah kata kunci yang dicoret atau menggunakan garis bawah. Apa tujuannya? Agar perayap akan tersendat ketika melakukan pengindeksan pada kata kunci tersebut. Lalu bagaimana dari sisi pengguna? Apakah akan terasa nyaman membaca jika sebuah konten terlalu banyak kata kunci yang dihiasi dengan berbagai gaya atau bahkan tidak jarang menimbulkan kesalah-pahaman? Telah dijelaskan pada sub judul sebelumnya bahwa berusaha membuat sebuah konten untuk semantik akan mengantisipasi kesalah-pahaman, begitu pula dengan memberikan tanda-tanda tertentu pada suatu teks (tanda baca). Isi konten yang baik adalah yang mudah dimengerti & dipahami oleh pengguna, bukan sebaliknya. Apabila tidak, maka resiko pentalan akan semakin tinggi.
Teks jangkar pada tautan pun semestinya mendeskripsikan apa yang ia tautkan, sehingga tautan yang kita masukkan benar-benar berkualitas. Hindari penulisan teks jangkar pada tautan secara generik yang mengandung arti kurang jelas seperti halaman ini, artikel ini, klik di sini, dan sejenisnya. Dari sisi pengguna, tautan seharusnya mudah dibedakan dengan teks biasa, kerena nilai dari sebuah konten akan memudar jika pengguna tidak dapat membedakan itu atau pengelola mengkondisikan agar tautan tidak sengaja diklik oleh pengguna. Bahkan mungkin tanpa disadari, kita telah menciptakan tautan yang sebenarnya tidak perlu dimasukkan (dipaksa untuk bertaut) dalam sebuah konten.
Optimalisasi Penggunaan Gambar
Saya rasa untuk optimalisasi penggunaan gambar, para blogger pasti telah mengetahui pentingnya atribut alt. Atribut itu berfungsi sebagai ‘pembaca gambar’. Tinggal upaya kita untuk membuatnya lebih deskriptif & lebih bermakna bagi pembacanya. Jangan pula kita memasukkan deskripsi yang terlalu panjang atau hanya mengeksplorasi kata kunci dalam gambar. Gambar merupakan salah satu alat bantu untuk memberikan kemudahan bagi pengguna agar lebih memahami isi konten. Tetapi hal itu bukan berarti bahwa kita selalu menggunakan tautan gambar untuk navigasi di blog yang kita kelola.
Pergunakan Tag Heading dengan Tepat
Tag heading dimanfaatkan untuk menyajikan struktur pada halaman kepada pengguna, dimana ia tersusun mulai <h1> sampai dengan <h6>. Karena tag heading biasanya membuat teks yang terkandung di dalamnya lebih besar dari teks biasa pada suatu halaman, maka ini adalah isyarat visual kepada pengguna bahwa teks tersebut penting & bisa membantu mereka memahami sesuatu tentang jenis konten di bawah teks judul. Beberapa ukuran heading yang dapat digunakan dalam rangka menciptakan struktur hirarkis untuk konten blog, sehingga memudahkan pengguna untuk menavigasi isi dari konten tersebut.
Patut dijadikan catatan bahwa tidak semua teks dapat dikategorikan sebagai tag heading, adakalanya teks tebal atau miring lebih bermakna bagi teks tersebut. Kemudian jika sebuah teks kurang/tidak membantu dalam menentukan struktur halaman, sebaiknya tidak terlalu memaksakan memberi ‘label’ tag heading. Salah satu cara untuk menentukan sebuah struktur halaman dalam blog adalah menulis & berpikir secara outline. Yah, mungkin pengertian sederhananya adalah metode membuat kerangka karangan.
Judul sebuah posting seharusnya singkat dan deskriptif. Bukankah judul yang panjang lebih baik & menimbulkan daya tarik tersendiri? Mungkin dalam sedikit kasus, penekanan teks tertentu yang ditambahkan dapat berguna bagi pembaca. Tetapi jika judul posting yang singkat telah mampu mendeskripsikan isi yang terkandung dalam posting, mengapa kita berpikir untuk membuatnya menjadi panjang.
Simpulan
Berdasarkan dari uraian di atas maka dapat kita ambil generalisasi dengan detail sebagai berikut:
Konten seharusnya unik, nyaman dibaca, & mudah dipahami oleh pengguna untuk mengantisipasi atau mengurangi celah kesalah-pahaman.
Ketika kita telah memilih sebuah topik, tetapkan pengorganisasian isi konten agar selalu terkait dengan topik tersebut. Dan jangan lupa memprioritaskan untuk kemudahan pengguna, bukan untuk indeks mesin penelusur.
Teks jangkar yang singkat, tepat, dan deskriptif akan memberikan pengalaman yang positif bagi pengguna serta indeks yang baik bagi mesin penelusur untuk menyampaikan isi terkait. Begitu pula apabila kita dapat memberikan pembeda yang jelas antara teks biasa & tautan teks, sehingga hal-hal yang kurang/tidak diinginkan dapat diminimalisasi.
Lengkapi dengan atribut alt, apabila menggunakan media gambar sebagai tautan dan/atau isi konten dalam tubuh HTML (Hypertext Markup Language). Ini tidak termasuk gambar yang dikonfigurasi sebagai nilai dari suatu properti pada CSS (Cascading Style Sheets).
Pergunakan tag heading secara tepat untuk menekankan bahwa teks adalah benar-benar penting dan merepresentasikan struktur halaman.
“Menulis” ternyata tidak sekedar “menulis”, tetapi memiliki kedalaman makna yang terkandung di dalamnya. Standar merupakan impian bagi para blogger — termasuk saya — dan boleh jadi SEO turut sebagai pengiring. Tetapi hal tersebut mungkin tidak berarti tanpa memberikan tanda-tanda tertentu (semantik) dalam mengoptimalkan konten pada blog yang kita kelola dan yang terpenting adalah bagaimana informasi disampaikan dengan baik serta terstruktur, sehingga dapat diterima secara positif oleh pengguna.
Sobat Blogger, melanjutkan uraian teknik untuk mengubah atau mengganti model bidang posting yang ditampilkan di halaman beranda dalam artikel sebelumnya dengan judul ‘Cara Mengganti Desain Halaman Blog Yang Dihasilkan Oleh Penggunaan Template Standar’, berikut ini adalah uraian cara yang digunakan untuk menambahkan 1 (satu) kolom utama untuk artikel terbaru pada homepage yang dimaksudkan sebagai sebuah headline. Disamping itu, penerbitan artikel ini sekaligus dimaksudkan untuk menjawab pertanyaan yang diajukan dalam artikel sebelumnya mengenai bagaimana caranya menambahkan kotak posting baru di atas kumpulan kotak artikel yang dihasilkan oleh penggunaan teknik dalam artikel tersebut di atas. Sehingga untuk menerapkan teknik dalam artikel ini, maka terlebih dulu Anda harus mengimplementasikan teknik yang telah diuraikan dalam artikel sebelumnya seperti yang telah saya sebutkan di atas.
Posting ini akan menuturkan tentang beberapa bagian dalam struktur pengkodean dasar template Blogger™, dimana obyek template adalah template Blogger™ yang diakses melalui “Edit HTML”, sehingga opsi Customize dapat diabaikan. Mungkin diterjemahkan dalam bahasa sederhana artinya apabila ingin merubah sesuatu berkenaan struktur pengkodean, maka dilakukan secara manual. Bentuk sederhana HTML pada sebuah situs web atau blog adalah sebagai berikut.
Ketika kode di atas diaplikasikan pada peramban, maka akan terlihat layar kosong & tab peramban akan menampilkan title. Lebih lanjut, tambahkan baris teks dalam body, contoh: Aku adalah tubuh HTML. Layar peramban akan menambahkan sebuah baris teks sesuai dengan apa yang kita tulis di antara <body> … </body>.
Ketika kita ingin memasukkan daerah geografi atau bahasa yang didukung oleh konten dalam tubuh HTML — tidak perlu menambahkan meta — cukup sisipkan tag lang, contoh: lang='id', lang='en', lang='en-us', lang='fr', dan sebagainya.
Head HTML berisi sejumlah markah yang meliputi script, instruksi kepada peramban untuk menemukan stylesheets, memberikan informasi meta, dan lain-lain.
Body HTML merupakan tubuh dari HTML (HyperText Markup Language) yang akan menampilkan bentuk pengkodean pada layar peramban. Sedangkan beberapa elemen yang melingkupinya dapat kita uraikan sebagai berikut.
Dari beberapa markah elemen di atas, biasanya untuk menampilkan halaman posting atau halaman statis pada blog, minimal harus ada elemen widget main (posting blog). Sedangkan yang lain dapat dikustomisasi manual, seperti header dapat saja berisi title serta tagline, fungsi fitur navbar dapat kita matikan, dan lain-lain.
Simpulan
Dengan beberapa ringkasan sederhana di atas, mungkin kita telah dapat menggambarkan bagaimana sebuah blog pada Blogger™ dibentuk. Tinggal menambahkan beberapa selector (id dan/atau class) atau elemen-elemen dalam HTML5 (header, article, aside, footer, dan sebagainya) untuk mengapit elemen widget tersebut serta konfigurasi CSS (Cascading Style Sheets) yang dibutuhkan. Sedangkan isi konten kita upayakan agar tetap memberikan tanda, sehingga lebih bermakna bagi pembacanya.
Para blogger tentu sudah tidak asing lagi dengan yang namanya “Formulir Kontak”. Formulir kontak berguna sebagai media interaksi pengunjung agar terhubung langsung ke email pengelola blog. Formulir ini berbeda dengan meninggalkan komentar & memiliki skala yang lebih luas, contoh: memberikan saran berkenaan dengan blog atau permintaan posting, bertanya tentang suatu topik posting ketika komentar pada posting tersebut telah ditutup, dan sebagainya
Banyak layanan pihak ketiga yang menyediakan fasilitas ini, antara lain: EmailMeForm, Kontactr, Foxyform & FreeContactForm. Nah, sekarang bagaimana jika kita ingin membuat formulir kontak sendiri? Salah satu alternatifnya adalah dengan menggunakan PHP (Hypertext Preprocessor), seperti yang akan Optimasi Blog deskripsikan berikut.
Web Hosting
Langkah awal, kita harus memiliki hosting. Mungkin salah satu situs web yang menyediakannya secara gratis adalah 000webhost.com (jika tidak berkeberatan, taut tersebut merupakan afiliasi Optimasi Blog di 000webhost) atau dapat menggunakan hosting lain. Kemudian buat satu subdomain gratis yang disediakan oleh layanan tersebut. Silakan buka akun email sesuai dengan email yang didaftarkan pada 000webhost untuk melihat konfirmasi akun. Jika sudah, kembali ke 000webhost & beranjak ke Cpanel. Klik icon “File Manager” dan masukkan kata sandi sesuai dengan waktu pendaftaran atau ganti kata sandi berbeda (baru) dengan melakukan akses ke “View FTP Detail”. Sekarang kita berada dalam File Manager, buka berkas public_html. Hapus file “default.php”, kemudian buat file baru bernama “index.php” yang berisi Silence is golden.
<?php // Silence is golden. ?>
Nah, sekarang subdomain gratis telah dapat kita pergunakan untuk menyimpan berbagai berkas. Selanjutnya masih di dalam berkas public_html, kita membuat file PHP yang nantinya akan dimunculkan sebagai formulir isian kontak.
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler"); } else { ob_start(); } ?> <?php error_reporting( 0 );?> <?php //Memperbaiki kesalahan pemberitahuan pada debug $nameError = ''; $emailError = ''; $commentError = ''; //Mengecek apakah isi form sudah dikirim if(isset($_POST['submitted'])) { //Mengecek apakah chaptcha rahasia terisi if(trim($_POST['checking']) !== '') { $captchaError = true; } else { //Mengecek apakah kolom nama sudah diisi if(trim($_POST['contactName']) === '') { $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong $hasError = true; } else { $name = trim($_POST['contactName']); } //Mengecek apakah kolom alamat email sudah diisi dan valid if(trim($_POST['email']) === '') { $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong $hasError = true; } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) { $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid $hasError = true; } else { $email = trim($_POST['email']); } //Mengecek apakah kolom isi pesan sudah disi if(trim($_POST['comments']) === '') { $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } //Mengirimkan pesan, jika semua kolom telah diisi dengan valid if(!isset($hasError)) { $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email mail($emailTo, $subject, $body, $headers); if($sendCopy == true) { $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya mail($email, $subject, $body, $headers); } $emailSent = true; } } } ?> <!DOCTYPE html> <html> <head> <title>Formulir Kontak</title> <link rel="stylesheet" href="/css/style.css.php"/> </head> <body> <?php if(isset($emailSent) && $emailSent == true) { ?> <h3>Terima kasih, <?=$name;?></h3> <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p> <?php } else { ?> <?php if(isset($hasError) || isset($captchaError)) { ?> <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p> <?php } ?> <form action="contact-form.php" id="contactForm" method="post"> <p class="contact-form-author"> <label for="contactName">Nama <small>*</small></label> <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" /> <?php if($nameError != '') { ?> <span class="error"><?=$nameError;?></span> <?php } ?> </p> <p class="contact-form-email"> <label for="email">Email <small>*</small></label> <input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" /> <?php if($emailError != '') { ?> <span class="error"><?=$emailError;?></span> <?php } ?> </p> <p class="contact-form-message"> <label for="commentsText">Pesan <small>*</small></label> <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> <?php if($commentError != '') { ?> <span class="error"><?=$commentError;?></span> <?php } ?> </p> <p class="inline"> <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label> </p> <p class="screenReader"> <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /> </p><!--Chaptca rahasia--> <p class="contact-form-submitted"> <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" /> </p> </form><!-- #contactForm --> <?php } ?> </body> </html>
Untuk kode yang berwarna merah merupakan kompres file dengan menggunakan gzip & warna biru diisi dengan email serta nama blog, sesuaikan dengan keterangan yang diberi warna hijau. Beri nama file di atas menjadi “contact-form.php” (tanpa tanda petik). Adapun <link rel="stylesheet" href="/css/style.css.php"/> akan kita buat terpisah dari file induk (contact-form.php)
Buat direktori baru dengan nama “css” (tanpa tanda petik). Masuk ke dalam direktori css, kemudian tambahkan file baru dengan nama “style.css” (tanpa tanda petik) yang isinya lebih kurang sebagai berikut.
Silakan Anda kustomisasi pengkodean CSS (Cascading Style Sheets) di atas, sehingga sesuai dengan keinginan dan/atau template Anda. Jangan lupa membuat satu file baru (dalam folder css) lagi untuk mengompresi CSS tersebut & beri nama “style.css.php” (tanpa tanda petik).
<?php ob_start("ob_gzhandler"); ob_start("compress"); // required header info and character set header("Content-type: text/css; charset: UTF-8"); // duration of cached content (Cache for 1 weeks) $offset = 60 * 60 * 24 * 7; $ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; // cache control to process header ('Cache-Control: max-age=' . $offset . ', must-revalidate'); //set etag-header header('ETag: "'.md5($ts).'"'); // expiration header format $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT"; // send cache expiration header to browser header($ExpStr); // initialize compress function for white-space removal ob_start("compress"); // Begin function compress function compress($buffer) { // remove comments $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); // remove tabs, spaces, new lines, etc. $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); // remove unnecessary spaces $buffer = str_replace('{ ', '{', $buffer); $buffer = str_replace(' }', '}', $buffer); $buffer = str_replace('; ', ';', $buffer); $buffer = str_replace(', ', ',', $buffer); $buffer = str_replace(' {', '{', $buffer); $buffer = str_replace('} ', '}', $buffer); $buffer = str_replace(': ', ':', $buffer); $buffer = str_replace(' ,', ',', $buffer); $buffer = str_replace(' ;', ';', $buffer); return $buffer;} require_once('style.css'); ob_end_flush(); ?>
Dua file dalam direktori css, yakni style.css dan style.css.php dengan pemanggilan <link rel="stylesheet" href="/css/style.css.php"/> pada file contact-form.php
Sekarang formulir kontak telah siap dimanfaatkan serta diletakkan pada blog, biasanya dalam halaman kontak. Sebelumnya — mungkin ini sifatnya opsional (tambahan) — menambah beberapa pengaturan pada .htaccess agar lebih maksimal. Baris pertama umumnya telah otomatis ditambahkan, tinggal melakukan konfigurasi untuk baris-baris selanjutnya. Taut kredit khusus untuk Mutohar Alwi dalam posting Cara Setting Expired Header.
# Do not remove this line, otherwise mod_rewrite rules will stop working <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
# Prevents directory listing IndexIgnore *
# Strong HTACCESS Protection <Files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </Files>
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Isi keseluruhan public_html (subdomain) yang terdiri dari satu folder css dan tiga buah file (.htaccess, index.php, dan contact-form.php).
Implementasi Formulir Kontak dalam Blog
Setelah melakukan beberapa langkah-langkah di atas pada hosting kita untuk mendukung fasilitas kontak. Sekarang bagaimana cara melakukan konfigurasi formulir kontak tersebut dalam blog? Cukup ringkas, buat halaman statis baru (contoh: h**p://namablog.blogspot.com/p/kontak.html) dengan beberapa kalimat sebagai pembuka. Kemudian tambahkan markah berikut di bawah kalimat pembuka.
Perhatikan namasubdomain (warna merah) harus sesuai dengan yang kita daftarkan, contoh: optimasi.netai.net, optimasi.site90.com, dan sebagainya. Kemudian tambahkan CSS berikut pada template untuk mengatur markah object& letakkan di bawah ]]></b:skin>.
Kemungkinan yang banyak diutak-atik adalah CSS object pada properti height agar formulir kontak tampil penuh, ketika memunculkan pesan error pada saat mengklik tombol “Kirim Pesan”. Taut demonstrasi dapat dilihat pada halaman Kontak Optimasi Blog. Berikut beberapa penampakkan hasil uji coba formulir komentar pada akun email pengelola blog.
Bosan membacanya? Oleh karena terlalu panjang, meskipun sebenarnya dapat dikustomisasi lebih singkat. Posting membuat formulir kontak ini merupakan bahan dokumentasi penulis serta sedikit menambah wawasan kita tentang ‘dunia’ hosting & bagaimana melakukan optimalisasi terhadap sejumlah file didalamnya. Tidak menutup kemungkinan terdapat kekeliruan dalam penyampaian atau pengkodean di atas, sehingga dibutuhkan kritik serta saran agar dapat memperbaiki posting ini.
Anda mungkin pernah membaca posting Menambah Lokasi Link Post (Breadcrumbs Trail) oleh Hoctro. Posting ini juga berhubungan dengan hal tersebut, namun di-aransemen dengan beberapa hack agar muncul di beberapa halaman & ditambahkan format microdata data-vocabulary. Penggunaan data-vocabulary dimaksudkan agar breadcrumbs mampu berdiri sendiri, sehingga akan harmonis dengan format microdata http://schema.org/Blog. Lebih lanjut mengenai breadcrumbs yang didukung beberapa format dapat kita telaah pada Rich snippets — Breadcrumbs.
Untuk pengkodean berwarna merah, dapat diganti sesuai keinginan Anda dengan menyesuaikan pula di halaman apa ia ditampilkan. Sedangkan warna biru (“/”) merupakan pemisah (separator) antar title. Letakkan pengkodean pada “Edit HTML”, jangan lupa centang Expand Widget Templates. Kemudian cari kode berikut & taruh di atasnya.
<b:includable id='main' var='top'>
Kita telah menambahkan widget breadcrumbs (kalau boleh dikatakan demikian), tinggal cara memanggil serta meletakkan kode pemanggilan tersebut. Perlu diperhatikan, kemungkinan pengkodean tiap template dapat berbeda-beda. Cara memanggilnya adalah melalui markah berikut.
<b:include data='posts' name='breadcrumb'/>
Letakkan kode pemanggilan itu di atas <b:include data='top' name='status-message'/>, seperti yang dapat kita amati di bawah ini.
Penambahan breadcrumbs di atas, khusus dilakukan pada Blogger™ & pengkodeannya tidak mutlak demikian. Artinya kita masih dapat merubah atau melakukan modifikasi sesuai dengan pengkodean template yang digunakan.
Bahan Bacaan: Breadcrumb for Blogger format RDF (Resource Description Framework) — Blogger Plugins.
Struktur blog bukan hanya berkenaan dengan pengkodean template, namun harus dipandang sebagai keseluruhan sistem yang terintegrasi di dalam blog itu sendiri, seperti pengaturan, semantik, dan sebagainya. Ketika kita terfokus bahwa struktur blog merupakan sebuah pengkodean semata, maka jangan heran jika upaya keras yang kita lakukan hanya berkisar antara utak-atik untuk mendapatkan peringkat utama dalam hasil organik (baca kembali posting tentang pemahaman yang saklak tentang SEO).
Apakah Optimasi Blog mengada-ada, dengan selalu menghubungkan sesuatu dengan SEO? Saya tidak mengada-ada & ini mempunyai dasar sesuai dengan panduan umum Search Engine Optimization (SEO), dimana struktur blog adalah salah satu item yang mesti diperhatikan. Item dasar telah diterbitkan sebelumnya pada posting judul dan deskripsi dalam blog.
Untuk URL (Uniform Resource Locator) saya rasa semua blogger sudah mengenal & paham. Jika judul posting dikustomisasi dengan baik, maka alamat posting (permalink) yang terbentuk akan baik pula. Hindari bagi sejumlah permalink yang memasukkan kata kunci berulang-ulang (ditandai dengan URL berwarna merah) dan sama serta serupa pada sub domain atau root direktori yang berbeda (warna hijau).
Membuat sebuah blog mudah untuk dinavigasi bukan berarti blog harus tampil minimalis. Selama pengguna & mesin penelusur dapat membaca dengan baik, maka blog tersebut dapat dikategorikan mudah untuk dinavigasi. Pemanfaatan beberapa elemen untuk membuat menu utama dan pengarsipan mempunyai nilai tersendiri untuk membantu pengguna menjelajahi konten. Bredcrumbs pun tidak jarang sebagai tolak ukur kemudahan bagi pengguna untuk menavigasi isi suatu halaman, terutama pada halaman yang kompleks. Mudah dinavigasi juga bermakna bahwa tautan-tautan — menu utama, arsip, bredcrumbs— tersebut aksesibel jika diklik (clickable). Ia akan mengarahkan pada halaman yang sesuai & tepat. Bagaimana jika alamat taut yang diklik tersebut tidak ada atau telah dihapus? Tempatnya adalah di halaman tidak ditemukan atau istilah kerennya “error404”.
Keberadaan peta situs (sitemap) sederhana yang merujuk ke semua halaman atau halaman yang penting (jika kita memiliki ratusan bahkan ribuan) di dalam blog dapat berguna. Hal ini akan sangat membantu pelacakan agar mesin penelusur menemukan halaman yang relevan. Silakan baca kembali posting tentang cara submit sitemap.
h**p://namablog.blogspot.com/sitemap.xml
Berikan kemudahan bagi pengguna untuk memindai & menjelajahi blog kita, jangan abaikan apa yang menjadi kebutuhan mereka. Sedangkan mesin pencari telah mendapat bagian tertentu — apa yang harus dan tidak boleh diindeks — dengan bantuan peta situs (sitemap).
Ketika berkunjung serta selesai membaca artikel yang diterbitkan pada sebuah blog dan kemudian ingin membaca artikel yang lainnya, maka hal yang biasa saya lakukan adalah melihat daftar artikel yang terdapat pada kolom artikel terkait, artikel populer, atau daftar isi. Dengan cara demikian maka menjadi lebih mudah bagi saya untuk menemukan artikel yang saya inginkan, bila dibandingkan dengan cara mengeklik tombol navigasi halaman yang terletak di atas footer (seperti yang tampak pada gambar contoh tautan dan tombol navigasi di atas). Dan bisa jadi teknik seperti ini pula lah yang biasa Anda gunakan saat berkunjung pada blog tertentu untuk membaca artikel yang diterbitkan pada blog tersebut.
Secara teknis keberadaan tombol navigasi (seperti yang tampak pada gambar di atas) dalam sebuah blog memang sangat diperlukan. Karena dengan adanya bagian tersebut maka akan mempermudah pengunjung dalam melakukan navigasi ketika sedang berada di halaman tertentu. Sebagai contoh misalnya ketika pengunjung sedang berada dalam halaman artikel dan kemudian ingin kembali ke halaman utama, maka yang bersangkutan tinggal mengeklik tautan atau tombol beranda yang terdapat di bawah artikel yang saat itu dibuka sehingga prosesnya pun menjadi lebih cepat.
