https://prerender.io/ a mí me ha facilitado todo lo de renderizado en el caso de que parte o la mayoría del sitio no esté renderizando
SEO: más que robots y palabras clave
Qué aprenderás sobre SEO técnico
¿Para qué hacer SEO técnico?
¿Cómo hacer SEO?
Funcionamiento de los algoritmos y el presupuesto de rastreo
Rastreo y accesibilidad
Estado de indexación del sitio web
Archivo robots.txt
Etiqueta meta robots
Mapa de sitio XML
Certificado de seguridad SSL
Redirecciones HTTP y www
Contenidos duplicados y canonicalización
Respuestas del servidor, redirecciones 3XX y errores 4XX y 5XX
Arquitectura del sitio web
URLs amigables y Breadcrumbs
Paginación y scroll infinito
Profundidad y niveles de navegación
Semántica del HTML
Elementos técnicos en contenidos
Elementos On-page
Meta etiquetas: título de SEO
Meta etiquetas: descripción y metakeywords
Títulos H1
Contenido pobre
Textos alternativos en imágenes
Velocidad de carga
Importancia de la velocidad del sitio web
Tiempo de respuesta y velocidad de carga
Caché del navegador
CDN y peso de las imágenes
CSS y JavaScript
Microformatos y schema.org
Qué son y para qué sirven los microformatos
Crear y auditar microformatos fácil
Optimización Multi-idioma y/o Multi-país
Hreflang y SEO internacional
SEO para sitios en JavaScript
Diferencias SEO para sitios en JavaScript
Renderizado JavaScript
Elementos del DOM
Conclusiones
Glosario de SEO Técnico
Clase de Cierre
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
How to optimize JavaScript websites for SEO?
SEO for websites developed with JavaScript is a field that requires special attention due to the unique behavior of these sites. These sites, known as Single Page Applications (SPA) and Progressive Web Apps (PWA), handle content loading in different ways than traditional websites. So how do we ensure that our JavaScript sites are friendly to search engines like Google?
What are SPAs and PWAs and why are they special?
- SPA (Single Page Applications): These sites load all content on a single page, eliminating the need to reload the entire page each time it is interacted with. This provides a very smooth user experience.
- PWA (Progressive Web Apps): These web apps look and function like native mobile apps, offering dynamic content that is constantly updated.
How do JavaScript site features affect SEO?
The main SEO challenge with these sites is that Google initially crawls without running the JavaScript. This means that when Google first visits a site, it may not capture all available content.
- Indexing process: Google first crawls the site in a render queue before indexing it. Only after some time does it re-crawl and run the JavaScript to fully index it.
- Initial ranking issues: This could lead to poor initial rankings until Google comes back and runs the JavaScript, capturing all the content.
What are the key recommendations for improving SEO on JavaScript sites?
-
Unique URLs per page: Each page should have a distinct URL even if the content does not reload.
-
Unique meta tags: Make sure each page has unique meta titles and descriptions to avoid duplicate content.
-
Use proper links: Links should use
Ahrefand not rely on JavaScript, ensuring correct semantics. -
Avoid events in URLs: Do not implement events in JavaScript code to manage URLs; this could affect crawlability.
-
Use routers for URL management: On a more technical level, routers should be configured to handle URLs correctly.
-
Optimization tools: Use tools such as MetaService, Helmet or View Meta to optimize frameworks such as Angular, Vue and React.js.
What advanced technical optimizations can be performed?
Two advanced methods can help you solve typical SEO problems with JavaScript:
-
Dynamic rendering: This method shows the full version of the site to Google, while for the user it only loads what is necessary as you browse.
-
Server-side rendering: Here, content is preloaded on the server before being delivered to the user, ensuring that all content is immediately available for crawling by Google.
Remember that implementing these techniques requires collaboration with experienced developers to ensure that the site is fully optimized for search engines. As you move forward with auditing and optimizing JavaScript sites, these strategies will provide you with a solid foundation for improving SEO visibility and performance.
Contributions 13
Questions 3
Sort by:
En sitios Web hechos con JavaScript 👨💼
Tener en cuenta:
- URL’s únicas por página (a pesar de que no se recargue que la URL cambie).
- Las meta etiquetas deben ser únicas (cada página debe tener un titulo de SEO, una meta description). Así Google diferenciará cada página.
- Usar <a href=""> para los Links.
- No usar eventos para las URL’s.
- Usar Router para las URL’s
- No usar rutas con #
SEO para sitios web en JS
Frameworks como angular, view y react.js que nos permite crear sitios web que sean:
SAP (Single Page Applications)
• Una sola página.
• No se refresca.
• Sitios/apps web.
PWA (Progressive Web App)
• Parece una app móvil/nativa.
• Contenido muy dinámico.
• Robusto.
Cómo procesa Google el JavaScript
- Rastrea sin JS
- Cola de rendizado → Indexa
- ¿Ranking? cuando llega aquí no tiene toda la información que tiene el sitio web. No será un ranking certero
- Vuelve a rastrear y ejecuta JS → Indexa
- Ranking
Que tener en cuenta en los sitios con JS
- URLs únicas por página
- Meta etiquetas únicas
- Utilizar links reales <a href="”>
- No usar Eventos para URLs
- Utilizar routers para las URLs
- No usar rutas con #
- Meta service (herramienta framework)
- Helmet (herramienta framework)
- Vue-meta (herramienta framework)
En el mejor de los casos
→ Usar renderizado dinámico.
→ Usar renderizado en el servidor.
me ha pasado, un cliente usando react.js como frontend y no se veía nada, hubo que hacer un par de cambios y quedamos en primera página con un sólo URL
En esta clase no entendí nada 😄
Alejandro excelente esta informacion, ampliar el conocimiento y muy interesante.
JAJAJAJAJA en la Clase más técnica del curso casi no hay comentarios. Todos los que en las otras clases siempre dejaban su aporte ahora se quedan callados
que buen curso, gracias!
Muchas gracias por los consejos muy completos.
Entiendo que el GoogleBot va a rastrear en principio sin el JavaScript de la App, como esta está implementada con HTML5 igual cumple con los estandares del encabezado (Head) y allí, el Bot debe encontrar las hrlang, tittle, meta que se usan para posicionar.
El H1 (Titulo principal) forma parte del body o cuerpo del documento HTML.
Como hay información que no se muestra porque está renderizado a través de JavaScript es que se vuelve a rastrear y rankear. Recordemos que Google utiliza IA en su plataforma y al volver a rastrear detecta el resto del contenido.
Es común en JavaScript usar eventos para enlazar una URL pero para SEO debes explicar al desarrollador que deseas que el GoogleBot pueda rastrear hacia donde se enlaza ese elemento tipo ancla.
Con eventos para URL’s, se refiere a aquellos eventos que desencadenan redireccionamientos a URLs???
Para los que usamos .NetCore , podemos implementar Rendertron!
Quisiera mencionar que las herramintas Meta service, Helmet y vue-meta no sirven para rutear las URLs, sino para poner un contenido diferente en el HEAD de cada página, de ahí que 2 de ellas usen el término “meta” de metaetiquetas.
Slds
Want to see more contributions, questions and answers from the community?