Categories
SEO

JavaScript SEO Best Prácticas y herramientas de depuración

JavaScript es una excelente opción para hacer que las páginas del sitio web sean más interactivas y menos aburridas.

, pero también es una buena manera de matar el SEO de un sitio web si Implementado incorrectamente.

Aquí hay una verdad simple: incluso las mejores cosas del mundo necesitan una forma de ser encontrada.

No importa cuán grande sea su sitio web, si Google no puede indexarlo debido. a

Temas de JavaScript , está perdiendo las oportunidades de tráfico.

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

Website is not crawlable: JS SEO errors

Website is not crawlable: JS SEO errors

“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

Image Search Has Decreased After Improper Lazy Load Implementation

Image Search Has Decreased After Improper Lazy Load Implementation

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

The Website Was Switched to React With No Consideration of SEO

The Website Was Switched to React With No Consideration of SEO

¿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.

Por qué está incorrecto:

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:

You need to make sure that rendered HTML shows the right information. 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. You need to make sure that rendered HTML shows the right information. 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

Open settings, click Disable JavaScriptand reload the page., 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. Open settings, click Disable JavaScriptand reload the page.

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 Google's Mobile-friendly Test Tool HTML check y volver a cargar la página:

Google's Mobile-friendly Test Tool HTML check

Una vez que lo haga, verá cómo se vería una página sin ningún JS.

AnunciCementContinue leyendo a continuación Rich Results Test tool 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. Rich Results Test tool

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

URL Inspection Tool in Google Search Console

Herramienta de prueba de Google Friendly Friendly URL Inspection Tool in Google Search Console 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:

An overview of what JavaScript changes on the page

An overview of what JavaScript changes on the page

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: Load a mobile view in the Chrome inspection tool and then use the View Rendered Source extension

Load a mobile view in the Chrome inspection tool and then use the View Rendered Source extension

JavaScript Rendering Check

JavaScript Rendering Check

Use the SEO Pro extension to see the Title tag and other important tags that are found in rendered HTML.

Use the SEO Pro extension to see the Title tag and other important tags that are found in rendered HTML.

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

Leave a Reply

Your email address will not be published. Required fields are marked *