Berikut adalah contoh kode untuk membuat aplikasi FAQ Structured Data Generator dengan menggunakan JavaScript. Kode ini akan menghasilkan output berupa kode yang dapat langsung disalin oleh pengguna. Aplikasi ini juga dilengkapi dengan antarmuka pengguna yang menggunakan Bootstrap untuk tampilan yang lebih menarik.
FAQ Structured Data Generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ Structured Data Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>FAQ Structured Data Generator</h1>
<form id="faqForm">
<div class="form-group">
<label for="question">Pertanyaan</label>
<input type="text" class="form-control" id="question" required>
</div>
<div class="form-group">
<label for="answer">Jawaban</label>
<textarea class="form-control" id="answer" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Generate</button>
</form>
<div id="output" class="mt-4"></div>
</div>
<script>
document.getElementById('faqForm').addEventListener('submit', function(event) {
event.preventDefault();
var question = document.getElementById('question').value;
var answer = document.getElementById('answer').value;
var output = document.getElementById('output');
output.innerHTML = `<pre><code>{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "${question}",
"acceptedAnswer": {
"@type": "Answer",
"text": "${answer}"
}
}]
}</code></pre>`;
});
</script>
</body>
</html>Anda dapat menyalin kode di atas ke dalam file HTML dan membukanya di browser untuk melihat aplikasi FAQ Structured Data Generator yang telah dibuat. Pengguna dapat mengisi pertanyaan dan jawaban pada formulir, kemudian menekan tombol “Generate” untuk menghasilkan kode output yang sesuai dengan struktur data terstruktur FAQ.
Dengan menggunakan JavaScript dan Bootstrap, aplikasi ini memberikan pengalaman pengguna yang lebih baik dengan tampilan yang menarik dan responsif. Selain itu, kode JavaScript yang disertakan akan mengambil nilai dari formulir dan menghasilkan kode output yang sesuai dengan struktur data FAQ yang diinginkan.
Dengan aplikasi ini, Anda dapat dengan mudah menghasilkan kode structured data FAQ yang dapat digunakan untuk meningkatkan visibilitas dan pemahaman konten FAQ pada mesin pencari.
Leave a Reply