Memasang Breadcrumb Google

Update : 26 September 2018

Seperti kita ketahui cara memasang breadcrumb navigation adalah trik untuk meningkatkan SEO blogger kita. Dahulu ketika kita memasang breadcrumb di blogspot adalah sesuatu yang penting dan tidak penting. Namun sekarang breadcrumb navigasi untuk blogger sangatlah penting. Breadcrumb sekarang mulai di indeks oleh google dan ditampilkan di hasil pencarian google. Sejuta trik tidak tahu pastinya tentang breadcrumb navigasi mulai ditampilkan di google. Oleh karena itu bagi yang belum memasang breadcrumb navigasi di blogger mulailah memasangnya. Dan bagi yang sudah memasang breadcrumb navigasi buatlah agar cepat diindeks oleh google.

Struktur untuk breadcrumb ini dapat digambarkan seperti ini :

Home > SEO > Membuat Breadcrumb Navigasi di Blogger

Untuk breadcrumb navigasi di blogger yang belum direview dan sesudah direview untuk hasil pencarian bisa lihat perbandingannya pada gambar di bawah ini :

Gambar sebelum dipasang

Gambar hasil setelah memasang Breadcrumb google di hasil pencarian google

Untuk cara memasang breadcrumb google
1. Edit HTML
2. Cari kode <div class='post hentry uncustomized-post-template'> atau <b:if cond='data:post.title'>
3. Paste kode berikut ini di bawah salah satu kode tersebut :

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'> <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> &gt; </span><span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a> <b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if> </b:loop> </b:if> &gt; </span><span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><span itemprop='title'><data:post.title/> </span></span></div> </b:if></b:if>

4. Save template
5. Cek di https://www.google.com/webmasters/tools/home?hl=en
6. Lihat hasilnya

Bagi teman-teman yang kurang puas dengan breadcrumb ini kalian dapat menambah koleksi review google dengan memasang microformat di daftar link

Akhir kata semoga dengan memasang bredcrumb google ini bisa lebih meningkatkan kualitas SEO pada blogger kita.

Memasang Rich Snippets di Blogger

Update 28 November 2018 Markup Pengarang/Author tidak lagi didukung dalam SERP Google, itu artinya pada hasil penuelusuran pengarang atau author kini tidak ditampilkan lagi Lihat halaman pemberitahuan resmi google. Sebagai pengganti markup rich snippet terbaru ada dalam artikel di bawah ini.

Apa itu Rich Snippet? Rich Snippget adalah fitur google pada hasil SERP (Search Engine Result Page) atau hasil pencarian google yang diperkaya dengan beberapa kategori khusus sesuai tag informasi di dalamnya. Lihat penjelasan resmi google tentang fitur penelusuran google. Dari fitur ini dikenal dengan nama Rich Snippet atau cuplikan hasil penelusuran yang diperkaya. Terdapat 21 jenis halaman yang diterima google dan dapat diterapkan pada blog. Berikut adalah jenis konten pemasangan rich snippet di blog.

21 Jenis Halaman Rich Snippets

Breadcrumb 
Adalah sebuah link navigasi yang biasa diletakkan seorang pemilik blog di atas judul artikel. Penggunaannya bertujuan memudahkan mesin pencari melakukan crawl dari alamat beranda hingga ke alamat halaman artikel (URL).

Breadcrumb google seperti dijelaskan melalui halaman resmi rich snippet breadcrumb jejak dari sebuah breadcrumb menunjukkan posisi halaman sebuah situs. Breadcrumb berfungsi untuk mengategorikan informasi dari halaman tersebut dalam hasil penelusuran. Memasang rich snippet breadcrumb dapat dilihat pada artikel kami pada memasang rich snippet breadcrumb google khusus untuk blogspot.

Kontak Perusahaan
Fitur rich snippet google markup kontak perusahaan di situs resmi Anda untuk menambahkan informasi kontak perusahaan ke panel Pengetahuan Google di beberapa penelusuran, misalnya ketika pengguna memasukkan nama perusahaan Anda ke dalam kotak Penelusuran. Dengan begitu semua informasi terkait di dalamnya akan dimunculkan google.

Markup rich snippet google kategori kontak perusahaan dapat diuraikan seperti gambar di atas melalui alat pengujuan data. Lihat sumber referensi rich snippet kontak perusahaan google.

Carousel
Seperti halnya dengan widget slider, fitur rich snippet carousel dapat berupa gallery gambar berurutan seperti tampilan galleri slide. Fitur ini dilengkapi dengan rating bintang dan mendukung gambar dan video dari dalam artikel sebuah situs
Logo
Sudah jelas fitur ini dikhususkan bagi pemilik organisasi atau pemilik bisnis. Dengan fitur ini terdapat kotak gambar logo bisnis dan terkait informasi di dalamnya seperti CEO (Pemilik), alamat, Jenis layanan, Didirikan, dan lain sebagainya sesuai format yang didukung
Kotak Penelusuran Sitelink
Dahulu google SERP menamilkan sitelink dengan tujuan memberikan alamat url diunggulkan seperti artikel yang banyak dikunjungi. Seperti halaman kontak, halaman produk, dan lain sebagainya. Seperti fitur rich snippet kotak penelusuran di atas, fitur ini menambahkan alamat sitelink sebuah situs dan juga terdapat form pencarian langsung di bawahnya.
Profil Sosial Media
Biasnya fitur ini dimiliki oleh website artis atau pejabat pemerintah dan orang terkenal lainnya. Fitur ini menampilkan jejeran alamat sosial media dari orang yang bersangkutan tersebut. Bagi pemilik blog terkenal juga dapat menambahkan fitur ini jika kalian menghendakinya.
Artikel
Untuk penggunaan rich snippet artikel haruslah berhati-hati dan dilakukan dengan benar sesuai kualitas pedoman webmaster google. Artikel memang sangat kompleks dikarenakan jenis artikel dapat menjurus ke berbagai artikel. Biasanya rich snippet artikel dikhususkan untuk blog berita. Namun ada penulis buku yang memasangnya agar konten terindeks lebih baik.
Buku
Kursus
Kumpulan Data/Tabel
Acara/Event
Verifikasi Informasi
Postingan Lowongan Pekerjaan
Bisnis Lokal
Pekerjaan
Podcast
Produk
Resep
Ulasan
Dapat diucapkan
Video

Rich Snippet Video Generator | Alat Pengujuan Data Terstruktur Google Lihat halaman resmi google tentang gallery penelusuran berkaitan dengan rich snippet ini. Happy Blogging! by. Sejuta Trik Blogger

Macam-macam Cara Membuat Link Lebih Unik

Hi Sob! Bagaimana kabar kamu? Semoga semangat seperti saya yang lagi postig hari ini. Kali ini sejuta trik blogger akan coba sharing pengalaman saya tentang macam-macam cara membuat link lebih unik. Macam-macam di posting kali ini saya fokuskan pada singgle link. Singgle link ini artinya link yang kita buat terpisah tanpa dipengaruhi oleh CSS, Script, dan Jquery yang terpasang di template kita.

Ada macam-macam trik memodifikasi link agar kelihatan unik. Berikut beberapa contoh dalam posting saya yang lalu :

1. Membuat link/judul terbuka pada tab baru saat diklik

2. Membuat link pelangi/link berpindah dan menghilang dll

3. Memasang microformat di daftar link/link list

4. Penambahan title/keterangan di judul posting/link

dan masih banyak lagi macam-macam membuat link yang belum sempat diposting. Karena saking banyaknya modifikasi link. Sebagai contoh link nuding, link hover, link open new tab, dan masih banyak lagi yang lain. Atau kalau masih kurang ya cari saja di google :D

Posting tentang macam-macam membuat link ini terinspirasi bagi saya sendiri yang kesulitan membuat 1 link saja yang unik tanpa dipengaruhi bawaan template. Nah bagi sahabat sejuta trik yang juga ingin membuat link 1 saja yang unik, berikut triknya.

Membuat link memang sangat mudah. Tetapi untuk trik kali ini adalah untuk singgle link atau 1 link yang kita utak-atik. Sebagai contoh cara membuat link adalah sebagai berikut :

A. Link Biasa

Sejuta Trik Blogger
Triknya adalah :
<a href="http://sejutatrik.blogspot.com/">Sejuta Trik Blogger</a>

B. Link Tebal

Sejuta Trik Blogger
kodenya :
<b><a href="http://sejutatrik.blogspot.com/">Sejuta Trik Blogger</a></b>
atau
<strong><a href="http://sejutatrik.blogspot.com/">Sejuta Trik Blogger</a></strong>

C. Membuat Link Membuka Tab Baru

Sejuta Trik Blogger
kodenya :
<a href="http://sejutatrik.blogspot.com/" target="_blank">Sejuta Trik Blogger</a>

D. Link Italic atau teks miring

Sejuta Trik Blogger
kodenya :
<a href="http://sejutatrik.blogspot.com/"><i>Sejuta Trik Blogger</i></a>

E. Link Berwarna

Sejuta Trik Blogger
kodenya :
<a href="http://sejutatrik.blogspot.com/" target="_blank"><span style="color: blue;">Sejuta Trik Blogger</span></a>
 

F. Link Menu Hover CSS 3

kodenya :

<style>
.coollinks a {
 display: inline-block;
 padding: 4px;
 outline: 0;
 color: #3a599d;
 -webkit-transition-duration: 0.35s;
 -moz-transition-duration: 0.35s;
 -o-transition-duration: 0.35s;
 transition-duration: 0.35s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 -webkit-transform: scale(1) rotate(0);
 -moz-transform: scale(1) rotate(0);
 -o-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
.coollinks #one:hover, #three:hover, #five:hover{
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 -webkit-transform: scale(1.01) rotate(-1.1deg);
 -moz-transform: scale(1.01) rotate(-1.1deg);
 -o-transform: scale(1.01) rotate(-1.1deg);
 transform: scale(1.01) rotate(-1.1deg);
}
.coollinks #two:hover, #four:hover {
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 -webkit-transform: scale(1.01) rotate(1.1deg);
 -moz-transform: scale(1.01) rotate(1.1deg);
 -o-transform: scale(1.01) rotate(1.1deg);
 transform: scale(1.01) rotate(1.1deg);
}
.coollinks #one:hover{
 background: #815782;
 text-decoration: none;
 color: #fff;}

.coollinks #two:hover {
 background: #62946d;
 text-decoration: none;
 color: #fff;
}
.coollinks #three:hover {
 background: #824c4a;
 text-decoration: none;
 color: #fff;
}
.coollinks #four:hover {
 background: #825f0c;
 text-decoration: none;
 color: #fff;
}
.coollinks #five:hover {
 background: #823a3a;
 text-decoration: none;
 color: #fff;
}
</style>

lalu tambahkan kode berkut di bawahnya :

<div class="coollinks">
<a href="http://sejutatrik.blogspot.com" id="one">Home</a>
<a href="http://sejutatrik.blogspot.com/2012/02/memasang-breadcrumb-google.html" id="two">Google Breadcrumb</a>
<a href="http://sejutatrik.blogspot.com/2010/10/daftar-isi-sejuta-trik.html" id="three">Sitemap</a>
<a href="http://sejutatrik.blogspot.com/2011/10/daftar-ping-service-terbaik.html" id="four">Ping Service</a>
<a href="http://www.givegoodweb.com/tools/page-check/index.php" id="five">Title H1 Ceck</a>
</div>

Home Google Breadcrumb Sitemap Ping Service Title H1 Ceck

Untuk trik 'F' sahabat bisa letakkan pada 'HTML' widget atau saat posting seperti milik saya ini.

Nah, bagi teman-teman yang memiliki trik lebih unik dari macam-macam cara membuat link di atas, mari berbagi. Akhir kata, Happy Blogging Friends! Cayo Blogger Indonesia.