Membuat Aplikasi Website (Sitelinks) Structured Data Generator dengan JavaScript

Membuat Aplikasi Website (Sitelinks) Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat aplikasi Website (Sitelinks) Structured Data Generator dengan JavaScript. Kode ini akan menghasilkan output code yang bisa langsung disalin oleh pengguna. User interface aplikasi ini menggunakan Bootstrap.

Website (Sitelinks) Structured Data Generator

Website (Sitelinks) Structured Data Generator

Masukkan URL sitelinks, satu URL per baris.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Website (Sitelinks) Structured Data Generator</title>
</head>
<body>
  <div class="container">
    <h1>Website (Sitelinks) Structured Data Generator</h1>
    <form id="generatorForm">
      <div class="form-group">
        <label for="websiteName">Nama Website</label>
        <input type="text" class="form-control" id="websiteName" required>
      </div>
      <div class="form-group">
        <label for="sitelinks">Sitelinks</label>
        <textarea class="form-control" id="sitelinks" rows="5" required></textarea>
        <small class="form-text text-muted">Masukkan URL sitelinks, satu URL per baris.</small>
      </div>
      <button type="submit" class="btn btn-primary">Generate</button>
    </form>
    <div id="output" class="mt-4"></div>
  </div>

  <script>
    document.getElementById('generatorForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var websiteName = document.getElementById('websiteName').value;
      var sitelinks = document.getElementById('sitelinks').value.split('\n').filter(Boolean);

      var output = {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": websiteName,
        "url": window.location.href,
        "potentialAction": {
          "@type": "SearchAction",
          "target": "{search_term_string}",
          "query-input": "required name=search_term_string"
        },
        "speakable": {
          "@type": "SpeakableSpecification",
          "xpath": [
            "/html/head/title",
            "/html/head/meta[@name='description']/@content"
          ]
        },
        "sameAs": sitelinks
      };

      document.getElementById('output').innerText = JSON.stringify(output, null, 2);
    });
  </script>
</body>
</html>
HTML

Silakan salin kode di atas dan simpan dalam file HTML. Kemudian, buka file HTML tersebut di browser untuk melihat tampilan aplikasi Website (Sitelinks) Structured Data Generator.

Pastikan Anda juga telah menyertakan library Bootstrap dengan menambahkan link stylesheet di dalam tag <head> seperti pada contoh kode di atas.

Tutorial lainnya:

Semoga contoh kode ini bermanfaat bagi Anda dalam membuat aplikasi Website (Sitelinks) Structured Data Generator menggunakan JavaScript dan Bootstrap.

Artikel Terbaru ⭐