Красивые ссылки или как легко обернуть фотографии ссылками для пользователей?
Ссылка – неотъемлемая часть 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 названия и количества родительских элементов главного блока.
Буду рад вопросам и комментариям!
(1 оценок, среднее: 5,00 из 5)
Загрузка...
