Commuting Cost Calculator

by

SEO Snippet Preview Tool

0 / 60 characters
0 / 160 characters

Google Search Preview:

https://example.com/your-page
Your Page Title Will Appear Here
Your meta description will appear here. A good description summarizes the content and includes a call to action to improve click-through rates (CTR).
function updateSeoPreview() { var titleInput = document.getElementById('seo-input-title'); var descInput = document.getElementById('seo-input-desc'); var previewTitle = document.getElementById('preview-title'); var previewDesc = document.getElementById('preview-desc'); var titleCounter = document.getElementById('title-count'); var descCounter = document.getElementById('desc-count'); var titleVal = titleInput.value; var descVal = descInput.value; // Update Preview Text previewTitle.innerText = titleVal.length > 0 ? titleVal : "Your Page Title Will Appear Here"; previewDesc.innerText = descVal.length > 0 ? descVal : "Your meta description will appear here. A good description summarizes the content and includes a call to action to improve click-through rates (CTR)."; // Update Character Counts titleCounter.innerText = titleVal.length + " / 60 characters"; descCounter.innerText = descVal.length + " / 160 characters"; // SEO Logic Colors if (titleVal.length > 60) { titleCounter.style.color = "#d63638"; previewTitle.style.color = "#d63638"; } else if (titleVal.length > 50) { titleCounter.style.color = "#996800"; previewTitle.style.color = "#1a0dab"; } else { titleCounter.style.color = "#646970"; previewTitle.style.color = "#1a0dab"; } if (descVal.length > 160) { descCounter.style.color = "#d63638"; } else if (descVal.length > 120) { descCounter.style.color = "#008a20"; } else { descCounter.style.color = "#646970″; } } function resetSeoTool() { document.getElementById('seo-input-title').value = "; document.getElementById('seo-input-desc').value = "; updateSeoPreview(); }

Leave a Comment