Как да поставите хипервръзка към телефонен номер за обаждане или текст в HTML Anchor Tag

Как да поставите хипервръзка към телефонни номера за обаждане или текст в html anchor таг

На работа често сядаме на лаптоп или настолен компютър, за да разглеждаме нашите корпоративни уебсайтове на голям екран... но ако погледнете мобилните посещения на вашия уебсайт, може да се изненадате, че по-голямата част от посетителите пристигат през мобилни устройства устройство. Ако започнете да разделяте трафика си по източник на реферали, вероятно ще бъдете още по-изненадани, че потребителите на търсачката са предимно мобилни.

63% от търсенията в търсачките в САЩ са чрез мобилни технологии. 48% от глобалните посещения на уебсайтове идват от мобилни устройства.

Статистика на Zippia Mobile срещу Desktop

Тъй като предприятията вече виждат значителна част от своите посетители, пристигащи през мобилни устройства, наличието на готов за мобилни устройства уебсайт вече не е опция, а необходимост.

Един елемент, който често се пренебрегва при изграждането на мобилно изживяване, е хипервръзка на вашите телефонни номера in HTML така че мобилните потребители да могат просто да кликнат върху тях и да започнат телефонно обаждане. Закрепените тагове са активните тагове, които браузърите интерпретират и позволяват на потребителите да кликват. Типичен anchor таг за уебсайт е:

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

Етикет за котва, който отваря имейл, е:

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

С mailto можете по желание да включите темата и тялото на имейла във връзката. Бих се уверил обаче, че URL кодирате текста. Някои браузъри ще се счупят при интервал:

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

Телефонен номер: хипервръзка Щракнете за обаждане

Синтаксисът за хипервръзка към телефонен номер в HTML е подобен на синтаксиса на mailto, просто се използва тел: вместо:

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

Синтаксисът на вашия телефонен номер всъщност няма значение. Тествах стойността със и без знаци плюс, скоби, точки и тирета и всичко изглежда работи както на iPhone, така и на Android.

Опитвам се да поддържам нещата чисти, като премахвам всичко освен числата. Бих препоръчал също да включите кода на държавата в телефонния номер със знака плюс – особено ако привличате бизнес в международен план.

Когато оптимизираме сайтовете на нашите клиенти, ние гарантираме, че всички случаи на телефонни номера са хипервръзки. Ако това е призив за действие, обикновено форматираме връзката като бутон, за да е много очевидно, че може да се щракне върху нея.

Телефонен номер: Щракнете за текст на хипервръзка

Можете също така да имате хипервръзка, която автоматично генерира SMS съобщение:

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

По желание можете да включите и съобщение:

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

Как да заснемете телефонен номер Щракнете в Analytics

Ние също така гарантираме, че улавяме тези събития в Google Analytics! Ако искате да измерите колко хора кликват върху тези връзки, можете да прочетете нашата статия за това как да го направите добавете събитие в Google Анализ с помощта на Google Tag Manager.

35 Коментари

  1. 1

    Гениален Дъг! Планирайте да започнете да го използвате на всички мои клиентски сайтове. Добре, ако публикувам това в моя блог? Разбира се, давайки ви пълно авторство. Много яко! 😎

  2. 2

    Така че има ли причина да НЕ поставяте скоби, точки или тирета в телефонен номер? И действа ли html телефонният номер като етикет със заглавие? Има ли някаква SEO полза от правенето на етикет на заглавието в href кода?

  3. 3

    @edeckers Стандартът RFC3966 не поддържа скоби, но поддържа множество други опции и символи за международни разговори, разширения и т.н.:
    http://www.ietf.org/rfc/rfc3966.txt

    Що се отнася до SEO, не виждам защо не! Може би името на бизнеса + „телефонен номер“ може да бъде добър начин за внедряване!

  4. 4

    Здравейте, това е страхотен трик, но опитах това и Firefox ми даде грозно съобщение за грешка, казвайки, че не знае как да прочете връзката. За мен не си струва грозно съобщение за грешка, когато някой щракне върху връзката на работния плот, само за да може мобилният телефон да има достъп до връзката. „Натиснете продължително“ на телефонния номер на Android и той автоматично се опитва да извика номер все пак. Греша ли? Има ли работа наоколо?

  5. 7
  6. 8

    Много благодаря. просто, както казахте, но ефективно. Можете да отидете на няколко стъпки по-нататък и да го направите да се свързва с икона и да създадете заглавие в котвата, за да се покаже вашият телефонен номер и допълнителни инструкции за потребители, които задържат мишката върху иконата. Благодаря отново!

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

    Просто проста корекция ... казахте, че препоръчвате да „запазваме всичко, освен действителните числа, в стойността на href“

    Сигурен съм, че имате предвид „пазете всичко, освен действителните числа НАШИ ОТ href стойността“

    В противен случай просто бихте набрали куп пунктуации 🙂

  12. 16
  13. 17

    Благодаря Дъглас, каква е лентата за социални медии, която използвате? Вашият блог изглежда страхотно и имате много страхотно съдържание. Бих искал да се свържа с Google Plus. Благодаря отново

    • 18
  14. 19

    Все още не знам от тази колона как да изпратя имейл на телефонен номер - на мобилен телефон, така че шефът ми може просто да го докосне и да се обади.

    • 20

      Здравейте Dee, вашият имейл софтуер ще трябва да поддържа HTML и възможността да добавя хипервръзката, която описваме по-горе. Тази статия разказваше повече за това как да направите това на мобилен уебсайт, а не на имейл.

  15. 21

    Здравей, Дъглас, колко добре работи това за международни обаждащи се? Смятате ли, че е най-добре да използвате международен (например +44) номер или местен код?

    • 22

      За да бъда честен, Бен, вярвам, че работи безупречно. Вярвам, че много международни обаждащи се използват местни кодове. Измамниците на Нигерия веднага идват на ум. 🙂

  16. 23

    Здравейте, може ли да се използва хаштаг като хипервръзка за започване на телефонно обаждане? Чух го спомена онзи ден, но не съм го виждал. Благодаря ти!

  17. 25

    Как да създам бутон „обади се сега“ в програма за имейл маркетинг като Microsoft Publisher? Също така как бих го сложил в mailchimp?

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

    Много информативен урок! Всъщност ми харесва по-добре аспектът на „джаджа за кликване за обаждане“ вместо „телефонен номер, върху който може да се кликва“. След като изпробвах плъгина Callback Tracker на моя сайт, виждам много повече резултати с възможността да се обаждам на моите клиенти, вместо да ме канят. Лично аз го виждам като необходимо на повечето сайтове. Ето връзката към приставката https://callbacktracker.com/plugins/wordpress-click-to-call-plugin-install-tutorial/

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.