Как правильно писать ссылку на сайт: Ваш браузер не поддерживается

Как ставить ссылки

Вчера я рассказал, что писать «здесь» в ссылке — это отстой. Теперь подробнее о гигиене ссылок и привлечении внимания.

Информативно

Текст, который стоит под ссылкой, должен сообщать, куда ведет гиперссылка. Текст не должен терять смысл при распечатке, если УРЛ сломался или по ссылке открылась ошибка. Поэтому под ссылкой нельзя писать «здесь» и «тут», «документ» и «файл», «ссылка» и «сайт», а еще нельзя просто вставить ссылку в сплошной текст без пояснений:

Нет	Да
Мои недавние статьи: maximilyahov.ru/blog/?go=all/approve/, maximilyahov.ru/blog/?go=all/spizdili/	Мои лучшие октябрьские статьи: Согласовать — ваша работа Почему всех так бесит логотип Канделаки
Чтобы продолжить, скачайте пакет	Чтобы установить «Офис», скачайте программу-установщик для Мака (ДМГ, 1,7 ГБ)
Проверьте налоги на сайте	Проверьте налоги на сайте Федеральной налоговой службы
В чем смысл пенсионной реформы, мы объясняем здесь	Смысл пенсионной реформы — в злобной статье Саши Волковой
Подробности — по ссылке	Как снять номер с бесконтактной карты — в руководстве на «Инструктабле»
Мои работы вы можете посмотреть тут	Мои работы — в портфолио на Бехансе
На прошлой неделе «Найк» опубликовал рекламный ролик с главной героиней — девочкой	На прошлой неделе «Найк» опубликовал рекламный ролик с главной героиней — девочкой

Связно

Хорошая ссылка — это законченная фраза. Это значит, что предлоги и необходимые подчиненные слова попадают под ссылку:

Привлекательно

Давайте читателю повод перейти по ссылке. Пообещайте что-нибудь интересное или полезное:

Нет	Да
Совет о работе с клиентом	Как брать больше денег за текст
	Как брать больше денег за текст. О переговорах, прогибании и профессиональном росте
	Совет, который промывает мозги: как брать больше денег за текст
Совет о штампах	Совет о штампах, в котором все женщины хотели Карлоса
Как навести структуру	Как навести структуру. Совет со скелетом и лопатой

Смешивая комки

Старайтесь ставить ссылку не в середину текста, а в начале или в конце, чтобы не было эффекта Википедии. Если ссылок нужно много, продублируйте их в блоке «См.

также»:

Нет	Да
Летом я написал статью о профессиональном росте редакторов: какие бывают этапы, к чему стремиться и какие перспективы	В статье о профессиональном росте редакторов я рассказал, какие бывают этапы карьеры и к чему стремиться
	Об уровнях профессионализма, целях и перспективах я рассказал в статье о профессиональном росте редакторов
Работаю по ФФФ, составляю понимание задачи, заключаю договор, готов встретиться в Коворкафе.	Фиксирую сроки проекта и сдаю работу вовремя. Перед началом проекта предлагаю встретиться и подробно обсудить задачу. Работаю и встречаюсь на «Флаконе»: Большая Новодмитровская, 36
	См. также: Принцип несдвигаемых сроков Вопросы перед стартом Типовой договор

Полезно

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

Нет	Да
Если хотите посоветовать друзьям нашу рассылку, отправьте им эту ссылку	Если хотите посоветовать друзьям нашу рассылку, отправьте им ссылку на первый урок: maximilyahov.ru/hello/
Если хотите посоветовать друзьям нашу рассылку, отправьте им ссылку на первый урок

В неформатированном тексте

Если вам пришлось верстать неформатированный текст и вы не можете поставить часть текста под ссылку, придётся приводить ссылку целиком. Но это нестрашно. Запомните правила:

1. Перед полным текстом ссылки объясните, что там и зачем это кликать.
2. Короткую ссылку ставьте в конец абзаца.
3. Длинную ссылку — в отдельный абзац.

Пример в неформатированном тексте:

Подробнее о вёрстке неформатированного текста в статье Ильи Бирмана: http://ilyabirman. ru/meanwhile/all/plain-text-layout/

Подтвердите, что это [email protected] — ваш адрес:

http://example.com/u/confirm/30913r01735601/375601873rt018gf8y3rtgf

См. также: Горбунов о ссылках в верстке, Лебедев о гипертексте, совет о ссылках по Госту,
Хацкевич толково об эл. адресах, я критикую ссылки в «Медузе»
Как не ставить ссылки

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

Красиво оформленные ссылки привлекают внимание посетителей и побуждают к действию.

Оформление ссылок и юзабилити

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

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

Лучший цвет для выделения – синий (голубой), он наиболее привычен для пользователей. Пример правильного выделения ссылок:

А вот слишком яркие цвета будут только отвлекать от основной информации и испортят внешний вид текста в целом:

Выделять стоит все ссылки, кроме ссылок меню, по ним и так понятно, что они кликабельны. Как видите, подчеркивание здесь лишнее:

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

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

Пример использования похожих цветов:

И ещё 6 дополнительных советов:

1. Используйте для ссылок тот же размер шрифта, что и для основного текста, чтобы текст легче воспринимался.
2. Не стоит добавлять для ссылок дополнительные эффекты при наведении курсора – их не видно с мобильных устройств.
3. Не размещайте ссылки слишком близко друг к другу, используйте отступы и знаки препинания между ними. Или переформулируйте основной текст.
4. Не добавляйте в текст слишком много ссылок. Такой текст сложнее читать, к тому же есть риск попасть под фильтры поисковых систем.
5. Ссылки на сторонние ресурсы открывайте в новой вкладке, чтобы не уводить посетителей с сайта.
6. Не выделяйте некликабельный текст синим цветом или подчеркиванием, чтобы не дезориентировать пользователей.

Правильно с точки зрения юзабилити оформить ссылки – мало, надо еще уметь использовать их к месту. Для продвижения сайта важны как внутренние ссылки (между страницами сайта), так и внешние (со сторонних источников). Сначала поговорим о ссылках внутри сайта.

Внутренняя перелинковка

Говоря о внутренней перелинковке, хочется заметить, что многие не уделяют ей нужного внимания.

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

Еще к автоматической перелинковке можно отнести хлебные крошки:

И карту сайта. Например, у нас на сайте она находится в подвале:

От правильной перелинковки во многом зависит скорость индексации ресурса и его продвижение в целом.

Подробнее о схемах перелинковки и способах реализации мы писали тут.

Внешние ссылки

Внешние ссылки (ссылки на сторонние источники) являются не только удобным способом порекомендовать или поделиться какой-либо страницей в Интернете, но также остаются одним из важнейших аспектов seo-продвижения.

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

А вот ставить ссылки со своего ресурса на сторонние не спешат: во-первых, боятся передать лишний «вес» (чтобы понять, как это все работает, прочитайте статью про тИЦ), во-вторых, за чрезмерное количество ссылок на другие сайты можно нарваться на санкции поисковиков.

Поэтому, прежде чем ставить ссылку на какой-то сайт, определитесь, для чего это делаете.

Если ради заработка на бирже – почитайте про АГС и подумайте два раза, а надо ли; если ссылка рекламная – закройте ее от индексации, так будет безопаснее всего. Если просто хотите поделиться годным контентом – то ОК, ссылка будет естественной, и вроде как бояться нечего.

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

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

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

Виды ссылок: с анкором и без

Все популярнее становится вариант размещения так называемых безанкорных ссылок. А безанкорные они не потому что в них нет текста (анкора), а потому что нет вхождения ключевой фразы.

В ссылках такого типа в качестве анкора чаще всего используются:

• конкретный url страницы;
• название компании, бренда;
• указательные слова: там, здесь, тут, по ссылке.

Если добавляете такой вид ссылок, учтите, что самым важным является околоссылочный текст, так как именно на него будут обращать внимание Яндекс и Google, пытаясь понять, на какую тематику данная ссылка и что конкретно она рекомендует.

«В прошлом году купил тут отличный велосипед»

«Бесплатную запись курса вы можете скачать по ссылке»

В обоих случаях наш анкор не объясняет, что же за страница откроется после перехода. Именно поэтому так важен текст около самой ссылки.

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

«В нашем городе есть магазин с хорошими велосипедами»

«Запчасти для ноутбуков с доставкой по всему городу в компании Ноутбукич»

При оформлении таких ссылок не стоит забывать о морфологии и грамматике, варианты вроде «Заказать пластиковые окна Сочи» совершенно неприемлемы – это спам.

Идеальные анкорные ссылки должны обладать одним важным качеством – выглядеть естественно. То есть не надо их вставлять только ради ссылки – на своем сайте (перелинковка ради перелинковки) или на стороннем (ради наращивания ссылочной массы и продвижения в ТОП), ссылки добавляем только если они несут пользу для посетителей сайта.

Что делать, если ссылку поставить надо, а пользы она не несет? Такие ссылки закрываем от индексации.

Закрытие внешних ссылок от индексации

Давайте уточним, какие же ссылки стоит закрывать:

• на сайты других тематик;
• из комментариев/в отзывах, так как не всегда есть возможность контролировать их;
• платные;
• на сайты с ненадежным контентом (которому вы не доверяете).

Если все-таки необходимо закрыть какой-то участок сайта или ссылку, на выбор 2 инструмента.

Для скрытия текстовой информации от индексации в Яндексе используется тег <noindex>

<noindex>Наш текст <a href=»url»>Анкор</a></noindex>

При этом специалисты Яндекса отмечают, что закрывать этим тегом счетчики на сайтах не обязательно, как правило, счётчики работают с помощью JavaScript-ов, содержание которых не будет использоваться роботом при определении релевантности страницы. Подробнее о теге в справке.

Для закрытия же ссылок не забываем про атрибут rel=»nofollow» внутри самой ссылки.

<a href=»http://yandex.ru» rel=»nofollow»>Хороший сайт</a>

Атрибут запрещает роботам поисковых систем переходить по ссылке, однако есть и исключение. Как указано в справке Google:

Как правило, переход не производится. Это означает, что по этим ссылкам Google не передает ни PageRank, ни текст ссылки. Благодаря nofollow ссылки не попадают в нашу «схему» Сети. Однако соответствующие целевые страницы все равно могут быть включены в индекс Google, если другие сайты ссылаются на них без использования nofollow или если их URL предоставлены Google с помощью файла Sitemap.

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

Хотелось бы упомянуть про различные баннеры и ссылки в подвале сайта, например, на разработчиков. Их просто закрываем через nofollow и забываем.

Выводы

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

А если у вас остались вопросы или есть какие-то проблемы на сайте – пишите в комментариях. Или закажите у наших специалистов аудит ссылочного профиля – мы изучим детально ссылочную массу вашего сайта и дадим рекомендации по дальнейшей работе с ней.

Написание полезного и доступного текста ссылок для веб-сайтов

Гипертекстовые ссылки (обычно называемые просто «ссылками») являются одним из основных элементов языка гипертекстовой разметки (HTML). Обеспечение доступности гипертекстовых ссылок является фундаментальным аспектом веб-доступности.

Хорошо написанный текст ссылки играет важную роль, помогая пользователям перемещаться по вашему контенту и выполнять задачи. Если ссылки понятны и доступны, это помогает укрепить доверие между вами и вашими пользователями и дает им уверенность в вашем контенте. Все редакторы, работающие над веб-сайтом Университета Данди, должны следовать этому руководству.

Что такое ссылка?

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

Навигация

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

Посетитель с инвалидностью или инвалидностью будет в значительной степени полагаться на навигацию, которую легко обнаружить, понять и использовать.

Хлебные крошки

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

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

Ссылки для пропуска

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

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

Ссылка «Перейти к навигации» направит посетителей прямо к навигации, минуя любой брендинг или другой контент, который находится перед навигацией на странице. Это может помочь людям, которые используют только клавиатуру или вспомогательное устройство, найти нужную страницу в вашей навигации.

Как люди используют ссылки?

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

Навигация с помощью клавиатуры (вкладки)

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

В прошлом разработчики веб-сайтов определяли клавиши доступа для ссылок, чтобы посетители могли использовать сочетание клавиш, чтобы сосредоточиться на отдельной ссылке. Например, разработчик может использовать Alt + H в качестве клавиши доступа к ссылке «Главная» в своей навигации. Однако сейчас такой подход считается плохой практикой. Посетители часто будут иметь свои собственные предопределенные ярлыки и не будут ожидать, что веб-сайт запрограммирует для них пользовательские ярлыки. Это также создает дополнительные требования для вас, чтобы предоставить объяснение ваших ключей доступа.

Программа чтения с экрана

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

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

Пользователи средств чтения с экрана обычно пропускают содержимое от одного интерактивного элемента (ссылки и кнопки) к другому или пропускают содержимое с помощью заголовков и ссылок.

Большинство программ чтения с экрана перед каждой ссылкой пишут «ссылка». Так, например, ссылка «темы исследования» будет прочитана программой чтения с экрана JAWS для Windows как «тема исследования ссылки».

Нажатие

Большинство наших посетителей сейчас используют мобильные устройства. Они нажимают пальцем на ссылку, чтобы взаимодействовать с ней и попадают на целевую страницу.

Ссылки должны быть достаточно четкими, чтобы их можно было увидеть на небольших мобильных экранах, особенно когда посетители находятся на улице под прямыми солнечными лучами, что может отрицательно сказаться на их опыте. Ссылки также должны выделяться среди другого контента.

Слишком короткие ссылки труднее обнаружить при сканировании страницы, особенно на небольших экранах. Точно так же слишком длинные ссылки требуют больше времени для прочтения и понимания; они могут охватывать две или три строки на мобильных устройствах, что не идеально.

Пишите полезные ссылки | Цифровая доступность​

ГЛАВНАЯ / РОЛИ / СОЗДАТЕЛИ КОНТЕНТА / ЯЗЫК /

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

• Поместите ключевые слова в начало ссылочной фразы. Ссылки, начинающиеся с ключевых слов, легче сканировать, поскольку важные слова появляются в самом начале фразы ссылки. Для людей, контент которых читается программным обеспечением вслух, уникальные и описательные ссылки с ключевыми словами в начале фразы позволяют легко найти четкий путь к информации, которую они ищут. При отсутствии эффективных ссылок пользователям, возможно, придется переходить по ссылкам, чтобы определить место назначения.
• Используйте подчеркивание, особенно для встроенных ссылок. Обычно ссылки окрашиваются и подчеркиваются, чтобы их можно было легко отличить от другого текста. Подчеркивания полезны для людей с нарушениями цветового восприятия, которые могут вызвать трудности с определением ссылок, которые идентифицируются только по цвету (см. Создание визуальной и семантической структуры).

Тестирование

• Используйте клавиатуру для перемещения по всем ссылкам на странице и изучения текста ссылки. Текст ссылки имеет смысл вне контекста? Могут ли ссылки быть идентифицированы как ссылки для людей, которые не могут различать цвета?
• Используйте инструмент списка ссылок , чтобы перечислять ссылки отдельно от страницы. Просмотрите ссылки, чтобы убедиться, что они говорят сами за себя.

Ресурсы

• Понимание SC 2.4.4 — Назначение ссылки (в контексте) (WAI)
• Понимание WCAG SC 1.4.1 — Использование цвета (WAI)

Текст ссылки — это текст, который вы выбираете для ссылки, описывающий, что происходит, когда пользователь активирует ее. Поэтому он должен четко и точно передать цель ссылки. Обычно текст ссылки представляет собой имя связанной страницы или документа. Когда ссылка ведет на документ, не являющийся веб-страницей, например на документ PDF или Word, это следует пояснить в тексте ссылки. Избегайте слишком краткого, двусмысленного текста ссылки и избегайте повторного использования одного и того же текста ссылки на странице для ссылок, ведущих к разным местам назначения.

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

Пример 1

✗ Плохой пример

Думаю, вам стоит прочитать эту статью о тексте ссылок.

Эта ссылка имеет текст, который не указывает на ее назначение при чтении вне контекста: программа чтения с экрана просто объявит «ссылка: это». Средства чтения с экрана также предоставляют диалоговые окна со списком всех ссылок на странице. Если бы «это» было одной из перечисленных ссылок, было бы невозможно сказать, куда она может вас привести.

✓ Хороший пример

Я думаю, вам стоит прочитать эту статью о тексте ссылок.

После корректировки текста ссылки, когда ссылка находится в фокусе, средства чтения с экрана объявят «ссылка: статья о тексте ссылки». Этот текст ссылки успешен, потому что его значение не зависит от окружающего текста.

Пример 2

✗ Плохой пример

• Напишите описательный текст ссылки! (подробнее)
• Подчеркните активные ссылки! (подробнее)
• Используйте хороший цветовой контраст для цветных ссылок! (подробнее)

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

✓ Хороший пример

Мы можем улучшить этот пример для доступности для чтения с экрана и одновременно сделать его менее сложным, сделав его простым списком ссылок:

• Напишите описательный текст ссылки!
• Подчеркните активные ссылки!
• Используйте хороший цветовой контраст для цветных ссылок!

См.

No related posts.