Telefonní čísla v HTML

Standardní odkazy na http:// či ftp:// soubory jsou běžné. Pro odeslání emailu je běžné používat odkaz mailto:. A vzhledem k tomu, jak roste podíl mobilního internetu, není žádnou výjimkou, že prohlížeč by, stejně jako odeslat email, mohl rovnou vytočit telefonní číslo. Tak proč to uživatelům neusnadnit?

Jak na to?

Snadno pomocí odkazu odkazující na protokol tel:+.

Vzhledem k tomu, že internet je celosvětový a prohlížeč nemusí vědět, kde se zrovna nachází, je potřeba zadat telefonní číslo v mezinárodním formátu s plus na začátku. Stejně tak je dobré zadat pouze čísla bez ostatních znaků, které se často do čísla píšou pro lepší čtení (např. mezery, pomlčky, závorky, apod.), aby prohlížeč neměl problém s pochopením toho, co po něm vlastně chcete:

Amazon support phone:
    <a href="tel:+12062662992">
                  1 (206) 266-2992</a>
NIC.cz zákaznická linka:
    <a href="tel:+420731657660">
                  731 657 660</a>

Pro odzkoušení můžete zkusit kliknout:

Amazon support phone:
1 (206) 266-2992

NIC.cz zákaznická linka:
731 657 660

Na desktopu samozřejmě záleží na tom, zda máte nainstalovaný nějaký program pro vytáčení čísel (např. Skype). Prohlížeč se zpravidla zeptá, zda chcete povolit otevření externí aplikace.

Na Androidu pak záleží na tom, zda máte nainstalovanány dodatečné aplikace schopné zpracovat telefonní čísla – např. pokud máte Skype pro Android, můžete zvolit, zda budete volat přes GSM nebo Skype. Některé antivirové programy umí ověřit pravost telefonního čísla a tak se také zobrazí v nabídce. Po otevření aplikace pro volání si můžete zvolit, zda chcete číslo zavolat nebo jen uložit do seznamu.

Poznámka: Některé starší telefony a desktop prohlížeče mohou místo tel:+ podporovat callto:, které bylo původně určeno pro Skype volání, ale v současné době i Skype pochopil, že správně je tel:+ (asi proto, že teď patří Microsoftu, který též vydává mobilní operační systém a tak ví, jak se to dělá :), takže můžete na ostatní protokoly v klidu zapomenou.

Zákaz autodetekce

Na iPhonu existuje ještě autodetekce, která se snaží čísla podobná telefonním číslům převést na klikatelné odkazy. Pokud ale zrovna neprovozujete stránku „Zlaté stránky“, asi vám tahle vlastnost přijde zbytečná. Vypnout se dá dvěma způsoby:

  • Vložením nějakého HTML doprostřed čísla (doporučeno po 2 až 3 číslicích), protože iPhone hledá jen v čistém textu, a příliš krátká čísla ignoruje
    Number of visitors:
    1<span>23</span>45<span>78</span>
    
  • Vložením META hlavičky, která autodetekci globálně vypíná:
    <meta name="format-detection"
      content="telephone=no">
    

Podívejte se na ukázkovou stránku pro detekci telefonního čísla.

Poznámka: autodetekce funguje na základě amerického formátu, který používá specifické délky telefonních čísel podle regionů (např. 555-0123 nebo 1-800-555-0123). Na česká devítimístná čísla tak nebude fungovat a musíte vždy ručně vytvořit správný odkaz.

CSS vylepšení

S využitím CSS a Unicode možností můžete nechat automaticky označit odkazy na telefonní čísla ikonkou telefonu:

a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 0.5em; 
}

NIC.cz zákaznická linka:
731 657 660

Google doporučení pro SEO

Google doporučuje uvádět čísla pomocí speciální HTML struktury, která následně umožní vyhledávačům číslo správně rozpoznat a zobrazit ve výsledcích i s popiskem:

<div itemscope 
  itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">
  NIC.cz zákaznická linka</h1>:
  <span itemprop="telephone">
    <a href="tel:+420731657660">
      731 657 660</a>
  </span> 
</div>

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *