Agregar enlaces de anclaje al contenido del correo electrónico con HTML

Descripción

Un enlace de anclaje lleva al lector a otro lugar del mismo correo electrónico, por ejemplo, desde un índice en la parte superior hasta una sección más abajo. Este artículo explica cómo crear el destino con un bloque HTML y cómo dirigir hacia él un enlace, un botón o un elemento de menú.

Este método funciona en un boletín normal creado con el diseñador de arrastrar y soltar. No necesita escribir su correo electrónico en HTML: solo agrega un pequeño bloque HTML para cada destino.

Por qué es importante

Los enlaces de anclaje hacen que los boletines largos y los correos de tipo resumen sean más fáciles de leer. Los lectores saltan directamente a las secciones que les interesan, se desplazan menos e interactúan más con su contenido. Los enlaces de anclaje son útiles para correos con varios temas, presentaciones de productos o calendarios de eventos.

Use el atributo id en una etiqueta <a> vacía, por ejemplo <a id="section1"></a>. No use el atributo name: la plataforma lo elimina al enviar el correo y el enlace no lleva a ninguna parte. Un <div> con un id tampoco funciona.

Gmail (en la web y en la aplicación) no admite los enlaces a una sección del mismo correo: el enlace no hace nada. Funcionan en la mayoría de las demás aplicaciones de correo, como Apple Mail y Outlook. Si muchos de sus suscriptores usan Gmail, prefiera enlaces a páginas web.

Instrucciones paso a paso

Agregue un bloque HTML
- En el diseñador de correos electrónicos, abra la pestaña Contenido.
- Arrastre el bloque HTML al lugar donde debe llegar el lector, justo encima de la sección a la que desea enlazar.
- El resto de su correo no cambia: sus textos, imágenes y botones siguen siendo bloques normales.
Agregue la marca de destino
- Seleccione el bloque HTML. Su código aparece a la derecha, en el panel Propiedades de HTML.
- Borre el código de ejemplo del bloque y pegue este código en su lugar:
```
Code
<a id="section1"></a>
```
Esta etiqueta vacía marca el destino. El lector no la ve en el correo.
Cree el enlace hacia el destino
- Enlace en un texto: seleccione el texto y haga clic en el icono de enlace (Insertar/editar enlace) de la barra de herramientas del texto. La ventana Insert link se abre en inglés: en el campo Url, escriba #section1 y haga clic en Save.
- Botón: seleccione el botón. En sus propiedades, en Acción, escriba #section1 en el campo Url.
- Elemento de menú: seleccione el menú. En Configurar elementos del menú, active Más opciones para el elemento y escriba #section1 en el campo Url. Cada campo de un elemento de menú se explica en Uso del bloque Menú.
La dirección es el signo # seguido del id exacto del destino.
Guarde y pruebe
- Guarde su correo electrónico.
- Envíese un correo de prueba y haga clic en cada enlace de anclaje para comprobar que lleva al lugar correcto.

Reglas para los nombres de anclaje

Dé a cada destino un id único en el correo.
No use espacios ni acentos en el id. Use letras, números y guiones, por ejemplo section1 o menu-postres.
La dirección del enlace debe coincidir exactamente con el id, precedida del signo #: id="section1" y #section1.

Ejemplo de código HTML

Este es un ejemplo con un enlace en la parte superior del correo y su destino más abajo:

Code
<p><a href="#section1">Ir a la sección 1</a></p>

<!-- ... otro contenido ... -->

<a id="section1"></a>
<h2>Sección 1</h2>
<p>Contenido de la sección 1.</p>

Cuando el lector hace clic en Ir a la sección 1, el correo se desplaza hasta la etiqueta <a id="section1"></a>, justo encima del título de la sección.

El seguimiento de clics no modifica los enlaces de anclaje. Siguen siendo #section1 en el correo enviado.

Solución de problemas

El enlace no lleva a ninguna parte

No use el atributo name (<a name="section1">). La plataforma lo elimina al enviar el correo. Use id en su lugar: <a id="section1"></a>.
Un <div> con un id (<div id="section1">) no funciona como destino. Use una etiqueta <a> vacía con un id.
Compruebe que el id no tenga espacios ni acentos.
Compruebe que la dirección del enlace coincida exactamente con el id, incluidas mayúsculas y minúsculas.

El enlace lleva al lugar incorrecto

Compruebe que cada id se use una sola vez en el correo.
Coloque la etiqueta de destino justo antes del contenido que el lector debe ver.

Compatibilidad del cliente de correo electrónico

Gmail (en la web y en la aplicación) no admite los enlaces de anclaje: el enlace no hace nada. Funcionan en la mayoría de las demás aplicaciones de correo, como Apple Mail y Outlook.
Pruebe en las aplicaciones de correo que más usa su público.
En un correo muy largo, agregue también un breve resumen en la parte superior para que todos los lectores encuentren la información.

El código HTML no se muestra

Use el bloque HTML, no un bloque de texto, para la etiqueta de destino.
Compruebe que cada etiqueta esté bien cerrada.