The SEO Metadata Generator is a multi-tool web application designed to help users quickly create SEO-related HTML code snippets for websites. It generates metadata tags, Twitter Cards, Open Graph tags, and JSON-LD Schema markup through a clean tab-based interface.
This application helps developers, marketers, and website owners generate structured SEO code without manually writing meta tags.
The top header displays the application title and uses a dark modern theme with a blue accent border.
The left-side navigation contains four tabs:
The editor panel contains forms and input fields where the user enters SEO information.
The generated code appears in the right-side output panel inside a styled code container.
The user clicks one of the tabs in the navigation menu. JavaScript listens for tab clicks and activates the matching content section.
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
sections.forEach(s => s.classList.remove('active'));
tab.classList.add('active');
const sectionId = tab.dataset.section;
document
.getElementById(sectionId)
.classList.add('active');
});
});
Each section contains form inputs such as titles, descriptions, URLs, keywords, and images.
Users fill out the required fields depending on the type of SEO code they want to generate.
Clicking a Generate button triggers a JavaScript function that reads form values and builds HTML code using template literals.
const code =
`<meta name="description" content="${description}">`;
The generated code is inserted into the output panel using the setOutput() function.
function setOutput(code) {
document.getElementById('outputCode').textContent = code;
}
The Copy button uses the Clipboard API to copy generated SEO code directly into the user's clipboard.
navigator.clipboard.writeText(code)
This section creates standard SEO metadata tags for web pages.
<title>My Website</title> <meta name="description" content="Website description"> <meta name="keywords" content="seo, metadata">
Twitter Cards improve how links appear when shared on X/Twitter.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Page">
Open Graph tags control how websites appear when shared across social media platforms.
<meta property="og:title" content="My Website"> <meta property="og:type" content="website">
The Schema section generates JSON-LD structured data markup for search engines.
{
"@context":"https://schema.org",
"@type":"Organization"
}
The application is fully responsive and adapts to smaller screens using CSS media queries.
@media (max-width: 1000px) {
.container {
flex-direction: column;
}
.content {
flex-direction: column;
}
}