-->
Showing posts with label SEO. Show all posts
Showing posts with label SEO. Show all posts

Mengatasi Error Breadcrumbs ( data-vocabulary.org schema deprecated ) di Google Search Console

Mengatasi Error  Breadcrumbs ( data-vocabulary.org schema deprecated ) di Google Search Console

Saya mendapati email tentang Error Breadcrumbs  data-vocabulary.org schema deprecated sekitar tanggal 14 Maret 2020.Dan masalah ini menjadi  ISU hangat di 2020 di para kalangan pakar SEO untuk mengatasi masalah migrasi dari data-vocabulary.org ke schema.org.

Kita semua tahu bahwa data-vocabulary.org merupakan layanan yang memberikan property untuk suatu website/laman sehingga website tersebut memiliki informasi struktur data yang sesuai menurut mesin pencari, sehingga website kita akan lebih mudah dikenali. Akan tetapi beberapa waktu lalu beredar informasi mengenai penutupan sepenuhnya markup data-vocabulary.org oleh Google dengan alasan untuk meningkatkan penggunaan dan popularitas dari schema.org serta orientasi pada pengembangan Struktur Data Tunggal. Oleh karena itu, markup data-vocabulary.org tidak lagi memenuhi syarat dan akan ditutup sepenuhnya dari Google rich result mulai tanggal April 6, 2020.

Semua Blogger di 2020 ini akan mengalami hal yang sama seperti saya ketika masih menggunakan data-vocabulary.org di dalam Breadcrumbs. Memang Google masih akan mengakhiri masa aktif data-vocabulary.org di April 2020, namun sebagai langkah antisipasi bagi para penggunanya Google memberikan informasi agar para Blogger untuk beralih menggunakan atau migrasi ke schema.org.

Saya sempat kebingungan  melakukan migrasi dari data-vocabulary.org ke schema.org setelah beberapa kali gagal melakukan VALIDASI di Google Structure Data Testing Tool dan Google Rich Results Test artinya berkali kali ERROR ketika melakukan beberapa perubahan kode kode di dalam Breadcrumbs.


Alhamdullilah usaha saya membawa hasil, saya berhasil migrasikan Breadcrumbs  data-vocabulary.org di template saya ke schema.org dengan sukses !!! ( No error ).

Fix Problem Error Breadcrumbs data-vocabulary.org schema deprecated

Jika Anda pengguna Template ber platform BLOGGER dan mendapati masalah yang sama silahkan ikuti Tutorial bagaimana mengganti Breadcrumbs data-vocabulary.org ke schema.org.

1.  Anda lebih dahulu harus mengganti kode CSS Breadcrumbs yang sebelumnya terpasang di template Anda. Dengan kode CSS dibawah ini :

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

2. Cari kode seperti dibawah ini

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

3. Lalu hapus semua kodenya
<b:includable id='breadcrumb' var='posts'>
.....................................
.....................................
.....................................
</b:includable>

3. Kemudian ganti 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' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='itemscope' itemtype='schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='//schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<meta content='1' itemprop='position'/>
<span itemprop='name'>Home</span></a>
</span>
</span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='itemscope' itemtype='schema.org/ListItem'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived 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;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4.Setelah itu Simpan template..... Selesai

Belumlah komplit jika Sobat Blogger tak melakukan cek terlebih dahulu di  Rich Results Testing Tool  dan  Structured Data Testing Tool  Silahkan Sobat cek terlebih dahulu di kedua site validasi Google.

Semoga berhasil.....

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

CrepictDGZ berbagi lagi, kali ini saya akan memberikan Tips Cara Mempercepat Loading Blog dengan menggunakan Ikon SVG. Selama ini Fontawesome adalah ikon yang umum digunakan dalam setiap desain template ( termasuk desain saya sendiri ) hehehehe… ntar ja templatenya diupdate, maklum lagi sibuk kerja.

Namun ada sisi yang kurang enak dengan memasang FontAwesome yaitu memperlambat loading blog. Karena dengan menggunakan  Font Awesome template harus manggil script sebelum menampilkan Ikon FontAwesome. Pemanggilan script eksternal jadi salah satu point penting yang perlu dipertimbangkan bagi pengguna platform Blogger yang tidak bisa mengatur cache dan expired header. FontAwesome memang tak memperlambat blog secara signifikan, namun untuk test page speed loading akan berdampak pada score saat dilakukan test seperti di GTMetrix atau Google Page Speed Insight dll.

Dari judul diatas berarti Anda harus mengganti penggunaan Ikon FontAwesome yang sebelumnya terpasang di Blog dengan SVG ikon.

Contoh HTML script Font Awesome yang terpasang di template seperti dibawah ini :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Dan Anda wajib menghapus kode diatas jika sudah mempergunakan SVG Ikon.

Bagaimana Cara Memasang Ikon SVG di Blog ?

Kita harus masuk ke situsnya untuk mendapatkan Ikon SVG yang akan kita pasangkan di Blog. Silahkan masuk ke  Material Design Icon. Disini Anda bisa milih berbagai jenis icon SVG yang akan kita pasangkan di Blog dengan mengambil kodenya untuk dipasangkan pada template blog.
Cara Memasang Ikon SVG untuk Mempercepat Loading Blog
Silahkan klik pada ikon yang dipilih. Pilih toggle kode '</>' lalu pilih view SVG maka akan tampil kotak dengan kode seperti di bawah ini sebagai contoh saya akan mengambil ikon Account-Multiple.

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

Kemudian simpan kode SVG di atas pada Edit HTML template. Saya akan contohkan misalnya Anda ingin mengganti  ikon "account" pada link profil ( yang masih menggunakan FontAwesome ) di rubah ke SVG ikon Account-Multiple seperti .

Pada umumnya kode HTML ikon link profile adalah seperti dibawah ini
 <span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
               <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                        <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </span>

Setelah Anda tambahkan Kode dari SVG ikon akan tampak seperti dibawah ini 

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Pastekan dibawah kode SVG ikon -->
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG ikon -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Supaya gambar SVG pas ukuran baik tinggi dan lebarnya di Blog, maka kita pindahkan inline style-nya style="width:24px;height:24px" dan fill="#000000" ke dalam style CSS menjadi seperti dibawah ini

.post-author svg {width:24px;height:24px;}

Dengan menghapus inline style dan menggantinya dengan kode CSS di atas diharapkan kita bisa dengan mudah mengatur besar kecil ukuran ikonnya.
Dan jika ingin mengganti warna ( fill="#000000" )  pada ikon-nya, kita gunakan css berikut.

.post-author svg path {fill: white;}

Penting : Jika Anda sudah menambahkan style CSS seperti diatas, maka kode HTML SVG ikon diatas harus di revisi/ganti ( lihat HTML SVG ikon langkah sebelumnya diatas ). Maka perubahannya adalah seperti dibawah ini

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Jika sudah memasang kode style CSS kode SVG seperti ini -->
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG  -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Demikian Tutorial Cara Menggunakan Ikon SVG untuk Mempercepat Loading Blog, meski mungkin sulit dipahami bagi Sahabat Newbie namun belajar dari kesalahan adalah cara bagaimana agar kita tahu dan menemukan cara yang benar.

Sekian dan Semoga bermanfaat…

Memahami Kelebihan dan Kekurangan Menggunakan SSL/HTTPS

Memahami Kelebihan dan Kekurangan Menggunakan SSL/HTTPS


Mengapa Google menyarankan setiap developer menggunakan SSL/HTTPS ? Sebagai developer, Kita mendengar banyak pertanyaan,seperti “ Mengapa harus menggunakan SSL/HTTPS ? dan Apa ada nilai lebih yang akan kita peroleh ?”. 

Pertanyaan ini sudah umum kita dengar bagi siapapun yang terlibat dalam dunia web/blog. Untuk dimengerti. saja, SSL merupakan shiled ( tameng dari web/blog ) dari keamanan di Internet dan juga melindungi setiap informasi sensitif sepanjang trafik data di Internet. Hal Ini akan menjaga internet dari serangan hacker dan memberi banyak manfaat langsung kepada kita dan yang paling penting adalah pelanggan atau pengunjung Web/Blog.

Manfaat Menggunakan SSL/HTTPS

Yang menjadi alasan utama menggunakan SSL adalah menjaga informasi sensitif selama dalam proses pengiriman data melalui Internet  dengan cara dienkripsi, sehingga hanya penerima pesan data yang dipahami dari hasil enkripsi. Artinya informasi yang kita kirimkan di Internet membutuhkan proses perjalanan dari komputer ke komputer sebelum sampai ke server tujuan. Komputer lain yang ada diantara lalu lintas kita dan server dapat melihat semua data yang bersifat privacy ataupun rahasia seperti Kartu Kredit, username dan passwords, dan informasi sensitive lainnya jika hal ini tidak dienkripsi melalui  SSL/HTTPS. Ketika SSL digunakan, informasi menjadi tidak terbaca oleh siapapun kecuali server yang dituju saat mengirim informasi. Keuntungannya menjadi lebih jelas bahwasannya penggunaan SSL ini melindungi pencurian informasi data penting oleh hacker.

(Authentication) Ontentikasi informasi yang dikirim ke server

Selain karena proses enkripsi data yang dikirim, SSL/HTTPS juga meng- authentication. Maksudnya informasi dapat lebih pasti dalam proses pengirimannya ke server yang benar-benar valid dan tidak nyasar ke servernya hacker . Ini amat sangat penting ? Pengunjung Blog atau pengguna akan lebih sering dalam mengirimkan informasi yang melewati beberapa komputer dan tidak menutup kemungkinan ada dari developer lain yang berpura-pura menjadi Web/Blog Anda dan ini adalah hal umum sebagai cara mengelabui pengguna untuk mengirimkan informasi penting ke server kriminal. Hal inilah yang harus kita hindari dengan menggunakan SSL/HTTPS yang disediakan gratis oleh Google.

Jika itu gratis dari Google kenapa ga’ kita manfaatin ?

Untuk saat ini memang SSL/HTTPS diberikan gratis oleh Google hanya untuk domain gratisnya saja atau hanya pada platform blogspot.com. Dan untuk domain berbayar Anda harus merogoh kocek sendiri untuk membeli sertifikat dari penyedia SLL.

Mengapa menggunakan SSL ?

Google sudah menjelaskan bahwa hal ini untuk meningkatkan kepercayaan pelanggan atau pengguna kepada Web/Blog yang Anda kelola. Browser akan memberikan isyarat secara visual, biasanya tampilan berbentuk ikon kunci pada address bar yang berwarna hijau sebagai idetintas untuk memastikan kepada pengunjung Web/Blog bahwa pengguna/pengunjung berada pada koneksi yang aman. Hal ini berarti pengunjung akan lebih mempercayai Web/Blog yang Anda kelola ketika pengguna melihat tanda kunc berwarna hijau, jika Web/Blog Anda adalah Blog dengan basic bisnis online, penggunaan SSL/HTTPS ini menjadi mutlak Anda digunakan !!!.

Anda sudah membangun sebuah  kepercayaan kepada pengguna yang bertujuan untuk menanamkan rasa lebih percaya kepada Web/Blog yang sedang Anda kelola.

PCI Compliance

Hal ini juga sangat penting untuk mengetahui bahwa Anda mengambil informasi kartu kredit pengguna/pengunjung dari Web/Blog yang Anda kelola kecuali Anda lulus audit tertentu seperti PCI Compliance yang memerlukan sertifikat SSL yang tepat.

Cuma yang satu ini umumnya digunakan pada domain berbayar dengan membeli SSL/HTTPS kepada penyedia yang terpercaya seperti SIMANTEC dan lain sebagainya. Untuk platform blogspot Admin belum ada informasi tentang hal ini jika domain blogspot digunakan sebagai Web/Blog ber-basic bisnis online untuk mengambil informasi yang berkaitan dengan kartu kredit pengguna/pengunjung.

SSL/HTTPS melindungi dari bentuk pencurian data dalam bentuk penipuan (phising) ?

Email penipuan yang dikirim oleh hacker yang mencoba menduplikasi Web/Blog yang Anda kelola. Email biasanya memuat link yang men-direct ( mengarah langsung ) kepada Web Si Hacker lalu melakukan serangan ditengah jalan dengan menggunakan nama domain Anda. Sertifikasi SSL/HTTPS yang pas sangatlah sulit diperoleh para hacker ini membuat hacker tidak akan  bisa sempurna melakukan (phising) meniru Web/Blog Anda. Indikatornya akan membedakan jelas bagi pengguna atau pengunjung Web adalah ikon kunci berwarna hijau.

Contoh yang lebih nyata ketika kita membuka situs bank BCA atau bank lain. Jika tanpa ikon kunci berwarna hijau di pojok kiri atas address bar, jangan coba coba mengakses situs tersebut. ya ! sebelum Anda gigit jari dengan hilangnya uang direkening Anda disebabkan pencurian informasi oleh hacker seperti PIN atau informasi Kartu Kredit dan lain sebagainya.

Jika Web/Blog Anda menggunakan SSL/HTTPS berarti pengguna akan jauh lebih kecil kemungkinannya untuk terperangkap kedalam serangan phising, karena pengguna/pengunjung Web/Blog Anda akan mencari indikator kepercayaan (trust indicators) di browsernya.

SSL/HTTPS dan Kekurangannya

Untuk sisi kekurangan ini sengaja saya membahasnya bukan dari sisi finansial dengan membeli sertifikasi SSL/HTTPS bagi pengguna domain berbayar.

Saya akan membahasnya dari sisi performa yang yang umum dianggap sebagai kelemahan untuk SSL/HTTP ( Jika Web Anda sebelumnya tergolong Fast loading ). Karena informasi yang Anda kirim harus melewati proses enkripsi lebih dahulu pada server, ini membutuhkan sumber daya tambahan pada server dimana informasi yang Anda kirim mesti di-encrypt oleh server.Performa ini banyak disebabkan oleh campur aduknya link direct yang ada didalam template,campur aduk antara http dan https, umumnya link gambar atau link pihak ke tiga.

Memahami Kelebihan dan Kekurangan Menggunakan SSL/HTTPS


Dengan Anda melihat gambar dan peringatan diatas saya kira Anda sudah mengerti bagaimana cara mengatasi performa blog ketika menggunakan SSL/HTTPS namun secara keseluruhan, kelemahan menggunakan SSL/HTTPS jauh lebih sedikit dibanding dengan keuntungan yang diraih. Sangat penting agar Anda mengirimkan segala informasi sensitif ke semua website dengan menggunakan SSL/HTTPS. Penggunaan SSL/HTTPS akan membantu melindungi pelanggan/pengunjung dan Anda, dan membantu meningkatkan kepercayaan pelanggan terhadap Web yang Anda kelola sehingga Anda dapat lebih banyak trafik.

Tutorial

SEO