Qué: Como parte de nuestros esfuerzos continuos para hacer que nuestra documentación sea más accesible, actualizamos varios textos de anclaje para que sean más descriptivos de la página de destino.

Por qué: Dependiendo de la configuración de un lector de pantalla, el usuario puede estar saltando de un enlace a otro en una página, por lo que cada texto de anclaje en una página debe ser descriptivo, incluso sin el contexto circundante.

9 de enero
Cambiar las referencias @id para usar hashtags

Qué: Cambie todos los ejemplos de código de datos estructurados que usan referencias @id en la página para usar hashtags. Por ejemplo, el ejemplo de clips en nuestra documentación de recetas.

Por qué: una de las mejores prácticas del esquema es utilizar hashtags como identificadores de nodos en la página que se pueden resolver en RDF, y queremos que nuestros ejemplos sigan las mejores prácticas. Sin embargo, no necesita cambiar sus ID existentes si todavía usa identificadores en la página.

Agregar soporte para edad sugerida al producto

Qué: se agregó compatibilidad con la propiedad suggestedAge como alternativa a suggestedMaxAge y suggestedMinAge. Se aclaró la lista de valores posibles para rangos de edad en nuestra documentación de datos estructurados del producto.

Por qué: Queremos que sea más fácil y flexible para las personas especificar rangos de edad para un producto. Además, la redacción anterior era confusa y no se correspondía bien con la documentación de Merchant Center sobre los rangos de edad de los productos.

5 de enero
Aclarar la fuente principal de los fragmentos

Qué: en nuestra documentación sobre fragmentos se aclara que la fuente principal del fragmento es el contenido de la página en sí.

Por qué: la redacción anterior implicaba incorrectamente que los datos estructurados y el elemento HTML de meta descripción son las fuentes principales de fragmentos.

—
Texto de enlace descriptivo
Al agregar enlaces basados en texto dentro de una página web, elija cuidadosamente qué palabras desea vincular. La regla general es vincular siempre las palabras clave. Vincular palabras clave:
ayudar a mejorar la optimización del motor de búsqueda
brinde más detalles a los usuarios con visión funcional que están escaneando su página web
Proporcionar contexto a personas sin visión funcional que puedan estar usando un lector de pantalla u otra tecnología de asistencia.
Enlaces, lectores de pantalla y accesibilidad

El texto vinculado debe tener sentido fuera de contexto. Esto se debe a que los lectores de pantalla a menudo navegan de un enlace a otro, omitiendo el texto circundante. Leerán cada enlace en voz alta, en orden secuencial.

Por ejemplo, si el texto del enlace es “País del Cobre”, el lector de pantalla dirá “enlazar País del Cobre” y el usuario sabrá que la página web a la que se vincula probablemente trate sobre el País del Cobre. Si, en cambio, el texto del enlace es “haga clic aquí”, el lector de pantalla dirá enlace, haga clic aquí y el usuario no tendrá idea de qué trata la página web enlazada.

Buen ejemplo

<p>Michigan Tech y <a href=”/tour/copper-country/”>Copper Country</a> tienen una sensación de pueblo pequeño. Los estudiantes y miembros de la comunidad dicen que es perfecto: no tan grande como para que sea fácil perderse, pero tampoco demasiado pequeño. Un lugar ideal para llamar hogar.</p>

Mal ejemplo

<p>Michigan Tech y Copper Country tienen una sensación de pueblo pequeño. Los estudiantes y miembros de la comunidad dicen que es perfecto: no tan grande como para que sea fácil perderse, pero tampoco demasiado pequeño. Un lugar ideal para llamar hogar. <a href=”/tour/copper-country/”>Haga clic aquí</a> para obtener más información.</p>

Otra característica que los usuarios de lectores de pantalla pueden aprovechar es la capacidad de ordenar los enlaces de las páginas alfabéticamente. Esto es particularmente útil si el usuario ya tiene un enlace específico en mente, como un formulario de contacto o una lista de personal. Es importante mantener las palabras clave más importantes al principio del texto del enlace. La “lista de personal” aparecerá alfabéticamente como se esperaba. “Ver nuestra lista de personal” no lo hará.

Consejos para escribir texto de enlace

Utilice los siguientes consejos para asegurarse de que el texto del enlace sea accesible:

Evite utilizar una URL como texto de enlace; especialmente si es largo o complicado
Es posible que las URL no sean fácilmente legibles para los humanos o los lectores de pantalla.
Mantenga las frases vinculadas lo más breves posible, sin dejar de ser significativas fuera de contexto. Esto ahorrará tiempo a los usuarios de lectores de pantalla, ya que será necesario hablar menos. Por ejemplo,
“hacer un regalo” es preferible a “para hacer un regalo en línea, haga clic aquí”
“Contáctanos” es preferible a “puedes contactarnos mediante”
Vincula al menos una palabra completa. Por lo general, dos palabras son mejores.
Será difícil hacer clic en un enlace que sea solo una letra o un símbolo y no proporcionará contexto.
Si debe agregar indicaciones de acción a su enlace, colóquelas al final. Por ejemplo,
“Contáctenos (abre una ventana emergente)” es “El enlace abre una ventana emergente: contáctenos”
No agregues la palabra “enlace” a tu texto
Intente asegurarse de que cada enlace único en su página web utilice un texto de enlace único.
Si tiene dos enlaces de listas de personal diferentes que van a la misma página, está bien. Si van a páginas diferentes, deberían ser diferentes, como “personal de servicios digitales” y “personal de servicios de impresión”.
Si utiliza “leer más” con frecuencia, imagine lo frustrante que sería para un usuario de lector de pantalla escuchar “leer más” una y otra vez sin contexto.
Nunca incluyas enlaces vacíos usando href=””
Vinculando yo

magos

Para algunas páginas web, puede ser apropiado vincular una imagen a una página web en lugar de vincular texto. En estos casos, el lector de pantalla leerá el texto alternativo de la imagen (etiqueta ALT) como texto del enlace. La etiqueta ALT debe incluir tanto el contenido como la función de la imagen. Si la imagen es decorativa, entonces sólo es necesaria la función.

Ejemplo de imagen decorativa

<p><a href=”/tour/copper-country/”><img src=”my-picture.jpg” alt=”Listado de personal” /></a></p>

Ejemplo de imagen informativa

<p><a href=”/tour/copper-country/”><img src=”my-picture.jpg” alt=”Diagrama que muestra 200 pulgadas de nieve total; vinculado a subtotales mensuales” /></a> </p>

Técnicas de programación opcionales

Puede haber casos en los que desee conservar el texto del enlace general, como “[leer más]”. En estos casos, puede utilizar aria-label o aria-labelledby para brindar contexto de enlace a los lectores de pantalla.

ejemplo de etiqueta-aria

La mayoría de los lectores de pantalla leerán en voz alta el atributo aria-label en lugar del texto del enlace. Por ejemplo, un enlace “leer más” relacionado con el País del Cobre se puede codificar de la siguiente manera:

<p class=”right”><a href=”/tour/copper-country/” aria-label=”Copper Country”>[leer más]</a></p>

aria-labelby Ejemplo

Puede haber casos en los que un título cercano pueda actuar como la etiqueta perfecta para un enlace general. En este caso, puedes conectar ese título al enlace general usando aria-labelledby.

<h2 id=”copper-country”>El país del cobre</h2>

<p>Michigan Tech y Copper Country tienen una sensación de pueblo pequeño. Los estudiantes y miembros de la comunidad dicen que es perfecto: no tan grande como para que sea fácil perderse, pero tampoco demasiado pequeño.</p>

<p class=”right”><a href=”/tour/copper-country/” aria-labelledby=”copper-country”>[más información]</a></p>

En lugar de decir “enlace, obtener más información”, el lector de pantalla dirá “enlace, Copper Country”.

Texto del enlace de prueba

Usar un lector de pantalla para leer cada enlace de su página web es la mejor prueba que puede realizar. Sin embargo, si no tienes acceso a un lector de pantalla, lee en voz alta el texto vinculado de cada uno de tus vínculos. ¿Alguien a quien estás leyendo entendería a qué contenido estás enlazando basándose únicamente en las palabras enlazadas pronunciadas?

Aprende más

Para obtener más información sobre el texto del enlace descriptivo:

WebAIM: Enlaces e Hipertexto
W3C: Propósito del enlace (en contexto)
Omni CMS

Para crear un enlace dentro del contenido de su página web, resalte su texto o imagen y luego haga clic en el icono de enlace en la barra de herramientas o use el acceso directo Cmd/Ctrl + K.

Para agregar un atributo aria-label o aria-labelledby, navegue hasta el código fuente usando la barra de herramientas.

Para agregar una imagen con texto alternativo al cuerpo de tu página, lee el paso cuatro en Insertar imagen. Para modificar el texto alternativo de una imagen que ya se encuentra en el cuerpo de su página web, seleccione la imagen y luego haga clic en el botón “Insertar/Editar imagen” de la barra de herramientas.

Actualización de SEO de Google de enero de 2024