В один из рабочих дней мне пришел список заданий. Отдельным пунктом была просьба найти способ надежного сокрытия внешних ссылок на сайте от поисковых систем.
В чем суть проблемы? Существует несколько способов спрятать ссылку от поисковых роботов, но у них имеются свои особенности:
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" и разрывов уже не было.
Уважаемые читатели! Какими методами сокрытия ссылок веб-страниц вы пользуетесь?
Ок ок, мы можем добавить onclick с window.open, хотя в случае открытия в той же вкладке было бы правильнее применить location.href, да и в целом, можно было бы отказаться от js, используя под ссылку атрибут action="" и передавать данные(которых нет) в method="get"
Есть разные решения любой задачи - это вполне нормальное явление.
Я про пауков мало знаю, поэтому возникли вопросы:
Если всегда игнорирует - зачем извращения с javascript? И какова причина этого игнорирования?
Так если гугл спокойно эмулирует js, то почему он проигнорирует "window.open"?
Ну такое себе. Может откроется, а может "popup has been blocked".
И о чем это говорит? Если, например, засунуть эту ссылку в action формы или кнопки, то поведение, вроде, таким же будет.
"display:inline"? Вот на этом моменте возникает вопрос: а написанное до этого вообще хоть какую-то ценность имеет?
1.) "Если всегда игнорирует - зачем извращения с javascript?
СЕОшник сказал, что это сработало.
2.)JS находится внутри формы
3.)Всякое может быть, я обычно рассчитываю на большинство пользователей. Некоторые ребята вообще запрещают исполнение js браузером, теперь без фронтенда обходиться?
4.)Просто наглядный пример.
5.)"display:inline" пробывал и ни на одном сайте, где я применял формы он не сработал. Причину не выяснял. Помогает display: contents. В этом месте указал лишь особенность, а не невозможность решить проблему.
Скорее всего гугл не кликает по кнопкам, так-как этот функционал может быть отправкой комментария или вызов Ктулху по телефону.
Я люблю ссылки открывать в новой вкладке с помощью нажатия на колёсико мыши. В данном случае это будет работать?
Нет. Как и не будет работать "Скопировать ссылку"
Ужасное решение, всякий раз сталкиваясь с такими "оптимизаторами" мучаюсь копируя ссылки.
В чём проблема использовать
<noindex></noindex>
В начале статьи я описал в чем проблема использования noindex и nofollow. Поэтому пришлось придумывать решения задачи.
При клике автоматически ссылка будет в новой вкладке. Я это предусмотрел, чтобы посетитель не уходил с сайта: посмотрел что ему интересно, закрыл новое окно и попал снова на сайт.
Я в день лазаю по десяткам сайтов. Где-то клик (левой кнопкой мыши) по ссылке открывает страницу в новой вкладке, а где-то нет - поэтому я всегда нажимаю на ссылку колёсиком. И, нет, я не один такой. А тут получается, что при нажатии колёсиком на ссылку на вашем сайте, не произойдёт вообще ничего. По-моему, это не очень, потому что подобные SEO-вопросы не должны влиять на удобство пользования сайтом.
Иногда приходится жертвовать удобством ради достижения цели. С хорошим СЕО больше бесплатного трафика получается.
Такое ощущение, будто б вы мне сейчас из 2007-го года написали. Посмотрите топ выдачи по разным запросам и то, насколько сайты из топа не следуют "правилам СЕО" в большинстве своём. Решает, основном, нормальная работа сайта на мобильных устройствах, скорость загрузки страниц и поведенческие факторы. Всё остальное - мелочи, влияние которых ничтожно.
Я не специалист по СЕО, но ребята, с которыми я работаю стараются учесть все моменты, чтобы получить максимальный результат.
Судя по статье - далеко не все
интересно, как эти самые ребята учитывают требования поисковиков по accessibility?
В данном случае, неудобство сайта ведёт к уменьшению количества юзеров, это куда более весомый аргумент для ранжирования
Интересно, есть ли хоть какое-то объективное исследование о наличии смысла в таких ссылках? А то слышу эти рассказы про связь количества исходящих ссылок и положении сайта в выдаче уже лет 15. Такое ощущение, что это уже из разряда городских легенд.
В нашей организации это практикуется до сих пор, значит есть смысл.
Нет, не значит
вряд ли сеошник будет делать лишнюю работу просто так, когда зарплата от этого не увеличивается
Правильная имитация бурной детельности - один из важнейших скиллов сеошника
Зачем ему что-то имитировать, если работы полно?
*Мидл клик х2* "Ага, сайт нихрена не работает нормально, кто вообще кодил" *вкладка закрывается*
Прекрасный способ потерять пользователей.
Т.е.по Вашему все так делают? Вы лично вели опрос и владеете статистикой?
Очень сильно в этом сомневаюсь.
А зачем вообще скрывать ссылки?
В данном случае это полезно для СЕО
Ужас какой то. И это не ответ, кстати
По сути, здесь речь идет об увеличении бесплатного трафика на сайт через работу с СЕО.
А теперь представьте, что все сайты ссылающиеся на вас сделаю также.
Ваш сайт просто исчезнет из гугла, так как он не найдет на него ссылки.
Вы пишите не обоснованную ерунду, сразу ставьте мне минус в карму и рейтинг тоже, для этого же все эти сомнительные комменты тут? Видимо, в песочнице все люди с рейтингом любят "доминировать". Речь идет о правильном SEO в конкретных случаях, а Вы возводите все в абсолют.
В смысле SEO (search engine optimization), а не CEO? Или это что-то другое?
Но в любом случае это не объяснение кому это помогает (вашему сайту, или тому на который ссылаются) и как?
Это нужно когда на сайте есть большое количество исходящих ссылок на сторонние ресурсы (например страницы с контактами организаций и их сайтов) чтобы поисковики не "опускали" сайт из за этого ибо они считают такойсайт ссылочной помойкой...
Именно для таких случаев предусмотрен nofollow. На нормальных сайтах это вполне адекватно работает и поисковики ничего такого о сайте не думают. А, вот, когда сайт на самом деле является ссылочной помойкой и приходится изобретать такие костыли.
Для формы можно указать target _blank также как и для ссылки
зачем, если открытие итак идет в новом окне?
Затем что не требуется js
Ссылку как передавать будете?
Можно ещё вынести форму куда то вниз перед боди, и использовать только кнопку с атрибутами form и formaction.
Но это все конечно странности...
спасибо, про атрибут target="_blank" для формы не знал.
Решение проблемы простое:
кодируете ссылки в base64.
В тег с классом ссылки помещаете атрибут data-... со значением закодированной ссылки.
На класс ссылки вешаете js функцию обработчик клика на ссылку, которая выдергивает значение дата атрибута и передает его рнр скрипту в виде гет запроса с открытием новой вкладки.
рнр скрипт упомянутый выше получает закодированную ссылку, декодирует ее и генерирует код html страницы с немедленной переадресацией рефрешем по требуемой ссылке.
Вот и все. для поисковика никаких ссылок, реализованных таким образом на странице нет.. :-)
Был еще механизм, схожий с click hijacking: под указателем мыши всё время находится прозрачный div, в котором динамически создавалась ссылка с урлом, "спрятанным" в элементе, на который указывает указатель мыши (под прозрачным div'ом). Но там были сложности с выделением текста и использованием правой клавиши мыши
Пожизненный бан на посещение Хабра следует выдавать за посты такие. Автор - учитесь делать достойные сайты вместо паразитирования на несовершенстве веба.
Уважаемый,
1.) Вы нарушили правило хабра "Оскорблять других пользователей, не следить за эмоциями ". Ваш эмоциональный всплеск не имеет ничего общего с этой статьей. Изложенный в ней механизм работы со ссылками на примере php работает и имеет право на существование.
2.) "Автор - учитесь делать достойные сайты вместо паразитирования на несовершенстве веба." Сайты делать я умею и не собирался на чем либо паразитировать. Ознакомьтесь с "УК РФ Статья 128.1. Клевета"
3.)Если Вы хотите всех банить за мнение и за полезные статьи, то попробуйте создать и раскрутить свой "хабр".
4.)По озвученной теме от вас не было ни одного факта и аргумента, Ваш комментарий считаю мусорным, если это не так, то обоснуйте свою позицию.
А не сделать ли все внешние ссылки через редирект на общую страничку (с параметром куда) которая уже защищена от роботов с помощью robots.txt? И никаких извращений не надо. Или по каким-то причинам не сработает?
Перечитал еще раз 3 причины использования такого изврата, и так и не понял, какая преследуется цель - закрыть ссылку от индексации или таки передавать ссылочный вес. Второй и третий пункты противоречат первому
Есть мнение, что google и яндекс не эмулируют js, а ищут ссылки в коде js. Конструкция типа const link = "htt" + "ps:/" + "/s" + "omelink." + "ru"; должна решить вопрос.
Раз уж пост в хабе РНР, то давайте я вам покажу, как в этом языке принято выводить НTML и вообще оформлять код, чтобы его можно было легко читать и редактировать, без всяких проблем с кавычками.
Не забывая при этом об элементарных правилах безопасности.
Обработчик данных форм обычно пишут в отдельном файле.
Не понял. Отдельном от чего? И при чем здесь "обработчик данных форм" вообще?
Вы точно мне комментарий писали? У меня нет никакого обработчика. Я всего лишь взял ваш собственный код — я даже не знаю, где он используется, в обработчике, в форме, или где-то ещё — и показал, как его можно написать, чтобы во-первых, не путаться в кавычках, во-вторых, его было удобно читать и редактировать, и в-третьих, чтобы он был безопасным, а не как сейчас.
Вы серьезно думаете, что я всего этого не знаю? Спасибо за Ваше мнение.
Да, я серьёзно так думаю.
Во-первых, если знаете, то почему не применяете?
Во-вторых, человек обычно пишет о том, что считает важным. У вас это расстановка кавычек.
В-третьих, пользователи РНР традиционно путаются в вопросах безопасности. Буквально под каждой статьёй в этом хабе я каждый раз объясняю базовые вещи. Потому что "знать" — это одно, а понимать — совсем другое. И большинство, увы, именно что "знает", вызубрив в самом начале карьеры пару волшебных заклинаний, которые потом и применяет бездумно до пенсии, к месту и не к месту. При этом не понимая смысла своих действий, в конечном итоге всегда получишь уязвимость.
Если бы вы много работали с разными конструкторами, cms, cамописными сайтами и фреймверками, то не задавали бы этих вопросов. Для Вас ответ был бы очевидным: случаи бывают разные и ограничения тоже, поэтому я статью постарался сделать максимально простой. "пользователи РНР "? Хорошо, буду считать Вас пользователем php. Я - программист. Минусы не забудьте поставить. Не ожидал встретить столько не адекватных комментов при публикации полезного материала. Не вижу больше смысла отвечать на бесконечные и весьма сомнительные комментарии.
Интересная статья. Я, то знаю зачем ты скрываешь реферальные ссылки от выдачи ;) Сам практиковал метод просто вместо ссылки использовать <button> а в дата атрибут ложить нужный адрес, по нажатию на кнопку считывать то что в дата атрибуте и делать редирект. Твой метод избыточен, + по сути ты используешь тот же JS только засовываешь его в html исполнение, по производительности и загрузке странице не айс... правда, это сугубо логика и нельзя это ни как в SEO померять. Ещё меня в этом методе смущает, что если у тебя будет на странице +100500 таких рефовых форм, то это тоже может быть странным для поискового робота...
Сам работал SEOшником и знаю, как бывшие коллеги любят придумывать разные странные извращения, которые якобы улучшают ранжирование.
Вообще в этой сфере много домыслов и фантазий, которые возникают на фоне недостаточного понимания специалистами технической части.
На самом деле, всё SEO держится на одном простом правиле: "Делай красивый и удобный сайт для людей". Если за сайтом стоит адекватный бизнес, то сайт будет ранжироваться, а если нет - то никакое SEO не поможет.
Серые и черные схемы тоже рано или поздно будут обличены, а результаты белого способа останутся.