SEO y accesibilidad: SEO técnico [Series Part 3]

SeoMarketing

Apasionado por el Marketing Digital

28 de mayo de 2021

Las opiniones del autor son totalmente suyas (excluyendo el improbable caso de hipnosis) y es posible que no siempre reflejen las opiniones de Moz.

Esperamos que haya disfrutado de esta serie sobre SEO y accesibilidad. En la última entrega, Cooper le muestra cómo las estrategias técnicas de SEO que implementa en su sitio pueden ayudarlo a hacerlo más perceptible, operable, comprensible y robusto.

Foto de la pizarra con notas escritas a mano sobre cómo los SEO técnicos pueden centrarse en la accesibilidad.
Haga clic en la imagen de la pizarra de arriba para abrir una versión más grande en una nueva pestaña.

Transcripción de video

Hola, fans de Moz. Bienvenido a la última edición de Whiteboard Friday. Soy Cooper Hollmaier. He estado haciendo SEO desde 2016, y hoy trabajo para un gran minorista al aire libre ayudando a que nuestra estrategia técnica de SEO cobre vida. Muchas gracias por asistir a esta serie sobre SEO y accesibilidad.

Espero que haya obtenido una perspectiva amplia y nuevos consejos y trucos para crear contenido que no solo resuene con su audiencia, tenga un buen rendimiento en las búsquedas, sino que también sea accesible para más personas. Hoy vamos a hablar de SEO técnico y accesibilidad.

SEO técnico y accesibilidad

Vamos a sumergirnos. La última vez hablamos sobre las Pautas de accesibilidad al contenido web, y es posible que recuerde que los cuatro principios de las WCAG son perceptibles, operables, comprensibles y sólidos.

Perceptible

Como SEO técnico, probablemente esté más preocupado por lo perceptible porque sus operaciones diarias, su flujo de trabajo diario implica asegurarse de que las páginas, el contenido y las experiencias que está creando sean accesibles para la búsqueda. motores y perceptible para los motores de búsqueda.

Muchas veces, cuando pasamos por recomendaciones de SEO o auditorías de SEO, escucho muchos temas comunes, como que la etiqueta del encabezado está incorporada en la imagen y, por lo tanto, un motor de búsqueda no puede verla, o el contenido que estoy produciendo es visible para los bots, pero no para las personas. Estos son problemas con la percepción del nivel básico. Quiero que adoptes esa mentalidad y consideres si la aplicas también a toda tu audiencia. Entonces, ¿todas las personas que esperan comprometerse con su servicio, producto o experiencia, pueden percibir todas las cosas que tiene para ofrecer en un nivel básico?

1. Estilos

Imagen de una lista manuscrita de cambios de estilo que incluye texto nativo, sin relleno de palabras clave y contraste de color.

Algunas cosas que podría estar pensando serían similares a las que vería en esta auditoría, como: ¿Está todo el texto de la página visible? ¿Es texto activo? ¿Es nativo de la página, así que puedo seleccionarlo y copiarlo y pegarlo, o está integrado en la imagen y no es accesible para la tecnología de asistencia o los navegadores, o lo que sea? También podría estar pensando: ¿El color contrasta con mi fondo y mi texto, es el contraste correcto?

¿Hay suficiente claridad y nitidez entre mis elementos de diseño? Si las cosas parecen un poco confusas o no está del todo claro que algo sea accesible para un motor de búsqueda y un usuario, regrese al tablero de dibujo y descubra cómo hacer que ambas cosas funcionen bien.

2. Rich media

Imagen de una lista manuscrita de mejoras de Rich Media.

También nos gusta agregar imágenes, texto, video y audio a las páginas que estamos construyendo para nuestros clientes. Es importante que estos elementos enriquecidos, ahora que hemos pasado del texto básico y los elementos de estilo, los elementos enriquecidos que estamos colocando en la página también sean percibidos por todos sus usuarios. Hay un par de cosas que podemos hacer para que eso suceda. En el caso de las imágenes, darles una alternativa de texto y proporcionar algo adicional a esas imágenes ayudará a que un lector de pantalla las vea y que alguien que tenga una discapacidad visual las entienda.

También nombrar cosas con nombres amigables para los humanos en lugar de “DSC1352.JPEG” ayudará a los motores de búsqueda, así como a la tecnología de asistencia, a ver esa imagen y comprender qué es. El contexto en la página, también es importante que coloque imágenes en páginas que agreguen valor. Desea iluminar a un usuario con algo de contenido adicional para darle un poco más de sentimiento o darle más contexto sobre lo que está hablando. Agregue imágenes por valor, no solo para que aparezcan en la búsqueda de imágenes de Google.

¿Y el video? Entonces, el video es un poco diferente. El video tiene una serie de imágenes en movimiento. Entonces, cada vez que pienso en el movimiento, me digo a mí mismo: “¿Cómo puedo asegurarme de que si un usuario quiere detener este movimiento, puede hacerlo?”

Tener controles de reproducción claros es crucial cuando hablamos de accesibilidad, además de tener una excelente experiencia de reproducción de video para cualquier usuario. Además, equivalentes sincrónicos para esas alternativas de texto. Hablamos de imágenes que tienen alternativas de texto. Los videos también deben tener alternativas de texto, pero deben sincronizarse al tiempo con ese video. De lo contrario, no tendrán sentido en contexto.

Luego, asegúrate de que sean distinguibles. Esto es lo mismo entre video y audio. Queremos asegurarnos de que el primer plano y el fondo se distingan fácilmente entre sí. Si su video se siente turbio, si su audio se siente turbio y me toma esforzarme el oído o la vista para poder ver ese contenido y entender lo que está sucediendo, debe ser un poco más nítido, un poco más claro en esas dos distinciones.

Luego, transcripciones de texto. Al igual que necesita subtítulos para videos, para el audio, desea tener una transcripción de texto, por lo que si estoy en un lugar ruidoso y no puedo escuchar el audio o no tengo mis auriculares enchufados o necesito para usar tecnología de asistencia, puedo acceder a ese audio.

Estas son todas las cosas que verá mientras revisa el código como un SEO técnico y debe tenerlas en cuenta.

Si no tiene estas cosas en su sitio web, le permitiría hacer esas preguntas, las preguntas difíciles como: Oye, ¿hay una alternativa de texto a esta imagen? ¿Cómo podrá una persona con una discapacidad visual, cómo accederá una persona con una discapacidad auditiva a estas cosas?

3. Estructura de la página

Foto de imágenes dibujadas a mano comparando diferentes estructuras de página.

Tres y cuatro tratan sobre la estructura de la página y el HTML semántico. Así que esto es un poco menos sobre si esto es perceptible y es algo comprensible.

Es como rozar lo comprensible, pero también debería ser un poco sobre percepción. Tener un montón de H1 en una página, como puede imaginar, un motor de búsqueda podría percibirlo como muy confuso, ¿verdad? Son como, está bien, hay un montón de H1 en esta página. No estoy muy seguro de qué trata esta página. Agregar estructura y encabezados en cascada para indicar las relaciones entre padres e hijos ayudará a que su contenido sea un poco más perceptible. Será más fácil comprender lo que está sucediendo.

4. HTML semántico

Lo mismo ocurre con el HTML semántico. Tendemos a poner muchos divs y spans y elementos no identificables en nuestro HTML. Pero al marcarlos de manera más apropiada, para que entendamos cuál es su significado, entendamos qué contienen esas etiquetas, ya sea navegación, formularios o tablas, proporcionando esa capa adicional de información y comprensión que permitirá a los motores de búsqueda y la tecnología de asistencia. para poder analizar esas cosas, para permitirles percibir las cosas que está colocando en su página que son diferentes entre sí y proporcionar una experiencia más rica.

Operable

Bien, entonces podemos percibir el contenido. Pero, ¿cómo nos aseguramos de que funcione?

1. Mapas del sitio HTML

Foto de un ejemplo de mapa de sitio HTML dibujado a mano.

Un par de recomendaciones de SEO que a menudo veo que la gente hace son crear un mapa del sitio HTML y poner rutas de navegación en su página. Muchas veces es posible que eso te haga retroceder. Sabemos que el mapa del sitio HTML es muy importante para el SEO, para la visibilidad de esas páginas en lo profundo de la jerarquía de nuestro sitio web.

Sabemos que las migas de pan también son igualmente importantes para la detección. Ambos elementos ayudan a los usuarios con tecnología de asistencia a navegar mejor por el sitio web. El mapa del sitio HTML permite si su menú no incluye todas las páginas de su sitio web o si es confuso o si está usando JavaScript o alguna otra tecnología que no es accesible para mi pila de tecnología.

2. Pan rallado

Foto de ejemplo de migas de pan dibujadas a mano.

Luego, las migas de pan me permiten analizar hacia arriba y hacia abajo, digamos que es una página de búsqueda de productos en un sitio web de comercio electrónico sin tener que volver al menú y luego analizar cada elemento del menú nuevamente. Por lo tanto, estos dos son muy importantes para la navegación, pero también especialmente para las personas que navegan con un teclado y utilizan tecnología de asistencia.

3. Desarrolle el teclado primero

Foto de computadora y teclado dibujados a mano.

Luego, algo que no es SEO pero es importante y fácil de relacionar, primero desarrolle su sitio web y su teclado de experiencia. No todo el mundo tiene un mouse o la capacidad de usar un mouse debido a una discapacidad de movimiento o debido a una discapacidad o debido a la falta de tecnología o hardware. Así que asegúrate de desarrollar el teclado primero, y encapsularás a más de esas personas que estás buscando encapsular con tu audiencia.

Comprensible

1. Idioma

Foto de código HTML escrito a mano especificando LANG =

Comprensible. Así que hablamos en SEO internacional, cuando estamos tratando con diferentes países y diferentes idiomas, lo importante que es usar el HTML en nuestra página para indicar cuál es el idioma de la página. Ayuda a los motores de búsqueda a proporcionar los resultados correctos en el contexto adecuado, tal vez nacional o internacional. También ayuda a los lectores de pantalla a leer su contenido en voz alta en el idioma correcto.

2. Diseño de navegación

Foto de ejemplos de páginas web dibujadas a mano.

Luego, creo que el diseño de navegación y los intersticiales son bastante comunes, pero a nadie le gusta una navegación o un diseño de un sitio web que sea confuso. Cuanto más fácil lo hagas, más fácil será para las personas convertir o hacer lo que estás buscando que hagan con este sitio web, ya sea aprender, comprar o participar en un servicio. Eso es más fácil cuando la navegación y el diseño se simplifican y no usamos diferentes palabras en diferentes lugares para significar lo mismo. Es aún más importante para las personas con tecnología de asistencia.

3. Intersticiales

Foto de página dibujada a mano con un

Intersticiales, a nadie le gustan esas ventanas emergentes en nuestra cara, que no nos permiten navegar por el resto del sitio web. Google tampoco los ama. Pero especialmente para las personas con tecnología de asistencia, si no tratamos esas ventanas emergentes de la manera correcta, terminaremos en un escenario en el que los usuarios pueden estar en una trampa de teclado y no pueden salir del intersticial. o no comprenden que se ha colocado un intersticial en la página. Por lo tanto, es importante tener mucho cuidado al utilizar anuncios intersticiales.

Robusto

Por último, pero no menos importante, es robusto. ¿Cómo nos aseguramos de que el contenido que colocamos en la página sea compatible con una gran variedad de dispositivos y escenarios?

1. Validación

Foto de ejemplo dibujado a mano de validación JSON + LD.

Usar HTML adecuado es una gran manera de hacer esto. Puede usar un validador y puede ver su HTML, su CSS y su JSON-LD. Al crear el código correcto y especialmente cuando usa HTML semántico y le da significado a ese código, tendrá una experiencia mucho mejor y todo su edificio será más digerible.

2. Responsive

Foto de una imagen dibujada a mano de páginas web que cambian de tamaño para dispositivos móviles, pantallas medianas y pantallas grandes.

¿Su sitio web responde? Deberías estar haciendo esto ya. Pero si no es así, asegúrese de que esté funcionando en un dispositivo móvil, una computadora de escritorio y una tableta y que el diseño sea el mismo, tal vez se cambie el tamaño o la imagen de una manera diferente.

3. Interaccionable

Foto de una página web dibujada a mano con flechas para indicar las diferentes interacciones disponibles.

Asegúrate de que se pueda interactuar. Si un usuario quiere poder hacer zoom porque tiene una discapacidad visual o quiere poder cambiar los colores, ¿la tecnología de su sitio web le permite hacerlo? Debería. Si haces estas tres cosas en la parte inferior, creo que hará mucho trabajo pesado y tendrás que hacer mucho menos trabajo porque has construido en el marco, la base para ser accesible. .

Eso es SEO técnico y accesibilidad. Si tiene más preguntas o desea algunas herramientas de validación, hay algunas en el lado derecho aquí, o puede contactarme en Twitter @cooperhollmaier para obtener más consejos. Pero muchas gracias por escuchar Whiteboard Friday y la accesibilidad junto con el SEO. Espero que tome esto y se vuelva cada vez más inclusivo en la forma en que está haciendo SEO en el futuro.

Transcripción de video por Speechpad.com


Recursos

Quizá tambén te interese leer …

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *