Cómo hipervincular el número de teléfono para llamar o enviar mensajes de texto en una etiqueta de anclaje HTML

Cómo hipervincular números de teléfono para llamar o enviar mensajes de texto en una etiqueta de anclaje html

En el trabajo, a menudo nos sentamos en una computadora portátil o de escritorio para ver nuestros sitios web corporativos en una pantalla grande... pero si observa las visitas móviles a su sitio web, es posible que se sorprenda de que la mayoría de los visitantes llegan a través de dispositivos móviles. dispositivo. Si comienza a desglosar su tráfico por fuente de referencia, probablemente se sorprenderá aún más de que los usuarios de motores de búsqueda son predominantemente móviles.

El 63% de las búsquedas en motores de búsqueda en los EE. UU. se realizan a través de tecnologías móviles. El 48% de las visitas a sitios web globales provienen de dispositivos móviles.

Estadísticas de Zippia Mobile vs Desktop

Ahora que las empresas ven que una parte importante de sus visitantes llegan a través de dispositivos móviles, tener un sitio web listo para dispositivos móviles ya no es una opción, es una necesidad.

Un elemento que a menudo se pasa por alto al crear una experiencia móvil es hipervínculo de sus números de teléfono in HTML para que los usuarios móviles puedan simplemente hacer clic en ellos y comenzar una llamada telefónica. Las etiquetas de anclaje son las etiquetas accionables que los navegadores interpretan y permiten que los usuarios hagan clic. Una etiqueta de anclaje típica para un sitio web es:

<a href="https://martech.zone">Martech Zone</a>

Una etiqueta de anclaje que abre un correo electrónico es:

<a href="mailto:info@martech.zone">Click here to email us!</a>

Con mailto, puede incluir opcionalmente el asunto y el cuerpo del correo electrónico dentro del enlace. Sin embargo, me aseguraría de que su URL codifique el texto. Algunos navegadores se romperán en un espacio:

<a href="mailto:info@martech.zone?subject=Hi%20Doug&body=This%20is%20a%20test!">Click here to email us!</a>

Número de teléfono: Haga clic para llamar Hipervínculo

La sintaxis para crear hipervínculos a un número de teléfono en HTML es similar a la sintaxis de mailto, simplemente usando Tel: en lugar:

<a href="tel:+13172039800">Click here to call us!</a>

La sintaxis de su número de teléfono realmente no importa. Probé el valor con y sin signos más, paréntesis, puntos y guiones y todo parece funcionar tanto en iPhone como en Android.

Trato de mantener las cosas limpias eliminando todo menos los números. También recomendaría incluir el código del país en el número de teléfono con el signo más, especialmente si está atrayendo negocios a nivel internacional.

Cuando optimizamos los sitios de nuestros clientes, nos aseguramos de que todas las instancias de números de teléfono tengan hipervínculos. Si se trata de una llamada a la acción, generalmente formateamos el enlace como un botón para que sea muy obvio que se puede hacer clic en él.

Número de teléfono: Haga clic para enviar un hipervínculo de texto

También puede tener un hipervínculo que genere automáticamente un SMS mensaje:

<a href="sms:+13172039800">Click here to text us!</a>

Opcionalmente, también puede incluir un mensaje:

<a href="sms:+13172039800?&body=Hello">Click here to text us!</a>

Cómo capturar un número de teléfono Haga clic en Analytics

¡También nos aseguramos de capturar estos eventos en Google Analytics! Si desea medir cuántas personas hacen clic en estos enlaces, puede leer nuestro artículo sobre cómo agregar un evento de Google Analytics usando Google Tag Manager.

35 Comentarios

  1. 1

    ¡Genio Doug! Planeo comenzar a usar eso en todos los sitios de mis clientes. ¿Está bien si publico esto en mi blog? Por supuesto dándote la autoría completa. ¡Muy genial! 😎

  2. 2

    Entonces, ¿hay alguna razón para NO poner paréntesis, puntos o guiones en un número de teléfono? ¿Y el número de teléfono html actúa como una etiqueta de título? ¿Existe algún beneficio de SEO al hacer una etiqueta de título dentro del código href?

  3. 3

    @edeckers El estándar RFC3966 no parece admitir paréntesis, pero sí admite un montón de otras opciones y símbolos para llamadas internacionales, extensiones, etc.
    http://www.ietf.org/rfc/rfc3966.txt

    En cuanto al SEO, ¡no veo por qué no! ¡Quizás el nombre de la empresa + "número de teléfono" podría ser una buena manera de implementarlo!

  4. 4

    Hola, es un truco genial, pero lo intenté y Firefox me dio un feo mensaje de error que decía que no sabía cómo leer el enlace. Para mí, no vale la pena un feo mensaje de error cuando alguien hace clic en el enlace en un escritorio solo para que un teléfono móvil pueda acceder al enlace. "Mantenga presionado" en el número de teléfono en Android y automáticamente intenta llamar a un número de todos modos. ¿Me equivoco? ¿Hay alguna solución?

  5. 7
  6. 8

    Muchas gracias. simple como dijiste, pero eficiente. Puede ir un par de pasos más allá y vincularlo a un icono y crear un título en la etiqueta de anclaje para mostrar su número de teléfono y más instrucciones para los usuarios que colocan el mouse sobre el icono. ¡Gracias de nuevo!

  7. 9
  8. 11
  9. 12
  10. 14
  11. 15

    Solo una simple corrección ... dijiste que recomiendas que "mantengamos todo menos los números reales EN el valor href"

    Estoy seguro de que quieres decir "mantener todo menos los números reales NUESTRO DEL valor href"

    O de lo contrario, estarías marcando un montón de puntuación 🙂

  12. 16
  13. 17
  14. 19

    Todavía no sé en esta columna cómo enviar un correo electrónico a un número de teléfono a un teléfono celular, para que mi jefe pueda simplemente tocarlo y llamar.

    • 20

      Hola Dee, su software de correo electrónico debería ser compatible con HTML y la capacidad de agregar el hipervínculo que describimos anteriormente. Este artículo trataba más sobre cómo hacer esto en un sitio web móvil, no en un correo electrónico.

  15. 21

    Hola Douglas, ¿qué tan bien funciona esto para las personas que llaman internacionales? ¿Crees que es mejor usar un número internacional (por ejemplo, +44) o un código de área local?

    • 22

      Para ser honesto, Ben, creo que funciona a la perfección. Creo que muchas personas que llaman internacionales usan códigos de área locales. Los estafadores de Nigeria vienen a la mente de inmediato. 🙂

  16. 23

    Hola, ¿Se puede utilizar un hashtag como hipervínculo para iniciar una llamada telefónica? Lo escuché mencionar el otro día pero no lo he visto. ¡Gracias!

  17. 25

    ¿Cómo creo un botón "llamar ahora" en un programa de marketing por correo electrónico como Microsoft Publisher? Además, ¿cómo lo pondría en mailchimp?

  18. 26
  19. 28
  20. 29
  21. 30
  22. 31
  23. 32
  24. 33
  25. 34

    Tutorial muy informativo! En realidad, me gusta más el aspecto de un "widget de clic para llamar" en lugar de un "número de teléfono en el que se puede hacer clic". Después de haber probado el complemento Callback Tracker en mi sitio, veo muchos más resultados con la capacidad de llamar a mis clientes potenciales, en lugar de que me llamen a mí. Personalmente, lo veo necesario en la mayoría de los sitios. Aquí está el enlace al complemento https://callbacktracker.com/plugins/wordpress-click-to-call-plugin-install-tutorial/

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.