 O Seo Internacional da Clases de Seo, na Universidade de Barcelona, gestiona un slack de Seo en Barcelona tamén e nos va a hablar, pues, de algo complicado a priori a veces, que es decir, oi, como podemos ponen a trabajar a toda la gente de la empresa juntas. Estos equipos que a veces parece que se deberían estar peleando sempre, como ponen a trabajar juntas a la gente de Seo, a la gente de X, na hora de esto, del X, X, O, a ver se lo descobrimos con ella, no é ninguna guarra, es una cosa moi técnica, moi tecnológica, moi freaky, e que ya lo explica moi bien. Darle un aplausazo enorme a Sara, es una crack en ella. Buenas tardes a todos e muchas gracias por venir. Eu sou Sara Fernández, consultor de Aseo Internacional e hoy vamos hablar de SXO, Search Experience Optimization. Sé que es un número poco raro, pero, bueno, ahora, con las próximas diapositivas, espero que quede un poquito máis claro de que se trata. Primero de todo, bueno, como ha dicho Fernando, gestiona un comunidad de slack que se llama Aseo Barcelona, aunque sea de Barcelona, se os queréis unir, oi, oi bienvenidos. Vengo del mundo de la traducción, por eso tamén acaben se internacional, hablo cinco idiomas e logo tamén tengo un master en diseño UXUI. E, la verdad es que, bueno, soy básante freaky de la inteligencia artificial e todo o que es experience de usuario e, bueno, e hoy estoy aquí, e es un pasaje de estar aqui con vosotros. E, sí máis preámbulos, vamos a empezar por algunas definiciones básicas. Ésto non principio é Aseo, non sé por qué se vea así, vale, parece su eco. Pero, bueno, el Aseo se encarga de mejorar la visibilidad de embuscadores. E, tenemos estrategias tanto dentro como fuera de la página, on page, off page e principal objetivo é aumentar el tráfico orgánico. Por outro lado, tenemos la experience de usuario que estudia a los usuarios para entender sus necesidades e, a partir de aí, diseñar soluciones que se adapten a los mismos. E, aquí, bueno, os he dejado una frase de Don Norman, que é uno de los padres de la experience de usuario, que dice que, quando hablamos de experiencia de usuario, estamos cubriendo toda a interacción de una empresa e sus produtos. Con ésto, também, tenemos en cuenta áreas como a atención al cliente o packaging. Então, todo o que engloba nuestra marca, o nosso produto, crea una experiencia de usuario. E, que pasa se os juntamos? Que se crea, lo que é, o SXO o Search Experience Optimization. E é un match. Agora veremos porque é un match. E, bueno, SXO Optimization é a combinación del conocimiento técnico, del SEO, con o enfoque centrado do usuario de, bueno, UX. Então, se trata de mejorar una página web pensando, poniendo como centro de todo, al usuario. Éste sempre va ser o foco de toda a estrategia, tanto a nivel de SEO como de experiencia do usuario. Los que soy SEO, sobre todo, ésto nos va sonar algo novo, que cada vez, pues Google va dando más importancia ao usuario, hasta o punto de que, a veces, nos tenemos que adelantar incluso a que lleguen esos cambios de algoritmo e, bueno, hay cosas que, al mojor, ahora non son un factor de posicionamiento, pero, se realmente ayudan ao usuario, pues quizá deberíamos empezar a hacerlo, porque igual, quando llegue ese update, igual ya é porque estamos llegando un pouco tarde. Entonces, como os decía, o usuario é o centro de todo e temos, pues, a optimización de os buscadores previsando ese usuario e esa intención de búsqueda, que é igual, já lo habíais visto en outras charlas, os SEOs sempre calcamos mucho esto, o que é a intención de búsqueda, que é, bueno, quando un usuario busca algo, realmente que é o que quiera encontrar, e é o que temos que proporcionar. Logo, também, por outro lado, a experiencia do usuario, diseñar una web, fazendo una investigación previa, considerando as necesidades dos usuarios e, sin limitarnos, a copiar, a hacer o que hace a competencia, porque, ao mojo, non lo están haciendo ni bien, no? Entonces, bueno, tenemos o proceso de design thinking, que é una das metodologías de diseño máis frecuentes que nos ayudan a resolver problemas, bueno, detectar e resolver problemas, e empezamos con un fase inicial de empatizar, entender, pues, que problema tiene o usuario, e, bueno, definirlo, acto seguido, pues, vale, esto é o que está ocurriendo, idear, hacer unha lluvia de ideas, intentar encontrar posibles soluciones, prototipar, crear un prototipo antes de desarrollarlo, e testearlo con usuarios, ver se, antes de publicar-lo todo, pues, hacer pruebas con esos usuarios e ver se realmente se adapta a lo que necesitan. E, logo, también, tenemos lo que son los sesgos cognitivos e las leyes de experiencia de usuario, que son, bueno, van de la mano, pues, los sesgos cognitivos son como patrones que, bueno, como pensamientos, juicios que hacemos a veces, suen ser bastante irracionales, e todos los hacemos, no? E, muchas veces, pues, bueno, quando diseñamos experiencias, tenemos que tenerlos en cuenta, porque condicionan o comportamiento do usuario, en base a todo esto, no? Entonces, algunas de las leyes máis frecuentes que se basan en estos sesgos cognitivos, pues, son, por exemplo, la lei de HIC que nos dice que el tiempo de decisión es directamente proporcional al número de opciones disponibles, que significa que cuantas máis opciones se damos a o usuario, pues, al final lo acabamos abrumando, no? O típico de menos es máis, a todos nos ha pasado seguramente de a un restaurante que nos dén un menú enorme, no? E decir, bueno, es que realmente, non sé que quiero comer, no? Entonces, bueno, es una de las leyes máis más frecuentes, no? E, bueno, aquí tenemos un mal ejemplo, esta web sigue existiendo, es la web del museo de James Bond, está en Suecia, e, bueno, quando tenemos unha estructura tan poco clara, tan desbordada, tan, que es como, no hay por dónde cogerlo, no? Claro, el tiempo de decisión del usuario pues cada vez, bueno, se prolonga, no? E venimos la web de ASOS, veis que hay mucho máis espacio, no? E, menos opciones, a ver, moda mujer, moda hombre, ya está. Entonces, claro, reducimos las opciones para que el usuario entienda rápido pues que es lo que quiera, no? Luego, tenemos la ley de Miller, que es que, bueno, que nos dice que unha persona adulta, en su memoria corto plazo, es capaz de recordar hasta siete elementos máis o menos, no? Entonces, a la hora de diseñar como se traduce esto? Pues, por exemplo, quando le pedimos que introduzca sus datos su tarjeta de crédito, pues, agrupar los dígitos de manera que, bueno, que sea muy rápido, para ellos entender, sí, bueno, sí hay algún error, sí lo han introducido correctamente. La ley de Fitz, que, bueno, que lo típico, no? Quando tenemos un botón pequeñito, sobre todo desde mobile y nos cuesta seleccionarlo, no? Pues, bueno, tener esos elementos pues, más, intenta-nos un poquito máis grandes, sobre todo en mobile, para que el usuario pues, no tenga problemas, no? A la hora de navegar. E el efecto Bonrestorf, que también se come, no? Fe como efecto de aislamiento, que nos dice que, bueno, que cuando tenemos varios objetos parecidos el que nos es máis fácil de recordar normalmente, pues, es el que a nivel de, pues, ya sea color o tamaño, está como resaltado, no? Por eso, muchas veces, a página de suscripción el plan recomendado, pues, está en otro color, tiene una etiqueta especial, no? Es por este sesgo cognitivo, no? Entonces, bueno, las CTAs e todos estos elementos que nos interesa que el usuario pues vea con facilidad, pues, tenemos que resaltarlos de alguna manera, así como en la oferta que nos interesa que, bueno, que le recomendemos, no? El efecto Bandagon, lo típico de, bueno, que cuando vemos que todo el mundo está usando algo, aprobado algo, entonces, pues, este lo típico, no? En unha landing de estas marcas ya confían en nosotros, ya han utilizado esto porque que pasa que cuando vemos esto es un sesgo cognitivo que nos dice que, claro, que cuando vemos que todo el mundo está haciendo algo, no? Ha aprobado algo en nosotros, no? Pues, no vamos a ser menos, no? Nos crea aí un el famoso fomo, no? E es como, ui, esto yo también lo quiero, no? Entonces, bueno, cuando se trata de sesgos cognitivos, máis que combatirlos realmente, lo que podemos hacer es entenderlos porque sempre lo sabrá, o sea, es algo que que es irracional, no? E, entonces, nosotros, tanto como seos como diseñadores pues, lo que podemos intentar hacer simplemente, pues, entenderlos, familiarizarnos con ellos e proporcionar soluciones, diseñar experiencia en base a los mismos para, bueno, reducir el impacto e, bueno, entender pues eso e, aquí os dejo, bueno, este artículo que es el de la Wikipedia, es como el máis completo a día de hoy, veréis que la lista es infinita, o sea, hay uno, de hecho, que se llama el efecto Google que, si soy seos, también os invito a a descubrir. Buenas prácticas seo en diseño web. A ver este apartado, veréis que, a lo mejor sobre todo, se soy seos, habrá cosas que no que ya sabré seguramente, que es un H1 e este tipo de cosas pero no está de má recordarlo porque sabemos que, a veces, hay cosas que son obvias pero, luego, tenemos webs con 13 H1s e es como, ui, pues, a lo mejor, no, no. Vamos a descubrir algunas de las máis frecuentes. Esta fuente, no sé por qué se ve así, por cierto pero, bueno, aquí lo que originalmente ponía era que, bueno, hay que utilizarlos encabezados de forma que creemos una jerarquía, vale, no podemos utilizarlos simplemente con fines estilísticos, esto significa que en una página, por ejemplo, sólo puede haber un H1, sólo hay un título principal, no, luego, pues, temos los subtítulos H2, H3, no, esto nos ayuda a organizar e resaltar el contenido e hace que sea claro, tanto para os usuarios como para os buscadores. Luego, también, muy parecido el enlazado interno e la arquitectura web que facilita la navegación e la usabilidad. Luego, también, pues, nos ayuda a que os buscadores, tanto os buscadores como os usuarios, entiendan la relevancia del contenido que páginas son máis importantes, empezamos desde o Home, enlazamos a las siguientes páginas máis importantes e se crea aí como una estructura e, bueno, cada página debe estar a menos de tres clicks de la Home. Se queremos que estas páginas se encuentren, se crea como mucha profundidad e, entonces, tanto os usuarios como buscadores como Google pueden tener problemas a la hora de encontrar nosas páginas. Luego, también, outra cosa que tenemos que evitar, son las páginas webfanas que son esas páginas que no tienen ningún enlace desde nuestra propia web. Porque, se no hay enlaces como os buscadores al descubrir las web van siguiendo enlaces, así es como van descubriendo nosas páginas, claro, se no hay ningún enlace, pues esta página es máis difícil que se encuentre. La adaptación a mobile, os buscadores cada vez han ido priorizando máis la versión mobile de una página web, tenemos o mobile first indexing, que significa que, quando os robots de Google encuentran unha web, a primera versión que van a ver es la versión mobile. Quando un diseñador nos pregunta áí, al adaptar a mobile, podemos quitar tenemos unha párafada aquí que no es necesaria, podemos quitar contenido, no, la respuesta es no, e sobre todo, se tenemos en cuenta que esa versión mobile va a ser la primera que va a ver Google, entonces, es importante que el texto que tenemos en la versión desktop sea el mismo que demos en la versión mobile, luego podemos jugar con acordeones, con diferentes cosas que se pueden integrar en la web para mostrar el contenido de una manera que en el mobile sea máis visual, pero tiene que ser el mismo contenido. Luego también o uso de JavaScript, podemos tener webs obviamente que utilicen JavaScript pero el contenido debe ser fácilmente rasteable e indexable, con estos acordeones que os decía hace un momento que se pueden utilizar para que a información en mobile por ejemplo sea máis visual e non sobrecargue tanto al usuario, es importante que al hacerlo pues, bueno, optemos por tecnologías compatibles e que no estemos bloqueando nada de cara a los buscadores, porque a veces al utilizar JavaScript, según como se hagan estas implementaciones, es algo que que puede ocurrir, no? e entonces, bueno, también cuando sea posible, a la hora de animar el contenido, también se recomienda utilizar optar por HTML e CSS sempre que sea posible. Luego también hay técnicas Black Hat que a veces también podemos hacer de manera involuntaria que es ocultar el contenido real e tener una versión en el código HTML que no corresponde con lo que se está viendo en pantalla, no? Entonces, al utilizar CSS, esto es algo que también se puede hacer, no? Muchas veces sin querer, incluso. Entonces, bueno, para evitarlo tenemos que probar distintos dispositivos e navegadores, ver que podemos comprobar que estamos mostrando lo mismo e corregerir cualquier contenido oculto que estemos que no sea intencional, no? e luego también las etiquetas para enlaces quando añadimos un enlace en HTML pues tienen que tener el atributo HRF que esto especifica la URL de destino. Se ponemos div, por exemplo que pasa? que se pierde significado semántico que se pueden crear problemas de accesibilidad por exemplo, personas que esten utilizando lectores de pantalla a la hora de navegar por nuestra web podrían tener problemas, no? De todos modos, también os digo que todo o que estamos viendo hoy es súper frecuente de hecho, esta captura es del mismo Google de las búsquedas de inteligencia artificial generativa isto é una captura real de los cambios que está prevando Google con la IA hasta el mismo Google comete estas cagadas, no? Entonces, bueno las imágenes tenemos que utilizar formatos adecuados, WebP intentar pues eso que sean imágenes ligeras eliminar toda la información relacionada con nuestras cámaras porque a la hora de subir archivos esta información forma parte del archivo de imagem no olvidarnos del texto alternativo o al texto para asegurarnos de que é accesible a persona con una carga lenta o que necesite un lector de pantalla pues pueda, aunque no vea la imagen sepa que incluye esa imagen e nombres descriptivos nombres que incluyan pues que está mostrando realmente esa imagen evitar imágenes grandes e bueno e utilizar técnicas de almacenamiento en cache que sean ligeras sobre todo e descriptivas luego también, isto parece tailandés non sé porque se vea así da verdade pero bueno, evitar el keyword stuffing o que es abarrotar un texto de keywords tenemos que intentar que nuestros contenidos sean lo máis naturales posibles e luego también utilizar palabras relacionadas semánticamente para enriquecer el contenido e bueno e no sobrecargar el contenido de keywords porque esto é contraproducente e cada vez Google lo va penalizando máis entonces pues por ejemplo se temos recetas saludables alimentación equilibrada, nutrición e todas esas palabras que tengan una relación, así como las llamadas entidades, pues todas esas palabras de esa familia el scroll infinito nos ayuda es una buena solución, quando tenemos blogs con muchos artículos nos proporciona rapidez, mejora la experiencia de navegación que pasa con el scroll infinito que es posible, según como simplemente que los robots de Google por ejemplo, no puedan rastrear no puedan encontrar todo el contenido e máis a medida que vamos bajando entonces, tenemos que estructurar e marcar adequamente este contenido e asignar URL únicas para cada carga adicional que se vaya haciendo e evitar una carga excesiva de contenido e sobre todo proporcionar opciones de navegación e un buscador por ejemplo el lazy loading, muy parecido nos ayuda a cargar contenido tenemos que utilizar, se recomendar métodos como na carga progresiva e no podemos evitar no podemos olvidar, como os decia hace un momento las imágenes, que tengan la etiqueta alt las migas de pan, muy importantes también para potenciar el enlazo interno e mejorar la experiencia del usuario e que pueda encontrar tanto usuarios como buscadores, pues toda la información que necesitan e estruturar el contenido e la canibalización tenemos que evitarla, entonces cuando tenhamos páginas que compiten por la misma palavra clave podemos tener contenidos parecidos pero que no cubran la misma intención de búsqueda e haciéndolo así, estructurando bien el contenido e assegurando no sé que tenhamos que non competimos por la misma keyword pues va a ser más fácil tanto para o usuario como para para os buscadores o famoso EAT no nos pueden faltar elementos clave como cajas de autor biografías perfiles sociales para mejorar la fiabilidad e a autoridad de una página web esto é importante tanto para os usuarios como para Google no nos podemos olvidar de herramientas como Sets Console e las Core Web Vitals importantes tanto para SEOs como para diseñadores e nada se me da tempo vamos a ver rápidamente logo esto igualmente, lo tendréis en mi speaker deck, lo subiré como fomentar la elaboración entre equipos muchas veces tendemos a hacer esto esto de quina é responsabilidad de todos, de nadie e en vez de hacer esto deberíamos hacer máis bien esto que é que cada uno aquí no se trata de que los SEOs de repente postengamos que haces el trajo dos diseñadores o viceversa e cada uno tiene su función e nos coordinamos, colaboramos e trabajamos juntos ao final hacía un objetivo común en este caso seria proporcionar a mejor experiencia para o usuario alineada con os objetivos de negocio tenemos que evitar trabajar en silos tenemos que facilitar a comunicación se hacemos cambios importantes que podan afectar ao outro equipo comunicar-los antes de realizarlos e logo también crear canales efectivos para compartir cualquier actualización cualquier idea esto va a depender mucho do tipo de empresa, organización que trabajeis pero os recomendaría tener unha reunión a frecuencia da determinaris un pouco em base an empresa quincenal, mensual para comentar todos os desafíos toda a información que é relevante para o outro equipo e sempre incluir unha agenda unha enlace donde se un miembro o que considera necessario o que se teme que comentar logo también os experience de diseño que se realizan normalmente durante unha semana e se habla de iniciativas que se queden llevar a cabo é importante que se incluya ao equipo deseo isto nos va a ayudar a evitar que luego tengamos que reacer cosas porque non son amigables a nivel deseo então se se incluya deseo desde o principio que va a ser máis produtivo para todos logo también datos e accesos qualquer herramienta que sea importante para ambos equipos pruebas de usabilidade que haya realizado o equipo de experienciado de usuario que o equipo deseo pues pueda beneficiarse entender un poquito mejor que é o que necesitan esos usuarios como que como podemos mejorar nuestras páginas porque no tenemos que pensar sólo que querem ver antes de chegar a la página na mesma página tanto como seo como diseñadores tenemos que preocuparnos en estar proporcionando a mejor experiencia e qualquer tipo de información o herramienta que pueda ser útil para cada equipo logo también hacer formaciones conjuntas, trainings aunque cada uno tenga súa función se entendemos mejor que é o que está haciendo cada uno pues al final vamos a tener conversaciones máis provechosas e iso eso, facilitarươngo intercambio dhe conocimiento É iso ésu todo Múa gracias É iso ésu todo e é iso ésu todo E é iso éu todo É sí que é eu Vemos algo Temos Águemresse binditos es o races É xa gracias Temos, mira, y hay una pregunta, avesente todo este torrente información que hemos recibido, es un torrente información, yo tengo alguna pregunta también, osa que si non la haces, tengo dudas, tengo dudas, pero de conocimiento, de ansia, adelante. Sim, hemos comentado, has comentado antes algo sobre evitar duplicaciones en los encabezados, por ejemplo, e me estava acordando de un caso, que a ver esto como lo ves, es un típica situación en la que en formato de pantalla grande se va mostrar un vídeo de fondo, pero claro, por usabilidad precisamente, en móvil queremos evitar que sea un vídeo, e entonces, aí queremos que en móvil lo que se vea sea un fotograma solamente. Entonces, claro, unha solución puede ser, lo separamos en dos bloques, en dos secciones dos bloques, de forma que unha se vea en un tamaño e outra en outro, pero de cara a los indexadores, van a aparecer, si tiene la cabecera, van a aparecer dos H1s. A la pregunta, porfa, que se no no da tio. No, entonces, aí como solucionamos ese, eso de no poner cosas que no se vean, claro, porque ahí vamos a poner algo que no se va a ver. Claro, pero me has dicho ahora, me hablabas de dos H1s también. Sí, pensando que eso es, digamos, la presentación principal que contiene el H1, entonces... Pero solo hay uno, no? La página, o sea, solo hay un H1. Claro, solo hay uno, pero claro, pero aí dos porque en móvil se va a ver un apartado e en pantalla grande se va a ver outro. Bueno, pero realmente, bueno, hay uno, porque en desktop tienes uno, e logo mobile outro, claro. O sea, no es que haya dos H1s conviviendo, a la vez, digamos, no? Claro, pero el rastreador va a leer que hay dos. Pásame la página. No, pero, a ver, sí que a veces, cuando adaptamos un vídeo de desktop a mobile, a veces lo que se hace, pues, a lo mojor, en desktop tenemos un vídeo horizontal, en mobile un vídeo vertical, eso sería lo ideal, se podemos, pues, replicar pues esa experiencia, no? O sea, que pues ese vídeo horizontal pasa a ser vertical. Si no se puede e optamos por una imagen o algún elemento visual que, al final, reemplace un pouco pues esa experiencia de vídeo, pues, al final, pues, eso nos poderia ser unha solución. A veces, también, que hay elementos, ya cuando se trata máis de imágenes, elementos máis visuales de los que podemos realmente prescindir, porque no es lo máis importante, aquí sí que podriamos ocultarlo, aunque, bueno, también te digo, el típico depende, vale? Tampoco te quiero asegurar de que no va pasar nada, pero sí que, cuando se trata de elementos máis prescindibles, aí ya sí que, bueno, podemos un pouco hacer una excepción, pero todo habría que verlo. E se me lo quieres pasar, pasamelo, eh? Venga, máis preguntitas, que tenemos aquí un pozo de conocimiento por aí, al fondo. Vamos a aprovezarnos de tito lo que podamos, Sara. Sí, sí, luego, sino por Twitter o LinkedIn. Luego tenemos una verbena, mañana tenemos el contributor de... Buenas. Gracias por tu presentación. No te veo. Levanta na mano. Aquí. Vale, vale. Hola. Yo, unha muy cortita, hablando del tema del vídeo, quántos megas consideras que debería tener un vídeo para plantearte que salga en la versión móvil o no? Es que tampoco hay una respuesta a ver, tendría que ser lo máis ligero posible, pero tampoco es que haya un límite, sabes Google, no te va a decir, mira, máximo dos megas, sabes? Claro, intenta pues optimizarlo tanto como puedas, sin perder la calidad, claro. E era a pergunta real, a que tenia pensada, a nivel de contenido, nós temos unha sección de servicios en la parte de desktop, está muy desarrollada, e en la parte de móvil le damos unas pinceladas, e esto lo hacemos ocultando secciones. Esto está bien, está mal? Tendría a verlo, pero en principio está mal. O que podes hacer, por exemplo, pues utilizar un acordeón o opciones que a nivel visual pues le permitan al usuario ampliar esa información, pero realmente no la estás ocultando, simplemente pues, bueno, hay que hacer click para mostrarla, pero sí, se empiezas a ocultar, luego tenen en cuenta que Google va ver la versión mobile antes que la versión desktop, sabes? Então realmente no te va a beneficiar. O sea, por que tienes todo ese contenido en desktop e luego mobile no, no? O sea, lo mojor, es que no necesitas tanto contenido en desktop, tampoco. Vale, gracias. Nada. Hay alguna pregunta más por aquí? No veo, no veo. Bueno, pues, de nuevo, por favor, un gran aplauso para Sara e... Muchas gracias por venir. Y aquí tenemos un regalito, un detallito drago. Ai, ai, muchas gracias.