Cost of Living Calculator from City to City

Google SERP Simulator

Characters: 0/60
Characters: 0/160

Preview Result:

https://example.com › example-page-url
Your Page Title Will Appear Here
Enter a meta description to see how your snippet will look in Google search results. This should be a concise summary of your page content.
function updateSerpPreview() { var titleIn = document.getElementById('serp-title-input').value; var descIn = document.getElementById('serp-desc-input').value; var slugIn = document.getElementById('serp-url-input').value; var titlePrev = document.getElementById('preview-title'); var descPrev = document.getElementById('preview-desc'); var slugPrev = document.getElementById('preview-slug-text'); var titleCount = document.getElementById('title-count'); var descCount = document.getElementById('desc-count'); var titleProg = document.getElementById('title-progress'); var descProg = document.getElementById('desc-progress'); // Update Text titlePrev.innerText = titleIn || "Your Page Title Will Appear Here"; descPrev.innerText = descIn || "Enter a meta description to see how your snippet will look in Google search results. This should be a concise summary of your page content."; slugPrev.innerText = slugIn || "example-page-url"; // Update Counts var tLen = titleIn.length; var dLen = descIn.length; titleCount.innerText = tLen; descCount.innerText = dLen; // Update Progress Bars var tPerc = Math.min((tLen / 60) * 100, 100); var dPerc = Math.min((dLen / 160) * 100, 100); titleProg.style.width = tPerc + "%"; descProg.style.width = dPerc + "%"; // Color Logic titleProg.style.background = tLen > 60 ? "#d93025" : (tLen > 50 ? "#4caf50" : "#fbbc05"); descProg.style.background = dLen > 160 ? "#d93025" : (dLen > 140 ? "#4caf50" : "#fbbc05″); } function resetSerpTool() { document.getElementById('serp-title-input').value = "; document.getElementById('serp-desc-input').value = "; document.getElementById('serp-url-input').value = "; updateSerpPreview(); }

Leave a Comment