Meta Tag Generator Tool

Easily generate common HTML meta tags for your website to improve SEO and social sharing. Fill in the fields below and the tool will create the necessary code.

Page Title (for `` tag):</label> <input type="text" id="pageTitle" placeholder="Your Awesome Page Title"> </div> <div class="input-group"> <label for="metaDescription">Meta Description (max 160 chars recommended):</label> <input type="text" id="metaDescription" placeholder="A concise and compelling description of your page."> </div> <div class="input-group"> <label for="metaKeywords">Meta Keywords (comma-separated, less important now):</label> <input type="text" id="metaKeywords" placeholder="keyword1, keyword2, keyword3"> </div> <div class="input-group"> <label for="metaAuthor">Author:</label> <input type="text" id="metaAuthor" placeholder="Your Name or Company Name"> </div> <div class="input-group inline-group"> <label class="checkbox-label" for="viewportTag"> <input type="checkbox" id="viewportTag" checked> Add Viewport Tag (for responsive design) </label> </div> <div class="input-group inline-group"> <label for="robotsIndex">Robots Index:</label> <select id="robotsIndex"> <option value="index" selected>Index</option> <option value="noindex">No Index</option> </select> <label for="robotsFollow">Robots Follow:</label> <select id="robotsFollow"> <option value="follow" selected>Follow</option> <option value="nofollow">No Follow</option> </select> </div> <div class="input-group inline-group"> <label for="charset">Charset:</label> <select id="charset"> <option value="UTF-8" selected>UTF-8</option> <option value="ISO-8859-1">ISO-8859-1</option> </select> </div>  <div class="collapsible-section" id="ogSection"> <div class="collapsible-header"> <span>Open Graph Tags (for Facebook, LinkedIn, etc.)</span> <i class="fas fa-chevron-down"></i> </div> <div class="collapsible-content"> <div class="input-group"> <label for="ogTitle">OG: Title (if different from Page Title):</label> <input type="text" id="ogTitle" placeholder="Open Graph Title"> </div> <div class="input-group"> <label for="ogDescription">OG: Description (if different from Meta Description):</label> <input type="text" id="ogDescription" placeholder="Open Graph Description"> </div> <div class="input-group"> <label for="ogType">OG: Type:</label> <select id="ogType"> <option value="website" selected>website</option> <option value="article">article</option> <option value="product">product</option> <option value="profile">profile</option> </select> </div> <div class="input-group"> <label for="ogUrl">OG: URL (Canonical URL of the page):</label> <input type="url" id="ogUrl" placeholder="https://www.example.com/page.html"> </div> <div class="input-group"> <label for="ogImage">OG: Image URL (Recommended: 1200x630px):</label> <input type="url" id="ogImage" placeholder="https://www.example.com/image.jpg"> </div> <div class="input-group"> <label for="ogSiteName">OG: Site Name:</label> <input type="text" id="ogSiteName" placeholder="Your Website Name"> </div> </div> </div>  <div class="collapsible-section" id="twitterSection"> <div class="collapsible-header"> <span>Twitter Card Tags</span> <i class="fas fa-chevron-down"></i> </div> <div class="collapsible-content"> <div class="input-group"> <label for="twitterCard">Twitter: Card Type:</label> <select id="twitterCard"> <option value="summary_large_image" selected>Summary with Large Image</option> <option value="summary">Summary</option> <option value="app">App</option> <option value="player">Player</option> </select> </div> <div class="input-group"> <label for="twitterSite">Twitter: Site Handle (e.g., @YourSite):</label> <input type="text" id="twitterSite" placeholder="@YourSiteHandle"> </div> <div class="input-group"> <label for="twitterCreator">Twitter: Creator Handle (e.g., @AuthorHandle):</label> <input type="text" id="twitterCreator" placeholder="@YourPersonalHandle"> </div> <div class="input-group"> <label for="twitterTitle">Twitter: Title (if different from Page Title):</label> <input type="text" id="twitterTitle" placeholder="Twitter Card Title"> </div> <div class="input-group"> <label for="twitterDescription">Twitter: Description (if different, max 200 chars):</label> <input type="text" id="twitterDescription" placeholder="Twitter Card Description"> </div> <div class="input-group"> <label for="twitterImage">Twitter: Image URL (Recommended: min 120x120px):</label> <input type="url" id="twitterImage" placeholder="https://www.example.com/twitter-image.jpg"> </div> </div> </div> <button id="generateButton" class="action-button" style="margin-top: 20px;"> <i class="fas fa-cogs"></i> Generate Meta Tags </button> </div> <div class="results-section"> <h2>Generated Meta Tags</h2> <textarea id="generatedMetaTags" readonly placeholder="Your generated meta tags will appear here. Place them inside the <head> section of your HTML."></textarea> <button id="copyButton" class="copy-button"> <i class="fas fa-copy"></i> Copy to Clipboard </button> </div> </div> <script> // Collapsible sections document.querySelectorAll('.collapsible-header').forEach(header => { header.addEventListener('click', function() { const section = this.parentElement; section.classList.toggle('active'); const content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }); document.getElementById('generateButton').addEventListener('click', function() { let metaTags = ""; const siteTitle = document.getElementById('pageTitle').value.trim(); const description = document.getElementById('metaDescription').value.trim(); const keywords = document.getElementById('metaKeywords').value.trim(); const author = document.getElementById('metaAuthor').value.trim(); const addViewport = document.getElementById('viewportTag').checked; const robotsIndex = document.getElementById('robotsIndex').value; const robotsFollow = document.getElementById('robotsFollow').value; const charset = document.getElementById('charset').value; // Basic Tags if (charset) { metaTags += `<meta charset="${charset}">\n`; } if (addViewport) { metaTags += `<meta name="viewport" content="width=device-width, initial-scale=1.0">\n`; } if (siteTitle) { metaTags += `<title>${siteTitle}\n`; } if (description) { metaTags += `\n`; // CORRECTED } if (keywords) { metaTags += `\n`; // CORRECTED } if (author) { metaTags += `\n`; // CORRECTED } metaTags += `\n`; // Open Graph Tags const ogSection = document.getElementById('ogSection'); if (ogSection.classList.contains('active')) { const ogTitle = document.getElementById('ogTitle').value.trim() || siteTitle; const ogDescription = document.getElementById('ogDescription').value.trim() || description; const ogType = document.getElementById('ogType').value; const ogUrl = document.getElementById('ogUrl').value.trim(); const ogImage = document.getElementById('ogImage').value.trim(); const ogSiteName = document.getElementById('ogSiteName').value.trim(); if (ogTitle) metaTags += `\n`; // CORRECTED if (ogDescription) metaTags += `\n`; // CORRECTED if (ogType) metaTags += `\n`; // CORRECTED if (ogUrl) metaTags += `\n`; // CORRECTED if (ogImage) metaTags += `\n`; // CORRECTED if (ogSiteName) metaTags += `\n`; // CORRECTED } // Twitter Card Tags const twitterSection = document.getElementById('twitterSection'); if (twitterSection.classList.contains('active')) { const twitterCard = document.getElementById('twitterCard').value; const twitterSite = document.getElementById('twitterSite').value.trim(); const twitterCreator = document.getElementById('twitterCreator').value.trim(); const twitterTitle = document.getElementById('twitterTitle').value.trim() || siteTitle; const twitterDescription = document.getElementById('twitterDescription').value.trim() || description; const twitterImage = document.getElementById('twitterImage').value.trim(); if (twitterCard) metaTags += `\n`; // CORRECTED if (twitterSite) metaTags += `\n`; // CORRECTED if (twitterCreator) metaTags += `\n`; // CORRECTED if (twitterTitle) metaTags += `\n`; // CORRECTED if (twitterDescription) metaTags += `\n`; // CORRECTED if (twitterImage) metaTags += `\n`; // CORRECTED } document.getElementById('generatedMetaTags').value = metaTags.trim(); }); document.getElementById('copyButton').addEventListener('click', function() { const textArea = document.getElementById('generatedMetaTags'); if (textArea.value) { textArea.select(); textArea.setSelectionRange(0, 99999); // For mobile devices try { navigator.clipboard.writeText(textArea.value) .then(() => alert('Meta tags copied to clipboard!')) .catch(err => alert('Failed to copy: ' + err)); } catch (err) { // Fallback for older browsers try { document.execCommand('copy'); alert('Meta tags copied to clipboard! (fallback)'); } catch (e) { alert('Failed to copy. Please copy manually.'); } } } else { alert('Nothing to copy. Generate meta tags first.'); } });