Cara Menampilkan Demo Jsfiddle Di Blog Biar Seo Dan Valid Html5

Jsfiddle yaitu salah satu web yang menyediakan editor isyarat baik isyarat javascript, css, atau html untuk membentuk sebuah elemen blog atau website. Dengan kata lain dapat dijadikan sebagai sarana pengujian atau demo yang sedang kita buat.

Dan hasilnya dapat kita tampilkan juga di postingan blog dengan mengambil isyarat embednya. Kode embed dari jsfiddle menggunakan iframe. 

Namun ibarat telah kita ketahui bahwa iframe ini akan mengurangi skor SEO blog dan dapat dicek di Chkme. Juga ada beberapa isyarat yang mengakibatkan error di validasi HTML5. Untuk itu biar isyarat embed jsfiddle ini dapat SEO Friendly dan valid HTML5, maka perlu sedikit perubahan pada isyarat embednya.

Biasanya isyarat embed dari Jsfiddle untuk disimpan di postingan akan tampak ibarat di bawah ini.

 <iframe width="100%" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Silahkan ganti isyarat iframe dengan embed, hilangkan % (persen) pada width dan ganti angkanya dengan yang Anda kehendaki contohnya diadaptasi dengan lebar tempat postingan (tanpa menggunakan satuan px), dan ganti isyarat allowfullscreen="allowfullscreen" frameborder="0" dengan isyarat / (garis miring), juga hapus isyarat </iframe>. Sehingga penampakannya akan ibarat di bawah ini.

 <embed width="600" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/" />

Dan perlu diperhatikan, bila akan mempublikasikan postingannya harus dalam posisi HTML bukan Compose, alasannya yaitu bila dipublikasikan dalam keadaan Compose maka secara otomatis isyarat di atas akan berubah dan menjadi tidak valid di HTML5. perubahan yang terjadi yang mengakibatkan error HTML5 ibarat di bawah ini.

 <embed width="600" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/" ></embed>

Kode / (garis miring) yang ada di ujung akan menghilang dan diganti dengan isyarat </embed> di tamat kode, nah isyarat itulah yang hasilnya mengakibatkan menjadi error lagi di HTML5.

Sebagai contoh, di bawah ini yaitu demo result dari Jsfiddle yang sudah valid HTML5 dan tentunya SEO Friendly yang menampilkan tab javascript, css, html, dan result dengan isyarat di bawah ini.

 <embed width="600" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/" />

Demo result hanya menampilkan tab dengan hanya result-nya saja.

 <embed width="600" height="300" src="http://jsfiddle.net/kompiajaib/e6XhG/embedded/result/" />

Semoga dapat dimengerti dan bermanfaat...

Sumber https://www.kompiajaib.com/

Share this post