Structure Data Generator
Home
Structure Data Generator
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
}
h1 {
color: red;
text-align: center;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 20px auto;
}
.form-group {
margin-bottom: 15px;
}
label {
font-weight: bold;
color: #333;
}
input[type=”text”], textarea, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 5px;
}
button {
background-color: red;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
width: 100%;
}
button:hover {
background-color: darkred;
}
pre {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #ddd;
overflow-x: auto;
margin-top: 10px;
}
const schemaTypes = {
FAQPage: {
fields: {
question: { label: ‘Question’, required: true },
answer: { label: ‘Answer’, required: true }
}
},
HowTo: {
fields: {
name: { label: ‘Name of the How-to’, required: true },
description: { label: ‘Description of steps’, required: true },
totalTime: { label: ‘Total Time’, required: false },
supply: { label: ‘Supplies’, required: false },
step: { label: ‘Step Instructions’, required: true, multiple: true }
}
},
Article: {
fields: {
headline: { label: ‘Headline’, required: true },
body: { label: ‘Article Body’, required: true }
}
},
JobPosting: {
fields: {
title: { label: ‘Job Title’, required: true },
description: { label: ‘Job Description’, required: true },
hiringOrganization: { label: ‘Hiring Organization’, required: true },
jobLocation: { label: ‘Job Location’, required: true },
datePosted: { label: ‘Date Posted’, required: false }
}
},
LocalBusiness: {
fields: {
businessName: { label: ‘Business Name’, required: true },
description: { label: ‘Business Description’, required: true },
address: { label: ‘Address’, required: true },
telephone: { label: ‘Telephone’, required: true }
}
},
Product: {
fields: {
productName: { label: ‘Product Name’, required: true },
description: { label: ‘Product Description’, required: true },
sku: { label: ‘SKU’, required: false },
brand: { label: ‘Brand’, required: false }
}
},
Event: {
fields: {
eventName: { label: ‘Event Name’, required: true },
eventDate: { label: ‘Event Date’, required: true },
location: { label: ‘Location’, required: true },
description: { label: ‘Event Description’, required: false }
}
},
Recipe: {
fields: {
recipeName: { label: ‘Recipe Name’, required: true },
recipeCuisine: { label: ‘Cuisine Type’, required: false },
recipeCategory: { label: ‘Recipe Category’, required: false },
description: { label: ‘Description’, required: true },
cookTime: { label: ‘Cook Time’, required: false },
prepTime: { label: ‘Preparation Time’, required: false },
ingredients: { label: ‘Ingredients (comma-separated)’, required: true, multiple: true },
instructions: { label: ‘Instructions’, required: true }
}
},
Person: {
fields: {
name: { label: ‘Person Name’, required: true },
description: { label: ‘Description’, required: true },
jobTitle: { label: ‘Job Title’, required: false }
}
}
};const extraFields = document.getElementById(‘extraFields’);
const schemaTypeSelect = document.getElementById(‘schemaType’);schemaTypeSelect.addEventListener(‘change’, function () {
updateExtraFields();
});function updateExtraFields() {
const schemaType = schemaTypeSelect.value;
const fields = schemaTypes[schemaType].fields;let fieldsHTML = ”;
for (const key in fields) {
const field = fields[key];
fieldsHTML += `
`;
// For multiple inputs
if (field.multiple) {
fieldsHTML += `
`;
}
}extraFields.innerHTML = fieldsHTML;
}updateExtraFields();function generateMarkup() {
const schemaType = schemaTypeSelect.value;
const title = document.getElementById(‘title’).value;
const description = document.getElementById(‘description’).value;
const jsonLD = {
“@context”: “https://schema.org”,
“@type”: schemaType,
“name”: title,
“description”: description
};const fields = schemaTypes[schemaType].fields;
for (const key in fields) {
const value = document.getElementById(key)?.value || ”;
if (key === ‘step’ || key === ‘ingredients’) {
const items = value.split(‘,’).map(item => item.trim());
jsonLD[key] = items;
} else {
jsonLD[key] = value;
}
}document.getElementById(‘jsonOutput’).textContent = JSON.stringify(jsonLD, null, 2);
}function validateJSON() {
const json = document.getElementById(‘jsonOutput’).textContent;
const url = `https://search.google.com/test/rich-results?url=${encodeURIComponent(json)}`;
window.open(url, ‘_blank’);
}function richResultTest() {
const url = ‘https://search.google.com/test/rich-results’;
window.open(url, ‘_blank’);
}
Structured Data Markup Generator
FAQ Page
How-to
Article
Job Posting
Local Business
Product
Event
Person
Recipe