- Best practice: Maximum title is between 466px and 469px (depending which browser & OS)
Code Example here:
https://jsfiddle.net/2at25hjh/
Html:
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<title>SEO Calculate The Title Google Pixel Length</title>
<body>
<input type="text" id="title" size="50" placeholder="Enter your page title here...">
<div id="placeholder"></div>
</body>
Javascript:
$(document).ready(function(){
$("#title").change(function(){
$(this).getGoogleWidth( $(this) );
});
$.fn.getGoogleWidth = function(obj){
var text = obj.val();
var google_css = 'color: #12C;cursor: pointer;display: inline;font-family: arial, sans-serif;font-size: 16px;font-weight: normal;height: auto;line-height: 19px;list-style-image: none;list-style-position: outside;list-style-type: none;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;margin-top: 0px;overflow-x: visible;overflow-y: visible;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;text-align: -webkit-auto;text-decoration: underline;text-overflow: clip;visibility: visible;white-space: nowrap;width: auto;';
google_css = google_css.split(";");
var placeholder;
if( $("#placeholder").size() == 0 ){
placeholder = $('<div id="placeholder"/>');
obj.after(placeholder);
} else {
placeholder = $("#placeholder");
}
// Make new obj
var newObj = $("<span/>");
newObj.html(text);
// add style
for(var i=0; i<google_css.length; i++)
{
var c = google_css[i].split(":");
//If we have values then add
if( c[0]!="" && c[1]!="" ){
newObj.css(c[0],c[1]);
}
}
placeholder.append( newObj );
var width = newObj.width();
placeholder.append(" (width: "+ width +"px) <br />");
};
});
