Как сделать красивый URL: 11 сервисов для сокращения ссылок
В статье — обзор плюсов, минусов и дополнительных возможностей инструментов для создания красивых ссылок.
Поделиться
Поделиться
1. Clck.ru
Как выглядит укороченная ссылка: https://clck.ru/enxzx
Встроенная аналитика: нет
Возможность задать вид ссылки: нет
Русскоязычный сервис для сокращения ссылок, который Яндекс запустил в 2010 году. Одно из ключевых преимуществ — безопасность. Когда вы вставляете длинный URL в сервис, он автоматически проверяет сайт, на который ведет ссылка. Если ресурс заражен, clck.ru показывает предупреждение. База зараженных страниц постоянно обновляется. Поэтому при использовании сервиса вероятность заражения компьютеров ваших подписчиков и читателей снижается.
После создания укороченной ссылки вы можете сразу отправить ее адресату или расшарить в социальных сетях, нажав на кнопку «Поделиться». Сервис также автоматически создает QR-код.
Кроме того, для удобства можно перетащить ссылку (Click↑ ) на панель браузера и нажимать на эту закладку каждый раз, когда потребуется сделать URL просматриваемого сайта короче.
2. Vk.com/cc
Как выглядит укороченная ссылка: https://vk.cc/cczwqD
Встроенная аналитика: да
Возможность задать вид ссылки: нет
Vk.cc — официальное приложение VK, которое позволяет сокращать ссылки. Но чтобы использовать его, необходимо авторизоваться в социальной сети.
Помимо количества переходов, которые отображаются напротив каждого сокращенного и исходного URL, есть расширенная статистика. Там можно посмотреть распределение по возрасту, полу, географии, а также динамику просмотров.
Если не хотите, чтобы посторонние видели эту статистику, поставьте соответствующую галочку до сокращения ссылки. Тогда рядом с URL-адресом в списке будет иконка замка.
3. To.click
Как выглядит укороченная ссылка: ttps://clc.to/2nBMpg
Встроенная аналитика: да
Возможность задать вид ссылки: нет
Сервис коротких ссылок, который позволяет отслеживать аудиторию и управлять маркетинговым трафиком. Вы можете создавать красивые URL-адреса трех типов:
- сокращенные;
- таргетированные (с пикселем);
- диплинки (позволяют переходить на конкретную страницу внутри приложения).
Однако чтобы пользоваться сервисом, сначала придется зарегистрироваться и подтвердить email. Только после этого вам откроется личный кабинет и возможность сокращать ссылки.
Главный плюс сервиса — детальная аналитика. Можно отслеживать клики по ссылке, источники переходов, платформы, с которых заходили пользователи, географию аудитории и языки.
Все основные функции (создание персонализированных ссылок, QR-кодов, ссылок в мессенджер, данные аналитики) доступны бесплатно. А вот чтобы, например, привязать свой домен, пиксели, создать диплинк, таргетированную ссылку, настроить SSL-сертификат, потребуется перейти на платный тариф. Цена — от 450 рублей в год. Более детальную информацию по стоимости вы можете посмотреть в разделе «Оплата» в левом меню.
4. U.to
Как выглядит укороченная ссылка: https://u.to/bQIbHA
Встроенная аналитика: да
Возможность задать вид ссылки: нет
Русскоязычный сервис для сокращения ссылок. Основной функционал доступен без регистрации. Открыв соответствующий раздел, вы можете посмотреть количество переходов по URL. Если хотите получать более подробную статистику, необходимо авторизоваться на сайте.
Из минусов — устаревший дизайн и длинная форма регистрации. Впрочем, если это не смущает, сервис хорошо выполняет свой функционал.
5. Bitly.com
Как выглядит укороченная ссылка: https://bit.ly/3xccHis
Встроенная аналитика: да
Возможность задать вид ссылки: да
Bitly.com — крупнейший сервис для сокращения ссылок. Предоставляет инструменты для отслеживания статистики по переходам по сгенерированным коротким URL-адресам. Но чтобы получить доступ к этим данным, нужно зарегистрироваться.
Если статистика не нужна, сократить URL можно без регистрации. Для этого на главной странице сервиса введите адрес желаемой ссылки.
Есть также платная версия сервиса — от 29$ в месяц. В этом случае вы получите поддержку по электронной почте, возможность создавать красивые брендированные ссылки (с вашим доменом), перенаправлять любые URL-адреса, массово сокращать их и делать QR-коды с логотипом Bitly.
6. Tiny URL
Как выглядит укороченная ссылка: https://tinyurl.com/2p8vnvxr
Встроенная аналитика: да
Возможность задать вид ссылки: да
Это один из старейших сервисов, который был создан в 2002 году. Если нужно просто укоротить ссылку, можно не регистрироваться. Достаточно вбить URL-адрес в строку и нажать «Make TinyURL!». Если хотите получить доступ к полной истории ссылок и возможность создавать индивидуальные адреса, потребуется создать учетную запись.
Есть три тарифа. Стартовая цена — $9.99 в месяц.
7. Cutt.us
Как выглядит укороченная ссылка: https://cutt.us/dpgBw
Встроенная аналитика: нет
Возможность задать вид ссылки: только часть URL
Англоязычный сервис с простым функционалом, в котором вы также можете уменьшать ссылки. Обратите внимание: если после открытия страницы стоит другой язык, поменяйте его на английский в настройках.
Чтобы сократить ссылку, введите ее в поле, далее в строке «Suffix» задайте уникальное имя и нажмите «Cut».
После этого вы получите короткий красивый URL-адрес и QR-код.
У сервиса есть и вторая версия — Smart Multi URL Shortener, которая позволяет создавать сразу несколько ссылок. Для этого введите в поле необходимые URL-адреса, задайте уникальное имя в графе «Suffix» и нажмите «Go!».
В результате вы получите несколько сокращенных ссылок.
8. Rebrandly
Как выглядит укороченная ссылка: rb.gy/sc1eai
Встроенная аналитика: нет
Возможность задать вид ссылки: только часть URL
Чтобы сократить ссылку, регистрироваться в сервисе не обязательно. Это нужно делать только в том случае, если вы хотите получить доступ к расширенной статистике и дополнительным функциям.
После регистрации интерфейс сервиса будет выглядеть так:
Какие появятся опции:
- возможность выбрать способ сокращения: сгенерировать самый короткий адрес, URL, учитывающий SEO-слова, а также абсолютно случайный;
- указать домен — оставить rebrand.ly или добавить собственный;
- добавить UTM-метки к исходной ссылке и пр.
В бесплатном тарифе можно посмотреть только количество кликов. Для подробной аналитики (данные по географии, языкам, устройствам), а также подключения нескольких доменных имен, сбора аудитории для ретаргетинга, построения отчетов потребуется перейти на платный тариф. Минимальная стоимость — 29 $ в месяц.
9. Lingen
Как выглядит укороченная ссылка: https://lingen.ru/yx4sr
Встроенная аналитика: да
Возможность задать вид ссылки: да
Lingen позволяет бесплатно сократить ссылку. Регистрироваться при этом не нужно. Но, как и в большинстве других сервисов, чтобы смотреть расширенную аналитику, потребуется авторизоваться.
После регистрации вы попадаете в личный кабинет, где появится доступ к дополнительному функционалу. Например, вы сможете добавлять пиксели отслеживания к вашим ссылкам, перенаправлять пользователей в зависимости от языка, платформы и страны, настраивать URL с помощью пользовательских доменов и псевдонимов.
10. Goo.su
Как выглядит укороченная ссылка: https://goo.su/77sKTc
Встроенная аналитика: да
Возможность задать вид ссылки: только часть URL
Бесплатный сервис, чтобы делать URL короче. Есть дополнительные опции: можно самостоятельно выбрать окончание ссылки и закрыть полученный адрес от индексации поисковиками.
Если зарегистрируетесь, сможете смотреть расширенную статистику: количество переходов за сегодня и за месяц, источники, а также данные по браузерам и устройствам.
11. Is.gd
Как выглядит укороченная ссылка: https://is.gd/1nMNkr
Встроенная аналитика: да
Возможность задать вид ссылки: нет
Is.gd — англоязычный бесплатный сервис, который позволяет уменьшать ссылки. Для просмотра статистики (количество переходов по URL можно отсортировать по стране, дате, браузеру и пр.) при создании ссылки нажмите «Further options» и поставьте галочку возле пункта «Log statistics for this link».
Далее после создания URL-адреса нажмите на соответствующую ссылку и затем выберите пункт «I want to see statistics for this URL».
В результате вы увидите следующую статистику:
Из минусов — сервис нельзя назвать интуитивно понятным. Плюс, устаревший интерфейс.
В обзоре мы рассказали, как сделать короткую ссылку и какие сервисы для этого можно использовать. Но эти инструменты не единственные — их гораздо больше. Какой выбрать, зависит от ваших целей и необходимого функционала. Поэтому тестируйте, ориентируйтесь на плюсы и минусы, про которые мы рассказали в статье, и выбирайте сервис, который будет вам удобен для работы.
Стилизация ссылок
При стилизации ссылок, важно понимать как использовать псевдоклассы, чтобы стилизировать состояния ссылок эффективно, и как стилизировать ссылки для использования в общих разнообразных функциях интерфейса: таких как например навигационное меню и вкладки. Мы рассмотрим все эти темы в этой статье.
| Для изучения вам потребуется: | Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS. |
|---|---|
| Вы узнаете: | Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации. |
Давайте посмотрим на некоторые ссылки
Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.
Состояния ссылок
Первое, что нужно понять, это концепция состояний ссылок — разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные псевдоклассы:
- Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link .
- Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited .
- Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
- Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus .
- Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active
Стили по умолчанию
Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).
p>a href="https://mozilla.org">A link to the Mozilla homepagea>p>
p font-size: 2rem; text-align: center; >
Вы заметите несколько вещей при изучении стилей по умолчанию:
- Ссылки подчёркнуты.
- Не посещённые ссылки синие.
- Посещённые ссылки фиолетовые
- Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
- Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7 , прежде чем это будет работать).
- Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).
Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы не должны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:
- Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
- Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.
Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:
- color (en-US) для цвета текста.
- cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
- outline для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.
Примечание: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — вы можете использовать любые свойства, которые вам нравятся. Просто постарайтесь не сходить с ума слишком сильно!
Стилизация некоторых ссылок
Мы уже рассмотрели состояния по умолчанию в некоторых деталях, давайте взглянем на типичный набор стилей ссылок.
Чтобы начать, мы выпишем наши пустые наборы правил:
a > a:link > a:visited > a:focus > a:hover > a:active >
Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.
А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:
body width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; > p line-height: 1.4; > a outline: none; text-decoration: none; padding: 2px 1px 0; > a:link color: #265301; > a:visited color: #437a16; > a:focus border-bottom: 1px solid; background: #bae498; > a:hover border-bottom: 1px solid; background: #cdfeaa; > a:active background: #265301; color: #cdfeaa; >
Также мы дадим некий пример HTML к которому применяется CSS:
p> There are several browsers available, such as a href="https://www.mozilla.org/en-US/firefox/">Mozilla Firefoxa>, a href="https://www.google.com/chrome/index.html">Google Chromea>, and a href="https://www.microsoft.com/en-us/windows/microsoft-edge" >Microsoft Edgea >. p>
Объединение этих двух даёт нам такой результат:
Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:
- Первые два правила не так интересны в этом обсуждении.
- Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
- Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
- Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
- Нижнее подчёркивание создано используя border-bottom , а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
- Значение border-bottom установлено на 1px solid , без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
Активное изучение: Стилизуйте ссылки самостоятельно
В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте своё воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все ещё так же функциональное, как и наш пример выше.
Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.
div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> h2>HTML Inputh2> textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> p>There are several browsers available, such as a href="https://www.mozilla.org/en-US/firefox/">Mozilla Firefoxa>, a href="https://www.google.com/chrome/index.html">Google Chromea>, and a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edgea>.p>textarea > h2>CSS Inputh2> textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> a < >a:link < >a:visited < >a:focus < >a:hover < >a:active < >textarea > h2>Outputh2> div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">div> div class="controls"> input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;" /> input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;" /> div> div>
var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput() output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; > reset.addEventListener("click", function () htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); >); solution.addEventListener("click", function () htmlInput.value = htmlCode; cssInput.value = "p \n\na \n\na:link \n\na:visited \n\na:focus \n\na:hover \n\na:active "; drawOutput(); >); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput);
Добавление иконок в ссылки
Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.
Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:
p> For more information on the weather, visit our a href="weather.html">weather pagea>, look at a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipediaa>, or check out a href="http://www.extremescience.com/weather.htm" >weather on Extreme Sciencea >. p>
body width: 300px; margin: 0 auto; font-family: sans-serif; > p line-height: 1.4; > a outline: none; text-decoration: none; padding: 2px 1px 0; > a:link color: blue; > a:visited color: purple; > a:focus, a:hover border-bottom: 1px solid; > a:active color: red; > a[href*="http"] background: url("external-link-52.png") no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; >Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.
Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.
Наконец, мы задаём некоторый padding-right для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.
И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*=»http»] выбирает элементы , но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.
Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!
Примечание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном (en-US) ; это объяснено в других местах
Стилизация ссылок в виде кнопок
Инструменты, которые вы исследовали в этой статье также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.
Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определённых обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.
Для начала HTML:
ul> li>a href="#">Homea>li> li>a href="#">Pizzaa>li> li>a href="#">Musica>li> li>a href="#">Wombatsa>li> li>a href="#">Finlanda>li> ul>
А теперь наш CSS:
body, html margin: 0; font-family: sans-serif; > ul padding: 0; width: 100%; > li display: inline; > a outline: none; text-decoration: none; display: inline-block; width: 19.5%; margin-right: 0.625%; text-align: center; line-height: 3; color: black; > li:last-child a margin-right: 0; > a:link, a:visited, a:focus background: yellow; > a:hover background: orange; > a:active background: red; color: white; >Что даёт нам следующий результат:
Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:
- Наше второе правило удаляет заданный по умолчанию padding у элемента и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае ).
- Элементы по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
- четвёртое правило — которое стилизует элемент — самое сложное; давайте пройдёмся по нему шаг за шагом:
- как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline — мы не хотим, чтоб они портили нам вид.
- Далее мы устанавливаем display на inline-block — элементы являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block , мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
- Теперь только изменение размера! Мы хотим заполнить всю ширину элемента , оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет
-
и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний в списке и удаляет его margin. Сделано!
- Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.
Примечание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.
Заключение
Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Как сделать красивую ссылку
Дата публикации: 18 апреля 2022 (обновлено: 27 октября 2023)
Время чтения: 7 минут
Как сделать красивый URL: 10 сервисов для сокращения ссылок
Несмотря на схожий функционал, сервисы для сокращения ссылок имеют свои преимущества и недостатки. Например, наличие или отсутствие встроенной аналитики, возможность задавать вид URL-адреса и пр. В статье расскажем, как сократить ссылку, поговорим о плюсах, минусах и дополнительных возможностях инструментов для создания красивых URL.
Полина Михайлова,
главный редактор независимой группы digital-компаний iConText GroupПеред тем, как перейти к анализу различных сокращателей, объясним, почему это важно. Создание ясных и понятных URL может значительно улучшить SEO вашего сайта. Посвятив этому вопросу немного времени, вы сможете повысить видимость ресурса в результатах поиска.
Кроме того, пользователи, которые ищут тематический контент, лучше воспринимают понятные URL-адреса. Слишком длинные и запутанные, перегруженные предлогами, параметрами и ненужными категориями, выглядят менее привлекательно, чем короткие и ясные URL, четко отражающие содержание ресурса. Вот почему важно уделять внимание созданию понятных и лаконичных адресов.
Почему короткие адреса лучше воспринимаются?
- Занимают меньше места. В блогах и на сайтах есть возможность скрыть даже очень длинный URL, включая все UTM-метки. Но в постах в социальных сетях или текстовых сообщениях пространство сильно ограничено. Короткие URL смотрятся лаконичнее.
- Их проще переслать другим. В некоторых случаях такой адрес даже можно запомнить и продиктовать по телефону.
- Дополнительные возможности. Многие сервисы для сокращения ссылок предоставляют полезные аналитические данные, например, информацию о том, сколько пользователей перешли по ней, а также их демографические характеристики (регион проживания, пол, возраст).
Когда адреса лучше не сокращать
- В электронной почте. Почтовым сервисам бывает сложно отследить, куда ведет сокращенный URL. Например, за этим адресом может скрываться нерелевантный контент или прямая загрузка вирусного файла. Как следствие, письма с редиректами (когда пользователя перенаправляют с одного сайта на другой) обычно автоматически отправляются в спам. Чтобы этого избежать, в email-письмах рекомендуется использовать полные URL-адреса.
1. Яндекс Кликер
Как выглядит короткая ссылка: https://clck.ru/enxzx
Встроенная аналитика: нет
Возможность задать вид: нетРусскоязычный сервис коротких ссылок, который Яндекс запустил в 2010 году. Одно из ключевых преимуществ — безопасность. Когда вы вставляете длинный URL в сервис, он автоматически проверяет сайт, на который ведет ссылка. Если ресурс заражен, Яндекс Кликер показывает предупреждение. База зараженных страниц постоянно обновляется. Поэтому при использовании сервиса вероятность заражения компьютеров ваших подписчиков и читателей снижается.
После создания укороченного адреса вы можете сразу отправить ее адресату или расшарить в социальных сетях, нажав на кнопку «Поделиться». Сокращатель также автоматически создает QR-код.
Кроме того, для удобства можно перетащить ссылку (Click↑ ) на панель браузера и нажимать на эту закладку каждый раз, когда потребуется сделать URL просматриваемого сайта короче.
Как сократить ссылку: 9 удобных и надежных сервисов
Хотите сократить ссылку, но теряетесь в выборе инструмента? Мы подобрали 9 сервисов сокращения ссылок, которые дают возможность укоротить ссылку за несколько секунд. В статье рассмотрим особенности, преимущества и недостатки сервисов, сравним их между собой. Но сначала расскажем, когда сокращение ссылок необходимо, а когда — неуместно.
Содержание:
- Когда стоит сократить ссылку
- Когда сокращение ссылок не уместно
- Как сократить ссылку: обзор сервисов коротких ссылок
- U.to
- Clck.ru
- Cutt.us
- Bitly.com
- Is.gd
- Tinyurl.com
- Goo.su
- Rebrandly.com
- Vk.com/cc
- Сервисы сокращения ссылок: сравнительная таблица
Когда стоит сократить ссылку
Длинные ссылки выглядят неэстетично, часто ими неудобно пользоваться. Короткие ссылки смотрятся лучше, их легко диктовать.
Короткий url стоит использовать, если нужно:
- переслать ссылку в мессенджере, по SMS или продиктовать;
- замаскировать реферальные ссылки;
- сделать ссылку визуально привлекательной — для рекламных материалов;
- экономить место в ограниченных по длине сообщениях — например, в SMS;
- предотвратить неверное копирование (обрезание) длинных ссылок;
- вести статистику по переходам и аудитории — это возможно в некоторых сервисах.
Когда сокращение ссылок не уместно
Короткая ссылка выглядит аккуратно, но иногда сокращение url может привести к неприятным последствиям.
Не стоит передавать сокращенную ссылку:
- в письмах — из-за коротких ссылок письма попадают в спам;
- для страниц сайта — когда сокращатель ссылок перестанет работать, придется менять ссылки;
- если нужна вечно работающая ссылка — причина выше.
Как сократить ссылку: обзор сервисов коротких ссылок
Чтобы сократить ссылку онлайн, нужно использовать сервис, который присвоит ей новый, короткий url. При нажатии на короткую ссылку, пользователь будет попадать на исходный адрес. Многие сервисы позволяют обрезать ссылку и даже получить статистику по ней — например, количество переходов по ссылке, характеристики целевой аудитории.
В теории все замечательно, но на практике есть вероятность, что короткие ссылки станут нерабочими из-за закрытия или некорректной работы сервиса. Важно выбрать надежный укорачиватель ссылок.
Рекомендуем обратить внимание на следующие конвертеры ссылок:
U.to
Понятный сервис коротких ссылок на русском языке. Сократить ссылку можно без регистрации.
Вводим адрес, нажимаем «Сократить» и получаем короткую ссылку:
Этот генератор коротких ссылок дает возможность смотреть статистику переходов — нужно зарегистрироваться в сервисе. Правда, форма имеет множество полей:
Преимущества:
- простой,
- бесплатный,
- русскоязычный,
- для сокращения ссылки не нужна регистрация,
- детальные данные статистики.
Недостатки:
- необходимость зарегистрироваться для полноценного использования,
- сложная форма регистрации
Когда использовать сервис:
если нужно просто сократить ссылку.
Clck.ru
«Кликер» — простой, русскоязычный сервис коротких ссылок от «Яндекс». Для работы не требуется регистрация.
Кроме короткой ссылки, получаем QR-код для мобильного телефона, чтобы пользователи смартфонов могли легко считать данные.
Сокращенной ссылкой можно поделиться в соцсетях.
Преимущества:
- простой,
- бесплатный,
- русскоязычный интерфейс,
- отсутствие регистрации,
- генерация QR-кода.
Недостатки:
- не дает статистические данные.
Когда использовать сервис:
если нужно только обрезать ссылку, получить QR-код.
Cutt.us
Не русифицированный, но интуитивно простой сократитель ссылок.
В верхнее поле вставляется ссылка, в нижнее можно вставить интересующее вас ключевое слово и нажать «Cut». Так вместо ссылки со случайным набором символов можно получить ссылку с именем вашего бренда или любым другим подходящим словом, фразой.
Результат — не только короткая ссылка, но и сгенерированный QR-код.
Сервис уникален тем, что в его другой версии можно обработать 3 ссылки одновременно и объединить их ключевым словом.
В итоге имеем три короткие ссылки:
Преимущества:
- простота,
- бесплатность,
- не нужна регистрация,
- генерация QR-кода,
- преобразование нескольких ссылок одновременно,
- создание ключа для сокращенной части.
Недостатки:
- интерфейс на английском,
- нет аналитики.
Когда использовать сервис:
если нужно получить QR-код, ввести ключевое слово в ссылку, обрезать несколько ссылок.
Автоматизация email рассылок
Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push.
Bitly.com
Англоязычный сжиматель ссылок с широкими возможностями.
Уменьшить ссылку можно не регистрируясь.
Для доступа к данным статистики нужно зарегистрироваться. Будет отображаться ежедневное количество переходов, их источники и география аудитории.
Авторизированные пользователи могут сами задать имя короткой ссылки в окне «Customize».
Получаем желаемую ссылку:
У этого укоротителя ссылок оплата помесячная. Стоимость зависит от количества ссылок, длительности работы короткого url и необходимости сохранения данных аналитики.
Преимущества:
- простота,
- бесплатная генерация ссылок,
- есть статистика,
- возможность самостоятельно подобрать имя короткой ссылки.
Недостатки:
- нерусифицированный,
- необходимость регистрации для получения аналитики,
- часть функций платная.
Когда использовать сервис:
если важна аналитика и выбор имени для короткой ссылки.
Is.gd
Сервис сокращения ссылок с минималистичным интерфейсом и бесплатным доступом.
Вставив url и кликнув на «Shorten» получаем короткую ссылку.
Кликнув на «Give me this URL as a QR code», имеем QR-код для мобильного телефона.
Кликаем на «Further options / Custom URL» и отмечаем «Log statistics for this link» — чтобы иметь доступ к статистике.
Для отслеживания статистики регистрация не требуется — кликаем на «I want to see statistics for this URL».
В статистике отображается число переходов по короткой ссылке.
Преимущества:
- бесплатный;
- регистрация не нужна;
- доступна статистика;
- данные предоставляются наглядно, в виде графика.
Недостатки:
- не русифицирован;
- сервис не совсем понятный, но есть раздел FAQ с подробными ответами на вопросы.
Когда использовать сервис:
если нужно использовать максимум возможностей без регистрации.
Tinyurl.com
Этот сервис сокращения ссылок успешно функционирует с начала двухтысячных. Простой, надежный, но англоязычный.
Создать короткую ссылку очень легко — регистрация не нужна.
В «Custom alias» можно самому вписать имя url и получить кастомизированную ссылку.
Преимущества:
- бесплатный,
- простой,
- нет необходимости в регистрации,
- кастомизация ссылок,
- расширение для браузеров Firefox и Chrome.
Недостатки:
- не предоставляет статистику,
- много рекламных баннеров.
Когда использовать сервис:
если нужна только кастомизированная короткая ссылка.
Goo.su
Отличный сервис сокращения ссылок на русском языке. Сделать ссылку короткой в нем очень просто.
Имеем короткий url и QR-для мобильного телефона.
Также можно трансформировать окончание короткой ссылки и спрятать короткий url от индексации. На ссылку также можно поставить пароль, чтобы защитить статистику от посторонних.
Чтобы получить желаемый адрес, нажимаем на «Дополнительные опции» и добавляем желаемое имя в поле «Алиас».
После быстрой регистрации становится доступной наглядная статистика.
Преимущества:
- понятный,
- бесплатны,
- русскоязычный,
- приятный дизайн,
- можно устанавливать пароли для коротких ссылок,
- доступна статистика,
- возможность кастомизации ссылок,
- есть расширение для Сhrome.
Недостатки:
- регистрация для получения статистики,
- много рекламы.
Когда использовать сервис:
когда нужен русскоязычный сокращатель ссылок, возможность отслеживать статистику и при этом не пугает регистрация.
Rebrandly.com
Многофункциональный сервис для сокращения ссылок онлайн на английском языке. Просто сжатие ссылок можно сделать без регистрации.
После простой регистрации сервис коротких ссылок позволяет:
- прикреплять свой домен,
- добавлять UTM метки к длинной ссылке,
- генерировать случайный, самый короткий или полезный для seo вариант коротокого url.
Есть два варианта получения доступа к данным статистики:
- Бесплатный — показывается количество кликов по ссылке.
- Платный — предоставляются подробные данные по целевой аудитории. Можно подключить несколько доменов, составлять отчеты, формировать аудитории для ретаргетинга.
Преимущества:
- многофункциональность,
- возможность создания персонализированных коротких ссылок с собственным доменом и UTM метками.
- формирование аудитории для ретаргетинга,
- продвинутая аналитика.
Недостатки:
- необходима регистрация,
- основной функционал платный.
Когда использовать сервис:
если вы представляете крупный бренд или медиа.
Vk.com/cc
Простой и функциональный сокращатель ссылок от ВКонтакте. Полученные короткие ссылки можно использовать везде. Для работы нужно залогиниться во ВКонтакте.
После сокращения ссылки доступен еще и QR-код.
Нажав на QR-код, получаем статистику — количество переходов, динамику просмотров, характеристики целевой аудитории.
Преимущества:
- простой,
- русскоязычный,
- приятный интерфейс,
- стабильная работа,
- возможность сгенерировать QR-код,
- подробная статистика,
- возможность спрятать статистику от посторонних.
Недостатки:
- необходимость авторизации во ВКонтакте.
Когда использовать сервис:
если нужен быстрый доступ к статистике без регистрации и возможность скрыть ее от посторонних.
Сервисы сокращения ссылок: сравнительная таблица
Чтобы вам было удобней выбрать подходящий сервис, мы составили таблицу со сравнением их основных характеристик.
Сервис Язык Регистрация Возможности U.to русский не нужна для укорачивания ссылок, нужна для просмотра статистики сокращение ссылки, просмотр статистики переходов по ссылке Clck.ru русский не нужна сокращение ссылки, получение QR-кода Cutt.us английский не нужна сокращение ссылки или нескольких ссылок сразу, создание QR-кода, кастомизация ссылки Bitly.com английский не нужна для укорачивания ссылок, нужна для просмотра статистики сокращение ссылки, кастомизация ссылки, просмотр статистики (переходы, источники переходов, географии аудитории) Is.gd английский не нужна сокращение ссылки, получение QR-кода, просмотр статистики переходов Tinyurl.com английский не нужна сокращение ссылки, кастомизация ссылки, есть расширение для браузеров Firefox и Chrome Goo.su русский не нужна для укорачивания ссылок, нужна для просмотра статистики сокращение ссылки, получение QR-кода, кастомизация ссылки, защита ссылок паролем, просмотр статистики переходов, есть расширение для Chrome Rebrandly.com английский не нужна для укорачивания ссылок, нужна для просмотра статистики сокращение ссылки, прикрепление собственного домена, добавление UTM меток, генерация случайного, самого короткого или SEO дружественного варианта короткого url, продвинутая аналитика, возможность сбора аудитории для ретаргетинга Vk.com/cc русский не нужна в сервисе, нужна во ВКонтакте сокращение ссылки, получение QR-кода, просмотр статистики переходов, данных по целевой аудитории Теперь вы знаете, как сократить ссылку и посмотреть статистические данные по ней. Используйте короткие ссылки в коммуникациях с клиентами для SMS, сообщений в мессенджерах и чат-ботах. Зарегистрируйтесь в SendPulse и создавайте удобные и эффективные каналы общения с клиентами!