SEO Meta Tag Preview Tool
Characters: 0
Characters: 0
https://yourwebsite.com/example-page
Your SEO Title Appears Here
Your meta description will appear here as it would in Google search results. Start typing to see the preview update in real-time.
function updateSeoPreview() {
var title = document.getElementById('seoTitleInput').value;
var desc = document.getElementById('seoDescInput').value;
var titleLen = title.length;
var descLen = desc.length;
document.getElementById('previewTitle').innerText = title || "Your SEO Title Appears Here";
document.getElementById('previewDesc').innerText = desc || "Your meta description will appear here as it would in Google search results.";
document.getElementById('titleCounter').innerText = "Characters: " + titleLen;
document.getElementById('descCounter').innerText = "Characters: " + descLen;
// Title logic
var titleBar = document.getElementById('titleBar');
var titleStatus = document.getElementById('titleStatus');
var titlePerc = Math.min((titleLen / 60) * 100, 100);
titleBar.style.width = titlePerc + "%";
if (titleLen === 0) {
titleBar.style.backgroundColor = "#cbd5e1";
titleStatus.innerText = "";
} else if (titleLen < 50) {
titleBar.style.backgroundColor = "#f59e0b";
titleStatus.innerText = "Too Short";
titleStatus.style.color = "#f59e0b";
} else if (titleLen <= 60) {
titleBar.style.backgroundColor = "#10b981";
titleStatus.innerText = "Perfect";
titleStatus.style.color = "#10b981";
} else {
titleBar.style.backgroundColor = "#ef4444";
titleStatus.innerText = "Too Long";
titleStatus.style.color = "#ef4444";
}
// Description logic
var descBar = document.getElementById('descBar');
var descStatus = document.getElementById('descStatus');
var descPerc = Math.min((descLen / 160) * 100, 100);
descBar.style.width = descPerc + "%";
if (descLen === 0) {
descBar.style.backgroundColor = "#cbd5e1";
descStatus.innerText = "";
} else if (descLen < 120) {
descBar.style.backgroundColor = "#f59e0b";
descStatus.innerText = "Too Short";
descStatus.style.color = "#f59e0b";
} else if (descLen <= 160) {
descBar.style.backgroundColor = "#10b981";
descStatus.innerText = "Perfect";
descStatus.style.color = "#10b981";
} else {
descBar.style.backgroundColor = "#ef4444";
descStatus.innerText = "Too Long";
descStatus.style.color = "#ef4444";
}
}
function resetSeoFields() {
document.getElementById('seoTitleInput').value = "";
document.getElementById('seoDescInput').value = "";
updateSeoPreview();
}