SEO SERP Simulator
0 / 60 characters
0 / 160 characters
Google Preview
function updateSeoPreview() {
var titleInput = document.getElementById('seo-input-title');
var descInput = document.getElementById('seo-input-desc');
var titlePreview = document.getElementById('preview-title');
var descPreview = document.getElementById('preview-desc');
var titleCount = document.getElementById('title-count');
var descCount = document.getElementById('desc-count');
var tVal = titleInput.value;
var dVal = descInput.value;
// Update Text
titlePreview.innerText = tVal.length > 0 ? tVal : "Your Page Title Will Appear Here";
descPreview.innerText = dVal.length > 0 ? dVal : "Provide a concise meta description to help users understand your content. This summary typically appears in search engine results.";
// Character Counter Logic
titleCount.innerText = tVal.length + " / 60 characters";
descCount.innerText = dVal.length + " / 160 characters";
// Visual Warnings
if (tVal.length > 60) {
titleCount.style.color = "#e53e3e";
titlePreview.style.color = "#e53e3e";
} else {
titleCount.style.color = "#718096";
titlePreview.style.color = "#1a0dab";
}
if (dVal.length > 160) {
descCount.style.color = "#e53e3e";
} else {
descCount.style.color = "#718096";
}
}
example.com › page
Your Page Title Will Appear Here
Provide a concise meta description to help users understand your content. This summary typically appears in search engine results.