1 Веб-мастеру 3

Как превратить ссылку в текст? Супер быстрый способ

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

Зачем это вообще нужно?

В своих статьях я часто ссылаюсь на другие ресурсы. Это полезно, но если бы все это были открытые внешние ссылки, то с точки зрения оптимизации текста это не совсем лучшее решение. Поисковики будут видеть, что это внешние ссылки и вес со статьи будет уходить на другие ресурсы. Можно закрывать все ссылки с помощью атрибута rel = nofollow. Но даже в таком случае вес все равно будет передаваться.

Как превратить ссылку в текст — простой рабочий скрипт

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

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

Итак, чтобы скрипт работал, вам нужно подключить к своему сайту библиотеку jquery, если она еще не подключении. О ее подключении вы можете прочитать в этой статье. Далее я советую вам создать отдельный файл с расширением .js, в него мы и вставим небольшой код, который позволит создавать наши искусственные ссылки. Я предлагаю назвать его link.js, просто чтобы было интуитивно понятно, для чего предназначен файл.

Сам код, который нужно вставить в файл, выглядит так:

$(document).ready(function(){
$(‘.hidden-link’).click(function(){window.open($(this).data(‘link’));return false;});
});

Все, вот такой вот короткий скрипт. Чтобы все заработало, необходимо еще подключить файл к html-документу. Для этого перед закрывающим тегом нужно указать в тегах script путь к файлу. В моем случае он выглядит так:

<script src="js/link.js"></script>

Из расчета на то, что файл со скриптом лежит в папке js.

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

Проделав все вышеописанные манипуляции остается только вставить в том месте, где должна быть скрытая ссылка, вот такой код:

<span class="hidden-link" data-link="http://адрес-сайта/">анкор</span>

Отлично, вот так вот вы можете быстро внедрить скрытые ссылки на свой сайт. При наведении на них не будет видно url-адреса. Да и вообще нельзя будет отличить такие ссылки от обычного текста, но при этом при клике будет происходить переход по адресу, указанному в атрибуте data-link. Этот атрибут заменяет собой атрибут href у настоящей ссылки.

Чтобы наши псевдоссылки ничем не отличались от настоящих, необходимо задать им такие же стили. Для этого в css обратитесь к ним по классу hidden-link и пропишите нужные стилевые правила. Если же вы не разбираетесь в css, всегда можно научиться. Рекомендую обратить внимание на эту статью.

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Полезное вебмастеру

Бесплатный курс по HTML

Премиум уроки по созданию сайта

Полный SEO-курс. Новинка 2016!

  • Игорь Черноморец

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

    2016-06-05 в 7:10 | Ответить
    • Михаил

      Привет. Да можно и плагином, тем более что их немало для таких целей есть. Но в любом случае полезно иметь альтернативу. Например, у меня 1 лендинг не на wordpress, а просто html, там как раз применил этот вариант.

      А многие просто не любят плагины. К тому же присоединять нужно jquery. Мне кажется, она и без этого уже у всех присоединена, она даже в самом wordpress есть по умолчанию по-моему.

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

      2016-06-05 в 7:54 | Ответить
      • Игорь Черноморец

        Михаил, ты абсолютно прав!!! Я не подумал о том, что не все сайты на свете сделаны на WordPress dash А кроме того, ведь и правда, не все любят плагины, а многие даже предпочитают ковыряться в кодах ради собственного обучения и интереса!
        Короче Михаил, я забираю свои слова обратно. Т супер и твоя статья ещё больше супер good

        2016-06-05 в 8:25 | Ответить