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

Итак, помните тот действительно исчерпывающий глоссарий отраслевых терминов, которые должна знать ваша аудитория? Теперь, когда вы ссылаетесь на что-то, что вы сказали в другом месте этой статьи, вы можете на самом деле ссылаться на это, что значительно упрощает вашей аудитории понимание того, о чем, черт возьми, вы говорите. Хочешь увидеть, что я имею в виду? Только кликните сюда.

Довольно круто, правда? Лучше всего то, что это очень легко сделать самостоятельно, даже если у вас нет обширных знаний HTML. Если язык HTML кажется запутанным, просто следуйте приведенным ниже примерам из реальной жизни.

Примечание. Если вы являетесь клиентом HubSpot, следуйте этим инструкциям.

Что такое гиперссылка HTML?

Гиперссылка — это интерактивная ссылка, которую можно прикрепить к любому элементу HTML на веб-странице, например к изображению или тексту. Эти ссылки можно использовать для направления пользователей на другие страницы вашего веб-сайта, внешние веб-сайты или даже определенные разделы веб-сайта.

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

Что такое якорная ссылка HTML?

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

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

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

1. Назовите объект или текст, на который вы хотите сослаться.

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

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

Пример

Допустим, мы хотели сослаться на пример компании, использующей рекламу Facebook в публикации. Вот что я бы использовал в качестве имени объекта:

facebook_ads_example

Теперь к следующему шагу.

2. Возьмите выбранное вами имя и вставьте его в код открытия ссылки привязки HTML.

Другими словами, замените красную часть тега ниже именем, которое вы выбрали на предыдущем шаге:

ВСТАВЬТЕ_ВАШ_ОБЪЕКТ_ИМЯ_ЗДЕСЬ«>

  
<a id="https://blog.hubspot.com/marketing/facebook_ads_example">
 

3. Поместите полный инициал -тег сверху перед текстом или объектом, на который вы хотите сослаться, и добавьте закрывающий — настигнуть.

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

Объект, на который вы хотите сослаться.

Пример

 
<a id="facebook_ads_example">This is the Facebook ad example I want to link to.</a>

4. Создайте гиперссылку, которая приведет вас к этому тексту или объекту.

Теперь перейдите к той части сообщения, в которую вы хотите добавить гиперссылку. Вам нужно добавить типичный атрибут href, который указывает место назначения гиперссылки. Однако в той части, где вы обычно включаете URL-адрес, вы должны включить знак решетки (#), а затем имя объекта, на который вы ссылаетесь. Вот как это выглядит:

<ссылка=»https://blog.hubspot.com/marketing/#INSERT_YOUR_OBJECT_NAME_HERE«>Нажмите здесь, чтобы просмотреть содержимое ниже.а>

Пример

 
<a rel="noopener" target="_blank" href="https://blog.hubspot.com/marketing/#facebook_ads_example">Click here to see an example of how a company uses Facebook ads.</a>

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

Зачем создавать якорные ссылки для перехода к определенной части страницы?

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

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

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

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

Легко создавайте якорные ссылки

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

(Здравствуйте, любопытствующие из введения! кликните сюда чтобы вернуться к тому месту, где вы остановились.)

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