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.
¿Quién soy? ● Consultora SEO Internacional ● Admin de SEO 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
@sarafdez SEO Algunos conceptos básicos… Acciones que mejoran el posicionamiento 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”.
@sarafdez ¿Cómo funciona un buscador? Un buscador tiene tres etapas 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.
¡SEO + UX! Los algoritmos de los buscadores están diseñados 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
@sarafdez Uso incorrecto de los encabezados ❌ A menudo se 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.
@sarafdez Falta de enlazado interno❌ El enlazado interno facilita la 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.
@sarafdez Eliminar contenido al adaptar a mobile❌ Los buscadores dan 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.
@sarafdez Uso excesivo de JavaScript y Flash ❌ Los buscadores prefieren contenido que sea fácilmente rastreable e indexable. Si está oculto o no se puede acceder al mismo debido a un uso excesivo de JavaScript o Flash, los motores de búsqueda no podrán reconocerlo. Para evitar estos problemas, debemos utilizar JavaScript y Flash 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.
@sarafdez “Cloaking” y otras técnicas “black hat”❌ El "cloaking" es 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.
@sarafdez Usar en vez de ❌ Las etiquetas HTML apropiadas para los enlaces son los elementos (ancla). Un enlace se crea con la etiqueta y se le asigna el atributo ‘href’ para especificar la URL hacia la que queremos dirigir al usuario. Por ejemplo: Enlace a Ejemplo 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.
@sarafdez Hacer las cosas sin pensar en el usuario ❌ ❌ 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.
@sarafdez Falta de coherencia entre páginas ❌ Es importante mantener 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
@sarafdez Ignorar la optimización de imágenes ❌ Optimizar las imágenes 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.
@sarafdez Tiempo de carga de página mal optimizado ❌ El 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.
@sarafdez Uso excesivo de keywords ❌ Los buscadores dependen del 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".
@sarafdez URLs con estructuras confusas ❌ Las URLs deben ser 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.
@sarafdez Metadatos no optimizados ❌ Las metaetiquetas de título (title 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/
@sarafdez Anchor texts genéricos❌ Usar textos de ancla (“anchor text”) 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.
@sarafdez Falta de schema markup ❌ Schema markup es un 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.
@sarafdez Scroll infinito mal implementado ❌ El scroll infinito proporciona 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.
@sarafdez Lazy loading mal implementado ❌ Esta técnica nos ayuda 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.
@sarafdez Falta de accesibilidad ❌ Ignorar las consideraciones de accesibilidad 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/
@sarafdez Arquitectura web nefasta ❌ Tenemos que crear arquitecturas lógicas 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.
@sarafdez Contenido desordenado ❌ Sin una jerarquía y organización del 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.
@sarafdez Falta de migas de pan (breadcrumbs) ❌ Las migas 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.
@sarafdez Canibalización de contenido ❌ La canibalización sucede cuando varias 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.
@sarafdez No tener en cuenta el E-E-A-T❌ Es importante que 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...
@sarafdez No consultar Google Search Console❌ Debemos prestar atención a 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.
@sarafdez Conexión entre equipos, no silos aislados ● Cada equipo 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
@sarafdez Cread canales de comunicación efectivos ● Crear un canal 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.
@sarafdez Invitad a SEO a los sprints de diseño Incluir 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.
@sarafdez Proyectos conjuntos Plantead algún proyecto conjunto donde cada equipo 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.
@sarafdez Compartid datos y accesos ● UX: invitad a SEO 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.
@sarafdez Fomentad el intercambio de conocimiento ● Organizad formaciones conjuntas 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.
@sarafdez Recursos Blogs: Search Engine Journal Search Engine Land Semrush 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
smith_217
krmdigitaluk
smclarty1
samtorres
aleyda
adrijanavujadin007
stefanse0
isshiki
raysaddiq
estevecastells
gfiorelli1
awsjcpm
ddemaree
bcantrill
aki_iinuma
shpigford
lauravandoore
kevinliebholz
lara
sachag
myddelton
jacobian
eileencodes
chrisshort