Categories
SEO TÉCNICO

La Guía definitiva de Javascript SEO (2021 Edición)

La web se encuentra en una edad de oro del desarrollo de front-end, y JavaScript y Technical SEO están experimentando un renacimiento. Como especialista técnico de SEO y un entusiasta de WEB DEV en una agencia de marketing digital galardonada, me gustaría compartir mi perspectiva sobre el moderno SEO de Javascript en función de las mejores prácticas de la industria y la experiencia de mi propia agencia. En este artículo, aprenderá cómo optimizar su sitio web de JS-Powered para buscar en 2021.

¿Qué es el SEO de Javascript?

Javascript SEO es la disciplina del SEO técnico que se centra en la optimización Sitios web construidos con JavaScript para visibilidad por motores de búsqueda. Se refiere principalmente a:

optimizando el contenido inyectado a través de JavaScript para rastrear, representación e indexación por los motores de búsqueda. Proporción, diagnosticación y solución de problemas.Los problemas de rey para sitios web y spas (aplicaciones de una sola página) construidas en los marcos de JavaScript, como reaccionar, angular y VUE.ensingning que las páginas web son detectables por los motores de búsqueda a través de la vinculación de las mejores prácticas. Tiempos de carga de la página para páginas que analizan y ejecutan el código JS Para una experiencia de usuario aerodinámica (UX).

¿Es JavaScript bueno o malo para SEO?

¡Depende! JavaScript es esencial para la web moderna y hace que los sitios web de edificios sean escalables y más fáciles de mantener. Sin embargo, ciertas implementaciones de JavaScript pueden ser perjudiciales para buscar la visibilidad del motor.

¿Cómo afecta JavaScript a SEO?

JavaScript puede afectar Los siguientes elementos y factores de clasificación en la página que son importantes para SEO:

PRINCIPIANDO CONTENTLINKSLAY CARGED.GE Cargar TimesMeta Datos

¿Qué son los sitios web de JavaScript?

Cuando hablamos de sitios que se basan en JavaScript, no nos referimos a simplemente agregar una capa de la interactividad de JS a los documentos HTML (por ejemplo, , al agregar animaciones JS a una página web estática). En este caso, los sitios web con alimentación de JavaScript se refieren cuando el núcleo o el contenido primario se inyectan en la DOM a través de JavaScript.

Modelo de shell de la aplicación.

Esta plantilla se llama una concha de la aplicación y es la base para aplicaciones web progresivas (PWA). Exploraremos esto siguiente.

Cómo verificar si se construye un sitio con JavaScript

Puede verificar rápidamente si se construye un sitio web en un marco de JavaScript utilizando una herramienta de búsqueda de tecnología tales como

construido o

WAPpalyzer

. También puede “inspeccionar el elemento” o “Ver la fuente” en el navegador para verificar el código JS. Los marcos populares de JavaScript que puede encontrar incluyen:

Angular por Google

Reaccionando

por Facebook

VUE

por

Evan

JavaScript SEO para contenido principal

Aquí hay un ejemplo: las aplicaciones web modernas se están construyendo en los marcos de JavaScript, como angular, reaccionar y Vue. Javascript Frameworks permite a los desarrolladores construir y ampliar rápidamente aplicaciones web interactivas. Eche un vistazo a la plantilla de proyecto predeterminada para Angular.js, un marco popular producido por Google.

Cuando se ve en el navegador, esto se ve como una página web típica. Podemos ver texto, imágenes y enlaces. Sin embargo, vamos a bucear más profundamente y echar un vistazo debajo de la capucha al código:

Ahora podemos ver que este documento HTML está casi completamente desprovisto de cualquier contenido. Solo hay la raíz de la aplicación y algunas etiquetas de script en el cuerpo de la página. Esto se debe a que el contenido principal de esta aplicación de una sola página se inyecta dinámicamente en el DOM a través de JavaScript. En otras palabras, esta aplicación depende de JS para cargar el contenido de la clave en la página!

Posibles problemas de SEO: ¿Algún contenido principal que se representa a los usuarios, pero para no buscar los bots del motor podría ser seriamente problemático? Si los motores de búsqueda no pueden rastrear completamente todo su contenido, entonces su sitio web podría ser pasado por alto a favor de los competidores. Discutiremos esto con más detalle más tarde.

JavaScript SEO para los enlaces internos Además de inyectar contenido dinámicamente en el DOM, Javascript también puede unFregona la capacidad de arrastre de los enlaces. Google descubre nuevas páginas al rastrear enlaces que se encuentra en las páginas.

Como mejor práctica, Google recomienda específicamente vinculando las páginas usando etiquetas de anclaje HTML con atributos HREF, así como incluyendo textos de anclaje descriptivos para los hipervínculos:

Sin embargo, Google también recomienda que los desarrolladores no se basen en otros elementos HTML, como los manipuladores de eventos DIV o SPAN, o JS para los enlaces. Estos se denominan enlaces “pseudo”, y normalmente no se arrastran, según

Directrices oficiales de Google

:

a pesar de estas directrices, un independiente,

El estudio de terceros ha sugerido que Googlebot puede acceder a los enlaces de JavaScript. No obstante, en mi experiencia, he encontrado que es una mejor practicación.CE para mantener los enlaces como elementos HTML estáticos.

Posibles problemas de SEO: Si los motores de búsqueda no pueden arrastrarse y seguir los enlaces a las páginas de su clave, entonces sus páginas podrían faltarse en los valiosos enlaces internos que apuntan a ellos. . Los enlaces internos ayudan a los motores de búsqueda, rastrear su sitio web de manera más eficiente y resaltar las páginas más importantes. El peor de los casos es que si sus enlaces internos se implementan incorrectamente, entonces Google puede tener dificultades para descubrir sus nuevas páginas (fuera del Mapa del sitio XML).

Javascript SEO para imágenes de carga perezosa
JavaScript también puede afectar la capacidad de rastro de las imágenes que se cargan con perezosos. Aquí hay un ejemplo básico. Este fragmento de código es para imágenes de carga perezosa en el DOM a través de JavaScript:

Googlebot admite Lazy-lOading, pero no “desplazarse” como un usuario humano lo haría cuando visite sus páginas web. En su lugar, Googlebot simplemente cambia el tamaño de su ventana virtual para ser más larga cuando se arrastra el contenido web. Por lo tanto, el oyente de evento “Scroll” nunca se activa y el crawler nunca representa el contenido.

Aquí hay un ejemplo de más código de SEO:

Este código muestra que la API de IntersectionObserver activa una devolución de llamada cuando se hace visible cualquier elemento observado. Es más flexible y robusto que el oyente de eventos en Scroll y está compatible con la moderna Googlebot. Este código funciona debido a cómo Googlebot cambia de tamaño de su ventana de visita para “ver” su contenido (ver más abajo).

También puede usar la carga perezosa nativa en el navegador. Esto es apoyado por Google Chrome., pero tenga en cuenta que sigue siendo una característica experimental. El peor de los casos, simplemente se ignorará por GoogleBot, y todas las imágenes se cargarán de todos modos:

Carga de carga lenta nativa En Google Chrome.

Problemas potenciales de SEO: Similar al contenido básico que no se está cargando, es importante asegurarse de que Google pueda “ver” todo el contenido en una página, incluyendo Imágenes. Por ejemplo, en un sitio de comercio electrónico con múltiples filas de listados de productos, las imágenes de carga perezosa pueden proporcionar una experiencia de usuario más rápida para los usuarios y los bots!

JavaScript SEO para la velocidad de la página

JavaScript También puede afectar los tiempos de carga de la página, que es un factor de clasificación oficial en el primer índice móvil de Google. Esto significa que una página lenta podría dañar las clasificaciones en Searcap. ¿Cómo podemos ayudar a los desarrolladores mitigar esto?

Minificando a JavascriptDeferring JS no crítico hasta que se presenta el contenido principal en el Dominlining Critical JSServing JS en cargas de seguridad más pequeñas

Posibles problemas de SEO: un sitio web lento crea una experiencia de usuario deficiente para todos , incluso los motores de búsqueda. La propia Google difiere cargando JavaScript para ahorrar recursos, por lo que es importante asegurarse de que todos los clientes se sirven a los clientes se codifican y se entregan de manera eficiente para ayudar a salvaguardar las clasificaciones. Javascript SEO para Meta Data también, es Es importante tener en cuenta que los spas que utilizan un paquete de enrutador como React-Router o VUE-router tienen que tomar algunos pasos adicionales para manejar cosas como cambiar las etiquetas META cuando navegan entre las vistas del enrutador. Esto se suele manejar con un paquete de nodo.js como VUE-META o REACT-META-TAGS.

¿Qué son las vistas del enrutador? Así es como funciona la vinculación con diferentes “páginas” en una sola aplicación de una página en cinco pasos:

Cuando un usuario visita un sitio web de reacción, se envía una solicitud de obtención al servidor para el archivo ./index.html.El servidor Luego envía la página index.html al cliente, que contiene los scripts para iniciar reaccionar y reaccionar enrutador. La aplicación web se carga en el lado del cliente. Si un usuario hace clic en un enlace para ir en una nueva página (/ ejemplo) , se envía una solicitud al servidor para que el nuevo enrutador URL.RECT ​​intercepte la solicitud antes de que llegue al servidor y maneja el cambio de página en sí. Esto se hace actualizando localmente los componentes reaccionados renderizados y cambiando el lado del cliente URL.

En otras palabras, cuando los usuarios o bots siguen enlaces aURL en un sitio web de reacción, no están siendo atendidos múltiples archivos HTML estáticos. Pero más bien, los componentes de reacción (como encabezados, pies de página y contenido corporal) alojados en la raíz ./index.html archivo simplemente se están reorganizando para mostrar un contenido diferente. ¡Esta es la razón por la que se llaman aplicaciones de una sola página! Problemas potenciales de SEO: Entonces, es importante usar un paquete como

reaccionar el casco

para asegurarse de que los usuarios se sirven de metadatos únicos para cada Página, o “Ver” al navegar por spas. De lo contrario, los motores de búsqueda pueden estar arrastrando los mismos metadatos para cada página, o peor, ninguno en absoluto!

¿Cómo afecta esto a SEO en el panorama más grande? A continuación, debemos aprender cómo Google procesa JavaScript. ¿Cómo maneja Google JavaScript?

para entender cómo JavAspectos de Aspecto Afecta a SEO, debemos entender lo que ocurre exactamente cuando Googlebot se arrastra en una página web:

CrawlrenderIndex

Primero, Googlebot arrastra las URL en su cola, página por página. El rastreador hace una solicitud de obtención al servidor, generalmente usando un agente de usuario móvil, y luego el servidor envía el documento HTML.

Luego, Google decide qué recursos son necesarios para representar el contenido principal de la página. Por lo general, esto significa que solo el HTML estático se arrastra, y no es ningún archivo CSS o JS vinculado. ¿Por qué?

Según Google Webmasters, Googlebot ha descubierto aproximadamente

130 billones de páginas web

. La representación de JavaScript a escala puede ser costoso. El poder de computación pura requerido para descargar, analizar y ejecutar JavaScript a granel es masivo.

Por eso Google puede diferirRepresentación JavaScript hasta más tarde. Cualquier recuperación no percutada está en cola para ser procesada por Google Web Rendering Services (WRS), ya que los recursos informáticos están disponibles.

Finalmente, Google indexará cualquier HTML rendido después de que se ejecute JavaScript.

Google Crawl, Render y el proceso de índice.

En otras palabras, Google se arrastra e indexa el contenido en dos ondas: La primera ola de indexación, o el estancamiento instantáneo del HTML estático enviado por el servidor web de la segunda ola de indexación, o el Difundir el rastreo de cualquier contenido adicional representado a través de JavaScript

La indexación de Google Wave. Fuente: Google I / O’18
La línea inferior es que el contenido que depende de JS a renderizar puede experimentar un retraso en el rastreo y la indexación por google Esto solía tomar días o incluso semanas. Por ejemplo, Googlebot históricamente corrió en el motor de representación de cromo 41 desactualizado. Sin embargo, han mejorado significativamente sus rastreadores web en los últimos años.

Googlebot fue

recientemente actualizado

a la última versión estable del navegador sin cabeza de cromo en mayo de 2019. Esto significa que su guía web Ahora es “siempre verde” y totalmente compatible con ECMASCRIP 6 (ES6) y más altas, o las últimas versiones de JavaScript.

Por lo tanto, si Googlebot puede ejecutar técnicamente a JavaScript ahora, ¿por qué aún estamos preocupados por los problemas de indexación?

La respuesta corta es el presupuesto de rastreo. Este es el concepto de que Google tiene un límite de velocidad en la frecuencia con la que pueden rastrear un sitio web dado debido a los recursos de computación limitados. Ya sabemos que Google difiere.JavaScript para ser ejecutado más tarde para guardar el presupuesto de rastreo.

Mientras se reduce el retraso entre el rastreo y la representación, no hay garantía de que Google ejecutará realmente el código JavaScript en espera en su cola de servicios web. Aquí hay algunas razones por las cuales Google podría no ejecutar realmente su código JavaScript: Bloqueado en Robots.txtTimeUTSErrors , Javascript puede causar problemas de SEO cuando el contenido del núcleo se basa en JavaScript pero no es representado por Google . Solicitud del mundo real: JavaScript SEO para el comercio electrónico

Los sitios web de comercio electrónico son un ejemplo de contenido dinámico de la vida real que se inyecta a través de JavaScript. Por ejemplo, las tiendas en línea se cargan comúnmente productos en las páginas de la categoría a través de JavaScript.

JavaScript puede permitir E-CommercomE Sitios web para actualizar los productos en las páginas de su categoría dinámicamente. Esto tiene sentido porque su inventario está en un estado constante de flujo debido a las ventas. Sin embargo, ¿no puede “consultar” su contenido si no ejecuta sus archivos JS?

para los sitios web de comercio electrónico, que dependen de las conversiones en línea, que no tienen sus productos indexados por Google podrían ser desastrosos.

Cómo probar y depurar los problemas de SEO de Javascript Aquí hay pasos que puede tomar hoy hoy para diagnosticar proactivamente cualquier problema potencial de SEO de Javascript: Visualice la página con las herramientas webmasters de Google. Esto le ayuda a ver la página desde la perspectiva de Google. Use el operador de búsqueda del sitio para verificar el índice de Google. Asegúrese de que todo su contenido de JavaScript se esté indexando correctamente al controlar manualmente GoOgle.debug con las herramientas de desarrollo incorporadas de Chrome. Compare y contraste lo que Google “vea” (código fuente) con lo que los usuarios ven (código renderizado) y asegúrese de que se alineen en general. También hay herramientas y complementos de terceros útiles que puede usar. Hablaremos de estos pronto.

Prueba amigable para dispositivos móviles

Prueba de Google Mobile Friendly.

El objetivo es simplemente comparar visualmente y contrastar su contenido visible en su navegador y busque cualquier discrepancia en lo que se muestra en THerramientas. Ambas herramientas de Google Webmaster utilizan el mismo motor de representación de cromo Evergreen que Google. Esto significa que pueden brindarle una representación visual precisa de lo que googlebot en realidad “ve” cuando rastrea su sitio web. También hay herramientas de SEO técnicas de terceros, como Fetch de Merkle’s Fetch y Render herramienta. A diferencia de las herramientas de Google, esta aplicación web realmente le da a los usuarios una captura de pantalla de tamaño completo de toda la página. Sitio: Operador de búsqueda Alternativamente, si no está seguro de que Google está indexando el contenido de JavaScript. , puede realizar un chequeo rápido usando el sitio: Operador de búsqueda en Google. Copie y pegue cualquier contenido que no esté seguro de que Google está indexando después del sitio: Operador y su nombre de dominio, y luego prEss la llave de retorno. Si puede encontrar su página en los resultados de búsqueda, ¡no hay preocupaciones! Google puede arrastrarse, renderizar e indexar su contenido bien. Si no, significa que su contenido de JavaScript puede necesitar un poco de ayuda para obtener visibilidad. Esto es lo que parece en el Google Serp: Herramientas de desarrollo de cromo Otro método que puede usar para probar y depurar los problemas de SEO de Javascript es la funcionalidad incorporada de las herramientas de desarrollador disponibles en el navegador web de Chrome. Haga clic con el botón derecho en cualquier lugar de una página web para mostrar El menú Opciones y luego haga clic en “Ver la fuente” para ver el documento HTML estático en una nueva pestaña. También puede hacer clic en “Inspeccionar elemento” después de hacer clic con el botón derecho para ver el contenido que realmente está cargado en el DOM , incluyendo JavaScript. Inspeccione el elemento. Compara y contrasta estas dos perspectivas para ver si cualquier contenido central solo se carga en la DOM, pero no es codificada en la fuente. . También hay extensiones de cromo de terceros que pueden ayudarlo, al igual que el complemento del desarrollador web por Chris Pederick o la View Fuente de la vista por JON HOGG. Cómo reparar los problemas de representación de JavaScript Después de diagnosticar un problema de representación de JavaScript, ¿cómo resuelve los problemas de SEO de Javascript? La respuesta es simple: JavaScript universal, también conocido como “isomorfo” JavaScript. ¿Qué significa esto? Universal o isomorfic aquí se refiere a las aplicaciones de JavaScript que son capaces de ser ejecutadas en el servidor o el cliente. Hay algunas implementaciones diferentesLas de JavaScript que son más fáciles de búsqueda que la representación del lado del cliente, para evitar descargar JS a los usuarios y los rastreadores: Representación del lado del servidor (SSR). Esto significa que JS se ejecuta en el servidor para cada solicitud. Una forma de implementar SSR es con una biblioteca de nodo.js como titiritero . Sin embargo, esto puede colocar una gran cantidad de tensión en la representación del servidor. Esta es una combinación de la representación del lado del servidor y del lado del cliente. El contenido del núcleo se le presenta el lado del servidor antes de ser enviado al cliente. Cualquier Recursos Adicionales se descargan en la Representación Client.Dynamic. En esta solución, el servidor detecta al agente de usuario del cliente que realiza la solicitud. Luego puede enviar contenido de JavaScript previamente prestado a los motores de búsqueda, por ejemplo. Cualquier otro agente de usuario deberá hacer suContenido del lado del cliente. Por ejemplo, los webmasters de Google recomiendan una solución popular de código abierto llamada RENDERTON para implementar la representación dinámica. Regeneración estática procesal, o actualizar el contenido estático después de que se haya implementado un sitio. Esto se puede hacer con marcos como Siguiente.js para reaccionar o NUXT.JS para VUE. Estos marcos tienen un proceso de compilación que prevalecerá cada página de su solicitud de JS a los activos estáticos en los que puede servir de algo como un cubo S3. De esta manera, su sitio puede obtener todos los beneficios de SEO de la representación del lado del servidor, ¡sin la administración del servidor! Cada una de estas soluciones ayuda a asegurarse de que, cuando los bots de buscadores hacen solicitudes para rastrear documentos HTML, reciben la totalidad. Proporcionó versiones de las páginas web. HowevER, algunos de estos pueden ser extremadamente difíciles o incluso imposibles de implementar después de que la infraestructura web ya esté construida. Es por eso que es importante tener en cuenta las mejores prácticas de SEO de JavaScript al diseñar la arquitectura de su próxima aplicación web. Nota, para los sitios web construidos en un sistema de administración de contenido (CMS) que ya preliminar la mayoría de los contenidos, como WordPress o Shopify, esto no es típicamente un problema. Llaves para llevar Esta guía proporciona algunas mejores prácticas y conocimientos generales en JavaScript SEO. Sin embargo, Javascript SEO es un campo de estudio complejo y matizado. Le recomendamos que lea mediante Documentación oficial de Google y Guía de solución de problemas para más conceptos básicos de SEO de JavaScript. Interesado en aprender más sobre la optimización de su Java.Sitio web del script para la búsqueda? Deja un comentario a continuación. La web se ha movido de HTML liso, como un SEO, puede abarcar eso. Aprende de JS Devs & Share Knowleds de SEO con ellos. JS no se va. – ???? John ???? (@JOHNMU) 8 de agosto de 2017 ¿Quieres aprender más sobre el SEO técnico? Echa un vistazo a la serie de certificación de SEO técnico MOZ Academy, una serie de entrenamiento en profundidad que hones en las tuercas y tornillos de SEO técnico. Signo Yo arriba!

Leave a Reply

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