Html тег телефона: Номер телефона на сайте HTML

Как сделать ссылку на телефон HTML?

Категория: Сайтостроение, Опубликовано: 2018-05-28
Автор: Юлия Гусарь

Приветствую вас, дорогие друзья на сайте Impuls-Web!

На сегодняшний день, ввиду того, что количество пользователей, которые используют для просмотра сайтов мобильные устройства, постоянно растет, стало очень популярным размещение на страницах сайта кликабельных ссылок на телефонные номера.

Ссылка на телефон HTML дает возможность посетителю сайта, в случае, если его заинтересовало ваше предложение, сразу же позвонить по данному номеру и сделать заказ на приобретение товара или услуги.

Навигация по статье:

• Протокол HTML5 для ссылок на телефон
• Решение проблемы с определением ссылки на телефон HTML на ПК
• Другие варианты протоколов HTML5

В этой статье я покажу вам, как сделать ссылку на телефон HTML, а так же покажу, как можно ее оформить при помощи CSS.

Протокол HTML5 для ссылок на телефон

Для того чтобы сделать ваш телефонный номер кликабельным его необходимо обернуть в тег <a>…</a> и в атрибуте

href указать протокол tel и через двоеточие указать номер без пробелов и дефисов:

<a href=»tel:0955414642″>095-541-46-42</a>

<a href=»tel:0955414642″>095-541-46-42</a>

Теперь клик по данной ссылке на телефон HTML будет восприниматься любым браузером на любом мобильном устройстве как команда к набору данного номера.

Решение проблемы с определением ссылки на телефон HTML на ПК

Показанную выше запись удобно использовать чтобы принимать заявки от посетителей с мобильных устройств. Но дело в том, что оформленная в таком виде ссылка на телефон HTML будет вызывать неудобство у тех пользователей, которые зашли на ваш сайт с компьютера. При клике по такой ссылке на ПК, в зависимости от браузера, будет выпадать ошибка, либо будет открываться для набора номера Skype или какая-то другая программа. Вряд ли кто-то из пользователей захочет позвонить вам на телефонный номер по Skype и такая функция, скорее всего, отпугнет клиента.

Для решения данной проблемы есть очень интересный скрипт. Но его использование немного затруднит добавление ссылки на телефон HTML.

1. 1.На странице там, где вам нужно разместить телефонный номер, вставляем пустой блок с уникальным идентификатором. В моем случае phone-link:
   

   <div></div>

   <div></div>

2. 2. Открываем страницу для редактирования в NotePad++ или его аналоге и перед закрытием тега </body> вставляем скрипт:
   

   <script> if( /BlackBerry|iPhone|iPod|iPad|Android|IEMobile|webOS|Opera Mini/i.test(navigator.userAgent) ) { document.getElementById(«phone-link»).innerHTML = ‘<span><a href=»tel:0955414642 «>(095)541-46-42</a></span>’; } else { document.getElementById(«phone-link»).innerHTML = ‘<span>(095)-541-46-42</span> ‘; } </script>

   1 2 3 4 5 6 7

   <script> if( /BlackBerry|iPhone|iPod|iPad|Android|IEMobile|webOS|Opera Mini/i.test(navigator.userAgent) ) {   document.getElementById(«phone-link»).innerHTML = ‘<span><a href=»tel:0955414642 «>(095)541-46-42</a></span>’; } else {   document.getElementById(«phone-link»).innerHTML = ‘<span>(095)-541-46-42</span> ‘; } </script>

   Данный скрипт проверяет, с какого устройства открыта станица вашего сайта и автоматически подставляет нужный вариант телефонного номера.

   Если пользователь просматривает страницу с мобильного телефона, то будет подставлена ссылка на телефон HTML. Если же пользователь открыл страницу с ПК, то будет подставлен телефон обернутый в тег <span>.

В случае если у вас сайт сделан на CMS, то вам нужно открыть для редактирования файл, в котором закрывается тег

Ставим правильные ссылки на телефонные номера

Многие бизнес-сайты показывают телефонные номера, чтобы их клиенты могли связаться с ними. В эпоху популярности настольных компьютеров пользователи записывали телефонный номер на бумажку и звонили с отдельного устройства.

Сейчас же, пользователи сёрфят в интернете и звонят с одного и того же устройства. Это открывает возможность добавить ссылку на звонок — создать HTML-номер телефона, по которому можно кликать.

Как работают кликабельные ссылки

Сделать номер телефона кликабельным легко с помощью HTML5, который включает в себя специализированный протокол tel:.

Браузеры по-разному интерпретируют этот протокол. Некоторые открывают номернабиратель вашего телефона и добавляют номер на дисплей, ожидая, пока вы нажмете кнопку вызова. Другие сразу делают звонок, а третьи спрашивают что делать.

При клике по такой ссылке на десктопе с установленным приложением Skype (или аналогичным) браузер запросит у вас подтверждение на открытие внешней программы.

Добавление на сайт

Вставьте следующий код в нужное место вашего сайта для показа кликабельной ссылки на телефон:

<a href="tel:123-456-7890">123-456-7890</a>

Если вместо телефона вы хотите видеть ссылку с текстом «Позвонить», то код будет таким:

<a href="tel:123-456-7890">Позвонить</a>

При щелчке на такую ссылку откроется номернабиратель вашего устройства (планшет, телефон).

Добавочный номер

Многие телефоны имеют добавочные номера, чтобы их указать, необходимо использовать разделитель P, который добавит секундную задержку между набором основного и добавочного номеров:

<a href="tel:123-456-7890p123">Позвонить</a>

Если добавочный номер нужно вводить в тональном режиме, используйте разделитель w вместо p.

Код страны

Коды стран могут быть добавлены в телефонный номер при помощи символа + перед самим номером. Например, для России (+7) это будет выглядеть так:

<a href="tel:+7-456-7890">123-456-7890</a>

Микроразметка под SEO

Одна из самых приятных плюшек, когда при поиске местных компаний Google в результатах поиска выдает номер телефона, по которому можно кликнуть.

Решается этот вопрос при помощи микроданных и микроформатов. Добавив пару дополнительных тегов в разметку вашего сайта, вы получите кликабельный номер в SERP. Пользователи будут несказанно рады:

<div itemscope itemtype="https://schema.org/LocalBusiness">
    <h2 itemprop="name">Рога и Копыта</h2>
    Телефон: <span itemprop="telephone"><a href="tel:+7123456890">+7 (234) 567-890</a></span>
</div>

Ссылки

• Telephone Links: How to Add “Call-able” Links & CTA’s to Your Website

ВКонтакте

Одноклассники

Telegram

WhatsApp

phones tips tricks

метатегов html для мобильных устройств

спросил 10 лет, 5 месяцев назад

Изменено 2 года, 6 месяцев назад

Просмотрено 44к раз

У меня есть блок html кода, который в основном состоит из метатегов. Я пытаюсь перепроектировать свой макет для мобильных устройств, поэтому я хочу знать, нужны ли метатеги, которые я использую, для мобильного макета. Блок кода представлен ниже:

 <метакодировка="utf-8">
 
 

<мета-имя="описание" содержание="">
<мета имя="ключевые слова" содержание="">




 

• HTML
• мобильные
• метатеги

1

, нужны они или нет, зависит от того, на какое «мобильное» устройство вы пытаетесь нацелиться.

Я использовал всего лишь:

и добились достойных результатов на ряде мобильных устройств, используя только запросы Respond. js и @media.

может быть полезно:

http://www.alistapart.com/articles/responsive-web-design

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Media Queries for Standard Devices

https://github.com/scottjehl/Respond

4

То, что у вас есть, уже неплохо, но не забудьте добавить вверху вашего html-файла. Я обнаружил, что были случаи, когда это значительно влияло на внешний вид на мобильном устройстве.

Мне также нравится включать мета-теги дизайна. В предыдущих ответах не упоминалось. Они позволяют отображать в полноэкранном режиме и изменять цвет панели браузера. Хороший!

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Телефонные номера с гиперссылками и якорными тегами

Маркетинг для мобильных устройств и планшетовКонтент-маркетинг

Дуглас Карр Следите за новостями в Твиттере Четверг, 14 июля 2022 г.

35 78 217 2 минуты чтения вид наши корпоративные веб-сайты на большом экране… но если вы посмотрите на мобильные посещения вашего веб-сайта, вы можете быть поражены тем, что большинство посетителей приходят с мобильных устройств. Если вы начнете разбивать свой трафик по источникам перехода, вы, вероятно, еще больше удивитесь тому, что пользователи поисковых систем преимущественно мобильные.

Пожалуйста, включите JavaScript

Как использовать ссылки в HTML — Внутренние и внешние ссылки в HTML Учебное пособие 7

63% поисковых запросов в США осуществляются с помощью мобильных технологий. 48 % посещений веб-сайтов – с мобильных устройств.

Zippia Mobile vs Desktop Статистика

Теперь, когда компании видят, что значительная часть их посетителей заходит с мобильных устройств, наличие веб-сайта, готового для мобильных устройств, больше не вариант, а необходимость.

Одним из элементов, который часто упускают из виду при создании мобильного интерфейса, является гиперссылка на ваши телефонные номера в HTML, чтобы мобильные пользователи могли просто щелкнуть по ним и начать телефонный звонок. Якорные теги — это активные теги, которые интерпретируются браузерами и позволяют пользователям нажимать на них. Типичный тег привязки для веб-сайта:

 Martech Zone 

Тег привязки, который открывает электронное письмо:

 Нажмите здесь, чтобы написать нам! 

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

 Нажмите здесь, чтобы написать нам! 

Номер телефона: гиперссылка Click To Call

Синтаксис гиперссылки на номер телефона в HTML подобен синтаксису mailto, только используется тел: вместо:

 Нажмите здесь, чтобы позвонить нам! 

Синтаксис вашего номера телефона не имеет большого значения. Я проверил значение со знаками плюс, круглыми скобками, точками и тире и без них, и все работает как на iPhone, так и на Android.

Я стараюсь поддерживать чистоту, удаляя все, кроме цифр. Я бы также рекомендовал включать код страны в номер телефона со знаком плюс, особенно если вы привлекаете бизнес на международном уровне.

Когда мы оптимизируем сайты наших клиентов, мы обеспечиваем наличие гиперссылок на все номера телефонов. Если это призыв к действию, мы обычно форматируем ссылку как кнопку, чтобы было очевидно, что по ней можно щелкнуть.

Номер телефона: гиперссылка Click To Text

У вас также может быть гиперссылка, которая автоматически генерирует SMS-сообщение:

 Нажмите здесь, чтобы написать нам! 

Вы может дополнительно включать сообщение:

 Нажмите здесь, чтобы написать нам! 

Как зафиксировать номер телефона Click In Analytics

Мы также гарантируем, что мы фиксируем эти события в Google Аналитика! Если вы хотите измерить, сколько людей нажимают на эти ссылки, вы можете прочитать нашу статью о том, как добавить событие Google Analytics с помощью Диспетчера тегов Google.