В данной статье представлена информация о практическом применение ссылок на сайте. Конкретнее: информация о HTML теге ссылки <a>.
Именно ссылка приводит на ваш сайт людей, позволяет зарабатывать на сайте, улучшать поведенческий фактор. В конце-концов: пузомерки сайта (тИЦ и PR) именно ссылки позволяют наращивать.
Однако тег <a> позволяет провести еще некоторые настройки, которые могут не только повлиять на отношение к сайту со стороны поисковых систем, но а на поведение посетителя сайта.
Не буду приводить теорию, т.к. она расписана подробнейшим образом на сайте Devaka.ru. Добавить к этому нечего.
Однако в данной статье опущен один момент: как ставить эти самые nofollow и noindex в ссылки.
Накануне в сообщество "F.A.Q Блоггера" я написал небольшую заметку по данному вопросу (ВОТ ОНА). В виду того, что в сообществе на данный момент состоят не все читатели данного блога, решил продублировать сюда информацию, а заодно пропиарить сообщество.
Для многих из вас ссылка выглядит так:
Это кнопка в визуальном редакторе WordPress (на других движках выглядит очень похоже). Перейдя на закладку HTML, вы удивитесь, т.к. ссылка будет выглядеть так:
Открываем новое окно (вкладку) при клике по ссылке
Вы уже обратили внимание, что при клике по некоторым ссылкам новая страница открывается в том же окне браузера. А кликнув на другие ссылки, страница открывается в новом окне (закладке). Делается это так:
В данном случае команда target="_blank" указывает: для страницы по ссылке открывать новое окно (вкладку).
Настоятельно рекомендую использовать данный параметр для всех внешних ссылок с вашего сайта: кликнув по ссылке человек откроет новую страницу, но ваш сайт останется так же открытым, что увеличит время нахождения в статистике.
Теперь поговорим о визуальном выделении ссылки из общего текста.
Выделяем ссылку в тексте
У большинства из вас ссылка в тексте выделяется цветом, либо нижним подчеркиванием (сразу или при наведении). Но вы видели, что ссылка может выделяться еще больше.
Для чего это нужно?
При правильно подходе визуально выделенная ссылка может принести вам дополнительный доход, либо добиться поставленной цели.
Возьмем к примеру эту ссылку. Перейдя по ней вы попадаете на обычную страницу. Однако для меня она значит совсем другое.
Чтобы выделить ссылку в тексте, необходимо добавить для нее стили. Делается это так:
В результате у вас получится точно такое же оформление ссылки, как у меня на данный момент (февраль 2013). Пояснения:
border:1px solid #c4c4c4; - рамка в 1 пиксель, непрерывная, цвета #c4c4c4;
padding: 3px; - внутренний отступ от рамки (чтобы не слипался текст с рамкой);
color:#444; - цвет шрифта ссылки;
background:#EFEFEF; - задний фон ссылки в пределах рамки
При желании можно задать:
font-size:20px; - размер шрифта;
font-family:Arial; - семейство шрифта;
text-decoration:underline; - нижнее подчеркивание ссылки. Чтобы от него избавиться, делаем text-decoration:none;
другие параметры
Кто сейчас ринулся у себя на сайте делать подобное может разочароваться: "не работает, хотя все делаю как в статье". Дело в том, что в вашем шаблоне уже прописаны стили для ссылок в теле статьи, сайдбаре, футере и прочее. Здесь нужно "перебить" параметры, либо подправить сам файл стилей шаблона (который имеет расширение .css).
Если вы хотите сделать видимой ссылку в отдельно взятом случае (используете плагин New Adman, где прописали рекламный текст с ссылкой на партнерку, как часто делаю я), то достаточно добавить !important к параметрам стилей. Он подсказывает браузерам, что данное значение важнее того, что прописано в файле стилей, либо родительским классам. Примерно вот так может выглядеть (в самом сложном случае):
Повторюсь: использовать !important может и не пригодиться, либо только для значений color и text-decoration.
Чтобы сделать ссылки "другого типа" для всех статей автоматически, то придется подправить немного файл стилей. Для этого смотрим видео и читаем текст статьи Картинка рядом со ссылкой (указывал ее в начале статьи).
Аналогично ставим задний фон, рамку, цвет и прочие параметры.
Уточню: у вас уже будет прописано действие a:hover в файле стилей. Осталось только их найти и подкорректировать под свои нужды. Если просмотрели видео с моего канала Ютуб и указанных выше статей, то сможете без проблем отыскать нужные строки в файле стилей, и поставить им соответствующие параметры.
Здесь каждой ссылке через файл стилей .css задана рамка с задним фоном. При наведении фон и цвет шрифта меняется на другой. При это смена делается плавно, с задержкой в 0,5 сек. (должно отображаться в FireFox, Chrome и Opera). Плавная смена достигается при помощи фильтра, которому будет посвящен одна из следующих статей.
Если что-то не получилось - велком в комментарии. Если же не хотите даже браться за реализацию подобного, но хотите иметь красивые ссылки на сайте - специально для вас создана страница Услуги (цены до неприличия низкие).
У тега ссылки <a> есть еще и другие возможности. о которых я не рассказывал сегодня, т.к. они менее востребованы широкой аудиторией. Почитать об этом можно ЗДЕСЬ.
Автор:
Виталий
Привет. Я автор этого блога и ридера вебмастеров/SEO-специалистов WMSN.ru
Можешь оставить свой вопрос в комментариях к статье или предложить идею для новой статьи. Не стесняйся.
В данном случае тест ссылки будет синим, а подчёркивание (именно подчеркивание, а не бордер) будет синим (цвета ссылки по умолчанию).
Томский школьник
Опубликовано: 22.02.2013Ответить на сообщение
Комментарий не в тему, но не смог удержаться. Отличный дизайн, мне очень понравился! Белые тона смотрятся намного лучше черных 🙂
Дмитрий
Опубликовано: 22.02.2013Ответить на сообщение
Доброго времени суток. Можно поинтересоваться, что за плагин стоит у вас, который выводит после статьи форму подписки с кнопками соц.сетей ?
Виталий
Опубликовано: 22.02.2013Ответить на сообщение
это не плагин. сделано вручную (кнопки share42 и форма от feedburner)
Дмитрий
Опубликовано: 22.02.2013Ответить на сообщение
Ясно. Спасибо.
Urseo
Опубликовано: 22.02.2013Ответить на сообщение
Классно, спасибо. Полезно, просто и интересно! Юзабилити сейчас ой как в цене!
Александр
Опубликовано: 27.02.2013Ответить на сообщение
Интересно и вроде смотрится хорошо,но сомневаюсь,что это нужно делать для сайта из-за поисковиков. Как они к таким вещам относятся?
Виталий
Опубликовано: 27.02.2013Ответить на сообщение
в статье рассказано о нескольких вещах. Не совсем понятно что вы подразумеваете, однако могу сказать: поисковики на это смотрят нормально и не банят (что бы вы не подразумевали).
Александр
Опубликовано: 14.03.2013Ответить на сообщение
Спасибо Виталий! Классная штука. Сделал, здорово, только не так плавно, как у вас. Буду ждать вашу статью про фильтры. Еще раз спасибо!
Александр Крылов
Опубликовано: 28.07.2013Ответить на сообщение
анкор
Ну а вот тут после padding должно быть двоеточие. Опять же - у меня без него отступов нет.
Виталий
Опубликовано: 29.07.2013Ответить на сообщение
да. сори. двоеточие забыл.
Александр Крылов
Опубликовано: 28.07.2013Ответить на сообщение
Блин. Почему то ссылки в коде обрабатываются и получается усечённый вариант. В общем, вот в этом свойстве: padding 3px;