Удаляем лишние ссылки

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

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

обычная страница каталога

Реализаций подобных страниц может быть очень много, но у многих из них есть один существенный недостаток – дублирование текстовых ссылок ссылками с изображения. Для удобства пользователей подобное оправдано и необходимо, а вот для формирования структуры сайта необходима только текстовая ссылка. Попробуем решить эту проблему средствами JS

<div>
<a href="cat/tovar1.html"><img src="img/name12.jpg" alt="товар 1" /></a>
<a href="cat/tovar1.html">товар 1</a>
</div>

Примечание: название товара может идти и перед его изображением

Убираем ссылку с <img> и будем обрабатывать событие click на <img> вложенных в <div> с классом catalog.

<div class="catalog">
<img src="img/name12.jpg" alt="товар 1" />
<a href="cat/tovar1.html">товар 1</a>
</div>
jQuery(document).ready(function(){
$('.catalog img').live('click', function() {
document.location.replace($(this).parent().find('a').attr('href'));
});
});

Как это работает? При событии click на <img> находящимся внутри элемента <div> с class="catalog", отыскивается родительский элемент для данного <img> (в нашем случае это элемент <div>), происходит фильтрация содержимого этого дива и выбирается первый элемент <a> (элементов <a> в нашем блоке может быть несколько, но в данном случае будет использован первый), получается значение атрибута href данного элемента и происходит рефреш страницы.

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

универсальный способ удаления лишней ссылки

<a class="_965" href="cat/tovar1.html">товар 1</a>
<img class="_965 soob" src="img/avia234.jpg" alt="товар 1" />
<img class="_1000 soob" src="img/aviasdf.jpg" alt="товар 2" />
<a class="_1000" href="cat/tovar2.html">товар 2</a>
<img class="_1000 soob" src="img/aviasdf.jpg" alt="товар 2" />
<a class="_1985" href="cat/tovar3.html">товар 3</a>
<img class="_1985 soob" src="img/avia.jpg" alt="товар 3" />
<img class="_1000 soob" src="img/aviasdf.jpg" alt="товар 2" />

Мы указали общий class и для <img> и для <a>, по этим классам мы и будем связывать изображение и ссылку, обратите внимание у элементов <img> есть ещё класс soob, он необходим для запуска обработчика событий click на нужных элементах

jQuery(document).ready(function(){
$('img.soob').live('click', function() {
var strClass="a."+$(this).attr('class').replace(" soob", "");
document.location.replace($(strClass).attr('href'));
});
});

В принципе всё почти то же самое за небольшим исключением. При событии click на изображении с классом soob, извлекается значение атрибута class, в переменной strClass формируется шаблон для поиска элемента <a> с тем же классом что и у элемента <img>. Ну а дальше всё как обычно – рефреш страницы с новым url, полученным из атрибута href элемента <a>

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

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