Berikut adalah contoh kode untuk membuat aplikasi Local Business Structured Data Generator dengan menggunakan JavaScript. Kode ini akan menghasilkan output berupa kode yang dapat langsung disalin oleh pengguna. User interface-nya menggunakan Bootstrap untuk tampilan yang lebih menarik dan responsif.
Local Business 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>Local Business 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>Local Business Structured Data Generator</h1>
<form id="generatorForm">
<div class="form-group">
<label for="businessName">Nama Bisnis:</label>
<input type="text" class="form-control" id="businessName" required>
</div>
<div class="form-group">
<label for="businessAddress">Alamat Bisnis:</label>
<input type="text" class="form-control" id="businessAddress" required>
</div>
<div class="form-group">
<label for="businessPhone">Nomor Telepon Bisnis:</label>
<input type="tel" class="form-control" id="businessPhone" required>
</div>
<div class="form-group">
<label for="businessEmail">Email Bisnis:</label>
<input type="email" class="form-control" id="businessEmail" required>
</div>
<button type="submit" class="btn btn-primary">Generate Structured Data</button>
</form>
<div id="output" class="mt-4"></div>
</div>
<script>
document.getElementById('generatorForm').addEventListener('submit', function(event) {
event.preventDefault();
var businessName = document.getElementById('businessName').value;
var businessAddress = document.getElementById('businessAddress').value;
var businessPhone = document.getElementById('businessPhone').value;
var businessEmail = document.getElementById('businessEmail').value;
var structuredData = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": businessName,
"address": {
"@type": "PostalAddress",
"streetAddress": businessAddress
},
"telephone": businessPhone,
"email": businessEmail
};
var outputElement = document.getElementById('output');
outputElement.innerText = JSON.stringify(structuredData, null, 2);
});
</script>
</body>
</html>Kode di atas akan menghasilkan halaman web dengan formulir untuk mengisi informasi bisnis seperti nama bisnis, alamat bisnis, nomor telepon bisnis, dan email bisnis. Ketika pengguna mengisi formulir dan mengklik tombol “Generate Structured Data”, kode JavaScript akan mengambil nilai-nilai yang diisi oleh pengguna dan menghasilkan kode structured data dalam format JSON. Kode structured data ini akan ditampilkan di bawah formulir.
Dengan menggunakan kode di atas, pengguna dapat dengan mudah menghasilkan structured data untuk bisnis lokal mereka dengan mengisi formulir yang disediakan. Kode structured data ini dapat digunakan untuk meningkatkan visibilitas bisnis di mesin pencari dan platform lainnya yang mendukung structured data.
Pastikan untuk menyertakan library Bootstrap dengan menambahkan link stylesheet ke dalam tag <head> untuk memastikan tampilan yang responsif dan menarik.
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat Local Business Structured Data Generator menggunakan JavaScript dan Bootstrap.