Contador de caracteres seo en javascript

Entendamos contador de caracteres seo o contador de caracteres online como una caja de texto que va contando los caracteres conforme se van insertando en dicha caja de texto. En este artículo vamos a crear una sencilla aplicación que consistirá en un contador de caracteres seo.

Sí, ya se que hay webs y aplicaciones que hacen el trabajo de contar caracteres para el seo, pero en este blog queremos ir a la raíz y saber cómo se hace con código.

Pasos para crear un contador de caracteres SEO en javascript

Vayamos paso a paso, el procedimiento a seguir para crear un contador de caracteres online para nuestro proyecto SEO es muy sencillo, bastará con un editor de texto y un navegador para comprobar el resultado final de nuestro contador de caracteres:contador de caracteres seo

Los pasos para hacer en javascript nuestro contador de caracteres seo serán los siguientes:

  1. Preparación del entorno en html
  2. Un poco de css para darle algo de estilo.
  3. Código javascript para darle funcionalidad

1 – Preparación del entorno html

Empezaremos con el html, para lo cual vamos a necesitar simplemente una caja de texto en la que poder escribir nuestros caracteres lo cual lo haremos con un <textarea></textarea>, y un indicador que nos diga el número de caracteres que nos quedan para escribir, lo cual podemos hacerlo con un <input>. Es importante que al input le otorguemos un value para partir de un número concreto, en nuestro caso será 150. Para contar caracteres ya utilizaremos el javascript.

2 – Un poco de css para darle algo de estilo

Nosotros en este caso omitiremos esta parte, damos por entendido el css de manera que cada uno puede diseñarlo a su manera como le parezca más atractivo.

3 – Código javascript para dar funcionalidad a nuestro contador de caracteres seo

Explicación del código

Creamos una función que hemos llamado contar, que va a tener la variable max, en la que colocaremos el número máximo de caracteres permitidos. Tras esto lo que haremos será capturar el valor de lo escrito en el textarea, para lo cual utilizamos var cadena = document.getElementById(“textArea”).value; que hemos guardado en la variable cadena.

El siguiente paso es almacenar la longitud de dicha cadena, para lo cual nos creamos otra variable que nos refleje la longitud de la misma: var longitud = cadena.length; 

Finalmente el quid de la cuestión, nos creamos una estructura de control if else, de manera que “Si la longitud de la cadena que hemos guardado en la variable longitud, no supera el máximo, es decir, es menor, capturame el id contador y muestra los caracteres restantes que me faltan, que será la diferencia entre el número de caracteres máximo y la longitud de los que llevamos escrito

if(longitud <= max) { document.getElementById(“contador”).value = max-longitud; }

Si no es así, es decir, si la longitud es mayor que el máximo especificado, el valor del máximo será cero.

Hasta aquí hemos visto una forma de realizar un contador de caracteres SEO con límite de caracteres, pero vamos a suponer que no queremos tener límites.

Copiando este link en el navegador podréis ver el resultado del ejemplo

https://www.nachomiralles.com/ejemplos/javascript/contadordecaracteres/contadordecaracteres.html

Contador de caracteres SEO, ejemplo 2

Vamos a ver un ejemplo sencillísimo que consistirá en una caja de texto donde introduciremos nuestros caracteres de manera que al hacer click fuera de la caja, nos mostrará en un alert el número de caracteres que llevamos escritos.

Dentro de nuestro formulario incluimos el botón, que al ser pulsado invocará al método cuentacaracteres(), el cual contiene todo el código del ejemplo para contar caracteres y palabras en JavaScript.

Turno de javascript,  vamos a capturar lo escrito en caja de texto, para ello utilizaremos el value capturado del id

Con este sencillo código tenemos un pequeño contador de caracteres online para utilizar en cualquiera de nuestros proyectos.

Aplicaciones del contador de caracteres SEO

Aunque la aplicación de un contador de caracteres puede ser muy variada, vamos a destacar algunas:

  • Contador de caracteres para utilizar en posicionamiento SEO: Como es bien sabido las etiquetas title y description son importantes para google, es importante no exceder el número de carcateres que google considera excesivo
  • Contador de caracteres para twitter
  • Para trabajos de word: Quién no ha hecho una redacción para el colegio donde las líneas no podían exceder de x caracteres .

Ejemplos de contador de caracteres seo

Finalmente hemos decidido incluir algunas webs que contienen su propio contador de caracteres seo para poder realizar pruebas:

Finalmente dejamos algunos ejercicios para que podáis ir cogiendo práctica con la sintaxis de javascript, poco a poco iremos añadiendo.

Summary
Contador de caracteres seo en javascript
Artículo
Contador de caracteres seo en javascript
Descripción
En este artículo aprenderás cómo realizar un contador de caracteres seo en javascript de manera sencilla para que puedas utilizarlo en tus proyectos.
Autor
Si te sirve de ayuda, no dudes en compartir!Share on LinkedInShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+

Deja un comentario