В один из рабочих дней мне пришел список заданий. Отдельным пунктом была просьба найти способ надежного сокрытия внешних ссылок на сайте от поисковых систем.
В чем суть проблемы? Существует несколько способов спрятать ссылку от поисковых роботов, но у них имеются свои особенности:
javascript позволяет закрыть ссылку от индексации, но сам google уже спокойно понимает такие скрипты;
можно добавить к ссылке атрибут nofollow – это просто, но ссылочный вес самой ссылки будет теряться и при периодическом переиндексировании снизится общий вес сайта;
cамый странный метод сокрытия ссылок — это закрытие конкретных страниц от индексации при помощи мета тегов или в файле robots.txt, но происходит полная потеря ссылочного веса передаваемого странице.
Зная эти нюансы, специалист по СЕО исключил все три способа сокрытия ссылок и предложил мне попытаться найти новое решение. И оно было найдено: что, если засунуть ссылку в некий стандартный функционал на сайте, который поисковый робот всегда игнорирует?
Возьмем обычную форму с методом отправки post:
<form method="post">
<button class="my">
Образец экспериментальной ссылки
</button>
</form>При помощи класса my можно стиль формы сделать оптимальным для дизайна вашего сайта, например:
<style>
.my{
border:none;
background: none;
text-decoration: underline;
color: blue;
cursor: pointer;
color:#00bceb
}
.form{
width: 300px;
margin: 50px auto;
}
</style>Как же добавить в форму нужную ссылку? Тут я вспомнил про javascript, теперь наша форма выглядит так:
<form method="post">
<button class="my" onclick="window.open('https://librebook.me/the_mysterious_island');">
Образец экспериментальной ссылки
</button>
</form>Как только пользователь кликнет по кнопке формы, замаскированной под ссылку, сработает форма с методом post, команда onclick выполнится и откроется новая вкладка по требуемому адресу. Задача условно решена. Однако, если таких ссылок много на странице, для каждой писать форму?
Воспользуемся PHP. Пусть у нас имеется массив ссылок, например:
$mass = [
'Таинственный остров' => 'https://www.litmir.me/bd/?b=265607',
'Три дня Индиго' => 'https://www.litres.ru/sergey-lukyanenko/tri-dnya-indigo/',
'Зеленая Миля' => 'https://librebook.me/the_green_mile',
'Герой должен быть один' => 'https://librebook.me/geroi_doljen_byt_odin',
'Затерянный мир' => 'https://librebook.me/zateriannyi_mir_doil_artur_ignatius_konan',
];Добавим простейшим способом все формы на страницу:
foreach($mass as $k => $v) {
echo '<br><form method="post"><button class="my" onclick="window.open(\''. $v .'\');">'. $k .'</button></form>';
}Здесь нужно очень внимательно следить за расстановкой одинарных и двойных кавычек, чтобы не было ошибки.
Для одной страницы задача решена, а если страниц много? Проще всего создать функцию и ее вызывать с нужными параметрами:
function s_link(string $name, string $link) {
$res = '<br><form method="post"><button class="my" onclick="window.open(\''. $link .'\');">'. $name .'</button></form>';
return $res;
}
$res = s_link('Yandex','https://ya.ru');
echo $res;Если js в данном примере не нравится, то можно обойтись без него:
<form method="post" action="https://www.litmir.me/bd/?b=265607" target="_blank">
<button class="my">
Таинственный остров
</button>
</form>Тогда функция будет выглядеть так:
function m_link(string $name, string $link) {
$res = '<br><form method="post" action="'.$link.'" target="_blank"><button class="my">'.$name.'</button></form>';
return $res;
}
$res = m_link('Books','https://www.labirint.ru/books/');
echo $res; Если заместо названия ссылки хочется поместить картинку, то html код:
<form action="https://google.ru" target="_blank">
<button class="my">
<img src="123.jpg" alt="">
</button>
</form>
Чтобы еще больше упростить жизнь, если подобных ссылок очень много, можно сделать выборку всех статей из базы данных в тех разделах сайта, где требуется сделать замену ссылки на форму. Затем посмотреть вхождение конкретной ссылки в статью и поставить на нее место форму отправки данных. В этом случае придется учитывать особенности «движка» вашего сайта, количество статей и ссылок. Например, обработку данных лучше делать поэтапно: берем сто статей, производим необходимую работу, следующий массив из ста статей. Подобные скрипты запускаются обычно вечером, когда с контентом сайта никто не работает.
Теперь посмотрим, как браузер реагирует на простую ссылку: видим появление сообщения в левом нижнем углу с адресом ссылки.
После помещения ссылки в форму, браузер ее уже не замечает.
Есть небольшой недостаток внешнего вида "ссылки" у данного способа: сам тег <form> является блочным, то есть занимает всю строку. Если попытаться вставить подобные элементы в предложение, то все формы уходят на новую строку и текст становится с разрывами. Это явление лучше учитывать: я добавлял в стили "display: contents" и разрывов уже не было.
Уважаемые читатели! Какими методами сокрытия ссылок веб-страниц вы пользуетесь?
Комментарии (54)
haldagan
21.05.2022 14:03+1Я про пауков мало знаю, поэтому возникли вопросы:
который поисковый робот всегда игнорирует?
Если всегда игнорирует - зачем извращения с javascript? И какова причина этого игнорирования?
сам google уже спокойно понимает такие скрипты;
Так если гугл спокойно эмулирует js, то почему он проигнорирует "window.open"?
window.open
Ну такое себе. Может откроется, а может "popup has been blocked".
браузер ее уже не замечает
И о чем это говорит? Если, например, засунуть эту ссылку в action формы или кнопки, то поведение, вроде, таким же будет.
сам тег <form> является блочным, то есть занимает всю строку
"display:inline"? Вот на этом моменте возникает вопрос: а написанное до этого вообще хоть какую-то ценность имеет?
coder_one Автор
21.05.2022 15:511.) "Если всегда игнорирует - зачем извращения с javascript?
СЕОшник сказал, что это сработало.
2.)JS находится внутри формы
3.)Всякое может быть, я обычно рассчитываю на большинство пользователей. Некоторые ребята вообще запрещают исполнение js браузером, теперь без фронтенда обходиться?
4.)Просто наглядный пример.
5.)"display:inline" пробывал и ни на одном сайте, где я применял формы он не сработал. Причину не выяснял. Помогает display: contents. В этом месте указал лишь особенность, а не невозможность решить проблему.
sanchezzzhak
22.05.2022 20:52Скорее всего гугл не кликает по кнопкам, так-как этот функционал может быть отправкой комментария или вызов Ктулху по телефону.
dimuska139
21.05.2022 14:06+6Я люблю ссылки открывать в новой вкладке с помощью нажатия на колёсико мыши. В данном случае это будет работать?
GenkaOk
21.05.2022 14:49+6Нет. Как и не будет работать "Скопировать ссылку"
Ужасное решение, всякий раз сталкиваясь с такими "оптимизаторами" мучаюсь копируя ссылки.
В чём проблема использовать
<noindex></noindex>coder_one Автор
21.05.2022 15:24-3В начале статьи я описал в чем проблема использования noindex и nofollow. Поэтому пришлось придумывать решения задачи.
coder_one Автор
21.05.2022 15:25-2При клике автоматически ссылка будет в новой вкладке. Я это предусмотрел, чтобы посетитель не уходил с сайта: посмотрел что ему интересно, закрыл новое окно и попал снова на сайт.
dimuska139
21.05.2022 15:41+8Я в день лазаю по десяткам сайтов. Где-то клик (левой кнопкой мыши) по ссылке открывает страницу в новой вкладке, а где-то нет - поэтому я всегда нажимаю на ссылку колёсиком. И, нет, я не один такой. А тут получается, что при нажатии колёсиком на ссылку на вашем сайте, не произойдёт вообще ничего. По-моему, это не очень, потому что подобные SEO-вопросы не должны влиять на удобство пользования сайтом.
coder_one Автор
21.05.2022 15:55-5Иногда приходится жертвовать удобством ради достижения цели. С хорошим СЕО больше бесплатного трафика получается.
dimuska139
21.05.2022 18:01+4Такое ощущение, будто б вы мне сейчас из 2007-го года написали. Посмотрите топ выдачи по разным запросам и то, насколько сайты из топа не следуют "правилам СЕО" в большинстве своём. Решает, основном, нормальная работа сайта на мобильных устройствах, скорость загрузки страниц и поведенческие факторы. Всё остальное - мелочи, влияние которых ничтожно.
coder_one Автор
21.05.2022 18:13-2Я не специалист по СЕО, но ребята, с которыми я работаю стараются учесть все моменты, чтобы получить максимальный результат.
dimasmagadan
23.05.2022 11:50интересно, как эти самые ребята учитывают требования поисковиков по accessibility?
Fuyusion
23.05.2022 11:55В данном случае, неудобство сайта ведёт к уменьшению количества юзеров, это куда более весомый аргумент для ранжирования
sden77
21.05.2022 18:31Интересно, есть ли хоть какое-то объективное исследование о наличии смысла в таких ссылках? А то слышу эти рассказы про связь количества исходящих ссылок и положении сайта в выдаче уже лет 15. Такое ощущение, что это уже из разряда городских легенд.
drdead
21.05.2022 20:10+6А тут получается, что при нажатии колёсиком на ссылку на вашем сайте, не произойдёт вообще ничего.
*Мидл клик х2* "Ага, сайт нихрена не работает нормально, кто вообще кодил" *вкладка закрывается*
Прекрасный способ потерять пользователей.
coder_one Автор
21.05.2022 20:19-2Т.е.по Вашему все так делают? Вы лично вели опрос и владеете статистикой?
Очень сильно в этом сомневаюсь.
dopusteam
21.05.2022 14:32+2А зачем вообще скрывать ссылки?
coder_one Автор
21.05.2022 15:21-3В данном случае это полезно для СЕО
dopusteam
21.05.2022 16:47+2Ужас какой то. И это не ответ, кстати
coder_one Автор
21.05.2022 16:56-1По сути, здесь речь идет об увеличении бесплатного трафика на сайт через работу с СЕО.
Deosis
23.05.2022 07:11А теперь представьте, что все сайты ссылающиеся на вас сделаю также.
Ваш сайт просто исчезнет из гугла, так как он не найдет на него ссылки.
coder_one Автор
23.05.2022 10:34Вы пишите не обоснованную ерунду, сразу ставьте мне минус в карму и рейтинг тоже, для этого же все эти сомнительные комменты тут? Видимо, в песочнице все люди с рейтингом любят "доминировать". Речь идет о правильном SEO в конкретных случаях, а Вы возводите все в абсолют.
mentin
21.05.2022 20:35В смысле SEO (search engine optimization), а не CEO? Или это что-то другое?
Но в любом случае это не объяснение кому это помогает (вашему сайту, или тому на который ссылаются) и как?
Dofmen
21.05.2022 21:01Это нужно когда на сайте есть большое количество исходящих ссылок на сторонние ресурсы (например страницы с контактами организаций и их сайтов) чтобы поисковики не "опускали" сайт из за этого ибо они считают такойсайт ссылочной помойкой...
Klenov_s
21.05.2022 22:29+1Именно для таких случаев предусмотрен nofollow. На нормальных сайтах это вполне адекватно работает и поисковики ничего такого о сайте не думают. А, вот, когда сайт на самом деле является ссылочной помойкой и приходится изобретать такие костыли.
PaulZi
21.05.2022 14:38Для формы можно указать target _blank также как и для ссылки
coder_one Автор
21.05.2022 15:22-1зачем, если открытие итак идет в новом окне?
PaulZi
21.05.2022 15:29Затем что не требуется js
coder_one Автор
21.05.2022 15:39-1Ссылку как передавать будете?
PaulZi
21.05.2022 15:53+1<form action="https://ya.ru" target="_blank"><button>open</button></form>Можно ещё вынести форму куда то вниз перед боди, и использовать только кнопку с атрибутами form и formaction.
Но это все конечно странности...
Dofmen
21.05.2022 16:41+3Решение проблемы простое:
кодируете ссылки в base64.
В тег с классом ссылки помещаете атрибут data-... со значением закодированной ссылки.
На класс ссылки вешаете js функцию обработчик клика на ссылку, которая выдергивает значение дата атрибута и передает его рнр скрипту в виде гет запроса с открытием новой вкладки.
рнр скрипт упомянутый выше получает закодированную ссылку, декодирует ее и генерирует код html страницы с немедленной переадресацией рефрешем по требуемой ссылке.
Вот и все. для поисковика никаких ссылок, реализованных таким образом на странице нет.. :-)
sden77
21.05.2022 18:42Был еще механизм, схожий с click hijacking: под указателем мыши всё время находится прозрачный div, в котором динамически создавалась ссылка с урлом, "спрятанным" в элементе, на который указывает указатель мыши (под прозрачным div'ом). Но там были сложности с выделением текста и использованием правой клавиши мыши
SiteCenter
21.05.2022 19:49+6Пожизненный бан на посещение Хабра следует выдавать за посты такие. Автор - учитесь делать достойные сайты вместо паразитирования на несовершенстве веба.
coder_one Автор
22.05.2022 09:53-3Уважаемый,
1.) Вы нарушили правило хабра "Оскорблять других пользователей, не следить за эмоциями ". Ваш эмоциональный всплеск не имеет ничего общего с этой статьей. Изложенный в ней механизм работы со ссылками на примере php работает и имеет право на существование.
2.) "Автор - учитесь делать достойные сайты вместо паразитирования на несовершенстве веба." Сайты делать я умею и не собирался на чем либо паразитировать. Ознакомьтесь с "УК РФ Статья 128.1. Клевета"3.)Если Вы хотите всех банить за мнение и за полезные статьи, то попробуйте создать и раскрутить свой "хабр".
4.)По озвученной теме от вас не было ни одного факта и аргумента, Ваш комментарий считаю мусорным, если это не так, то обоснуйте свою позицию.
mentin
21.05.2022 20:39+2А не сделать ли все внешние ссылки через редирект на общую страничку (с параметром куда) которая уже защищена от роботов с помощью robots.txt? И никаких извращений не надо. Или по каким-то причинам не сработает?
sden77
21.05.2022 20:51Перечитал еще раз 3 причины использования такого изврата, и так и не понял, какая преследуется цель - закрыть ссылку от индексации или таки передавать ссылочный вес. Второй и третий пункты противоречат первому
aliencash
21.05.2022 23:43+1Есть мнение, что google и яндекс не эмулируют js, а ищут ссылки в коде js. Конструкция типа const link = "htt" + "ps:/" + "/s" + "omelink." + "ru"; должна решить вопрос.
FanatPHP
22.05.2022 11:56Здесь нужно очень внимательно следить за расстановкой одинарных и двойных кавычек, чтобы не было ошибки.
Раз уж пост в хабе РНР, то давайте я вам покажу, как в этом языке принято выводить НTML и вообще оформлять код, чтобы его можно было легко читать и редактировать, без всяких проблем с кавычками.
Не забывая при этом об элементарных правилах безопасности.
<?php foreach($mass as $k => $v): ?> <br> <form method="post"> <button class="my" onclick="<?=htmlspecialchars("window.open(".json_encode($v).")", ENT_QUOTES) ?>"> <?=htmlspecialchars($k, ENT_QUOTES) ?> </button> </form> <?php endforeach ?>coder_one Автор
22.05.2022 13:57-1Обработчик данных форм обычно пишут в отдельном файле.
FanatPHP
22.05.2022 14:05+1Не понял. Отдельном от чего? И при чем здесь "обработчик данных форм" вообще?
Вы точно мне комментарий писали? У меня нет никакого обработчика. Я всего лишь взял ваш собственный код — я даже не знаю, где он используется, в обработчике, в форме, или где-то ещё — и показал, как его можно написать, чтобы во-первых, не путаться в кавычках, во-вторых, его было удобно читать и редактировать, и в-третьих, чтобы он был безопасным, а не как сейчас.coder_one Автор
22.05.2022 14:19-4Вы серьезно думаете, что я всего этого не знаю? Спасибо за Ваше мнение.
FanatPHP
23.05.2022 08:07+1Да, я серьёзно так думаю.
Во-первых, если знаете, то почему не применяете?
Во-вторых, человек обычно пишет о том, что считает важным. У вас это расстановка кавычек.
В-третьих, пользователи РНР традиционно путаются в вопросах безопасности. Буквально под каждой статьёй в этом хабе я каждый раз объясняю базовые вещи. Потому что "знать" — это одно, а понимать — совсем другое. И большинство, увы, именно что "знает", вызубрив в самом начале карьеры пару волшебных заклинаний, которые потом и применяет бездумно до пенсии, к месту и не к месту. При этом не понимая смысла своих действий, в конечном итоге всегда получишь уязвимость.coder_one Автор
23.05.2022 10:42Если бы вы много работали с разными конструкторами, cms, cамописными сайтами и фреймверками, то не задавали бы этих вопросов. Для Вас ответ был бы очевидным: случаи бывают разные и ограничения тоже, поэтому я статью постарался сделать максимально простой. "пользователи РНР "? Хорошо, буду считать Вас пользователем php. Я - программист. Минусы не забудьте поставить. Не ожидал встретить столько не адекватных комментов при публикации полезного материала. Не вижу больше смысла отвечать на бесконечные и весьма сомнительные комментарии.
BlackStar1991
22.05.2022 21:00Интересная статья. Я, то знаю зачем ты скрываешь реферальные ссылки от выдачи ;) Сам практиковал метод просто вместо ссылки использовать <button> а в дата атрибут ложить нужный адрес, по нажатию на кнопку считывать то что в дата атрибуте и делать редирект. Твой метод избыточен, + по сути ты используешь тот же JS только засовываешь его в html исполнение, по производительности и загрузке странице не айс... правда, это сугубо логика и нельзя это ни как в SEO померять. Ещё меня в этом методе смущает, что если у тебя будет на странице +100500 таких рефовых форм, то это тоже может быть странным для поискового робота...
eugene3711
23.05.2022 16:19+2Сам работал SEOшником и знаю, как бывшие коллеги любят придумывать разные странные извращения, которые якобы улучшают ранжирование.
Вообще в этой сфере много домыслов и фантазий, которые возникают на фоне недостаточного понимания специалистами технической части.
На самом деле, всё SEO держится на одном простом правиле: "Делай красивый и удобный сайт для людей". Если за сайтом стоит адекватный бизнес, то сайт будет ранжироваться, а если нет - то никакое SEO не поможет.
Серые и черные схемы тоже рано или поздно будут обличены, а результаты белого способа останутся.
Expany
Ок ок, мы можем добавить onclick с window.open, хотя в случае открытия в той же вкладке было бы правильнее применить location.href, да и в целом, можно было бы отказаться от js, используя под ссылку атрибут action="" и передавать данные(которых нет) в method="get"
coder_one Автор
Есть разные решения любой задачи - это вполне нормальное явление.