los enlaces telefónicos son una cosa. Al igual que un enlace de anclaje que tocas para (probablemente) ir a otra página, estos son enlaces que tocas para llamar a un número en un dispositivo compatible con el teléfono. Han estado por aquí por bastante tiempo. Sin embargo, me causan mucha confusión. Por ejemplo, muchos dispositivos reconocerán automáticamente los números de teléfono y harán la vinculación por nosotros, pero no siempre.
Hay suficiente tráfico web en dispositivos móviles y un montón de aplicaciones de escritorio que son capaces de hacer llamadas, que vale la pena saber más sobre los enlaces telefónicos.,
uso predeterminado
tenemos un fragmento de código para enlaces telefónicos en este sitio que ha estado rondando desde 2011:
<a href="tel:1-562-867-5309">1-562-867-5309</a>esto también funciona en enlaces de texto:
<a href="tel:1-562-867-5309">Click to Call!</a>tel: no es tanto una característica como un protocolo, de la misma manera que http: y mailto: son protocolos para la característica de etiqueta <a>. La especificación en sí no tiene nada que decir al respecto, aunque HMTL5 proporcionó soporte para manejadores de protocolo personalizados, que permiten que se use dicho protocolo.,
probablemente se esté preguntando por quétel: se puede considerar uso predeterminado en ausencia de una especificación oficial en él. Se puede atribuir esto al hecho de que fue un estándar propuesto ya en 2000 y más tarde adoptado por iOS, por lo que es el camino de facto a seguir por aproximadamente 2007. Hay otros protocolos basados en teléfonos (que veremos más adelante), pero nos centraremos en tel: dada su importancia relativa.,
soporte del navegador
vemos tel: aparece como un controlador de protocolo para enlaces sin documentación oficial; y cuando no hay documentación, a menudo vemos diferencias en el soporte y el comportamiento del navegador. Eso no quiere decir que los navegadores no reconozcan la etiqueta <a>. En su lugar, los navegadores pueden tomar diferentes decisiones sobre qué hacer cuando se hace clic en ese enlace. Por ejemplo, un navegador puede suponer que otra aplicación necesita abrirse y activará un cuadro de diálogo preguntando qué aplicación usar. En otros casos, el enlace puede ser ignorado por completo.,
| Browser | Does it link?,td>Yes | inicia una llamada telefónica |
|---|---|---|
| iOS | Yes | activa opciones para llamar, enviar mensajes, copiar o añadir el número a la aplicación Contactos |
| Opera (OSX) | Yes | activa un diálogo que confirma el uso de otra aplicación |
| Opera (Windows) | yes | activa un diálogo de error que no reconoce el protocolo |
| Safari | yes | lanza FaceTime |
styling phone Links
styling telephone numbers is like any otro enlace., De hecho, heredará el estilo predeterminado para los anclajes:
a { color: orange; text-decoration: none;}digamos que solo aplicamos estilos a enlaces telefónicos., Podemos hacer eso con un pseudo selector que busca el texto tel: en una URL dada:
a { color: orange; text-decoration: none;}Tuts+ tiene un buen truco usando el pseudo selector ::before para agregar el carácter de teléfono unicode antes de que se muestre el número:
a:before { content: "\260e"; margin-right: 0.5em;}enlaces alternativos relacionados con el teléfono
lo creas o no, tel: no es la única manera de iniciar una llamada telefónica con un enlace. Aquí hay algunos otros manejadores de protocolo basados en teléfonos personalizados a nuestra disposición.,
-
callto:exactamente igual quetel:pero se usa para iniciar llamadas a través de la aplicación de Skype. - detección automática: muchos navegadores detectarán automáticamente un número de teléfono en el HTML y lo vincularán por usted, sin necesidad de cambiar el marcado. iOS, por ejemplo, hará totalmente esto, aunque no parece ser el caso de Chrome en Android.
-
sms:omita la llamada y vaya directamente al mensaje de texto. Esto parece ser mucho menos compatible quetel:está entre los navegadores, incluido el móvil., -
fax:volver al futuro con máquinas de fax. Una vez más, fiabilidad irregular.
mejores prácticas
es un poco divertido hablar de las mejores prácticas cuando se trata de algo sin especificaciones. La especificación da una breve opinión sobre la idea de» hacer clic para llamar», pero aquí hay algunas cosas a tener en cuenta cuando se trabaja con números de teléfono y enlaces.
considere el contexto
un enlace telefónico puede hacer una excelente llamada a la acción, especialmente en teléfonos móviles donde reduce la fricción entre el contenido y la llamada., Al mismo tiempo, los enlaces telefónicos podrían considerarse un obstáculo en una experiencia de escritorio donde una llamada telefónica no sería posible si el dispositivo carece de una aplicación que lo admita.
una idea sería crear una clase específica para enlaces telefónicos e intentar mostrarlos u ocultarlos en función de lo que sabemos sobre el navegador. Modernizr y media queries son útiles aquí, aunque totalmente imprecisos.
usar códigos de país
no se requiere un código de país, pero podría ser un buen toque para sitios con tráfico internacional., Los códigos de país pueden ir precedidos por un + pero eso tampoco es necesario.
<a href="tel:+01-562-867-5309">1-562-867-5309</a>Search Engine Optimization
SEO experts might have more to add on this than I do, but Google offers a structured data format for local businesses and using it will make telephone links more recognizable to crawlers, formatting them on search results pages in a way that makes the number much more actionable., Dudley Storey proporciona una excelente visión general con el siguiente ejemplo:
en la otra cara de querer que los motores de búsqueda sigan los enlaces telefónicos, puede agregar rel="nofollow" para desalentar que los enlaces sean seguidos e indexados. Esto podría ser una buena idea para cualquier enlace que no se designe como una llamada a la acción, ya que los rastreadores web estarían inclinados a tratar de seguirlo a ninguna parte.,
<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>desactivar la detección de números en iOS
Si planea agregar enlaces de teléfono a su marcado, también puede considerar deshabilitar iOS de la detección automática de números de teléfono y anular sus estilos. Agregue el siguiente el documento <head> para apagarla:
<meta name="format-detection" content="telephone=no">