SERP Preview & SEO Checker
Characters: 0 / 60
Characters: 0 / 160
Google Search Preview:
function updateSeoPreview() {
var titleInput = document.getElementById('seo-title-input');
var descInput = document.getElementById('seo-desc-input');
var titlePreview = document.getElementById('preview-title');
var descPreview = document.getElementById('preview-desc');
var titleCount = document.getElementById('title-counter');
var descCount = document.getElementById('desc-counter');
var tVal = titleInput.value;
var dVal = descInput.value;
// Update Text
titlePreview.innerText = tVal.length > 0 ? tVal : "Page Title Appearance…";
descPreview.innerText = dVal.length > 0 ? dVal : "Provide a meta description to see how your content might appear in search engine results pages.";
// Counters
titleCount.innerText = "Characters: " + tVal.length + " / 60″;
descCount.innerText = "Characters: " + dVal.length + " / 160″;
// SEO Logic Color Coding
if (tVal.length > 60) {
titleCount.style.color = "#d93025";
} else if (tVal.length > 50) {
titleCount.style.color = "#188038";
} else {
titleCount.style.color = "#666";
}
if (dVal.length > 160) {
descCount.style.color = "#d93025";
} else if (dVal.length > 120) {
descCount.style.color = "#188038";
} else {
descCount.style.color = "#666″;
}
}
function resetSeoTool() {
document.getElementById('seo-title-input').value = ";
document.getElementById('seo-desc-input').value = ";
updateSeoPreview();
}
Page Title Appearance…
yoursite.com › page-url
Provide a meta description to see how your content might appear in search engine results pages.