SEO Técnico y JavaScript

Rate this content
Bookmark

La web es una plataforma en constante cambio y lo mismo ocurre con los sitios web que creamos. Con nuevas tecnologías y posibilidades surgen nuevos desafíos tanto para los desarrolladores como para los SEOs. En esta sesión, hablaremos sobre cómo los desarrolladores y los SEOs pueden trabajar en equipo y resolver desafíos juntos. Analizaremos algunos escenarios en los que esta colaboración puede llevar al éxito de un proyecto.

8 min
21 Oct, 2021

Video Summary and Transcription

El SEO técnico es importante para hacer que el contenido sea visible para los motores de búsqueda. Los desarrolladores tienen un impacto significativo en el proceso de rastreo e indexación. El enrutamiento basado en hash puede generar problemas de contenido duplicado, por lo que se recomienda utilizar la API de Historia en su lugar. En 2019, el 12% de los sitios web aún utilizaban URLs fragmentadas.

Available in English

1. Introducción a SEO técnico

Short description:

¡Hola y bienvenidos a todos! Hoy hablaré sobre SEO técnico y su importancia para hacer que tu contenido sea visible para las personas que lo buscan. El SEO es un campo amplio y, aunque no es solo técnico, nos enfocaremos en el aspecto técnico en esta charla. Los motores de búsqueda siguen un proceso que implica hacer solicitudes HTTP, comprender el contenido, indexarlo y clasificarlo. Como desarrolladores, tenemos un impacto significativo en este proceso, ya que tanto el lado del servidor como el lado del cliente influyen en si un sitio web puede ser rastreado e indexado. Centrarse en el rastreo e indexación puede tener un impacto sustancial en el SEO.

¡Hola y bienvenidos a todos ustedes! Estoy muy emocionado de hablar sobre SEO técnico a todos ustedes hoy. Específicamente, quiero centrarme un poco en Vue.js, pero básicamente ninguno de los temas de los que hablaré son muy, muy específicos de Vue. Si quieres aprender más sobre SEO específico de Vue, te mostraré algunos recursos después de la charla.

Entonces, cuando hablamos de SEO, muchas personas se preguntan, ¿qué significa realmente? Además del significado obvio que es la optimización de motores de búsqueda, parece que para muchas personas no es obvio qué es esto y muchas personas piensan que es básicamente un engaño y que intenta vender enlaces y cosas así. No es eso. Fundamentalmente, lo que se trata el SEO es asegurarse de que lo que estás creando, lo que estás poniendo en línea, sea realmente visible para las personas que lo buscan, ¿verdad? Porque si estás buscando algo que aún no conoces, entonces vas a tu motor de búsqueda preferido y buscas lo que necesitas y encuentras aplicaciones web o sitios web potenciales que sirven ese propósito específico. Para hacerlo, debes asegurarte de que los motores de búsqueda realmente puedan encontrar tus cosas y, por lo tanto, las personas que usan los motores de búsqueda puedan encontrar las cosas que construiste. Y eso implica asegurarse de que los robots, que son los motores de búsqueda, porque son programas de computadora que consumen tu contenido. Debes asegurarte de que estos robots realmente puedan procesar y comprender lo que estás publicando en la web. Y para eso, hay muchas cosas que deben hacerse y muchas de ellas son técnicas, pero no todas son técnicas.

Entonces, el SEO es un campo muy amplio, similar a cómo la ingeniería de software es un campo muy amplio. Puedes hacer frontend, puedes hacer backend, puedes hacer sistemas integrados, puedes hacer desarrollo de juegos. El SEO no es solo técnico, pero hoy nos enfocaremos en el aspecto técnico, ya que todos somos desarrolladores.

En cuanto a los motores de búsqueda, los motores de búsqueda ejecutan fundamentalmente un proceso y este proceso se puede descomponer en varios pasos. El primer paso es hacer solicitudes HTTP a tu servidor, a una URL que encontramos en algún lugar, y luego obtener lo que devuelve tu servidor. Luego debemos comprender qué es. ¿Es este un sitio web sobre perros? ¿Es este un sitio web sobre gatos? ¿Es este un sitio web sobre barcos? Luego lo pondríamos en una base de datos, que se llama el índice. Y cuando alguien busca, digamos que creamos un sitio web de gatos, si alguien busca imágenes de gatos, tenemos muchos sitios web de imágenes de gatos en nuestro índice y necesitaremos obtenerlos. Y necesitamos averiguar cuál es el mejor resultado para este usuario en este momento. Y ese es el proceso de clasificación donde determinamos dónde se ubica cada uno de los sitios web en nuestro índice en la lista de resultados y luego mostramos estos resultados a los usuarios. Ahora, como desarrolladores, en realidad tenemos un impacto fundamental en este proceso porque, si lo piensas, tanto el lado del servidor como el lado del cliente influyen en si un sitio web o una aplicación web pueden ser rastreados e indexados. Si no podemos hacer solicitudes a ciertos fragmentos de contenido o si la URL nos devuelve un error 404 o un error 500, entonces no podemos realmente procesarlo más. Si lo hacemos, pero luego hay algo en JavaScript que nos impide ver cualquier contenido, entonces realmente no sabemos de qué se trata el sitio web y tampoco podemos ponerlo en el índice. Y si no está en el índice, no podemos clasificarlo realmente. Muchas personas se centran en la clasificación cuando se trata de SEO y no creo que eso sea razonable porque hay muchos factores. Y la clasificación también se ve influenciada por dónde se encuentra nuestro usuario, cuántos otros competidores hay, qué están haciendo los competidores. Entonces hay un flujo constante en las clasificaciones y no creo que tenga sentido investigar demasiado en eso. Me enfocaría más en el rastreo y la indexación, porque ahí es donde puedes tener un gran impacto. Ahora, como dije, el proceso comienza con el rastreo, lo que significa que descubrimos una URL en algún lugar y luego hacemos una solicitud a esa URL. Las URL adoptan muchas formas, pero estas son las URL típicas que probablemente hayas encontrado tú mismo o hayas proporcionado tú mismo.

2. Hash-based Routing and SEO

Short description:

El enrutamiento basado en hash no es ideal para SEO, ya que puede generar problemas de contenido duplicado. En su lugar, se recomienda utilizar la API de Historial para un mejor rastreo e indexación. En 2019, el 12% de los sitios web que rastreamos aún utilizaban URL fragmentadas.

Entonces tienes un host, tienes una ruta y a veces tienes subsecciones. El problema con estos hashes, o fragmentos como se les llama técnicamente, es que no están destinados a abordar contenido diferente. Una página debería tener mucho contenido y luego parte de ese contenido es el que se aborda mediante una subsección. Pero no es que si tengo una página y luego cambio el fragmento obtenga completamente un contenido nuevo que no habría visto antes si hubiera ido a /página.

Desafortunadamente, eso es lo que mucha gente está haciendo. Están utilizando enrutamiento basado en hash, lo cual es legítimo porque es mucho más fácil de configurar para un servidor de desarrollo local. Pero, no obstante, para fines de SEO, esto no es ideal porque un rastreador asume que estas dos páginas son iguales a la página de inicio, ¿verdad? El hash sobre debería ser solo una parte de lo que ya está en la página de inicio en /. Lo mismo ocurre con un signo de exclamación. Tenemos un esquema de rastreo de URL específico para este tipo de URL, pero lo hemos desaprobado porque encontramos que no funciona muy bien. Así que asegúrate de utilizar la API de Historial en lugar del enrutamiento basado en hash. En 2019, el 12% de los sitios web que rastreamos para el documento de Web Armor, desafortunadamente, siguen utilizando URL fragmentadas. Otra cosa de la que la gente se preocupa es si el renderizado del lado del cliente está bien. Y a eso digo que sí, porque tenemos una cola de renderizado y renderizamos sitios web por lo que el renderizado del lado del cliente funciona. Además, la gente dice, oh, pero lleva mucho tiempo que Google renderice realmente del lado del cliente. Eso no es cierto. El tiempo de cola es realmente muy corto. Ha sido así desde al menos 2020. Además, estamos utilizando un Chrome siempre actualizado. Entonces, si estás utilizando ES6 o algo así, no hay problema porque estamos actualizando nuestro renderizador para que sea la última versión de Chromium de todos modos. Otra cosa que suele ocurrir en aplicaciones renderizadas del lado del cliente son errores suaves. Ocurren porque vas a una URL que no existe y ves un mensaje de error y te quedas contento. Pero si verificas, en realidad ves que el estado HTTP que se devuelve es una solicitud exitosa. Y luego se realiza una solicitud a una API. Y solo si la solicitud a la API devuelve un error, mostramos una página de error. Desafortunadamente, eso no es muy bueno. Sería mejor redirigir a una URL que realmente nos dé un error del lado del servidor. Eso evitaría esos errores suaves de 404 que podrían aparecer de manera desagradable en los resultados de búsqueda. Entonces, teniendo eso en cuenta, has visto algunas cosas en las que ya puedes investigar. Y los dos problemas más grandes son no utilizar URLs adecuadas para tus rutas y también asegurarte de utilizar correctamente los servicios HTTP o mitigar los errores de 404 del lado del cliente, como se muestra aquí. Hay mucho más que considerar si estás interesado, echa un vistazo a estos recursos. Tienen mucho más contenido y mucho más tiempo para presentártelo. Y con eso, me gustaría decir muchas gracias y disfruta el resto de las Charlas Relámpago.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.