Meta Tag Generator Free Tool Code With HTML In Single File

In today’s digital age, it is extremely important to optimize a website for better ranking and visibility. An important part of on-page SEO is meta tags, which help search engines understand the content of your webpage. If you want to create your own free meta tag generator tool, you are in the right place!

I am giving you free HTML, CSS and JavaScript code in a single file of a simple but effective meta tag generator tool that you can use for your website. This tool will make your website more SEO friendly and improve page ranking.

Why is Meta Tag Generator necessary?

Meta tags play a vital role in SEO and provide the following benefits:

Time savings: No need to manually write meta tags for every page.
Accuracy: Generate correct meta tags without any mistakes.
Better SEO: Make your website more optimized and increase traffic.
Ease of use: Easy to use for both beginners and professionals.
Better click-through rate (CTR): Correct meta tags help in attracting users.

Download Your Free HTML Code of Meta Tag Generator Code Now!

HTML, CSS And Js Code In Single File:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Advanced Meta Tag Generator</title>
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap” rel=”stylesheet”>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css” rel=”stylesheet”>
<style>
:root {
–primary-color: #2196F3;
–secondary-color: #FFC107;
–success-color: #4CAF50;
–error-color: #f44336;
–text-color: #333;
–bg-color: #f5f5f5;
–card-bg: #ffffff;
–border-radius: 8px;
–transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Roboto’, sans-serif;
background: var(–bg-color);
color: var(–text-color);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
width: 100%;
}
.generator-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.input-section, .preview-section {
background: var(–card-bg);
padding: 25px;
border-radius: var(–border-radius);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.section-title {
color: var(–primary-color);
margin-bottom: 20px;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.section-title i {
font-size: 1.2em;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: var(–text-color);
}
.input-group input,
.input-group textarea,
.input-group select {
width: 100%;
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: var(–border-radius);
font-size: 14px;
transition: var(–transition);
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
border-color: var(–primary-color);
outline: none;
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}
.btn {
padding: 12px 24px;
border: none;
border-radius: var(–border-radius);
cursor: pointer;
font-weight: 500;
transition: var(–transition);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(–primary-color);
color: white;
}
.btn-secondary {
background: var(–secondary-color);
color: var(–text-color);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.result {
background: #f8f9fa;
padding: 15px;
border-radius: var(–border-radius);
margin-top: 20px;
position: relative;
}
.result pre {
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
font-family: ‘Courier New’, monospace;
}
.result .tag { color: #4CAF50; } /* Green */
.result .attr-name { color: #FF5722; } /* Orange */
.result .attr-value { color: #f44336; } /* Red */
.result .comment { color: #708090; }
.copy-indicator {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background: var(–success-color);
color: white;
border-radius: var(–border-radius);
opacity: 0;
transform: translateY(-20px);
transition: var(–transition);
}
.copy-indicator.show {
opacity: 1;
transform: translateY(0);
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.tab {
padding: 8px 16px;
border: none;
background: none;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: var(–transition);
}
.tab.active {
border-bottom-color: var(–primary-color);
color: var(–primary-color);
}
.preview-type {
display: none;
}
.preview-type.active {
display: block;
}
@media (max-width: 768px) {
.generator-grid {
grid-template-columns: 1fr;
}
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”generator-grid”>
<div class=”input-section”>
<h2 class=”section-title”>
<i class=”fas fa-code”></i>
Meta Tag Generator
</h2>
<form id=”metaForm” onsubmit=”return false;”>
<div class=”input-group”>
<label for=”title”>Page Title</label>
<input type=”text” id=”title” placeholder=”Enter your page title”>
</div>
<div class=”input-group”>
<label for=”description”>Meta Description</label>
<textarea id=”description” rows=”3″ placeholder=”Enter your page description”></textarea>
</div>
<div class=”input-group”>
<label for=”keywords”>Keywords</label>
<input type=”text” id=”keywords” placeholder=”Enter keywords (comma separated)”>
</div>
<div class=”input-group”>
<label for=”author”>Author</label>
<input type=”text” id=”author” placeholder=”Enter author name”>
</div>
<div class=”input-group”>
<label for=”robots”>Robots</label>
<select id=”robots”>
<option value=”index, follow”>Index, Follow</option>
<option value=”noindex, follow”>No Index, Follow</option>
<option value=”index, nofollow”>Index, No Follow</option>
<option value=”noindex, nofollow”>No Index, No Follow</option>
</select>
</div>
<div class=”input-group”>
<label>Social Media Preview</label>
<input type=”text” id=”ogTitle” placeholder=”Open Graph Title”>
<textarea id=”ogDescription” placeholder=”Open Graph Description” rows=”2″></textarea>
<input type=”url” id=”ogImage” placeholder=”Open Graph Image URL”>
<select id=”ogType”>
<option value=”website”>Website</option>
<option value=”article”>Article</option>
<option value=”product”>Product</option>
</select>
</div>
<button onclick=”generateMetaTags()” class=”btn btn-primary”>
<i class=”fas fa-magic”></i>
Generate Meta Tags
</button>
</form>
</div>
<div class=”preview-section”>
<h2 class=”section-title”>
<i class=”fas fa-eye”></i>
Preview
</h2>

<div class=”tabs”>
<button class=”tab active” onclick=”switchTab(‘html’)”>HTML</button>
<button class=”tab” onclick=”switchTab(‘preview’)”>Visual Preview</button>
</div>
<div id=”htmlPreview” class=”preview-type active”>
<div class=”result”>
<pre id=”result”></pre>
</div>
<button onclick=”copyMetaTags()” class=”btn btn-secondary”>
<i class=”fas fa-copy”></i>
Copy to Clipboard
</button>
</div>
<div id=”visualPreview” class=”preview-type”>
<div id=”socialPreview” class=”social-preview”>
</div>
</div>
</div>
</div>
</div>
<div id=”copyIndicator” class=”copy-indicator”>
Copied to clipboard!
</div>
<script>
class MetaTagGenerator {
constructor() {
this.form = document.getElementById(‘metaForm’);
this.result = document.getElementById(‘result’);
this.copyIndicator = document.getElementById(‘copyIndicator’);
this.socialPreview = document.getElementById(‘socialPreview’);

// Initialize with default values
this.initializeDefaults();
}
initializeDefaults() {
// Set default viewport
this.viewport = ‘width=device-width, initial-scale=1.0’;

// Bind methods
this.generateMetaTags = this.generateMetaTags.bind(this);
this.copyMetaTags = this.copyMetaTags.bind(this);
this.updateSocialPreview = this.updateSocialPreview.bind(this);
}
getFormValue(id, defaultValue = ”) {
const element = document.getElementById(id);
return element ? element.value.trim() || defaultValue : defaultValue;
}
generateMetaTags() {
const title = this.getFormValue(‘title’);
const description = this.getFormValue(‘description’);
const keywords = this.getFormValue(‘keywords’);
const author = this.getFormValue(‘author’);
const robots = this.getFormValue(‘robots’, ‘index, follow’);
const ogTitle = this.getFormValue(‘ogTitle’, title);
const ogDescription = this.getFormValue(‘ogDescription’, description);
const ogImage = this.getFormValue(‘ogImage’);
const ogType = this.getFormValue(‘ogType’, ‘website’);
let metaTags = ”;
// Helper function to wrap HTML elements with syntax highlighting
const highlight = (str) => {
return str.replace(/(<\/?)([a-zA-Z0-9]+)(.*?)(>)/g, (match, p1, p2, p3, p4) => {
const attributes = p3.replace(/([a-zA-Z-]+)=”([^”]*?)”/g,
‘<span class=”attr-name”>$1</span>=”<span class=”attr-value”>$2</span>”‘);
return `${p1}<span class=”tag”>${p2}</span>${attributes}${p4}`;
});
};
// Essential meta tags
if (title) {
metaTags += `<title>${this.escapeHtml(title)}</title>\n`;
metaTags += `<meta name=”title” content=”${this.escapeHtml(title)}”>\n`;
}
metaTags += `<meta charset=”UTF-8″>\n`;
metaTags += `<meta name=”viewport” content=”${this.viewport}”>\n`;
if (description) {
metaTags += `<meta name=”description” content=”${this.escapeHtml(description)}”>\n`;
}
if (keywords) {
metaTags += `<meta name=”keywords” content=”${this.escapeHtml(keywords)}”>\n`;
}
if (author) {
metaTags += `<meta name=”author” content=”${this.escapeHtml(author)}”>\n`;
}
metaTags += `<meta name=”robots” content=”${robots}”>\n`;
// Open Graph tags
if (ogTitle || title) {
metaTags += `<meta property=”og:title” content=”${this.escapeHtml(ogTitle || title)}”>\n`;
metaTags += `<meta property=”og:type” content=”${ogType}”>\n`;
}
if (ogDescription || description) {
metaTags += `<meta property=”og:description” content=”${this.escapeHtml(ogDescription || description)}”>\n`;
}
if (ogImage) {
metaTags += `<meta property=”og:image” content=”${this.escapeHtml(ogImage)}”>\n`;
}
// Twitter Card tags
metaTags += `<meta name=”twitter:card” content=”summary_large_image”>\n`;
if (ogTitle || title) {
metaTags += `<meta name=”twitter:title” content=”${this.escapeHtml(ogTitle || title)}”>\n`;
}
if (ogDescription || description) {
metaTags += `<meta name=”twitter:description” content=”${this.escapeHtml(ogDescription || description)}”>\n`;
}
if (ogImage) {
metaTags += `<meta name=”twitter:image” content=”${this.escapeHtml(ogImage)}”>\n`;
}
// Apply syntax highlighting and set the result
this.result.innerHTML = highlight(this.escapeHtml(metaTags));
this.updateSocialPreview();
}
escapeHtml(unsafe) {
return unsafe
.replace(/&/g, “&”)
.replace(/</g, “<”)
.replace(/>/g, “>”)
.replace(/”/g, “"”)
.replace(/’/g, “'”);
}
async copyMetaTags() {
try {
await navigator.clipboard.writeText(this.result.textContent);
this.showCopyIndicator();
} catch (err) {
console.error(‘Failed to copy:’, err);
alert(‘Failed to copy meta tags to clipboard’);
}
}
showCopyIndicator() {
this.copyIndicator.classList.add(‘show’);
setTimeout(() => {
this.copyIndicator.classList.remove(‘show’);
}, 2000);
}
updateSocialPreview() {
const title = this.getFormValue(‘ogTitle’) || this.getFormValue(‘title’);
const description = this.getFormValue(‘ogDescription’) || this.getFormValue(‘description’);
const image = this.getFormValue(‘ogImage’);
const currentUrl = window.location.hostname || ‘example.com’;
this.socialPreview.innerHTML = `
<div style=”max-width: 500px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;”>
${image ? `<img src=”${this.escapeHtml(image)}” style=”width: 100%; height: 250px; object-fit: cover;”>` : ”}
<div style=”padding: 15px;”>
<h3 style=”margin: 0; color: #1a0dab;”>${this.escapeHtml(title || ‘No title’)}</h3>
<p style=”color: #006621; margin: 4px 0;”>${currentUrl}</p>
<p style=”color: #545454; margin: 0;”>${this.escapeHtml(description || ‘No description’)}</p>
</div>
</div>
`;
}
}
// Initialize the generator
const generator = new MetaTagGenerator();
// Attach event handlers to window to maintain scope
window.generateMetaTags = () => generator.generateMetaTags();
window.copyMetaTags = () => generator.copyMetaTags();
window.switchTab = (tab) => {
// Update tab buttons
document.querySelectorAll(‘.tab’).forEach(t => {
t.classList.remove(‘active’);
});
document.querySelector(`.tab[onclick*=”${tab}”]`).classList.add(‘active’);
// Update preview sections
document.querySelectorAll(‘.preview-type’).forEach(p => {
p.classList.remove(‘active’);
});
document.getElementById(`${tab}Preview`).classList.add(‘active’);
if (tab === ‘preview’) {
generator.updateSocialPreview();
}
};
</script>
</body>
</html>

You can copy the code below and use it in your project. It includes HTML, CSS, and JavaScript, which helps users to dynamically generate meta tags.

How to use Meta Tag Generator tool?

Copy the above code and save it as an INDEX.HTML file.
Open the file in your browser.
Fill in the title, description, and keywords.
Click the “Create Meta Tags” button.
Paste the generated meta tags into the <head> section of your website.

Benefits of using this Meta Tag Generator tool

Absolutely free: The code is available at no cost.
100% customizable: You can modify it as per your requirements.
No additional plugins needed: It is completely based on HTML, CSS, and JavaScript.

conclusion

I hope this Free Meta Tag Generator code is helpful for you. This code will help you to create your website meta tags quickly and easily.

Use this code for free and implement it in your website. If you liked this article, share it with others and stay connected with me.

Best of luck and Happy Coding!

Visit our website for more information and useful tools!

F&qs

1. Is this tool completely free?

Yes, this tool is completely free and you can use it without any charge.

2. Can I use this code in my website?

Yes, you can easily use it in your website.

3. Is this tool useful for SEO?

Absolutely! This tool will help you improve the SEO of your website.

4. Can I customize this code?

Yes, you can change this code according to your needs.

5. Is any special skill required to use this tool?

No, anyone can use it even if they don’t have much knowledge of coding.