Как сделать красивую ссылку на сайт
Когда дело доходит до ссылок, их легче принять такими, как они есть. В конце концов, вы просто ссылаетесь на какой-нибудь текст и все. Но что можно реально сделать, чтобы заставить людей кликнуть по ним? Может подчеркивание текста CSS?
Большая проблема, которую я вижу на многих блогах — ссылки не выглядят как ссылки. Читатель узнает о них только при наведении на них курсора. Это неприемлемо.
Выделите свои ссылки! В этой статье я расскажу о 8 эффективных способах изменения стиля ссылок.
Добавьте цвет
Один из лучших способов выделить ссылку состоит в том, чтобы добавить цвет! Когда большая часть текста черного цвета, добавьте другие цвета, чтобы сделать ссылки заметнее.
Но вы должны быть уверены, что выбранный цвет взаимодействует с остальной частью вашего бренда. Иначе ссылки будут выделяться, но неправильно.
Также помните о контрасте. Темный, почти черный цвет не обеспечит отличия ссылки от остального абзаца. А слишком светлый не даст достаточного контраста между белым фоном и текстом.
Мэрайя c Femtrepreneur использует интересный красный цвет, чтобы выделить свои ссылки:
Чтобы изменить цвет ссылок на сайте, взгляните на таблицу стилей темы и найдите следующее:
Нужна помощь в выборе цвета? Воспользуйтесь одним из популярных инструментов:
Сделайте жирнее
Еще один способ добавить контраста ссылкам состоит в том, чтобы сделать их полужирными. Выделение ссылки полужирным работает таким же образом.
Чтобы сделать CSS подчеркивание ссылки полужирным, добавьте следующий код:
Или используйте шрифт, который поддерживает различные значения насыщенности ( толщины ):
Добавьте подчеркивание
По умолчанию все ссылки оформлены подчеркиванием, а это означает, что если бы вы удалили CSS с сайта, каждая ссылка содержала бы подчеркивание. Это довольно распространенное предположение, что любой подчеркнутый текст является ссылкой. Так какой способ лучше использовать для выделения ссылок?
Более нетрадиционный способ добавить подчеркивание ссылке — установить нижнюю границу. Этот метод дает больше гибкости, когда речь заходит о том, как отображается подчеркивание.
В блоге KORY автор использует нижнюю границу для ссылок. Обратили внимание на большой разрыв между текстом и подчеркиванием? Это можно реализовать с помощью изменения внутреннего отступа ссылки:
Небольшой совет : Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:
Стиль курсивом
Выделить ссылки курсивом довольно просто, но об этом способе стилизации часто забывают. На приведенном ниже скриншоте страницы они выделяются, но при этом органично вписываются в дизайн сайта:
Сделайте все буквы заглавными
Используйте другой шрифт
Еще один способ выделить ссылки — использовать другой шрифт. Этот метод может внести беспорядок, если он неправильно использован. Так что следуйте следующим советам.
Для обеспечения максимальной слаженности выберите шрифт из того же семейства. В сжатом или черном варианте шрифт будет выделяться, но не слишком отличаться.
Для своих ссылок я выбрала шрифт, который достаточно похож, чтобы не бросаться в глаза, но отличается от остального текста. Так я получила контраст, который хотела.
Добавьте фоновый цвет
Один из моих любимых способов выделить ссылку ( после подчеркивания точками CSS ) — добавить фоновый цвет. Посмотрите на следующий пример:
Все, что нужно сделать, это добавить цвет фона и, возможно, небольшой внутренний отступ. Также можно изменить цвет шрифта для лучшей читаемости:
Комбинируйте!
Для достижения максимальных результатов скомбинируйте любые два ( или больше ) из перечисленных выше методов выделения. Вы, наверное, заметили, что в большинстве приведенных примеров ссылки были цветными. Это связано с тем, что цвет играет действительно большую роль в выделении ссылок по сравнению с окружающим текстом.
Как сделать ссылку на сайт: 4 простых шага
Развитие собственного сайта предполагает полноценную каждодневную упорную работу. В том числе, выполнение монотонных и не совсем интересных действий. Но обязательных – способствующих оптимизации проекта. Сегодня подробно и во всех красках расскажу, как сделать ссылку на сайт. Речь идет о переходе на внутренние страницы ресурса со «стартовой». То есть, о перелинковке. Казалось бы, ничего крайне трудного и непонятного в этом нет. Но, как и в любом деле, имеются некоторые тонкости и нюансы. На них я и остановлюсь.
Как сделать активную ссылку на сайте, простая инструкция
Что представляет собой ссылка? Это отмеченная часть текста. При нажатии на нее пользователь перенаправляется на другую страницу. В зависимости от настроек, страница открывается либо в той же вкладке, либо в новой.
Обратите внимание! Существуют ссылки, активирующие скачивание файлов. То есть, при клике мышкой на них, начинает скачиваться документ или другой файл.
Ссылка выглядит так: слово или часть предложения. Теперь о каждой составляющей ссылки:
Обратите внимание! Ссылка обычно выделяется синим цветом и подчеркиванием текста. Но могут быть и другие варианты настройки.
Как видите, чтобы сделать ссылку в редакторе сайта нужно поставить соответствующий тег, указать url и часть текста. Ничего сложного, правда ведь?
Кстати! О том, как работать в административной панели и редакторе сайта, я подробно рассказываю на своем авторском полностью бесплатном тренинге, как сделать сайт своими руками. Тренинг длится всего 4 дня в режиме онлайн. По завершении обучения у каждого участника остается собственный проект – готовый к работе. Если возникают трудности с его созданием, команда поддержки отвечает на все вопросы и решает проблемы.
Все ссылки бывают двух типов. Внешние перенаправляют на страницы того же сайта. Внутренние – на сторонний ресурс.
Какие атрибуты для ссылок бывают
Что интересно – атрибутов для тега бывает несколько. Они публикуются обязательно через пробел. Очередность размещения атрибутов абсолютно не важна.
Ссылка открывается в новом окне
Очень удобны для пользователей вариант. Остается открытой «начальная» страница. Ему не нужно искать варианты, как вернутся на нее в случае необходимости.
Кроме того, если сразу перейти на другую страницу в том же окне, человек будет в итоге находиться на сайте чуть меньше времени. Ведь «стартовая» страница «закрывается». При открытии нового окна посетитель «использует» сразу две страницы.
Чтобы страница по ссылке открывалась в новом окне, нужно «эксплуатировать» значения target и _blank. Вот код, вставляемый в текст в редакторе статьи: текст.
Как сделать ссылку на сайт: информация про содержание ссылки
Чтобы дополнительно мотивировать посетителя нажать на ссылку, рекомендуется сделать ее описание. Поскольку только текстового ключа недостаточно, чтобы дать полное посетителям полное представление, что включает в себя страница, на которую ведет ссылка – ведь в такой ситуации анкор будет слишком большим. Станет нечитабельным.
Как быть? Есть простое решение – при наведении пользователем курсора всплывает подробное описание. Для достижения такой цели необходимо использовать атрибут title.
Как сделать ссылку на страницу сайта, у которой будет описание? Вот ее код: выделенный в статье текст ссылки.
Отношения между документами
Существует еще один важный атрибут rel, посредством которого определяется отношения между уже открытой страницей и документом, на который эта ссылка ведет. У данного атрибута имеется несколько значений. Рекомендуют использовать два:
Остальные вам не нужны. Итак, начнем с nofollow. Он очень важен для SEO-продвижения сайта. Суть его состоит в том, чтобы не передавать вес страницы, на которой расположена ссылка, странице, на которую она ведет.
Как сделать ссылку на страницу сайта со значением nofollow? Вот ее код — текст.
Теперь про значение sidebar. Данный вариант используется крайне редко. Цель – при клике по ссылке тут же закрепить ее в панели закладок используемого пользователем браузера.
Как сделать ссылку на сайт такого типа? Очень просто! Вот ее код: текст.
Как сделать ссылку на сайт в WordPress
Каждая из Систем управления контентом (движок) имеет собственные особенности формирования внутренних ссылок. Я остановлюсь на работе в редакторе WordPress. Это передовая платформа. На ней разрабатывается множество удобных и функциональных сайтов. Уже сегодня на движке работает более 30% всех ресурсов в мире – только осознайте эту цифру!
1. Шаг первый
Откройте в редакторе платформы статью. Курсором выделите часть текста, который вы хотите сделать ссылкой. Найдите на панели инструментов значок цепи – три звена. Кликните по нему.
2. Шаг второй
Откроется небольшое окно. В нем нужно ввести адрес url – той страницы, которая должна открываться по ссылке.
3. Шаг третий
В строке «Заголовок» внесите описание ссылки. Это будет атрибут title. Если не хотите его делать, то оставьте строку пустой. Рекомендую в строку вносить название страницы или статьи, на которую ведет ссылка.
4. Как сделать ссылку на сайт: шаг четвертый
Если хотите, чтобы ссылка открывалась в новом окне, нужно поставить отметку в соответствующей строке. После чего – кликнуть на кнопку «Добавить ссылку» или другую с подобным названием (в зависимости от версии редактора и особенностей перевода).
Дополнительные атрибуты
Хотите узнать, как сделать ссылку на страницу сайта в WordPress с дополнительными атрибутами? В этом нет ничего сложного.
редакторе статье перейдите в раздел HTML и там вручную пропишите все необходимые вам атрибуты в тексте уже созданной ссылки.
Как написать соответствующие атрибуты – смотрите выше. В примерах оформления ссылок. Ничего сложного в этом нет. Просто придерживайтесь моих рекомендаций.
Как сделать ссылку на сайт: картинка, как ссылка
Несколько советов, как правильно делать ссылки на страницах собственного сайта
1. Не делайте ссылок чрезмерно много
Если на вашем сайте, блоге не так много страниц и еще мало текста, делайте меньше ссылок в теле статьи.
2. Как сделать ссылку на сайт: понятный анкор
Вот еще один совет, как сделать ссылку на страницу сайта правильно. Анкор – это текст ссылки. Он должен быть простым и понятным. Гармонично вписываться в текст статьи, не выбиваясь из логики рассказа.
Поэтому делайте анкоры читабельными. Чтобы посетитель понимал, о чем идет речь, а не удивлялся, почему вдруг в тексте идет непонятный набор слов.
3. Учитывайте объем документа/файла
Если ставите ссылку на скачивание документа или файла, или если ссылка ведет на страницу с «тяжелым» контентом, обязательно предупредите пользователей об этом.
Дабы они изначально понимали, какой объем трафика понадобится. Даже несмотря на то, что сегодня большинство провайдеров предоставляют высококачественный скоростной интернет, подобная забота будет позитивно оценена пользователями.
4. Как сделать ссылку на сайт: удаляйте «битые» ссылки
Если вы ставите ссылки на сторонние документы или другие сайты, проверяйте, чтобы они оставались рабочими. Со временем – велика вероятность – что ссылка будет «битой». То есть, по ней уже не окажется нужного файла или страницы, появится ошибка. Пользователь окажется разочарованным. Да и поисковые роботы негативно относятся к таким ссылкам.
Поэтому каждый месяц необходимо проверять сайт на наличие таких ссылок. Чтобы сэкономить время на работу, попробуйте воспользоваться программой Xenu Link Sleuth.
Как оформлять текст ссылки: несколько советов
Теперь немного о том, как сделать активную ссылку на сайте, чтобы она выглядела красивой. Для этого нужно правильно оформить текст. Вот несколько действенных советов:
Обратите внимание! Придерживайтесь стандартов оформления анкора. Текст синего цвета и подчеркнутый. От прочих вариантов нужно отказаться.
Как сделать ссылку на страницу сайта: личный совет
Теперь вы знаете, как сделать ссылку на сайт правильно. И не только ссылку, но и открывающуюся в новом окне или имеющую подробное описание.
Если вас интересует, как своими руками выполнять более сложные действие в административной панели или вообще самостоятельно сделать сайт всего за 4 дня, записывайтесь на мой авторский онлайн-тренинг. Во время обучения вы узнаете много интересного и полезного. Но, самое главное, создадите личный сайт. На тренинге я также рассказываю о том, монетизировать сайт – то есть, сделать его прибыльным, приносящим постоянный и высокий уровень дохода.
12 лучших сервисов для сокращения ссылок
Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.
Сервисы для сокращения ссылок помогают сократить длинные url, чтобы использовать их в соцсетях, презентациях или на сайтах. Мы сделали обзор 12 сервисов, которые помогут быстро сократить ссылку и поделиться ей.
Прежде чем перейти к обзору, я скажу пару слов о том, зачем вообще сокращать ссылки и когда этого лучше не делать.
Зачем сокращать ссылки
Сокращение длинных гиперссылок полезно по двум причинам:
Также некоторые сервисы по сокращению ссылок показывают статистику по переходам страницы и характеристикам аудитории (регион, пол, возраст).
Когда ссылки лучше не сокращать
В email. Почтовым провайдерам сложно отследить, куда ведёт сокращённая ссылка. На другом конце может быть нерелевантная информация или прямая загрузка файла с вирусом. Поэтому письма с редиректами автоматически попадают в спам. Чтобы этого не произошло, в письмах нужно использовать гиперссылки, без сокращений и редиректов.
На важных разделах сайта, в навигации. Если сервис-сокращатор закроется, скорее всего, все укороченные ссылки сломаются и их нужно будет менять.
Да: используйте сокращатель
Скинуть мемчик в рабочий чат.
Нужен QR-код для конференции.
Вам нужно продиктовать ссылку.
Ссылка не должна занимать много места: например, в презентации.
В таргете соответствующей социальной сети.
Нужна статистика по кликам, системы аналитики по какой-то причине не подходят.
Чтобы скрыть партнёрские метки в ссылке.
Нет: лучше вставить полную ссылку
Навигация на сайте, важные разделы.
Если ссылка навсегда должна остаться рабочей.
Bit.do
Простой сервис, в котором можно создать короткий url. Окончание к ссылке вы можете написать сами. Обратите внимание, если кто-то до вас уже использовал такое окончание, сервис не даст им воспользоваться.
Сервис также генерирует QR-код для ссылки. Из плюсов — если в конце созданного url в строке браузера ввести «-», вам откроется статистика этой ссылки.
Минусы: отсутствие русского языка и несовременный дизайн.
Bitly.com
Сервис даёт укороченную ссылку без регистрации. Есть подробная аналитика для зарегистрированных пользователей: число переходов по ссылке в каждый день, источники переходов и география пользователей.
Совет
Чтобы получить статистику переходов по укороченной ссылке без регистрации, просто добавьте к url знак «+». В браузере откроется аналитика вашего укороченного url.
Минусы: английский интерфейс.
Сlck.ru
Сервис от Яндекса, который помогает маркетологам быстро получать обрезанные ссылки. Работает без регистрации. Бонусом сервис генерирует QR-код ссылки. Укороченную ссылку можно сразу расшарить в социальных сетях.
Минусы: отсутствие аналитики по коротким ссылкам.
Cutt.us
Англоязычный сокращатель ссылок, бесплатно и без регистрации. Поможет создать собственное окончание url и объединить несколько ссылок одним ключевым словом.
Для этого переходим на cutt.us/smarts/ и вставляем несколько длинных ссылок. Выбираем им единое окончание, например «blogunisender», и получаем сокращённые ссылки, объединенные одним ключевым словом.
Минусы: нерусифицированный интерфейс, отсутствие статистики переходов.
Is.gd
Полезный сервис для создания собственных окончаний короткой гиперссылки. Работает без регистрации. Сохраняет статистику посещений ссылки по файлам cookies.
Минусы: не юзер фредли интерфейс, только английский язык.
Okl.lt
Простой сервис для сокращения ссылок в рекламе соцсети «Одноклассники». Чтобы не вводить пользователей в заблуждение, лучше не злоупотрелять использованием на других площадках.
Короткий url выглядит чисто, вида «okl.lt/». Есть стати стика по переходам.
Минусы: требуется регистрация.
lnnkin.com
Ещё один англоязычный сервис. Генерирует короткий url и также кастомизирует окончание, если необходимо. Из плюсов — ссылку можно защитить паролем.
Минусы: много рекламы и всплывающих баннеров.
Отслеживание данных по переходам доступно без регистрации, просто сохраните track id или страницу статистики. Логиниться придётся, если хотите отредактировать или удалить уже созданные ссылки.
Минусы: редактирование уже созданных коротких ссылок доступно в платной версии.
Goo.su
Простой бесплатный сервис для сокращения url. Можно кастомизировать окончание ссылки и закрыть полученный url от индексирования. Это полезно, если вы размещаете короткий url стороннего ресурса на своём сайте.
Чтобы создать собственный короткий адрес, в поле «Алиас» введите нужное окончание гиперссылки.
Минусы: ресурс переполнен рекламными баннерами. Для аналитики потребуется регистрация.
Rebrandly.com
Один из самых функциональных сервисов для уменьшения длины гиперссылки. Rebrandly умеет:
Бесплатный тариф ограничен количеством кликов. За минимальную платную версию придётся платить от 29$ в месяц.
Совет
Без регистрации вы можете также сгенерировать короткий url без кастомизации под домен.
Минусы: бесплатная версия ограничена — для глубокой аналитики и подключения нескольких доменов придётся платить.
Tinyurl.com
Один из старейших сервисов для обрезания url. Tinyurl бесплатный, поэтому заспамлен рекламными баннерами. Но сделать уникальный url всё равно можно — просто задайте собственное окончание в строке «Custom alias».
Минусы: устаревший интерфейс с большим количеством рекламы.
To.click
Современный сервис для уменьшения длины гиперссылки с несколькими дополнительными фичами. Сокращатель доступен только после регистрации, но функционал того стоит.
Помимо уменьшения длины ссылки, To.Click предлагает кастомизацию короткого url под ваш домен (только в платной версии) и возможность учёта пикселя таргетированной рекламы. Коммерческий тариф начинается от 990₽ в месяц. Сокращать ссылки можно через телеграм-бота @toclick_bot.
Из необычного
Сервис to.click поддерживает эмодзи и кириллицу в окончании короткого url.
Минусы: расширенный функционал доступен только в платной версии ресурса.
U.to
Минималистичный сервис для укорачивания ссылок. Для получения короткого адреса регистрация не нужна. Заводите аккаунт, если хотите отслеживать переходы по укороченной ссылке.
Минусы: форма регистрации с десятью обязательными полями.
Vk.com/cc
Вконтактовский сокращатель ссылок. Укороченные ссылки можно использовать не только в социальной сети.
Чтобы получить короткий url, нужно залогиниться во «ВКонтакте». После создания укороченной ссылки будет доступен QR-код в форматах png и svg, а также статистика по просмотрам.
Минусы: чтобы пользоваться, нужно залогиниться во «ВКонтакте».
Bc.vc — при переходе по сокращенной версии ссылки показывает стороннюю рекламу.
Demo.polr.me — бесплатный проект пока еще в бета-версии, поэтому не рекомендуем его как надежный. Есть возможность кастомизации окончания ссылки.
Zapier URL Shortener — работает для сокращения ссылок только для пользователей сервиса Zapier.
Yourls — сложный для регулярных сокращений. Это бесплатное программное обеспечение с открытым кодом. Чтобы пользоваться, нужно звать разработчиков.
Clck.ru.com — при переходе по короткому url-у, появляется 10-секундное окно баннера.
Urlways.com — в публичной версии сокращённая ссылка открывается с рекламой.
Vk-cc.ru — переход на основную гиперссылку происходит только после редиректа с короткой рекламой.
Сравнение сервисов
Для удобства выбора я добавила все данные о сервисах в сводную таблицу: