Friends of Figma Barcelona - SEO y UX: El match perfecto
Presentación de la charla "SEO y UX: El match perfecto" para un evento de Friends of Figma Barcelona, celebrado en Aticco Bogatell el 8 de junio de 2023.
Barcelona • Background en Traducción e Interpretación • Máster en Diseño UX/UI • Intento de rockstar a tiempo parcial @sarafdez /in/internationalseo sara-fernandez.com Aquí me puedes cotillear @sarafdez Sara Fernández
de una web en buscadores como Google. Pueden hacerse tanto dentro de una web (“On-page”), como fuera (“Off-page”). Al hacer SEO, aumentamos las visitas gratis (“tráfico orgánico”) que una web recibe. UX Disciplina que se encarga de analizar a los usuarios para descubrir sus necesidades y diseñar productos o servicios que respondan a ellas. Don Norman: “La experiencia del usuario (UX) abarca todos los aspectos de la interacción del usuario final con la empresa, sus servicios y sus productos”.
principales: 1-Rastreo: las arañas (rastreadores web automatizados) exploran y siguen enlaces por toda la web. 2-Indexación: se catalogan las páginas encontradas para que sean accesibles en la base de datos del buscador. 3-Ranking: se determina mediante algoritmos que evalúan la relevancia y la calidad de las páginas indexadas para mostrar los resultados más relevantes para cada usuario en respuesta a una búsqueda.
para evaluar una web según su UX. Tienen en cuenta factores como la velocidad de carga, la estructura del sitio, la facilidad de navegación y la adaptabilidad a móviles. Estos factores influyen en el posicionamiento, y favorecen a las páginas que priorizan la UX. @sarafdez
pasa por alto el uso adecuado de etiquetas de encabezado (H1, H2, etc) o se usan únicamente con fines estilísticos. El encabezado principal (H1) se utiliza para el título principal de la página, mientras que los encabezados secundarios (H2, H3, etc) se usan para los subtítulos y secciones secundarias. Esto ayuda a organizar el contenido y a resaltar la estructura de manera clara tanto para los usuarios como para los buscadores.
navegación, mejora la usabilidad, ayuda a los motores de búsqueda a entender la estructura y contenido de la web y promueve la relevancia y autoridad del contenido. Es recomendable que cada página esté a menos de tres clics de distancia desde la home y que evitemos las páginas huérfanas (sin enlaces internos que las vinculen), ya que sin enlaces ni los motores de búsqueda ni los usuarios podrán encontrarlas.
prioridad a la versión móvil para indexar y clasificar los resultados. Si ocultas información importante, pueden pasar por alto o considerar irrelevante tu contenido. Además, los usuarios pueden abandonar tu web si no encuentran la misma información en ambas versiones. Mantener un buen posicionamiento en los motores de búsqueda y ofrecer una experiencia positiva requiere que todo el contenido relevante esté disponible y accesible en todas las versiones del sitio web.
que sea fácilmente rastreable e indexable. Si está oculto o no se puede acceder al mismo debido a un uso excesivo de JavaScript, los motores de búsqueda no podrán reconocerlo. Para evitar estos problemas, debemos utilizar JavaScript con moderación y considerar alternativas que sean más compatibles con los motores de búsqueda. Esto incluye el uso de tecnologías y estándares web más accesibles para mostrar y animar el contenido, como HTML y CSS.
una técnica “black hat” que implica ocultar contenido real a los usuarios y mostrar una versión diferente en el código HTML de una página web. Esta práctica busca manipular el posicionamiento de manera desleal. Puede realizarse mediante CSS u otros métodos. Es importante tener cuidado al diseñar una página para evitar ocultar contenido relevante de forma involuntaria. Se recomienda realizar pruebas en diferentes dispositivos y navegadores para asegurarse de que todo el contenido sea visible y accesible. Si se detecta contenido oculto no intencional, se debe corregir.
HTML apropiadas para los enlaces son los elementos <a> (ancla). Un enlace se crea con la etiqueta <a> y se le asigna el atributo ‘href’ para especificar la URL hacia la que queremos dirigir al usuario. Por ejemplo: <a href="https://www.ejemplo.com">Enlace a Ejemplo</a> Cuando se utiliza un ‘div’ (elemento genérico que agrupa y estructura contenido sin un propósito específico) en vez de ‘a’ se pierde el significado semántico que el elemento ‘a’ proporciona. Esto puede crear problemas de accesibilidad, por ejemplo, para usuarios que usan lectores de pantalla.
❌ SEO: optimizar para los buscadores sin tener en cuenta las expectativas del usuario y la intención de búsqueda detrás de las palabras clave. ❌ UX: diseñar una web sin hacer una investigación previa, sin considerar las necesidades de los usuarios, haciendo copia y pega de lo que hace la competencia.
la coherencia visual y de contenido en todas las páginas de una web. Esto garantiza una experiencia satisfactoria, reduce la tasa de rebote y mejora la navegación. https://www.indy100.com/viral/bbc-down-error-page-clown-fire-scary-8466521
es crucial para mejorar el rendimiento y el SEO de un sitio web. Esto implica comprimir las imágenes, utilizar formatos de archivo adecuados y agregar texto alternativo para mejorar la accesibilidad y el SEO. Además, es recomendable optimizar el nombre de archivo de las imágenes utilizando palabras clave relevantes y descriptivas. En lugar de nombres genéricos, deben reflejar el contenido de la imagen. Por ejemplo, en lugar de "IMG1234.jpg", es preferible utilizar un nombre como "gatete-adorable.jpg" si la imagen representa un gato bonito.
uso excesivo de imágenes grandes, videos o animaciones complejas puede ralentizar el tiempo de carga. Los buscadores favorecen las webs que ofrecen una experiencia de usuario rápida y fluida. Tenemos que crear experiencias visualmente atractivas e interactivas, pero optimizando las imágenes, minimizando el código y usando técnicas de almacenamiento en caché para garantizar una carga más rápida.
texto para comprender e indexar las páginas de una web. Es importante incorporar keywords de manera natural, sin forzarlas o sobrecargar el texto (“keyword stuffing”). También se recomienda usar palabras relacionadas semánticamente. Por ejemplo, si el tema principal de una página es "recetas saludables", estas palabras podrían ser "alimentación equilibrada" o "nutrición".
descriptivas y amigables para el usuario y deben reflejar el contenido de la página. Por ejemplo, en lugar de "www.ejemplo.com/p=123456", es preferible tener una URL más descriptiva como "www.ejemplo.com/titulo-del-articulo". Además, se deben evitar elementos como números o fechas, ya que puede hacer que parezcan obsoletas o menos relevantes con el tiempo.
tags) y las de descripción (meta description) dan información sobre el contenido de una página. Son elementos clave que se muestran en los resultados de búsqueda. Si son relevantes y atractivos podemos aumentar la probabilidad de que los usuarios hagan clic en nuestra página. Optimizador de metadatos: https://serpsim.com/
genéricos es un error que debemos evitar. En lugar de añadir enlaces a texto como "haz clic aquí" o "más información", se recomienda usar palabras que proporcionen contexto y ayuden a los motores de búsqueda a entender el contenido enlazado. Esto mejora la experiencia del usuario, ya que brinda información clara sobre el destino del enlace, y beneficia al SEO al proporcionar información relevante y contextualizada para los buscadores.
código que indica qué tipo de contenido hay en la página (si es una receta, una persona, un evento, un producto…), y a veces también “embellece” y amplía el mismo resultado de búsqueda. Al implementarlo correctamente, se enriquece la información mostrada en los resultados de búsqueda, lo que aumenta la visibilidad y la relevancia del contenido. Ejemplo de Schema markup para recetas de cocina.
rapidez y mejora la experiencia de navegación al cargar automáticamente más contenido a medida que nos desplazamos hacia abajo. Sin embargo, puede crear problemas de indexación (no hay garantía de que los robots rastreen todo el contenido), bajar la velocidad de carga y crear dificultades para encontrar ciertos elementos. Tenemos que estructurar y marcar adecuadamente el contenido, asignar URL únicas para cada carga adicional, optimizar el rendimiento y la velocidad de carga, evitar una carga excesiva de contenido y proporcionar opciones de navegación y búsqueda.
a cargar contenido multimedia gradualmente y optimizar la velocidad de carga. Sin embargo, es importante que este contenido sea accesible para los motores de búsqueda. Se recomienda utilizar métodos como la carga progresiva o bajo demanda, que permiten que el contenido sea indexable y rastreable. Importante: no debemos olvidar el uso de las etiquetas "alt" para las imágenes.
en el diseño no solo excluye a ciertos usuarios, sino que también afecta al SEO. Los motores de búsqueda valoran la accesibilidad y pueden penalizar las páginas que no cumplen con las pautas de accesibilidad en materia de contraste y legibilidad, navegación clara y sencilla, optimización de la velocidad de carga y el uso adecuado de las etiquetas y atributos (alt text, H1, H2, etc). Inspector de accesibilidad de Chrome: https://www.smashingmagazine.com/2020/08/accessibility-chrome-devtools/
e intuitivas que faciliten la navegación y el descubrimiento del contenido. Además, los enlaces internos deben estar estratégicamente colocados para guiar a los usuarios de una sección a otra de manera fluida. Esto también ayuda a los buscadores a comprender la estructura del sitio y a indexar el contenido de manera más efectiva.
contenido, tanto los buscadores como los usuarios pueden tener dificultades para encontrar la información. Agrupa el contenido relacionado por grupos (clusters) que se enlazan desde una página central (pillar page). Esta estructura de enlazado interno facilita la navegación y la comprensión de la relación entre las diferentes páginas de un blog o web.
de pan o breadcrumbs tienen numerosas ventajas: mejoran la experiencia de usuario, ayudan a comprender mejor la jerarquía y la organización del contenido, favorecen el enlazado interno. Si no las usamos, tanto buscadores como usuarios pueden tener problemas a la hora de encontrar el contenido y comprender la estructura del site.
páginas de una misma web compiten por las mismas palabras clave en los resultados de búsqueda. Esto puede confundir a los usuarios y a los motores de búsqueda. Debemos evitar la duplicación de contenido: cada página debe tener un enfoque e intención de búsqueda distintos. La canonicalización es una técnica que ayuda a resolver este problema. Consiste en establecer una página canónica, que se identifica como la versión principal y más relevante del contenido duplicado o similar. Esto se logra mediante la etiqueta rel="canonical", que indica a los motores de búsqueda qué página deben considerar.
se tenga en cuenta el E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) al diseñar una web porque afecta a la credibilidad, la confianza y la calidad percibida por los usuarios y los motores de búsqueda. Debemos incluir ciertos campos y elementos al plantear el prototipo de una web o blog, como cajas de autor, biografías, perfiles sociales, páginas como “acerca de”, política de privacidad, testimonios y reseñas...
Google Search Console y las Core Web Vitals (conjunto de métricas que miden la experiencia de usuario en un sitio web, incluyendo la velocidad de carga, la interactividad y la estabilidad visual). Nos ayudan a monitorear el rendimiento de una web e identificar problemas.
debe mantener su independencia, pero todo el mundo debe tener visibilidad sobre lo que se está haciendo • Asegúrate de que los equipos comuniquen cualquier cambio relevante que pueda afectar al SEO o a la UX • Fomenta espacios en los que los equipos de SEO y UX puedan revisar y discutir los avances, desafíos y oportunidades de mejora en conjunto
dentro del Slack empresarial puede facilitar que los equipos compartan ideas, dudas y se mantengan actualizados de manera efectiva y asíncrona. Compartid también otros canales relevantes para garantizar la visibilidad. • Programad una reunión recurrente (quincenal, por ejemplo) para intercambiar información y abordar desafíos comunes. Añadid una agenda a la invitación para hacerla más efectiva y que todo el mundo pueda participar, incluso si no asisten.
a miembros del equipo de SEO en los sprints permite que su expertise esté presente desde las primeras etapas del proceso de diseño. Esto asegura que todos los aspectos de SEO se tengan en cuenta desde el principio y se integren de manera efectiva en nuestros diseños. Animadlos a participar en técnicas de brainstorming como “Crazy 8’s” y la misma creación de los prototipos.
tenga unas responsabilidades asignadas. Ejemplo: colaborar en la optimización de una página ya existente o en el diseño de una nueva interfaz. Esto fomenta la colaboración, la integración de objetivos y la creación de soluciones más efectivas.
a las sesiones de investigación con usuarios, compartid las grabaciones y los resultados de pruebas de usabilidad. • SEO: compartid informes de rendimiento, tendencias de búsqueda, si hay actualizaciones de algoritmo, etc. • SEO/UX: compartid acceso a los prototipos de Figma, herramientas como Google Search Console y Google Analytics, así como otros archivos relevantes de Miro, Notion, etc.
donde ambos equipos puedan compartir sus conocimientos (buenas prácticas de cada sector, trucos, etc) para aprender el uno del otro. • Estableced una frecuencia (una vez al mes o cada trimestre, por ejemplo) y ajustadla según las necesidades y disponibilidad del equipo. • Cread carpetas en Drive con las grabaciones de la sesiones.
Ahrefs Interaction Design Foundation Nielsen Norman Group Libros: The Art of SXO - Zuzanna Krüger SEO. Las claves esenciales - Aleyda Solís SEO Avanzado - Fernando Maciá No me hagas pensar - Steve Krug Aprender SEO: LearningSEO.io BlueArray - Curso de SEO Técnico Semrush Academy
sarafernandezseo
giancampo
webrider
myriamjessier
ln0721
rocioseo
taijihagino
aleyda
samjanenoble
jonjorowlands
samtorres
holliethubron
sonatard
gr2m
rocio
pauljervisheath
morganepeng
colly
addyosmani
brettharned
carmenintech
cassininazir
destraynor
moore
