Si alguna vez has visitado un sitio web impresionante e interactivo que te hace querer lanzar confeti al aire y compartirlo con tus amigos al mismo tiempo, es muy probable que haya sido creado con JavaScript.
De hecho, cualquier sitio que utilice Google Analytics (y otras herramientas de seguimiento) o presente elementos interactivos o aplicaciones web. también utiliza JavaScript, un lenguaje de codificación casi omnipresente. Las posibilidades son ilimitadas.
¿La baja? Si se hace mal, puede arruinar tu SEO. Entonces, ¿cómo puedes utilizar JavaScript SEO a tu favor y mejorar el rendimiento de tu búsqueda? Vamos a sumergirnos.
Cómo hacer que su JavaScript sea compatible con SEO
Mejores prácticas de SEO de JavaScript
¿Qué es JavaScript SEO?
Antes de definir JavaScript SEO, hablemos de los casos de uso más comunes de JavaScript. Además del desarrollo de sitios web, JavaScript es una excelente opción para juegos, programas de computadora y más.
En el desarrollo web, se utiliza principalmente para un sitio web interactivo, aplicaciones web y móviles y contenido dinámico.
Una vez que sepa cómo se utiliza el lenguaje de programación, JavaScript SEO consiste simplemente en garantizar que los motores de búsqueda puedan encontrar fácilmente cualquier sitio creado con JavaScript.
Si su comprensión del SEO se limita principalmente a la optimización de palabras clave, no está ni mucho menos solo. En última instancia, existen tres tipos de SEO: dentro de la página, fuera de la página y técnico.
El SEO en la página se centra en el contenido de su sitio (optimización de palabras clave). El SEO fuera de la página se ocupa de la reputación, la popularidad y la utilidad de su sitio, y está principalmente fuera de su control.
JavaScript SEO se incluye en la tercera categoría: SEO técnico — que se centra en garantizar que su sitio se pueda buscar, indexar y rastrear para que las personas busquen la información que usted ofrece. puede encontrarlo.
¿Quieres aprender más sobre SEO On Page y Técnico? ¡Obtén nuestro tutorial gratuito aquí!
Cómo hacer que su JavaScript sea compatible con SEO
La mayor parte del JavaScript utilizado en sitios web, incluyendo el tuyo y mina, no tendrá un impacto significativo en el SEO. El mayor desafío surge cuando su desarrollador usa JavaScript para crear secciones con mucha información importante o páginas completas.
La razón es simple: JavaScript puede dificultar que los motores de búsqueda lean su sitio.
1. Utilice el renderizado dinámico (con moderación) como solución alternativa.
Uno de los problemas más importantes con la indexación y el SEO de JavaScript se relaciona con cómo se representa su código, o cómo Google indexa (o no indexa) su sitio.
Eso significa que debe comprender cómo se puede representar su sitio: representación del lado del servidor, representación del lado del cliente y representación dinámica.
Representación del lado del servidor (SSR)
Qué es: Cuando JavaScript se procesa en el servidor antes de aparecer en su navegador o en los rastreadores de Google.
Cómo afecta al SEO: Reduce el tiempo de carga del contenido más importante de su página, lo que aumenta el rendimiento de SEO.
La desventaja de la RSS: SSR puede aumentar drásticamente el tiempo requerido si necesita entradas del usuario.
Representación del lado del cliente (CSR)
Qué es: CSR es cuando JavaScript se procesa en su navegador con solo una versión básica de HTML y el resto del contenido se entrega a través de JavaScript.
Cómo afecta al SEO: Reduce la indexabilidad porque la mayor parte del contenido se entrega a través de JavaScript.
La desventaja de la RSE: Si bien el procesamiento es más rápido, el rendimiento de la búsqueda es mucho menor, por lo que deberá concentrarse en brindarle a Google la mayor cantidad de información posible para que pueda indexar su contenido de manera adecuada.
Consejo de expertos: Cristina Azarenko, un destacado experto técnico en SEO, dice: “El uso de renderizado del lado del cliente significa que el robot de Google no puede acceder a ningún contenido.
Un enfoque mucho mejor y más exitoso es utilizar la representación del lado del servidor, de modo que el robot de Google también proporcione el contenido desde el servidor”.
Representación dinámica
Qué es: La representación dinámica identifica los robots que no pueden representar JavaScript y ofrece una versión SSR.
Cómo afecta al SEO: permite a los bots indexar una versión de su contenido, lo que lo hace más fácil de encontrar.
La desventaja del renderizado dinámico: En última instancia, el renderizado dinámico es una solución alternativa que, según Google, no debería ser una solución a largo plazo porque "crea complejidades y requisitos de recursos adicionales".
La representación dinámica puede ser utilizada por sitios que experimentan cambios rápidos de contenido o tienen contenido que utiliza JavaScript que es incompatible con los navegadores. No es la mejor opción para la mayoría de los sitios y no es necesario utilizarlo en todas las páginas del sitio.
2. Utilice metacontenido descriptivo y único.
Asegúrese de que Google pueda descubrir fácilmente qué incluye cada página. metacontenido, títulos de páginas y meta descripciones. Esto incluye
- Etiquetas de título.
- Meta descripciones.
- Texto alternativo y atributos para imágenes.
Agregar metacontenido le permite a Google descubrir de qué se trata su sitio o página, lo que hace que la indexación de su sitio y sus páginas sea más sencilla y precisa.
3. Implementar carga diferida.
Carga Diferida acelera la carga de la página al ofrecer contenido solo cuando es necesario o está a punto de leerse. Es particularmente útil para cargar imágenes grandes o contenido que requiere muchos recursos.
Sus imágenes y contenido y elementos con muchos recursos no se cargarán con el resto del contenido de la parte superior de la página, pero a medida que los usuarios lean el contenido, se cargarán.
Y si su usuario no lee hasta el final de la página, no cargará imágenes innecesarias.
La desventaja es que si alguien se desplaza rápidamente, es posible que termine esperando a que se carguen las imágenes. Es más, puede afectar la forma en que Google ve su página web. Entonces, si sigues esta práctica, hazlo con cuidado.
4. Asegúrese de que su JavaScript sea compatible con Google.
Entra en tu Búsqueda Consola y pegue la URL de su página específica en el Inspección de URL herramienta para ver cómo lo representa Google.
¿Quieres otra herramienta para probar? También puede utilizar la prueba de resultados enriquecidos de Google y la prueba de compatibilidad con dispositivos móviles de Google para ver el HTML renderizado.
Consejo de expertos: david zimmermann of Reliable Acorn recomienda utilizar herramientas como Google Mobile Friendly Test porque le muestran lo que ve la araña de Google.
Zimmerman agrega que el hecho de que "su desarrollador 'lea en algún lugar' que Google puede leer JavaScript no significa que entienda cómo escribir un sitio web JavaScript compatible con SEO".
¿El resultado final aquí? Es una buena idea estar al tanto de las cosas..
5. Corrija cualquier error relacionado con la búsqueda.
Puede obtener una vista previa de la página probada una vez que confirme que Google la ha indexado. Google solo muestra el contenido que puede ver, por lo que si la página probada no aparece correctamente, Google no podrá indexarla.
Lo mejor de todo es que puede descubrir qué está sucediendo y por qué y tomar medidas para resolver el problema.
6. Arreglar y volver a probar.
Una vez que haya solucionado los errores relacionados con la representación y la compatibilidad de JavaScript, puede utilizar la herramienta de inspección de URL para asegurarse de que su JavaScript funcione correctamente en modo en vivo y solicitar que Google indexe el código actualizado.
Mejores prácticas de SEO de JavaScript
Me reuní con varios expertos en SEO de JavaScript para conocer sus mejores prácticas y las abordaremos en un momento. Sin embargo, ante todo, asegúrese de estar operando con la información más reciente.
1. Obtenga una introducción a JavaScript SEO.
Se dedican muchas cosas al SEO de JavaScript y, dado que los navegadores se actualizan periódicamente, si no ha realizado SEO de JavaScript por un tiempo, es posible que necesite una introducción.
Si necesita revisar lo que buscan los motores de búsqueda cuando se trata de JavaScript u obtener instrucciones detalladas sobre qué corregir (y cómo), Google desglosa todo lo que necesita saber en Central de búsqueda de Google.
Es el arma secreta de cualquiera que tenga un sitio web porque le dice exactamente cómo hacer que su sitio web sea compatible con SEO e incluye una sección completa dedicada a JavaScript.
2. Coloque todo el contenido importante en el código fuente.
¿Recuerdas que mencioné que Google sólo puede indexar lo que puede ver? Para asegurarse de que su sitio sea indexable, siga AzarenkoLos consejos y "asegúrese de que los problemas de JavaScript no interrumpan sus esfuerzos de SEO".
Ella recomienda “asegurarse de que el contenido más importante esté disponible en el código fuente (es decir, antes de ejecutar JavaScript). Esto permite a Google "leer" su información sin depender de JavaScript.
Incluya todos los metadatos (título, metarobots, etiquetas canónicas, etc.), texto del cuerpo y datos estructurados.
3. Pruebe periódicamente su sitio para comprobar la compatibilidad con JavaScript SEO.
Incluso pequeñas modificaciones en su código o contenido JavaScript pueden cambiar la forma en que Google ve su sitio. Y esto no se limita a su JavaScript: el uso de herramientas como Google Search Console para monitorear el rendimiento de la página puede ayudar a garantizar que su sitio permanezca en la parte superior de los resultados de búsqueda.
Consejo de expertos: Tristán Harris recomienda utilizar herramientas como Google PageSpeed Insights y Lighthouse para probar el rendimiento de SEO e identificar áreas de mejora.
Mejor práctica n.° 4. Manténgase al tanto de las pautas de Google.
Google actualiza periódicamente sus algoritmos y, por tanto, sus mejores prácticas. Teniendo esto en cuenta, es una buena idea prestar atención a la página de Google para obtener actualizaciones.
Zimmerman recomienda utilizar un monitor de página como Hexomatic para mantenerse al día Directrices de Google para JavaScript SEO, "Si el monitor de página me muestra que Google ha realizado una actualización, lo reviso para ver si debería cambiar mis procesos de alguna manera".
Mejor práctica n.° 5. Siga las mejores prácticas de SEO en la página.
Claro, aquí me estoy centrando específicamente en JavaScript SEO, pero el principios clave del SEO siguen aplicando. Si bien JavaScript puede reducir la cantidad de contenido que ven los motores de búsqueda, sigue siendo esencial garantizar que su contenido esté optimizado para las mejores prácticas de SEO.
Consejo experto: Dave Ver Más recomienda deshabilitar JavaScript.
“Es la forma más rápida de identificar una serie de problemas más importantes. Cuando visitas páginas de tu sitio, puedes encontrar señales de alerta, como contenido faltante porque no se muestra antes de que se cargue la página y si algunos enlaces no funcionan”. Ver Meer dice.
Probándolo
Para probar mis nuevas habilidades en un entorno relativamente (léase: completamente) seguro, acudí a mi ChatGPT, a veces amigo y a veces némesis.
Mi mensaje: “Quiero crear un formulario de código Javascript para recopilar clientes potenciales. Utilice marcadores de posición divertidos para el nombre, el correo electrónico, el presupuesto y el mensaje”.
Respuesta de GPT: “¡Por supuesto! A continuación se muestra un ejemplo sencillo de un formulario JavaScript que recopila clientes potenciales. Este formulario incluye campos para nombre, correo electrónico, presupuesto y un mensaje. Agregué marcadores de posición divertidos, como lo solicitaste.
El formulario también incluye una validación básica para garantizar que los campos de nombre, correo electrónico y mensaje no queden vacíos”.
Aquí está el HTML para el formulario.
¿En cuanto a los divertidos marcadores de posición? Bueno, GPT pensó que Iron Man sería divertido. Así es como se ve el código completo en HTML:
Y aquí está el JavaScript:
Por supuesto, ChatGPT tenía un descargo de responsabilidad:
Ahora viene la parte divertida. Veamos cómo ChatGPT optimiza este JavaScript para SEO.
Como era de esperar, la versión HTML del código era considerablemente más robusta. Lo he dividido en dos secciones para que puedas comparar las diferencias. (Los explicaré a continuación).
El cuerpo se ve bastante similar, y la mayoría de los cambios están relacionados con el contenido hipotético de la página de generación de leads.
Ahora, veamos el JavaScript actualizado.
¿Te resulta familiar? Comparemos el código uno al lado del otro.
Son idénticos. ¿Sorprendido?
Este es el por qué.
Mi nuevo código JavaScript es responsable de la funcionalidad de mi nuevo formulario de generación de leads.
Y sólo la funcionalidad.
No es responsable de la estructura o contenido de la “página”. Ahí es donde entra en juego el HTML. Y ahí es también donde se aplican las recomendaciones para la optimización SEO.
Cómo utilicé ChatGPT para optimizar el SEO de JavaScript
¿Se pregunta acerca de los cambios específicos que ChatGPT recomienda para optimizar el SEO de JavaScript?
cambiar 1 Agregue un título de página y una meta descripción.
cambiar 2 Utilice etiquetas de encabezado.
cambiar 3 Etiquetar campos de formulario para SEO y accesibilidad.
cambiar 4 Añade texto alternativo a las imágenes.
cambiar 5 Utilice un diseño responsivo para que la página sea compatible con dispositivos móviles.
cambiar 6 Agregue marcado de esquema para ayudar a los motores de búsqueda a comprender el contenido de su página.
El resultado final del SEO con JavaScript
Decidir utilizar JavaScript en su sitio web requiere comprender las implicaciones para el SEO y planificar en consecuencia para garantizar que su sitio siga siendo compatible con SEO, o que los motores de búsqueda puedan encontrarlo, rastrearlo e indexarlo.
Esto no pretende advertirle sobre JavaScript. Por el contrario, para aprovechar al máximo sus funciones interactivas, es necesario encontrar y contratar desarrolladores que comprendan JavaScript y SEO y puedan ayudarlo a destacar mientras lo encuentran.
¿La mayor conclusión? Lo más importante que puede hacer para que su JavaScript sea compatible con SEO es asegurarse de que se represente correctamente y que el HTML de su página esté estructurado para proporcionar la mayor cantidad de información posible sobre el contenido de la página.
Quizás sea sorprendente (y quizás no) que las reglas del SEO en la página se apliquen al SEO de JavaScript: la clave está en garantizar que los motores de búsqueda puedan "ver" su contenido.
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
- PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
- PlatoESG. Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
- PlatoSalud. Inteligencia en Biotecnología y Ensayos Clínicos. Accede Aquí.
- Fuente: https://blog.hubspot.com/marketing/javascript-seo
