En esta publicación, aprenderá todo lo que necesita saber sobre
Javascript SEO
mejores prácticas como así como elOLS Puede usar para depurar los problemas de JavaScript.
Por qué JavaScript es peligroso para SEO: Ejemplos del mundo real
“Desde rediseñar nuestro sitio web en reaccionar, nuestro tráfico ha caído drásticamente. ¿Qué pasó? “
Esta es solo una de las muchas preguntas que he escuchado o visto en los foros.
AnunciCementContinue Lectura a continuación
Puede reemplazar reaccionar con cualquier otro marco JS; No importa. Cualquiera de ellos puede perjudicar un sitio web si se implementa sin consideración por las implicaciones de SEO.
Aquí hay algunos ejemplos de lo que potencialmente puede salir mal con JavaScript.
Ejemplo 1: La navegación del sitio web no es rastreable
Qué está mal aquí:
Los enlaces en la navegación no están de acuerdo con Web estándares. Como un rEscult, Google no puede verlos ni seguirlos.
AnuncioContinue leyendo a continuación
Por qué está incorrecto:
hace que sea más difícil para Google descubrir las páginas internas. La autoridad dentro del sitio web. no se distribuye correctamente. No hay una indicación clara de las relaciones entre las páginas dentro del sitio web. Como resultado, un sitio web con enlaces que no se puede seguir Googlebot no podrá utilizar la potencia de enlace interno.
.
Ejemplo 2: La búsqueda de imágenes ha disminuido después de la implementación inadecuada de la carga perezosa
¿Qué pasa? Aquí:
Mientras que la carga perezosa es una excelente manera de disminuir el tiempo de carga de la página, también puede ser peligroso si se implementa incorrectamente.
En este ejemplo, la carga perezosa evitó que Google veaLas imágenes en la página.
Por qué está incorrecto:
El contenido “oculto” bajo la carga perezosa podría no ser descubierta por Google (cuando se implementa incorrectamente). Si el contenido no es Descubierto por Google, el contenido no está clasificado.
Como resultado, el tráfico de búsqueda de imágenes puede sufrir mucho. Es especialmente crítico para cualquier negocio que se basa en gran medida en la búsqueda visual.
Ejemplo 3: El sitio web se cambió a reaccionar sin consideración de SEO
¿Qué está mal aquí:
Este es mi ejemplo favorito de un sitio web que he auditado hace un tiempo. El dueño vino a mí después de todo el tráfico acaba de tanque. Es como si involuntariamente intentaban matar su sitio web:
advertisementContinue leyendo por debajo de las URL no eran rastreables. Las imágenes no fueronCrawlable. Las etiquetas de título eran las mismas en todas las páginas del sitio web. No había contenido de texto en las páginas internas.
Si Google no ve ningún contenido en la página. , no clasificará esta página. Si varias páginas se ven iguales a Googlebot, puede elegir solo una de ellas y canonicalizar el resto.
En este ejemplo, las páginas del sitio web se mostraron exactamente iguales a Google, por lo que Los deduplicó y usó la página de inicio como una versión canónica.
Algunas cosas que necesita saber sobre las relaciones de Google-Javascript
cuando se trata de cómo Google trata su contenido, hay algunos Cosas principales que debe saber.
Google no interactúa con su contenido
Googlebot no puede hacer clic en los botones de sus páginas, expandir / colapsar el contenido, etc.
PublicidadContinue Lectura a continuación
Googlebot puede ver solo el contenido disponible en HTML prestado sin ninguna interacción adicional.
Por ejemplo, si tiene una sección de texto ampliable, y su texto está disponible en el código fuente o HTML renderizado. , Google lo indexará.
Por el contrario, si tiene una sección donde el contenido no está disponible inicialmente en el código fuente de la página o DOM y las cargas solo después de que un usuario interactúe con él (por ejemplo, haga clic en un botón) , Google no verá este contenido.
Google no se desplaza Googlebot no se comporta como un usuario habitual en un sitio web; No se desplaza por las páginas. Entonces, si su contenido está "oculto" detrás de una cantidad infinita de pergaminos, Google no lo verá.
Consulte:
Martin Splitt de Google en las páginas de indexación con IScroll Nfinite
.
Google no ve el contenido que se representa solo en un navegador VS en un servidor.
Es por eso que la representación del lado del cliente es una mala idea si lo desea Google para indexar y clasificar su sitio web (y lo desea si necesita tráfico y ventas).
AnunciCementContinue leyendo a continuación
OK, ¿es JavaScript realmente tan malo?
No si se implementa JavaScript en un sitio web usando las mejores prácticas. Y eso es exactamente lo que voy a cubrir a continuación.
Las mejores prácticas de JavaScript SEO
Agregue enlaces de acuerdo con los estándares web
Mientras que los “estándares web” pueden sonar intimidantes, en realidad, solo significa que debe vincular a las páginas internas utilizando el atributo HREF:
Su texto de anclaje relevante
De esta manera, Google puede fácilmenteEncuentre los enlaces y síguelos (a menos que agregue un atributo nofollow a ellos, pero esa es una historia diferente).
No use las siguientes técnicas para agregar enlaces internos en su sitio web:
Window.Location.href = ‘/ Page-URL’ # Page-URL
Por cierto, la última opción aún se puede usar con éxito en una página si desea llevar a las personas a una parte específica de esta página.
Pero Google no indexará todas las variaciones individuales de su URL con “#” agregado a él.
AnunciCementContinue Reading a continuación Ver:
Google SEO 101: Do y Don ‘ts de enlaces y javascript
. Agregue imágenes de acuerdo con las normas web
Como con los enlaces internos, el uso de la imagen también debe seguir los estándares web para que Googlebot pueda descubrir e indexar fácilmente imágenes . para ser discosobrecado, una imagen debe estar vinculada desde la etiqueta HTML ‘SRC’:
Muchas bibliotecas de carga perezosa basadas en JavaScript utilizan un atributo ‘Data-SRC’ para almacenar la imagen real URL, y reemplazan la etiqueta ‘SRC’ con una imagen de marcador de posición o GIF que se carga rápido. Por ejemplo:
Tiendas Información adicional sobre la imagen.
Ayuda con la optimización de la velocidad de página y funciona bien si se implementa correctamente. Si desea que Google pueda recoger su imagen real en lugar del marcador de posición, cambie el marcador de posición. Imagen a la imagen de destino para que
muestre la ruta a la imagen de destino.
Durante el reciente
Google Search Central Live Event
, hice un estudio de caso en vivo de cómo depurar problemas con imágenes de carga perezosa con una biblioteca de JavaScript.
advertisementcontinue Lectura a continuación
Alternativamente, puede eliminar JavaScript utilizando
Carga perezosa nativa.
que ahora es compatible con muchos navegadores. Use la representación del lado del servidor
Si desea que Google lea y clasifique su contenido, debe asegurarse de que este contenido esté disponible en el servidor, no solo En el navegador de un usuario. Alternativamente, puede usar
representación dinámica
que implica la detección de motores de búsqueda y atenderlos en las páginas HTML estáticas, mientras que los usuarios se les atiende el contenido HTML + JavaScript en sus navegadores. Asegúrese de que HTML renderizado tenga toda la información principal que desea que Google lea
, debe asegurarse de que HTML renderizado muestre la información correcta, como:
Copie en la página.images.canonical TAG.TITLE & META DescripciónTECI.META Robots Tag.Structured Data.Hreflang.Ayuda Otras etiquetas importantes.
Herramientas para depurar la implementación de JavaScript para SEO
Se acabaron los días en que solo necesitarías mirar el código fuente de una página para verificar si incluye el contenido correcto.
AnunciCementContinue leyendo a continuación
Javascript lo ha hecho más complicado, ya que puede agregarlo, Retirar o cambiar diferentes elementos. Mirar el código fuente no es suficiente; Debe verificar el HTML rendido en su lugar.
Paso 1: Marque cuánto se basa en JavaScript para servir al contenido
Lo primero que generalmente hago cuando veo un sitio web que confía En JavaScript es verificar cuánto
depende de ella. La forma más fácil de hacer esto es deshabilitar JS en su Naveguer.
Utilizo la
extensión del cromo del desarrollador web
para eso. Simplemente abra la configuración, haga clic en
Desactivar JavaScript y volver a cargar la página:
Una vez que lo haga, verá cómo se vería una página sin ningún JS.
AnunciCementContinue leyendo a continuación en El ejemplo anterior, puede ver que ningún contenido está disponible sin JavaScript.
Tenga en cuenta que este método le da una descripción general de la cantidad de Javascript influye en la entrega de contenido. No le indica si Google lo indexará o no.
Incluso si ve una página en blanco como la anterior, no significa que nada esté funcionando. Simplemente significa que un sitio web se basa en gran medida en JavaScript. Es por eso que necesita probar el HTML rendido con las herramientas que le mostraré en la próxima STEP.
Paso 2: Compruebe si Googlebot se le atiende el contenido y las etiquetas correctas
Herramienta de prueba de Google Friendly Friendly Prueba amigable para móvil de Google. La herramienta es una de las mejores y más confiables herramientas cuando se trata de verificar HTML Renderizado por Mobile porque obtiene información a la derecha de Google.
Lo que necesita hacer: Cargue el
Móvil: Herramienta
.Compruebe su URL.Look en la información en la pestaña HTML:
Ahí es donde entra el lado técnico de SEO, como usted Tendré que verificar el código para asegurarse de que tiene la información correcta.
AnunciCementContinue Lectura a continuación Nota: Puede usar la herramienta de prueba de resultados enriquecido
para hacer estos cheques, también:
Herramienta de inspección de URL en la búsqueda de Google ConsolE
La herramienta de inspección de URL también le brinda acceso al HTML en bruto de su página que utiliza GoogleBot para evaluar su contenido de página:
La herramienta de prueba de prueba para móvil VS Herramienta de inspección de URL
OK, ¿cuál es la diferencia entre estas herramientas y que se prefiere?
advertisementcontinue leyendo a continuación La respuesta corta es que no hay diferencia en la salida, ya que la herramienta de inspección de la prueba y la URL fácil de usar, use la misma tecnología central. Hay algunas diferencias en otros aspectos, aunque: para Use la herramienta de inspección de URL, debe tener acceso a la consola de búsqueda de Google del sitio web que está comprobando. Si no tiene dicho acceso, use la prueba amigable para dispositivos móviles (o prueba de resultados enriquecidos). La URL inspeccionaLa herramienta ION puede mostrarle dos versiones de la misma página: la última versión rastreada y la versión en vivo. Es útil si algo se acaba de romper con JavaScript y puedes comparar la nueva implementación a la anterior.
La prueba de las pruebas de amigable para dispositivos móviles y los resultados enriquecidos le brindan la salida para su versión actual de la página en vivo.
Otras herramientas de depuración Vea la extensión de cromo de la fuente renderizada AMO Esta extensión A medida que muestra la diferencia entre el código fuente y el HTML rendido. . Le brinda una descripción general de lo que cambia Javascript en la página: Nota: Asegúrese de verificar Mobile Renderizado HTML VS Desktop. AnunciCementContinue Lectura a continuación Para hacer esto, debe cargar primero una vista móvilEn la herramienta de inspección de cromo y luego use la extensión de origen renderizada de la vista: Revisión de la representación de JavaScript Creo que esta es la herramienta de depuración JS más fácil de usar, ya que ni siquiera necesita verificar el código. Comprueba los elementos principales en el código fuente de la página para usted y los compara con el Los mismos elementos en el HTML renderizado (nuevamente, asegúrese de verificar la versión móvil): En este ejemplo, veo que JavaScript Cambia los elementos principales en la página, como la etiqueta de título, canónicos, enlaces internos. AnunciCementContinue Lectura a continuación No siempre es algo malo, sino como un profesional de SEO, deberá investigar si estos cambios dañan el Página que está comprobando o no. También puede usar la extensión de SEO PRO para ver la etiqueta del título y otras etiquetas importantes que se encuentran en HTML renderizado, no el código fuente: Prefiero usar una combinación de las herramientas mencionadas anteriormente para investigar los problemas de SEO de JavaScript o garantizar que se implementen las mejores prácticas. AnunciCementContinue leyendo a continuación Más recursos: Conceptos básicos de JavaScript para profesionales de SEO Una introducción práctica a JavaScript moderno para SEOS El Martin Splitt de Google explica por qué Infinite Scroll causa problemas de SEO Créditos de la imagen todas las capturas de pantalla tomadas por el autor, marzo de 2021
Tiendas Información adicional sobre la imagen. 
, debe asegurarse de que HTML renderizado muestre la información correcta, como: 
y volver a cargar la página: 
en El ejemplo anterior, puede ver que ningún contenido está disponible sin JavaScript. 
