section of your HTML document, ideally near the top. Place \n`; if (v.descInput) html += `\n`; if (v.canonicalInput) html += `\n`; // Open Graph if (v.titleInput || v.descInput) { html += '\n\n'; if (v.ogType) html += `\n`; if (v.titleInput) html += `\n`; if (v.descInput) html += `\n`; if (v.ogUrlInput) html += `\n`; if (v.ogImageInput) html += `\n`; if (v.ogSiteInput) html += `\n`; if (v.ogLocale) html += `\n`; if (v.fbAdminInput) html += `\n`; } // Twitter Card if (v.twCard || v.titleInput || v.descInput) { html += '\n\n'; if (v.twCard) html += `\n`; if (v.twSiteInput) html += `\n`; if (v.twCreatorInput) html += `\n`; if (v.titleInput) html += `\n`; if (v.descInput) html += `\n`; if (v.twImageInput) html += `\n`; if (v.ogImageInput && !v.twImageInput) html += `\n`; } return html; } function update(){ const html = build(); $('output').textContent = html || t('outputEmpty'); // SERP preview $('pvUrl').textContent = $('canonicalInput').value || $('ogUrlInput').value || 'https://example.com/page'; $('pvTitle').textContent = $('titleInput').value || 'My Awesome Page'; $('pvDesc').textContent = $('descInput').value || 'A short description of your page'; // Twitter preview $('twTitle').textContent = $('titleInput').value || 'My Awesome Page'; $('twDesc').textContent = $('descInput').value || 'A short description of your page'; const twImg = $('twImageInput').value || $('ogImageInput').value; const twImgWrap = $('twImgWrap'); if (twImg) { twImgWrap.innerHTML = ``; } else { twImgWrap.textContent = 'No image'; } // Char counts const tlen = $('titleInput').value.length; const dlen = $('descInput').value.length; const tc = $('titleCount'); tc.textContent = `${tlen} / 60 ` + (tlen > 60 ? t('charOver') : tlen > 50 ? t('charWarn') : t('charOk')); tc.className = 'char-count ' + (tlen > 60 ? 'char-over' : tlen > 50 ? 'char-warn' : 'char-ok'); const dc = $('descCount'); dc.textContent = `${dlen} / 160 ` + (dlen > 160 ? t('charOver') : dlen > 150 ? t('charWarn') : t('charOk')); dc.className = 'char-count ' + (dlen > 160 ? 'char-over' : dlen > 150 ? 'char-warn' : 'char-ok'); } function copyOutput(){ const txt = $('output').textContent; if (!txt || txt === t('outputEmpty')) return; navigator.clipboard.writeText(txt).then(() => { const b = $('btnCopy'); const orig = b.textContent; b.textContent = t('copied'); setTimeout(() => b.textContent = orig, 1500); }).catch(() => { const b = $('btnCopy'); const orig = b.textContent; b.textContent = t('copyFailed'); setTimeout(() => b.textContent = orig, 2000); }); } function clearAll(){ inputs.forEach(id => { if ($(id).tagName === 'SELECT') $(id).selectedIndex = 0; else $(id).value = ''; }); $('themeColorInput').value = '#4ecdc4'; update(); } function loadExample(){ $('titleInput').value = 'Free Online Meta Tag Generator — GameZipper Tools'; $('descInput').value = 'Generate complete HTML meta tags for SEO and social sharing. Title, description, Open Graph, Twitter Card — live preview, copy & paste.'; $('kwInput').value = 'meta tag generator, meta tags, SEO, open graph, twitter card'; $('authorInput').value = 'GameZipper'; $('canonicalInput').value = 'https://tools.gamezipper.com/dev/meta-tag-generator.html'; $('ogType').value = 'website'; $('ogImageInput').value = 'https://tools.gamezipper.com/shared/og-image.png'; $('ogUrlInput').value = 'https://tools.gamezipper.com/dev/meta-tag-generator.html'; $('ogSiteInput').value = 'GameZipper Tools'; $('ogLocale').value = 'en_US'; $('twCard').value = 'summary_large_image'; $('twSiteInput').value = '@gamezipper'; $('twCreatorInput').value = '@gamezipper'; $('twImageInput').value = 'https://tools.gamezipper.com/shared/og-image.png'; $('robotsSel').value = 'index, follow'; $('charsetSel').value = 'UTF-8'; $('themeColorInput').value = '#4ecdc4'; $('fbAdminInput').value = ''; update(); } // Init fields.forEach(([id, lbl]) => { const el = $(id); const lblEl = document.querySelector(`label[for="${id}"]`) || $(lbl); if (lblEl) lblEl.textContent = t(lbl); }); inputs.forEach(id => { $(id).addEventListener('input', update); $(id).addEventListener('change', update); }); $('btnCopy').addEventListener('click', copyOutput); $('btnCopyAll').addEventListener('click', copyOutput); $('btnClear').addEventListener('click', clearAll); $('btnLoad').addEventListener('click', loadExample); loadExample();