Красивые ссылки или как легко обернуть фотографии ссылками для пользователей?

Ссылка — неотъемлемая часть web-пространства. За красоту и чистоту ссылочной массы борется каждый оптимизатор своих веб-ресурсов. Внутренние ссылки (внутренняя перелинковка) — это важная часть продвижения сайта в поисковых системах.

Пример внутренних ссылок с фото

Я уже рассказывал, как в UMI-CMS сделать автоматическую генерации ссылок через блог «Похожих материалов». Внимательные веб-мастера, наверное, заметили, что ссылку я сделал исключительно текстовой. Внутри тега «a» нет ни других тегов, ни картинки, ничего лишнего — только текст. При этом блок имеет простую структуру: картинка + название в блочном элементе. Такой визуальный ряд встречается практически на любом сайте в разных вариантах: фотография + заголовок, логотип + название, картинка + подпись и т.д.

Карта кликов

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

1 вариант

1
2
3
4
5
6
<div>
<a href="/link1">
     <img src="img1" alt="alt1"><br />
     Название
</a>
</div>

2 вариант

1
2
3
4
5
6
<div>
<a href="/link1">
     <img src="img1" alt="alt1">
</a><br />
<a href="/link1">Название</a>
</div>

Оба этих вариантов не очень хороши. В первом в анкор попадает много «мусора»: теги, alt и т.д., во втором есть большая вероятность, что ссылку, например, Google интерпретирует безанкорной, т.к. считается, что Google учитывает только первый, верхний анкор для одной и той же ссылки в рамках одной страницы. Так же такая вёрстка увеличивает количество исходящих ссылок со страницы вдвое.

С точки зрения seo предпочтительнее 3 вариант, но при этом в нём не отражены предпочтения пользователей (кликабельные картинки):

3 вариант

1
2
3
4
<div>
     <img src="img1" alt="alt1"><br />
     <a href="/link1">Название</a>
</div>

Для того, чтобы удовлетворить сразу две цели: дать поисковым системам только чистые и красивые ссылки по текстовым анкорам, а пользователю — возможность кликать по картинкам, я написал небольшой js-скрипт, который отрабатывает на стороне клиента при загрузке страницы.

Код скрипта

Функция очень простая, основная логика заключается в том, что для каждого блока с определенным классом — preview_block_likes мы берём значение атрибута href ссылки (ребёнка нашего блока) и оборачиваем ссылкой с этим значением картинку (тоже ребёнка данного блока). Логика определяется структурой:

1
2
3
4
<div class="preview_block_likes">
     <img src="img1" alt="alt1"><br />
     <a href="/link1">Название</a>
</div>

Ниже приведенный код нужно записать в js-файл: link-for-img.js.

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
	$(".preview_block_likes").each(function(){
		var parent_img = "";
		if ($(this).children("a").attr("href")){
			parent_img = $(this).children("a").attr("href");			
			$(this).children("img").wrap("<a href='" + parent_img + "'></a>");  
		}		
	});
});

Для работы скрипта используется jquery. Например, библиотеку можно скачать себе на сервер тут, а затем подключить в head. Вместе с нашим созданным скриптом — link-for-img.js. Для корректной работы файл скрипта должен располагаться в коде страницы после подключения библиотеки.

1
2
3
4
5
6
<head>
<!-- подключаем jquery и наш скрипт -->
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/link-for-img.js" type="text/javascript"></script>
<!-- -->
</head>

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

Буду рад вопросам и комментариям!

Я со своей командой готов сделать это за вас! Заказать!

* – поля, обязательные для заполнения