Spin text adalah sebuah metode unik dalam menulis teks yang memungkinkan kata-kata atau frasa dalam teks berubah sesuai dengan kriteria yang kita tentukan.
Contohnya, kalimat “{Saya|Aku|Gue} pergi {memancing|mencari ikan|ke sungai}” bisa bertransformasi menjadi berbagai versi seperti “Gue pergi mencari ikan” atau “Aku pergi ke sungai”.
Meski banyak yang memilih untuk membuat spin text secara manual dan menggunakannya di situs seperti http://sp1n.me/index.html, metode manual ini memiliki beberapa kelemahan. Salah satunya adalah memakan waktu yang lama dan kerap menimbulkan kesalahan ketika jumlah variasi kata meningkat.
Berangkat dari permasalahan tersebut, Tim DEVanoda hadir untuk memberikan solusi dengan mengajarkan Anda cara membuat spin text otomatis memakai Javascript.
Bagi Anda yang mungkin baru pertama kali mendengar istilah “spin text”, jangan khawatir. Sebelum kami membahas lebih dalam tentang cara pembuatannya, kami akan menjelaskan terlebih dahulu apa itu spin text, kegunaannya, serta manfaat yang bisa Anda peroleh.
Tentang Spin Text
Kegunaan Spin Text di Website
- Optimasi Konten untuk SEO: Dengan menggunakan spin text, pemilik website dapat memproduksi berbagai versi konten yang unik dari satu artikel asli. Hal ini membantu dalam mencegah konten duplikat yang bisa merugikan peringkat SEO suatu website.
- Konten Media Sosial: Spin text dapat digunakan untuk membuat variasi postingan media sosial dari satu konten asli, memungkinkan brand untuk berkomunikasi dengan audiensnya dalam banyak cara tanpa harus membuat konten dari awal setiap kali.
- Menghindari Plagiarisme: Meskipun bukan solusi terbaik, beberapa orang menggunakan spin text untuk mengubah konten yang diambil dari sumber lain agar terlihat unik dan menghindari deteksi plagiarisme.
Hal yang harus diperhatikan
Penggunaan spin text harus dilakukan dengan bijak. Konten yang dihasilkan harus tetap berkualitas dan relevan dengan audiens. Terlalu banyak mengandalkan spin text tanpa memperhatikan kualitas dapat berdampak negatif pada reputasi dan kredibilitas website.
Kelebihan Spin Text Otomatis (dengan JS) VS Spin Text Manual
- Konsistensi: Dengan skrip otomatis, Anda mendapatkan hasil yang konsisten setiap kali. Di sisi lain, pendekatan manual dapat menyebabkan kesalahan atau inkonsistensi karena faktor manusia.
- Kemudahan Penggunaan: Setelah skrip JS diatur, pengguna hanya perlu memasukkan kode nya, kemudian mendapatkan hasilnya dengan cepat. Dalam metode manual, Anda harus memikirkan dan menulis setiap variasi secara individual.
- Adaptabilitas: Skrip JS dapat dengan mudah diperbarui atau dimodifikasi sesuai kebutuhan, sedangkan metode manual memerlukan revisi manual setiap kali ada perubahan.
- Volume Konten: Dengan otomatisasi, Anda dapat menghasilkan jumlah variasi yang jauh lebih besar dalam waktu singkat, sedangkan dalam metode manual, volume tersebut akan memerlukan usaha yang signifikan.
Spin Text Otomatis Tiap Kalimat
Dalam contoh ini, kami membuat spin text yang bisa berubah di setiap kalimat nya (bukan setiap kata).
Tampilan Kata dan Hasil
Script yang digunakan
<!DOCTYPE html>
<html>
<head>
<title>Teks Berganti-ganti</title>
<style>
#textContainer {
font-size: 24px; /* Change the font size for the heading as desired */
padding: 10px;
}
p {
font-size: 16px; /* Change the font size for the content as desired */
}
</style>
</head>
<body>
<div id="textContainer">
<h2 id="text1">Saya pergi mencari ikan</h2>
<p>ketika menjelang malam, Saya pergi bersama teman untuk pergi mencari ikan.<br> Akan tetapi ternyata saya tidak menemukan ikan di danau.</p>
</div>
<script>
var texts = [
{
heading: 'Saya pergi mencari ikan',
content: 'ketika menjelang malam, Saya pergi bersama teman untuk pergi mencari ikan.<br> Akan tetapi ternyata saya tidak menemukan ikan di danau.'
},
{
heading: 'Gue pergi memancing',
content: 'pada waktu sore, Gue pergi bersama saudara untuk pergi memancing.<br> Namun ternyata gua tidak mendapat ikan di sungai.'
},
{
heading: 'Saya pergi memancing',
content: 'ketika sore, Saya pergi bersama teman untuk pergi memancing.<br> Namun ternyata saya tidak mendapat ikan di sungai.'
},
{
heading: 'Aku pergi memancing',
content: 'saat sore, Aku pergi bersama sahabat untuk pergi memancing.<br> Akan tetapi ternyata aku tidak mendapat ikan di danau.'
},
{
heading: 'Aku pergi mencari ikan',
content: 'saat menjelang malam, Aku pergi bersama sahabat untuk pergi mencari ikan.<br> Namun ternyata aku tidak menemukan ikan di sungai.'
},
{
heading: 'Gue pergi mencari ikan',
content: 'pada waktu menjelang malam, Gue pergi bersama saudara untuk pergi mencari ikan.<br> Akan tetapi ternyata gue tidak menemukan ikan di danau.'
},
{
heading: 'Saya pergi ke sungai',
content: 'ketika sore, Saya pergi bersama teman untuk pergi ke sungai.<br> Namun ternyata saya tidak mendapatkan ikan di sungai.'
},
{
heading: 'Aku pergi ke sungai',
content: 'saat sore, Aku pergi bersama sahabat untuk pergi ke sungai.<br> Akan tetapi ternyata aku tidak mendapatkan ikan di sungai.'
},
{
heading: 'Gue pergi ke sungai',
content: 'pada waktu sore, Gue pergi bersama saudara untuk pergi ke sungai.<br> Namun ternyata gua tidak mendapatkan ikan di sungai.'
}
];
var currentIndex = parseInt(getCookie("currentIndex")) || 0;
const textContainer = document.getElementById('textContainer');
function toggleText() {
textContainer.innerHTML = `
<h2>${texts[currentIndex].heading}</h2>
<p>${texts[currentIndex].content}</p>
`;
currentIndex = (currentIndex + 1) % texts.length;
setCookie("currentIndex", currentIndex, 365); // Store the index in a cookie for 1 year
}
// Call toggleText() when the page is first loaded
window.addEventListener('load', toggleText);
// Set a cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
// Get a cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
</script>
</body>
</html>
Implementasi Script
Script tersebut bisa dimunculkan dengan memakai Shortcode, dengan menginjeksikan nya ke dalam situs memakai plugin WPCode.
Penutup
Memahami dan menerapkan spin text dengan bantuan Javascript bukan hanya meningkatkan efisiensi dalam pembuatan konten, tetapi juga memberikan fleksibilitas dalam menyajikan variasi teks kepada pengunjung website Anda.
Semoga panduan ini memberikan wawasan yang bermanfaat dan membantu Anda dalam mengoptimalkan konten digital Anda. Terus eksplorasi kemungkinan-kemungkinan lain dengan Javascript dan selamat berkreasi!
