SEO Snippet Optimizer
0 / 60 characters
0 / 160 characters
Example Page Title
https://yourdomain.com/page-url
Enter a description to see how it might look in search results. This is a simulation of a Google desktop search result snippet.
function updateSeoCounts() {
var title = document.getElementById('seoTitle').value;
var desc = document.getElementById('seoDesc').value;
var titleLen = title.length;
var descLen = desc.length;
document.getElementById('titleCount').innerText = titleLen + ' / 60 characters';
document.getElementById('descCount').innerText = descLen + ' / 160 characters';
document.getElementById('previewTitle').innerText = titleLen > 0 ? title : 'Example Page Title';
document.getElementById('previewDesc').innerText = descLen > 0 ? desc : 'Enter a description to see how it might look in search results.';
var titlePerc = Math.min((titleLen / 60) * 100, 100);
var titleBar = document.getElementById('titleBar');
titleBar.style.width = titlePerc + '%';
if (titleLen > 60) {
titleBar.style.backgroundColor = '#f56565';
document.getElementById('titleStatus').innerText = 'Too Long';
document.getElementById('titleStatus').style.color = '#f56565';
} else if (titleLen > 40) {
titleBar.style.backgroundColor = '#48bb78';
document.getElementById('titleStatus').innerText = 'Good';
document.getElementById('titleStatus').style.color = '#48bb78';
} else {
titleBar.style.backgroundColor = '#ed8936';
document.getElementById('titleStatus').innerText = 'Too Short';
document.getElementById('titleStatus').style.color = '#ed8936';
}
var descPerc = Math.min((descLen / 160) * 100, 100);
var descBar = document.getElementById('descBar');
descBar.style.width = descPerc + '%';
if (descLen > 160) {
descBar.style.backgroundColor = '#f56565';
document.getElementById('descStatus').innerText = 'Too Long';
document.getElementById('descStatus').style.color = '#f56565';
} else if (descLen > 100) {
descBar.style.backgroundColor = '#48bb78';
document.getElementById('descStatus').innerText = 'Good';
document.getElementById('descStatus').style.color = '#48bb78';
} else {
descBar.style.backgroundColor = '#ed8936';
document.getElementById('descStatus').innerText = 'Too Short';
document.getElementById('descStatus').style.color = '#ed8936';
}
}
function clearSeoFields() {
document.getElementById('seoTitle').value = ";
document.getElementById('seoDesc').value = ";
updateSeoCounts();
}