$30 off During Our Annual Pro Sale. View Details »

Friends of Figma Barcelona - SEO y UX: El match perfecto

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.

Enlace de YouTube a la ponencia: https://www.youtube.com/watch?v=Rfbh_tJUrPI

Sara Fernández Carmona

June 08, 2023
Tweet

More Decks by Sara Fernández Carmona

Other Decks in Marketing & SEO

Transcript

  1. View Slide

  2. ¿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

    View Slide

  3. ¿SEO + UX?
    @sarafdez linkedin.com/in/internationalseo sara-fernandez.com

    View Slide

  4. @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”.

    View Slide

  5. @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.

    View Slide

  6. ¡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

    View Slide

  7. Optimizing for SXO
    UX más intuitiva y
    satisfactoria
    @sarafdez
    ¡SEO + UX!
    Mejor
    posicionamiento
    en los buscadores
    y aumento del
    tráfico

    View Slide

  8. @sarafdez
    SXO: Search Experience Optimization

    View Slide

  9. Errores frecuentes
    y cómo evitarlos
    @sarafdez linkedin.com/in/internationalseo sara-fernandez.com

    View Slide

  10. @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.

    View Slide

  11. @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.

    View Slide

  12. @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.

    View Slide

  13. @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.

    View Slide

  14. @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.

    View Slide

  15. @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.

    View Slide

  16. @sarafdez
    Usar en vez de ❌
    … Pero tranquilos, ¡hasta el mismísimo
    Google lo hace mal!
    https://twitter.com/rick_viscomi/status/1663564455047991297

    View Slide

  17. @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.

    View Slide

  18. @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

    View Slide

  19. @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.

    View Slide

  20. @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.

    View Slide

  21. @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".

    View Slide

  22. @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.

    View Slide

  23. @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/

    View Slide

  24. @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.

    View Slide

  25. @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.

    View Slide

  26. @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.

    View Slide

  27. @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.

    View Slide

  28. @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/

    View Slide

  29. @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.

    View Slide

  30. @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.

    View Slide

  31. @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.

    View Slide

  32. @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.

    View Slide

  33. @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...

    View Slide

  34. @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.

    View Slide

  35. Cómo potenciar la
    colaboración entre
    equipos
    @sarafdez linkedin.com/in/internationalseo sara-fernandez.com

    View Slide

  36. @sarafdez
    ¿Cómo nos organizamos?
    Veámoslo…

    View Slide

  37. @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

    View Slide

  38. @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.

    View Slide

  39. @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.

    View Slide

  40. @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.

    View Slide

  41. @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.

    View Slide

  42. @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.

    View Slide

  43. Recursos de SXO
    @sarafdez linkedin.com/in/internationalseo sara-fernandez.com

    View Slide

  44. @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

    View Slide

  45. @sarafdez
    ¡Muchas gracias!
    ¿Alguna pregunta? 💡
    @sarafdez
    /in/internationalseo
    sara-fernandez.com

    View Slide