Cara Menampilkan Demo Jsfiddle Di Postingan Agar SEO Dan Valid HTML5

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

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

Namun seperti telah kita ketahui bahwa iframe ini akan mengurangi skor SEO blog dan bisa dicek di Chkme. Juga ada beberapa kode yang menyebabkan error di validasi HTML5. Untuk itu agar kode embed jsfiddle ini bisa SEO Friendly dan valid HTML5, maka perlu sedikit perubahan pada kode embednya.

Biasanya kode embed dari Jsfiddle untuk disimpan di postingan akan tampak seperti di bawah ini.

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

Silahkan ganti kode iframe dengan embed, hilangkan % (persen) pada width dan ganti angkanya dengan yang Anda kehendaki misalnya disesuaikan dengan lebar daerah postingan (tanpa memakai satuan px), dan ganti kode allowfullscreen="allowfullscreen" frameborder="0" dengan kode / (garis miring), juga hapus kode </iframe>. Sehingga penampakannya akan seperti di bawah ini.

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

Dan perlu diperhatikan, jika akan mempublikasikan postingannya harus dalam posisi HTML bukan Compose, karena jika dipublikasikan dalam keadaan Compose maka secara otomatis kode di atas akan berubah dan menjadi tidak valid di HTML5. perubahan yang terjadi yang menyebabkan error HTML5 seperti di bawah ini.

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

Kode / (garis miring) yang ada di ujung akan menghilang dan diganti dengan kode </embed> di akhir kode, nah kode itulah yang akhirnya menyebabkan menjadi error lagi di HTML5.

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



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



Semoga bisa dimengerti dan bermanfaat...