Skip to content

Instantly share code, notes, and snippets.

@RobinDev

RobinDev/optimize.html

Created May 9, 2020 17:11
Show Gist options
  • Save RobinDev/3ed9d63710795b6785f03dcfcf5e96e4 to your computer and use it in GitHub Desktop.
Save RobinDev/3ed9d63710795b6785f03dcfcf5e96e4 to your computer and use it in GitHub Desktop.
Download ZIP
Optimize your title for you SEO : Wich size ? https://piedweb.com/seo/title
Raw
optimize.html
<html>
<head>
<meta charset="UTF-8">
<title>Optimiser sa title avec une taille parfaite !</title>
</head>
<input type=text placeholder="..." id=title> <div id=titleWidth></div>
<style>
#titleWidth {
font-size: 20px;
margin:0;
padding:0;
border:0;
font-weight: 400;
display:inline-block;
font-family: arial, sans-serif;
line-height: 1.3;
}
</style>
<script>
var input = document.getElementById("title");
var resultWrapper = document.getElementById("titleWidth");
function updateTitleWidth(e) {
resultWrapper.style = '';
resultWrapper.innerHTML = e.target.value;
var titleWidth = resultWrapper.offsetWidth;
console.log(titleWidth);
resultWrapper.innerHTML = titleWidth + "px";
resultWrapper.style = titleWidth > 560 ? 'color: red' : 'color: green';
}
document.getElementById("title").addEventListener('input', updateTitleWidth);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment