4.1 5 на основании 13 оценок и 7 отзывов

Сокрытие ссылок

Зачем прятать ссылки от ПС и стоит ли это делать, вопрос очень большой и возможно мы его разберём несколько позже. Однако стоит обратить внимание мы не рассматриваем варианты клоакинга и обмана.

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

Самый простой вариант, когда нет возможности вносить серьёзные изменения в структуру сайта
Использование другого тега вместо тега <a> в исходном коде документа отдаваемого вашим сервером. В процессе формирования страницы в браузере пользователя выбранный нами тег автоматически, с помощью JS скрипта преобразуется в тег <a>. Стоит отметить что при всей простоте данного метода, он достаточно эффективен на «коротком» временном отрезке

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

Самый простой способ сокрытия ссылки

Имеем обычный html код

<a href="http://www.unmedia.ru">Главная</a>

Если данная ссылка нам в коде не нужна, но мы желаем оставить её для пользователя, то заменим тег <a> на другой тег например <i>, вместо атрибута href будем использовать атрибут title

<i title="www.unmedia.ru">Главная</i>

При таком варианте индексирующий робот ПС увидит только текст. Теперь нам необходимо сделать из тега <i> тег <a>, используем для этого JS:

jQuery(document).ready(function(){
$("i[title]").each(function(){
$(this).replaceWith("<a href='http://" + $(this).attr("title") + "'>" +$(this).html() + "</a>");
});
$("a[href^=http]").not("a[href*=unmedia.ru]").attr("target", "_blank");
});

Что здесь происходит?
В момент окончании загрузки DOM браузером клиента, отбираются все теги <i> с явно указанным атрибутом title (подобных элементов может быть несколько), и по очереди обрабатываются, заменяя текущий элемент <i> элементом <a>, в качестве значения атрибута href используется значение атрибута title текущего элемента, в качестве анкора – текстовое содержание текущего элемента <i>.

Далее в DOM отбираются все элементы <a> у которых значение атрибута href начинается с http, из набора исключаются все элементы у которых в значении атрибута href присутствует значение unmedia.ru, а к оставшимся добавляется атрибут target со значением равным _blank (открытие в новом окне).

Примечание: в DOM браузера эта конструкция преобразуется в ссылки и событие click происходит уже по элементу <a>, что достаточно легко понимают счетчики, бары и тем более браузеры. Ещё одним нежелательным моментом можно указать наличие лишних преобразований в момент формирования страницы.

Более сложный способ спрятать ссылки

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

$('i[title]').live('click', function() {
document.location.replace('http://'+$(this).attr("title"));
});

css необходимо добавить необходимое форматирование

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

карта ссылок страницы карта ссылок страницы карта кликов страницы карта кликов страницы карта скроллинга страницы карта скроллинга страницы

Примечание: в данном варианте событие click происходит не на элементе <a> и в карте ссылок оно не попадает, точнее попадает, но только в том случае если на текущей странице есть настоящая ссылка с данным url.

Но в данных способах есть один существенный недостаток – наличие url акцептора в html коде документа (содержимое атрибута title). ПС уже достаточно давно научились «понимать» наличие URL в документе, даже если он указан в текстовом виде, кстати, даже браузеры при выделении текста содержащего URL предлагают открыть его.

реакция браузера та текстовый URL

Попробуем обойти и этот недостаток. Чуть-чуть изменим html код:

<span class='loc reklama-internete'>самая классная реклама в интернете</span>

Обработчик для такой ссылки может выглядеть, например, так:

$('.loc').live('click', function() {
document.location.replace($(this).attr("class").replace("loc ", "") + ".html");
});

т.е. по событию click на элементе с классом loc происходит получение значение атрибута class (строковое значение) 'loc reklama-internete', далее из полученного значения удаляется 'loc ', а к оставшемуся добавляется расширение .html (если необходимо) и происходит рефреш страницы с новым url, сформированным из class элемента.

Примечания: данный способ используется и на нашем сайте с небольшими изменениями

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

Сокрытие ссылок с помощью AJAX

Есть возможность обойти и этот недостаток – использовать технологию ajax
Используем похожий html код:

<span class='web rtrr'>самая классная реклама в интернете</span>

По событию click нам, например, необходимо показать страницу
www.amirostudio.ru/raboty/products/premium/delovoj-centr-muravej
Для этого нам понадобится по мимо JS файла еще два файла на стороне сервера. dataurl.php, который будет обрабатывать ajax запрос на стороне сервера и data.csv, в котором будут храниться пары ключ-значение (url нужной страницы)

$('.web').live('click', function() {
uss=$(this).attr("class").replace("web ", "");
$.ajax({
type: "POST",
url: 'dataurl.php',
data: {key:uss},
dataType : "text",
success: function (data, textStatus) {
document.location.replace(data);
}
});
});

По событию click на элементе с классом web, происходит извлечение значения атрибута class текущего элемента, выделение из него ключа, в данном случае rtrr и отправка его на сервер обработчику dataurl.php. Он должен нам вернуть новый URL, по которому и произойдёт рефреш страницы.
Файл dataurl.php

<?php
if (isset($_POST['key']) and $_POST['key']) {
if (($fp = fopen('data.csv', "r")) !== FALSE) {
while (($data = fgetcsv($fp, 1000, ",")) !== FALSE) {
if ($data[0] == $_POST['key']) {echo $data[1]; break;};
}
fclose($fp);
}
}
?>

Обработчик обращается к файлу csv, в котором будет найден нужный url по переданному ключу rtrr
И файл data.csv

rtrr,http://www.amirostudio.ru/raboty/products/premium/delovoj-centr-muravej

Примечание: метод document.location.replace имеет один недостаток – невозможность открыть новый url в новом окне(вкладке) браузера, это происходит из-за настроек безопасности самих браузеров, т.к. происходит попытка программно открыть новое окно без нажатия на ссылку, а это расценивается как потенциальная угроза. При использовании для внутренних ссылок это не страшно, а вот с внешними нужно быть очень аккуратными, дабы не потерять пользователя.

Примечание: на странице нашего сайта есть такая ссылка

Bнутренняя оптимизация сайта
позволит ему быстрее и эффективнее выбиться в верхние результаты поиска
Разработка сайта
лишь пол дела в успехе фирмы