JavaScript SEO 101: cómo hacerlo funcionar para su sitio web
La mayoría de los sitios web modernos contienen JavaScript, lo que los hace dinámicos e interactivos. Aunque los bots de los motores de búsqueda son bastante inteligentes, es posible que aún no muestren gran parte del contenido de JavaScript, lo que afecta la clasificación de la página.
El contenido de JavaScript depende mucho de cómo su sitio web represente el código.
Por ejemplo, en representación del lado del servidor, the server contains the website’s contents. Upon a request, the browser receives the fully-rendered HTML.
Sin embargo, en representación del lado del cliente, the JavaScript is rendered by the browser using DOM.
El third La opción para renderizar es representación dinámica, where content rendered at the client-side goes to the browser, whereas the content rendered at the server-side goes to the search engine(s).
Las técnicas de representación afectan la forma en que se representa JS y, por lo tanto, la clasificación de las páginas.
Para asegurarse de que se procesa todo el código JS de su sitio web, debe seguir las prácticas adecuadas de SEO de JavaScript. Pero primero, comprendamos qué es JavaScript SEO.
¿Qué es JavaScript SEO?
SEO JavaScript facilita a los motores de búsqueda rastrear e indexar el código JavaScript (contenido dinámico) de un sitio web (o página web). Google o cualquier otro buscador processes JavaScript en tres etapas, es decir, rastrear, renderizar e indexar. Para que Google pueda hacer todo esto, el contenido de JavaScript debe ser compatible con SEO, es decir, visible y disponible.
Cómo Google processes contenido JavaScript en una página
Estos son los pasos que sigue el robot de Google para process JavaScript:
- Obtiene una URL de la cola de rastreo a través de la solicitud HTTP
- Comprueba el archivo robots.txt en busca de URL que el sitio no permite rastrear
- Omite las URL 'no permitidas', analiza la respuesta en busca de otras URL y las agrega a la cola de rastreo
- Pone en cola las páginas para renderizar, excepto aquellas que están marcadas para no indexarse
- Cromo renderiza la página, ejecuta JavaScript e indexa la página
- Analiza el HTML renderizado nuevamente en busca de enlaces
- Pone en cola las URL para rastrear
¿Cuándo no indexa Google el contenido de JavaScript?
Google puede indexar JavaScript cuando se implementa correctamente. Por ejemplo, si algunos de sus archivos JS y CSS están ocultos, es posible que Google no pueda rastrear el sitio web correctamente. Del mismo modo, si tiene enlaces en el HTML sin formato que no están presentes en el HTML representado, Google puede evitar que se rastreen o indexen esos enlaces.
Also, if JavaScript is not directly embedded in the HTML, Google has to download the file for execution. Further, search engines might have a cached version of a web page (for better performance), and the JavaScript on the page might not be in sync con ella.
Desde cada bit Si se debe leer una gran cantidad de código JavaScript, el uso excesivo de JavaScript puede reducir la velocidad de la página o provocar errores de tiempo de espera.
¿Por qué es importante el SEO en JavaScript?
JavaScript SEO es importante porque afecta muchos elementos en la página y factores de clasificación que Google (o los motores de búsqueda) escanean para SEO:
| elemento en la página | Posible problema de SEO | Posible solución SEO |
|---|---|---|
| Contenido renderizado | Los motores de búsqueda (como Google) no pueden mostrar su página si sus recursos están bloqueados en el archivo robots.txt de su sitio. Además, Google no puede indexar ni renderizar archivos JS y CSS, que están bloqueados u ocultos. | Reducir JavaScript en el contenido principal de la página seguir alternativaate enfoques para la renderización del lado del cliente, como la renderización del lado del servidor, la renderización dinámica, la renderización híbrida (combinación del lado del cliente y del lado del servidor) |
| Enlaces | If some links are internal or JavaScript generateSi hay enlaces a una URL cuando el usuario hace clic en ella, Google no puede descubrir dichos enlaces. | Utilice enlaces de anclaje con el atributo href, descriptTengo textos de anclaje para los enlaces. Pseudo enlaces como y las etiquetas no se rastrean |
| metadatos | A menos que el sitio utilice Paquetes de Node.js Al igual que vue-meta, los motores de búsqueda pueden rastrear los mismos o, peor aún, ningún metadato para cada vista o página. | Use paquetes de Node.js como react-helmet, vue-meta, react-meta-tags |
| Imágenes de carga lenta | El rastreador del motor de búsqueda no selecciona ningún contenido que esté marcado para carga diferida. El motor de búsqueda no puede desplazarse por el contenido y, por lo tanto, es posible que parte del contenido nunca se muestre. | Utilice la API de IntersectionObserver, que comprende el la visibilidad y posición of DOM elements once they are available. You can also use the native lazy-loading feature of the browser (Chrome). |
| Tiempos de carga de la página | Una página con mucho contenido de JavaScript puede tardar en cargarse, lo que puede afectar su ranking de búsqueda. | Agregue código JS crítico en línea y posponga el código JS no crítico hasta que se represente el contenido principal, lo que reduce el código JS general. |
Mejores prácticas para JavaScript SEO
Siguiendo algunas de las mejores prácticas, podemos lograr que los motores de búsqueda rastreen y muestren mejor las páginas:
Agregue enlaces e imágenes según los estándares web definidos
Agregue todos los enlaces usando el ahrefetiqueta en lugar de onclick, #pageurlo window.location.href='/page-url. Google puede rastrear fácilmente los enlaces y seguirlos.
<a href=”http://geekflare.com”>Welcome to Geek world</a>De la misma manera, agregue imágenes usando el img src etiqueta y no la img data-src tag:
<img src=”myimg.png” />Preferir renderizado del lado del servidor
Make sure your website content is available on the server apart from the user browser.
Asegúrese de que su HTML renderizado tenga todo el contenido importante que desea mostrar
El HTML renderizado debe tener el título correcto, meta robots, meta descriptiones, imágenes, datos estructurados y etiquetas canónicas.
Hacer que su sitio web JavaScript sea compatible con SEO
Para probar la implementación de JavaScript SEO en su página web, puede seguir los siguientes pasos:
- Know how much JavaScript your website uses: For this, you can simply disable JavaScript on your browser. If you don’t see much content, it means your website largely relies on JavaScript.
- Compruebe si Googlebot obtiene todo el contenido y las etiquetas importantes: puede utilizar el Herramienta de prueba compatible con dispositivos móviles de Google o la herramienta de prueba de resultados enriquecidos para verificar cómo Googlebot usa el HTML sin procesar para representar el contenido.
- También puedes usar extensiones de Chrome como Ver fuente renderizada para entender cómo JavaScript cambia la página y compara el HTML fuente y el renderizado.
- Puede comprobar las etiquetas importantes (título, meta description, etc.) en el HTML renderizado usando el Extensión SEO Pro para Chrome.
¿JavaScript es bueno o malo para el SEO?
La optimización de motores de búsqueda es uno de los mejores enfoques para generar tráfico orgánico en un sitio web. JavaScript es lo más lenguaje de programación preferido; Más del 98% de los sitios web lo utilizan para agregar interactividad a su contenido. JavaScript también permite a los propietarios de sitios web ofrecer contenido dinámico. La gran pregunta es: ¿JavaScript es bueno o malo para el SEO?
JavaScript y SEO han sido una deudaate Tema entre expertos y desarrolladores de SEO. Algunos creen que JavaScript "ralentiza" los sitios, mientras que otros creen que el rendimiento de un sitio web no se verá afectado por JavaScript siempre que el SEO se realice correctamente. SEO es el process de mejorar la visibilidad de un sitio web para los motores de búsqueda. Cuando el SEO se realiza correctamente, los motores de búsqueda deberían encontrar, leer e indexar fácilmente su contenido.
Lo bueno: Browser compatibility is improving
JavaScript no es malo para el SEO. El principal desafío es que muchos expertos en SEO no están familiarizados con el SEO en JavaScript, lo que supone una curva de aprendizaje pronunciada para la mayoría de los SEO.
Moderno browsers like Chrome and Bing have been improving their platforms to rectify compatibility issues when executing JavaScript files. The leading browsers now use the same web platform rendering technology, eradicating SEO compatibility issues. As an SEO, you are assured that the SEO efforts you spend on your content will work across major browsers. There are also plugin-like options that make it easy to handle SEO for JavaScript files.
El malo: JavaScript todavía tiene muchas limitaciones y riesgos.
Los motores de búsqueda pueden tener dificultades para leer sus páginas debido a la presencia de JavaScript. Un escenario así no es bueno para el SEO, ya que deja margen a errores. Por ejemplo, puede haber problemas de compatibilidad si la versión de JavaScript en sus archivos JavaScript no es la misma que la de los motores de búsqueda. En tal caso, el motor de búsqueda no leerá JavaScript, es decir, no lo recordará.
Problemas comunes de JavaScript en SEO y cómo solucionarlos
Search engines can be selective on the nature of resources they will use on a certain page. A search engine can crawl a page but still fail to render it. In some other cases, it might render a page improperly. If any of this happens, the JavaScript in your pages has issues. These are some of the major JavaScript issues that impact SEO and how you can fix them:
#1. El HTML prerenderizado es universal.ally indisponible
Los motores de búsqueda pueden descubrir disparidades entre las páginas renderizadas previamente y las renderizadas. La mayoría de los desarrolladores de aplicaciones para el usuario optan por la representación del lado del cliente, lo que significa que la configuración predeterminada dificulta la indexación de contenido basado en JavaScript.
Las aplicaciones de una sola página (SPA) que sirven todo el JavaScript pueden ser difíciles de descubrir. Los SPA ofrecen páginas nuevas sin necesidad de recargarlas, lo que significa que es posible que no se puedan descubrir.
Solución
- Representación dinámica: Puede renderizar HTML previamente para los motores de búsqueda y seguir ofreciendo contenido basado en JavaScript a los usuarios a través de la renderización dinámica. Su sitio web puede detectar si una solicitud proviene de un robot de motor de búsqueda y muestra una página renderizada previamente.
- Representación del lado del servidor: Aunque la mayoría de los desarrolladores optan por la renderización del lado del cliente, puedes cambiar a representación del lado del servidor. All the action happens in the server, and the client’s browser receives a fully functional HTML document ready for render.
#2. Algunas secciones del sitio no se rastrean
Un buen sitio web puede tener muchas secciones dedicadasated a diferentes funciones. Estas secciones están interconectadas. Sin embargo, a los motores de búsqueda como Google puede resultarles difícil rastrear y descubrir nuevas páginas si su Mapa XML no está actualizadoated. Some sections might also not be discoverable if your internal links aren’t crawlable.
Solución
Google Search Console can be a valuable tool to check if your internal links are crawlable. The tool also offers valuable information you can use to fix this error. You can also check the last time Googlebot updateBusque su mapa del sitio en la interfaz de Search Console. Si el mapa del sitio XML no es el latest versión, puedes actualizarate y verifique si sus secciones serán rastreadas.
#3. Parte del contenido de la página es inaccesible para los rastreadores.
Un sitio web típico tendrá contenido distribuido en diferentes páginas. Sin embargo, parte del contenido puede resultar inaccesible para los rastreadores. Un error de sintaxis, como no incluir etiquetas de cierre en un H1, puede hacer que el H1 no esté disponible para los rastreadores. El contenido también puede ser inaccesible para los rastreadores si es contenido que necesita la interacción del usuario.
Solución
Investigar el origen del error es el primer paso para solucionar la inaccesibilidad del contenido para los rastreadores. Si se trata de un error de desarrollo, puede pedirles a los desarrolladores que lo solucionen.
#4. Los recursos no se están rastreando
Un sitio web típico tendrá archivos de script e imágenes con URL únicas. Si se bloquea el rastreo de imágenes y archivos, los motores de búsqueda no los encontrarán. Las URL de imágenes y secuencias de comandos son habituales.ally almacenado en dedicated subcarpetas o subdominios. Como tal, si tiene una expresión no permitida en el archivo robots.txt, no se rastreará.
Solución
Verifique el archivo robots.txt y confirme si no ha permitido el rastreo. Si eso
Para Concluir
En este artículo, aprendimos cómo JavaScript puede hacer que el manejo de SEO sea una tarea fácil. bit complejo y los enfoques para resolver los posibles problemas causados por agregar una gran cantidad de JavaScript a su código.
También vimos algunas mejores prácticas y herramientas para hacer que su sitio web de JavaScript sea compatible con SEO. Otras excelentes herramientas que ayudan a Google a reconocer y rastrear su contenido dinámico son preprocesar, AngularJS y Huckabuy.
También puede consultar algunos de los mejores formas de disminuir el tiempo de carga del sitio web.
