Mengenal Fungsi Heading Tag dan Cara Mengatur Heading Tag Dengan Benar

Heading Tag merupakan salah satu struktur yang terdapat pada Template suatu blog, dimana heading Tag ini berfungsi sebagai pengatur skala prioritas konten – konten yang ada pada blog yang kita miliki. Heading Tag sendiri terdapat enam tingkatan yakni <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. Biasanya dalam Template blog kebanyakan hanya digunakan Heading Tag <h1> sampai <h4>, jarang sekali ada yang menggunakan sampai <h6>. Mengapa Heading Tag ini begitu penting? Karena Heading Tag ini sangat berkaitan erat dengan SEO OnPage blog kita. Seperti yang kita ketahui bahwa Search Engine seperti Google menentukan Ranking di Search Engine menggunakan Robot, yang pastinya Robot tersebut memiliki algoritma dan bahasa tersendiri untuk mengenali suatu blog. Seperti yang saya bilang tadi bahwa Heading Tag ini fungsinya untuk menentukan skala prioritas, skala prioritas ini sendiri kita tujukan untuk Robot Search Engine agar Robot ini lebih mudah memahami apa sih isi dari blog kita.

Apa perbedaan <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>? 

Heading Tag ini dalam fungsinya adalah untuk menandai sesuatu yang menjadi prioritas dan mana yang hanya menjadi penghias atau tidak terlalu penting. Prioritas disini saya artikan untuk lebih diketahui banyak orang. Contohnya seperti berikut 

<h1>Negara</h1> 

<h2>Provinsi</h2> 

<h3>Kota / Kabupaten</h3> 

<h4>Kecamatan</h4> 

<h5>Desa</h5> 

<h6>RT dan RW</h6>

Contoh diatas menggambarkan urutan <h1> sampai <h6>, prioritas untuk dikenal banyak orang tentu Negara sampai hal yang paling minim deketahui orang adalah RT dan RW. Penerapan dalam blog juga demikian, biasanya Tag <h1> digunakan untuk Judul Blog pada Home Page, dan ketika masuk Sub Direktori maka biasanya yang menjadi <h1> adalah judul, Jumlah idealnya adalah 1 dan maksimal adalah 2 Heading Tag. 

Tag <h2> biasanya digunakan untuk judul – judul posting yang muncul pada Home Page dan pada sub direktori biasanya di gunakan untuk menarget beberapa keyword dalam artikel, jumlah ideal yang dapat digunakan untuk <h2> adalah 5 Heading Tag 

Tag <h3> biasanya digunakan untuk Widget yang ada pada blog, seperti artikel popular, label dan lain sebagainya. Biasanya secara default template menempatkan widget dengan tag <h2> padahal hal ini kurang bagus dalam SEO. Bagaimana cara mengubah tag <h2> Widget ini? Kita akan membahasnya dibawah. 

Tag <h4> ini biasanya digunakan untuk elemen – elemen dibawah posting seperti artikel terkait. Sebenarnya antara ini juga bisa anda ubah ke tag <h3> meski pun saya pribadi tidak terlalu mementingkan <h3> atau <h4> untuk widget 

Tag <h5> dan <h6> ini saya gabung saja penjelasannya karena tidak terlalu penting, biasanya ini digunakan dalam untuk Tag Heading komentar dan atribusi kredit yang terdapat pada footer.

Cara Mengetahui Susunan Heading Tag Pada Blog

Sebelum kita otak atik Template untuk mengatur Tag Heading, ada baiknya kita cek dahulu bagaimana susunan Heading Tag kita sudah benar atau belum. Berikut langkahnya :

Buka alamat Home Page blog anda, kemudian Klik Kanan pada dan pilih Inspect (Menggunakan UC Browser) atau Inspect Element (Menggunakan Mozilla). Maka akan tampil seperti gambar berikut :

Perhatikan tiap garis warna merah yang saya beri angka. Nomor 1 adalah alamat Home Page, dalam hal ini adalah alamat blog saya www.omahblog.com. Nomor 2 adalah judul blog saya yang kebetulan judulnya Omahblog.com. Nomor 3 adalah kolom search yang bisa anda munculkan dengan CTRL + F , dalam kolom ini anda bisa menuliskan Heading Tag mana yang ingin anda cek, dalam hal ini tag <h1> yang saya cek dan dapat dilihat pula jumlahnya hanya ada satu. Nomor 4 adalah kode Html yang muncul berdasarkan Template yang anda pakai, dapat dilihat <h1> pada gambar diatas merujuk pada Title atau Judul Blog saya yakni Omahblog.com. pastikan juga ketika anda cek blog anda, <h1> blog anda adalah judul blog anda karena hal ini wajib.

Kemudian kita bandingkan ketika kita melakukan Inspect pada Sub Direktori (artikel tertentu). Pada blog saya otomatis <h1> akan merujuk pada Judul Artikel. Perhatikan gambar berikut :

Gambar diatas menunjukan Tag <h1> yang saya pakai dalam Sub Direktori (artikel) merujuk pada judul posting atau artikel. Dan untuk pengecekan Tag <h2> pada blog saya merujuk pada kata kunci yang saya incar seperti gambar berikut :

Sebelumnya Tag <h2> blog saya merujuk pada Widget yang ada pada sidebar, saya telah mengubahnya agar merujuk pada kata kunci yang saya target dalam artikel. Biasanya Template secara default akan memberikan Tag <h2> untuk widget, jika template yang anda gunakan juga demikian, anda perlu menyesuaikannya dengan mengubah widget menjadi rujukan untuk Tag <h3> agar menjadi lebih SEO Friendly. Untuk Tag <h4> dan seterusnya tidak saya bahas karena tidak terlalu penting dan biasanya hanya merujuk pada beberapa hal yang saya sudah jelaskan di awal.

Bagaimana Cara Mengatur Heading Tag Agar SEO Friendly?

1. Edit template yang anda pakai. Jika anda pakai platform Blogger anda bisa masuk ke Template > Edit Html. Kemudian tekan CTRL + F dan cari kode <b:if cond='data:post.title'> dan ganti <h3> dengan <h2>.

<b:if cond='data:post.title'>

<h3> Diganti Menjadi <h2>

<b:if cond='data:post.link'>

...........................
...........................

</h3> Diganti Menjadi </h2>

</b:if>

2. Kemudian untuk mengganti Tag <h2> yang merujuk ke Widget menjadi <h3>, carilah kode berikut <b:widget , mungkin akan muncul banayk kede tersebut karena jumlahnya akan sebanyak widget yang anda pakai, anda harus mengganti semuanya. Kemudian ganti Tag <h2> menjadi <h3>, seperti berikut :

<b:widget …………………………………..
……………………………………………………..
……………………………………………………..

<h2 class='title'><data:title/></h2> ganti menjadi <h3 class='title'><data:title/></h3>
………………………………………………………
……………………………………………………...

</b:widget>

Setelah anda selesai mengedit semuanya lalu simpan. Demikian artikel saya tentang Heading Tag dan cara mengaturnya. Semoga artikel ini bermanfaat.

Cara Membuat Akun Email Baru Pada Yandex

Yandex adalah salah satu perusahaan yang bergerak di bisnis internet yang berbasis di Rusia. Sama halnya dengan Google dan Yahoo yang berkecimpung di bisnis yang sama yaitu internet, Yandex juga menyediakan fasilitas - fasilitas yang mendukung kegiatan di dunia maya seperti Search Engine, Email, Maps bahkan juga Translate. Fasilitas - fasilitas ini sama seperti fasilitas - fasilitas yang dimiliki perusahaan internet lain terutama Google. Pada artikel ini saya akan membahas tentang bagaimana membuat akun email baru pada Yandex. Anda mungkin sudah familiar dengan Google Email dan Yahoo Email, namun ada baiknya anda juga mengenal Yandex Email dari Yandex. Selain dapat digunakan sebagai alternatif anda dalam mengirim atau menerima email, akun Yandex sendiri digunakan untuk mendaftarkan blog anda pada Yandex Webmaster layaknya Google Webmaster. Namun kita bahas duhulu cara membuat akun email di Yandex. 

Baca Juga : Mendaftarkan Blog Pada Yandex Webmaster

1. Buka alamat Yandex.

Langkah pertama yang harus anda lakukan tentu membuka alamat Yandex. Setelah itu akan muncul tampilan seperti berikut.

Setelah terbuka tampilan seperti gambar diatas, anda pilih Create Account tepat seperti yang saya beri tanda warna merah. Sebenarnya untuk mendaftar di Yandex anda juga bisa menggunakan akun Facebook, Twitter atau pun akun Google untuk membuat lebih praktis. Namun pada artikel ini saya cuma akan membahas tentang cara membuat akun email pada Yandex dengan cara yang biasa (tanpa akun Facebook, Twitter atau Google).

2. Isilah data anda dengan benar

Setelah anda klik tulisan Create Account pada langkah pertama, akan muncul formulir untuk anda isi dengan data pribadi anda. Formulir yang akan muncul adalah seperti berikut.

Ada beberapa data yang anda harus isi yakni First Name, Surname (nama belakang), Username yang nantinya username ini menjadi alamat email Yandex anda, misal Username.Anda@Yandex.com. Kemudian formulir Password dan Reenter To Confirm (Konfirmasi Password). kemudian yang paling penting adalah Mobile Number (nomor telepon) anda yang saya beri garis warna hijau pada gambar diatas. masukkan nomor telepon anda beserta kode negara (+62 untuk indonesia), misalkan nomor anda 081222333444 maka pada formulir anda bisa menulisakan +6281222333444, Kemudian anda klik Send Code. Kode konfirmasi akan dikirimkan ke nomor anda melaui SMS, masukkan kode konfirmasi (biasanya 6 digit angka) pada kolom baru muncul dan verifikasi. setelah selesai terkonfirmasi, anda bisa klik Register dan anda pun telah memiliki akun Email Yandex.

Cara Mengatur Alamat Blog Menjadi Blogspot.com

Jika anda menggunakan platform Blogger, anda tentu tahu bahwa saat ini domain bawaan blogspot.com akan otomatis redirect ke domain regional, jadi jika anda mengakses dari indonesia domain tersebut otomatis menjadi blogspot.co.id. Ada beberapa blogger yang tidak masalah dengan sistem baru ini, namun ada juga yang mempermasalahkannya dengan berbagai macam alasan. Sebenarnya redirect otomatis ini bisa diatur sendiri oleh kita. Sebelum anda mengaturnya, ada beberapa hal yang harus anda pahami dan cermati terlebih dahulu. Pertama adalah, sistem ini adalah kebijakan google, mencegah riderect bisa saja dianggap menyalahi aturan oleh google. Kedua, Jangan lakukan hal ini bila blog anda mengikuti program Google Adsense, mengapa demikian? Sebabnya adalah sama, karena ini adalah kebijakan dan aturan yang ditetapkan oleh google, jika anda menyalahi aturan ini, resikonya adalah Banned oleh Google Adsense. Mengapa saya memberitahukan hal ini di awal? agar anda memahami dulu resiko yang anda ambil dengan mencegah redirect otomatis. Saya tidak mau menjadi kambing hitam karena membuat tutorial ini tanpa memberitahukan resikonya :) . Bila anda yakin mau mencegah redirect ini, berikut langkah untuk mengaturnya.

1. Buka setting Template > Edit HTML

Bukalah Edit HTML pada blog anda. Backup terlebih dahulu script template yang ada. agar bila terjadi kesalahan anda tidak pusing - pusing perbaiki.

2. Kemudian cari kode <Head>

Carilah kode <Head> pada template anda dengan menekan CTRL + F dan masukkan <Head>. Bila sudah ditemukan. Copy kode berikut dan letakkan tepat dibawah kode <Head> tadi.

 
<script type='text/javascript'>
var str=window.location.href.toString();if("-1"==str.indexOf(".com/")){var str1=str.substring(str.lastIndexOf(".blogspot."));if("-1"==str1.indexOf("/"))var str2=str1;else var str2=str1.substring(0,str1.indexOf("/")+1);window.location.href=window.location.href.toString().replace(str2,".blogspot.com/ncr/")}
</script>

Atau anda bisa menggunakan kode berikut

<script type="text/javascript">
var blog = document.location.hostname;var slug = document.location.pathname;var ctld = blog.substr(blog.lastIndexOf("."));if (ctld != ".com") {var ncr = "http://" + blog.substr(0, blog.indexOf("."));ncr += ".blogspot.com/ncr" + slug;window.location.replace(ncr);}
</script>

Setelah selesai bisa anda Simpan, dan coba untuk membuka alamat blog anda. bila domain tidak redirect ke blogspot.co.id , berarti yang anda lakukan sudah benar. Sekian artikel saya tentang Cara Mengatur Alamat Blog Menjadi Blogspot.com semoga artikel ini bermanfaat.

Cara Optimasi SEO OnPage

Dalam membangun sebuah blog atau website, SEO atau Search Engine Optimizer merupakan sesuatu yang sangat penting untuk dilakukan. SEO sendiri terdapat dua jenis yakni SEO OnPage dan SEO OffPage, 2 jenis SEO ini tidak bertolak belakang bahkan 2 jenis SEO ini saling melengkapi dan membutuhkan satu sama lain. Sebelumnya saya juga pernah menulis tentang Teknik SEO Yang Benar Serta Ampuh. Namun pada artikel saya kali ini, saya akan lebih spesifik membahas tentang bagaimana cara optimalisasi SEO OnPage. Dalam melakukan SEO OnPage sebenarnya tidak terlalu sulit, pada intinya kita hanya perlu memaksimalkan apa yang blog atau website kita punya. namun meski relatif mudah, kita tetap perlu cermat dan hati - hati dalan melakukan SEO OnPage, bila salah langkah akan sangat berakibat fatal. Blog atau website yang kita harapkan naik peringkat di SERP malah akan turun jika kita melakukan kesalahan. Berikut hal - hal penting yang harus dilakukan dalam SEO OnPage :

1. Pemilihan Tema, Judul dan Alamat Blog

Biasanya bagi pemula (seperti saya) memilih judul blog dan alamat blog tidak terlalu dipikirkan, yang penting ada dan terlihat bagus. Hal ini sudah salah dalam SEO. Jauh sebelum anda membuat blog atau website, buatlah konsep terlebih dahulu. Mulai dari anda ingin membahas tentang hal apa pada blog anda sampai pada pemilihan judul blog dan alamat blog. Tema, Judul dan Alamat idealnya adalah sejenis, sejenis maksudnya disini adalah misal bila anda membahas tentang SEO, usahakan anda membuat judul dan alamat yang tidak terlampau jauh dari kata SEO, terutama pemilihan Judul. Hal ini berkaitan erat dengan persaingan yang terjadi di Search Engine. Tidak lucu bukan bila anda nanti memiliki judul blog "Tutorial SEO", namun isinya tutorial memasak di dapur. Untuk alamat blog, usahakan dari awal memakai TLD seperti Websiteanda.com atau Websiteanda.id, bila anda memakai blogger atau wordpress biasanya alamatnya masih ada embel - embel blogspot.co.id atau wordpress.com. sebisa mungkin alamat ini cepat anda ganti TLD dari awal. Banyak kok penyedia domain dengan harga murah. Mengenai tema, ada bagusnya tema yang anda bahas hanya satu tema, jangan gado - gado yang SEO lah, yang berita ini lah, yang itu lah. Kalau mau bahas SEO ya SEO aja, kalo mau beberapa tema, pilihlah tema yang serumpun misal SEO, Internet dan Bisnis Online.

2. Pemilihan Template

Hal kedua yang penting dalam SEO OnPage adalah Template. Sebelum anda membuat artikel atau posting yang banyak, anda perlu memikirkan template apa yang baik untuk digunakan. Saran saja untuk anda yang ingin memakai template, carilah template yang responsive, artinya memiliki tampilan yang otomatis disesuaikan dengan platform, sederhananya adalah ketika dibuka lewat Desktop maka tampilannya sesuai dengan desktop, jika lewat mobile, tampilannya akan disesuaikan dengan tampilan mobile. Dalam memilih template anda juga wajib memperhatikan Loading Page, bila lambat, ini akan tidak bagus bagi blog anda, pilihlah template yang relatif cepat Loading Pagenya. Selain itu perhatikan juga jumlah kolom template yang akan anda pilih, jangan memilih template yang memiliki terlalu banyak kolom, setidaknya maksimal kolom yang bisa anda pilih adalah 3 dan idealnya adalah 2 kolom. Hal terakhit tentang template adalah jangan terlalu sering mengganti - ganti template karena hal ini akan berdampak buruk bagi blog anda.

3. Konten

Konten disini yang saya maksud adalah artikel yang akan anda posting. Sebenarnya tidak ada struktur yang benar - benar baku untuk penulisan sebuah konten. Hanya saja, banyak literatur - literatur yang mengatakan, konten yang baik adalah konten yang memiliki paling tidak 400 kata didalamnya dan tentu original buatan kita sendiri. Berkaitan dengan originalitas konten, hal ini juga berpengaruh ketika anda ingin memonetize blog anda dengan Google Adsense, karena Google Adsense tidak menerima konten hasil jiplak atau copas. Bagi anda yang telah membuat konten yang original tentu harus melindungi hak cipta konten anda dari copas orang lain, hal ini sudah pernah saya bahas pada artikel saya tentang Cara Mendaftarkan Blog Ke DMCA. Ada baiknya anda juga membaca artikel tersebut untuk lebih mengetahui perlindungan tentang konten anda. Ok lanjut ke masalah konten, menurut saya pribadi memang benar konten yang baik itu memiliki minimal 400 kata didalamnya, harus juga original, selain itu dalam membuat judul konten atau artikel harus ada unsur Keyword didalamnya, Anda juga harus menentukan dari awal yang anda kejar Long Tail Keyword atau Short Tail Keyword. Sekedar tips saja bagi anda, sebelum menentukan judul apa yang mau anda ambil, ada baiknya anda harus melakukan Riset Keyword. Riset keyword akan membantu anda menentukan judul terbaik agar konten yang anda buat nantinya bisa bersaing dengan konten milik orang lain, jika anda belum terlalu paham dengan apa itu riset keyword, anda dapat membaca artikel saya tentang Cara Melakukan Riset Keyword Dengan Google Keyword Planner.

4. Keyword Density

Pada dasarnya poin 4 ini lanjutan dari poin 3 diatas. hanya saja keyword density ini berhubungan erat dengan posting yang anda buat. Di poin ke 3 sudah disebutkan bahwa salah satu ciri konten yang baik adalah memiliki lebih dari 400 kata. Selain jumlah kata yang harus diperhatikan, ada hal lain yang perlu juga anda cermati dalam konten tersebut yakni Keyword Density. Saya sudah pernah membahas tentang keyword density ini pada artikel Mengenal Apa Itu Keyword Density, bila anda belum tahu apa itu keyword density dan bagaimana cara mengeceknya, anda wajib membaca artikel tersebut terlebih dahulu. Bila anda sudah mengerti apa itu keyword density, terapkan dalam anda membangun SEO OnPage, Karena hal ini dapat mendongkrak posisi anda dalam SERP. Masukkan porsi keyword anda banyak pada paragraf pertama, buat keyword density pada paragraf pertama pada kisaran 0,5 sampai 3%.

5. Internal Link

Hal yang perlu diperhatikan juga dalam SEO OnPage adalah Internal Link. Secara sederhana internal link dapat diartikan sebagai link yang menghubungkan antar artikel atau posting. Internal link yang baik adalah internal link yang menghubungkan dua atau lebih artikel dengan topik atau tema yang sama. Sebagai contoh, lihat poin nomor 3 dan 4 diatas, ada beberapa link yang saya rujukkan ke artikel lain yang saya buat dengan tema yang sama yakni SEO. Tentu anda harus pandai bermain kata - kata dalam membuat artikel agar bisa menghasilkan minimal 1 internal link. Dalam membangun internal link usahakan link tersebut memakai anchor text sesuai dengan judul artikel yang menjadi rujukan, hal ini akan menjadi nilai tambah di mata robot google atau search engine lain. Sebagai saran, buatlah internal link dibuka melalui New Tab pada browser agar pengunjung kita tidak loncat - loncat dari artikel 1 ke artikel lainnya, buat mereka membuka beberapa artikel anda.

6. Image Alt Tag

Poin nomor 6 ini banyak diabaikan padahal dampaknya cukup positif bagi SEO OnPage, yakni Image Alt Tag. Bila anda belum terlalu paham apa itu image alt tag anda bisa membaca artikel Membuat Attribute Alt Tag dan Title Tag Pada Gambar. Saya pribadi biasanya dalam membuat image alt tag menggunakan anchor text sesuai judul artikel atau posting yang saya buat. Selain image alt tag, biasakan memberi identitas fisik pada gambar yang anda gunakan, anda bisa mengedit dulu gambar tersebut dan berilah watermark atau tulisan biasa yang merujuk pada blog anda. hal ini memang tidak berdampak langsung pada SEO, tapi ini sebagai salah satu langkah membentengi gambar anda manakala digunakan tanpa sumber ke blog anda.

7. Heading Tag

Heading Tag ini adalah salah satu elemen dalam SEO OnPage yang cukup penting untuk diterapkan. Pengalaman saya, ketika blog baru belum menerapkan Heading Tag ini, hasil di SERP mungkin hanya berapa di page 5 atau lebih, paling bagus mungkin di page 3. Akan tetapi setelah Heading Tag ini diterapkan, artikel dari blog baru pun bisa berada pada page 3 sampai page 1 tentu dengan persaingan yang rendah sampai sedang. Hal ini belum dikombinasikan dengan SEO OffPage karena masih tahap blog baru. Heading tag ini dapat mendongkrak hasil di SERP cukup atau bahkan sangat signifikan menurut saya. Bila anda masih belum terlalu paham tentang apa itu Heading Tag, anda bisa membaca artikel Mengenal Fungsi Heading Tag dan Cara Mengatur Heading Tag Dengan Benar. Cukup lengkap saya menulis tentang heading tag pada artikel tersebut, anda bisa menggunakannya sebagai referensi untuk diterapkan pada blog anda.

8. Breadcrumb

Sebelum saya membuat artikel ini, saya telah membuat artikel tentang breadcrumb dengan judul Cara Membuat Breadcrumb SEO Friendly. Anda bisa membaca artikel tersebut untuk menerapkan breadcrumb ini pada blog anda. Saya pribadi juga baru menerapkan breadcrum ini pada blog saya ini. Anda wajib menerapkan breadcrumb ini pada blog anda jika anda ingin bersaing di SERP. Sejauh pengamatan saya menggunakan google hampir 80% hasil SERP page 1 telah menggunakan breadcrumb.

9. Sitemap

Hal terakhir yang harus dapat dilakukan dalam SEO OnPage adalah membuat Sitemap. Sitemap atau daftar isi ini adalah ibarat penunjuk jalan, baik bagi robot google atau pun pengunjung. Usahakan buat Sitemap anda SEO Friendly. Untuk membuat sitemap SEO Friendly anda bisa membaca artikel saya tentang Cara Membuat Sitemap (Daftar Isi) SEO Friendly Pada Blog.

Sekian artikel saya tentang Cara Optimasi SEO OnPage , Semoga artikel ini bermanfaat.

Cara Membuat Breadcrumb SEO Friendly

Pada kesempatan kali saya kembali mengangkat topic tentang SEO, jika sebelumnya saya membahas tentang Mengenal Fungsi Heading Tag dan Cara Mengatur Heading Tag Dengan Benar, maka kali ini saya ingin membahas tentang Cara membuat Breadcrumb SEO Friendly. Sebenarnya sudah banyak yang membahas tentang bagaimana cara membuat breadcrumb, saya hanya ingin coba mengulas kembali tentang breadcrumb ini. Mungkin bagi yang sudah lama mengenal dunia blogging tidak asing dengan istilah breadcrumb ini bahkan telah mahir menerapkannya dalam SEO, namun bagi pemula seperti saya tentu masih perlu banyak belajar tentang breadcrumb ini. Saya membuat posting ini pun karena hasil pembelajaran saya tentang breadcrumb di beberapa blog orang lain. Ok langsung saja kita bahas tentang breadcrumb ini.

Apa Itu Breadcrumb?

Hal pertama yang harus anda pelajarin tentang breadcrumb adalah mengetahui apa sih breadcrumb itu. Breadcrum adalah sebuah navigasi yang dibuat pada blog oleh pemilik blog yang biasanya ditujukan untuk memberikan informasi kepada pengunjung, dimana mereka sekarang. Breadcrumb sendiri biasanya disusun berdasarkan Label. Breadcrumb pada blog disusun secara Hirarki atau bertingkat mulai dari Home Page kemudian Label, ada juga yang menambahkan hingga Judul Artikel. Berikut adalah contoh penerapan breadcrumb pada blog, perhatikan titik yang saya beri garis merah.

Jika dilihat sekilas, memang agak mirip dengan Menu Navigasi utama karena memang fungsinya sama – sama navigasi. Perbedaan keduanya adalah Menu Navigasi utama akan selalu tetap demikian tampilan dan isinya sekali pun anda berpindah ke artikel – artikel lain di blog yang sama, Berbeda dengan breadcrumb, ketika anda membuaka artikel lain dengan label yang berbeda tentu breadcrumb yang muncul akan berbeda (Label). Selain itu perbedaan lainyang signifikan adalah penerapan dalam SEO, breadcrumb dapat menggantikan URL utama sebuah artikel sehingga terlihat lebih professional. Perhatikan gambar berikut.

Perhatikan yang saya beri garis warna merah. Itu merupakan breadcrumb yang diterapkan dalam SEO. Breadcrumb tersebut dalam SERP (Search engine Result Page) menggantikan URL asli artikel anda. Bandingkan dengan yang belum memakai breadcrumb berikut.

Gambar diatas diambil saat masih belum menggunakan breadcrumb. Bandingkan kedua gambar tersebut. Manakah menurut anda yang memiliki estetika yang bagus dan rapi dari hasil pencarian di Search Engine Google tersebut?Dan manakah yang menurut anda lebih SEO Friendly? Jika anda menjawab yang kedua, mungkin anda harus segera close artikel ini, karena anda masuk pada artikel yang salah (Ha ha ha). Namun jika jawaban anda yang pertama, anda membaca artikel yang tepat.

Bagaimana Cara Membuat Breadcrumb SEO Friendly?

Masuk pada menu edit template anda, untuk blogger Template > Edit HTML. Kemudian anda cari kode <b:includable id='breadcrumb' var='posts'>...</b:includable>. Jika anda kesulitan cari kode tersebut anda hanya perlu cari kode <b:includable id='breadcrumb' var='posts'>. Kemudian ganti semua kode tersebut dengan kode dibawah ini.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></span><span class='index'><i class='fa fa-file-text-o'/> <data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a> </span><b:loop values='data:post.labels' var='label'> <i class='fa fa-play' style='font-size:10px'/> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><i class='fa fa-folder-open-o'/> <span itemprop='title'><data:label.name/></span></a></span></b:loop> <span class='index' expr:title='data:post.title'><i class='fa fa-file-text-o'/> <b><data:post.title/></b></span>

</div>

<b:else/>

<div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><i class='fa fa-angle-right'/> <span class='index'>Unlabelled</span> <i class='fa fa-file-text-o'/> <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><span class='index'>Archive for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><span class='index'><i class='fa fa-file-text-o'/> All Post</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl' itemprop='url' title='Omahblog.com'><i class='fa fa-home'/></a></span><span class='index'><i class='fa fa-folder-open-o'/> <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

Kemudian setelah anda mengganti kode tersebut, cari lagi kode ]]></b:skin>. Dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>.

.breadcrumbs{

padding:5px 5px 5px 0;

margin:0;font-size:95%;

line-height:1.4em;

border-bottom:4px double #cadaef}

Setelah selesai bisa anda simpan. untuk cek apakah breadcrumb yang anda buat muncul atau tidak anda bisa cek di Google Rich Snippets Testing Tool . Masukkan alamat URL salah satu artikel anda. bila berhasil akan muncul hasil seperti berikut.

Jika telah muncul berarti anda sukses memasang breadcrumb di blog anda. hanya sekedar tips saja, jika saat anda memasang breadcrumb ini anda telah memiliki artikel, index ulang lah artikel anda agar URL yang muncul di SERP bisa langsung tergantikan oleh breadcrumb. anda bisa menggunakan fasilitas Fetch As Google untuk index ulang, jika belum paham anda bisa membacanya di artikel saya Cara Cepat Terindeks Google Dengan Fetch As Google . Sekian artikel saya tentang Cara Membuat Breadcrumb SEO Friendly semoga artikel ini bermanfaat.

Cara Mendaftarkan Blog Ke DMCA

Sudah dua minggu lebih saya tidak posting di blog ini, terakhir saya posting tentang Cara Membuat Tulisan Tebal, Miring dan Coret di Whatsapp. Harusnya sih saya sebagai pemilik blog atau sebagai penulis blog update blog ini minimal 2 kali seminggu, tapi namanya juga ada kesibukan lain. Pada kesempatan kali ini saya ingin membahas lagi tentang optimasi blog dan SEO, tepatnya tentang DMCA atau Digital Millennium Copyright Act.

Apa Itu DMCA?

Anda mungkin sering mendengar dan membaca kata - kata DMCA di berbagai artikel, namun saya yakin tidak semua dari anda paham betul apa itu DMCA. DMCA adalah singkatan dari Digital Millennium Copyright Act yakni produk hukum yang melindungi hak cipta suatu karya terutama dibidang teknologi dan inovasi dalam dunia digital. Perlu diketahui bahwa DMCA ini adalah hukum yang ada di Amerika Serikat, namun meski demian, sebagai penulis blog kita juga wajib mematuhi DMCA ini meski pun kita bukan warga negara Amerika Serikat, mengapa demikian?kebanyakan tujuan dari membuat blog adalah memberikan informasi yang perantaranya antara blog kita sebagai penyedia informasi dan pencari informasi adalah Search Engine seperti Google, Yahoo, Ask, dan lainnya yang kebanyakan perusahaan - perusahaan itu berbasis di Amerika Serikat, jadi kalo mau aman berada di Google dan search engine lain ya harus patuh juga otomatis kita. Lagi pula DMCA ini tujuannya melindungi artikel - artikel kita yang original tentunya dari pembajakan - pembajakan atau istilah bekennya adalah copy paste oleh orang - orang yang tidak bertanggung jawab. Jika kita terdaftar di DMCA kita bisa lapor manakala artikel kita ada yang membajak.

Bagaimana Cara Mendaftarkan Blog Ke DMCA?

Untuk dapat dilindungi oleh DMCA tentunya kita harus melakukan registrasi terlebih dahulu, DMCA sendiri memberikan 2 Opsi pilihan jenis user, yakni reguler (free) dan premium (berbayar). Jangan terlalu khawatir akan perbedaan reguler dan premium karena anda mendaftar sebagai regular user pun sudah lebih dari cukup, tentu bila anda ingin fitur perlindungan yang lebih anda bisa mencoba yang premium. Namun kali ini saya hanya akansebatas membahas sampi blog kita terdaftar saja, tidak sampai upgrade ke premium user. Berikut langkah - langkah untuk mendaftar DMCA :

1. Buka situ resmi DMCA

Akan muncul tampilan seperti gambar diatas, anda isi form Register yang saya beri garis warna merah, isi dengan lengkap dan benar sesuai data anda, setelah itu klik Submit (untuk premium bisa klik Go Pro!).

2. Buka email anda dan Verifikasi akun DMCA anda

DMCA selanjutnya akan mengirimkan sebuah email verifikasi pada anda lengkap dengan username dan password. contohnya seperti email berikut.

Perhatikan garis yang saya beri garis merah, garis kotak pertama adalah alamat untuk halaman login DMCA, anda buka alamat tersebut di tab baru. garis kedua adalah informasi Username dan Password, pada gambar diatas username dan password sengaja saya hilangkan karena privasi akun DMCA saya. silahkan masukkan Username dan Password tadi pada tab baru yang anda buka seperti gambar beerikut.

3. Buat lencana proteksi DMCA anda

Setelah anda login, masuk pada menu My Protection Badges dan pilih Add Badges To Your Site seperti pada gambar diatas. Setelah itu akan muncul pilihan desain - desain lencana atau badges dari DMCA, anda bisa pilih salah satu lalu Copy dan letakkan Embed Code tersebut pada blog anda. bila anda memakai Blogger, anda bisa pilih Add To Blogger. Lebih jelasnya anda bisa lihat pada gambar berikut.

Demikian artikel saya tentang Cara Mendaftarkan Blog Ke DMCA. Semoga artikel ini bermanfaat.

Membuat Kotak Script Pada Blog Dengan Prism Syntax Highlighter

Membuat Kotak Script Pada Blog Dengan Prism Syntax Highlighter - Biasanya dalam posting kita memerlukan sebuah kotak atau box untuk menempatkan script agar bisa mudah dicopy oleh pembaca. Saya pernah membahas sebelumnya tentang cara membuat kotak script ini pada artikel Membuat Kotak Script Sederhana Pada Posting Blogger. Pada artikel kali ini saya akan membahas kembali tentang cara pembuatan kotak script. Jika dalam artikel tentang kotak script saya sebelumnya membuat kotak script yang sederhana, artikel ini akan mencoba memberikan tutorial tentang membuat kotak script dengan tampilan yang cukup menarik. Saya pribadi telah menerapkan otak script ini pada beberapa artikel terakhir saya setelah membaca tutorial dari Arlina Design. Setelah coba tutorial tersebut dan berhasil saya ingin coba share dengan membuat artikelnya. Perlu diketahui juga bahwa blog ini juga menggunakan template versi gratisan dari Arlina Design, jadi bagi anda yang tertarik dengan model template yang saya pakai bisa coba kunjungi webnya mbak Arlina (linknya ada di Footer hi hi hi).

Ok lanjut tentang cara membuat kotak script yang menarik tadi. Sebenarnya kotak script yang menarik ini ada namanya yakni Prism Syntax Highlighter. Selain tampilannya yang bagus, menggunakan kotak script dengan Prism Syntax Highlighter ini juga memudahkan untuk mengcopy kode atau tulisan didalamnya hanya dengan double clik. Berikut langkah untuk membuat kotak script dengan prism syntax highlighter.

1. Login pada akun anda dan plih menu Template > Edit HTML

Pada tutorial ini saya akan membahas pemasangan kotak script pada blogger, untuk yang menggunakan CMS lain atau untuk website buatan sendiri bisa menyesuaikan. pada blogger anda silahkan Login dan masuk pada menu Template > Edit HTML.

2. Salin kode CSS berikut dan letakkan tempat sebelum kode </style>

 

/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

Kemudian simpan kode 3 kode dibawah ini tepat sebelum kode </body>

 

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>

 
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

 
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Kemudian Simpan Template anda

3. Cara menggunakan pada saat membuat posting

Anda dapat menggunakan kode HTML dibawah ini pada saat anda membuat artikel. Ada 4 jenis kode yakni kotak script untuk HTML, CSS, JavaScript dan JQuery. Sesuaikan dengan kebutuhan mana yang ingin anda gunakan.

 
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Perlu diketahui juga sebelum memasukkan kode yang akan ditampilkan pada didalam kotak, anda perlu melakukan yang namanya Escape, anda dapat mengkonversinya di Ads Converter milik Arlina Design atau converter escape lainnya.