Теги: сниппет, теги, tags, перекрёстные ссылки
Хотите чтобы мы рассказали ещё о чём-то - предлагайте тему.
Следите за нашими публикациями в социальных сетях и новостных каналах.
Короткий фрагмент кода, который отрисует теги товара с перекрёстными ссылками на товар.
Полезные сведения
Скорее всего вы знаете, как обычно используются теги: выведенные в разметку клиентской стороны сайта, каждый из них представляет собой ссылку на страницу со списком товаров, помеченных таким же тегом. По сути, это разновидность поиска в один клик по ключевому слову. Однако существует ещё один вид применения, он служит для создания перекрёстных ссылок на страницу, а по клику уже действует как обычный тег - ведёт на теговый список.
Плюс такого способа в том, что кроме обычной теговой функциональности, выполняется одна из SEO-задач: получить на внетоварных страницах сайта ссылки на товарную страницу с разным якорным текстом, точно соответствующим ключевым словам той страницы.
Рассмотрим несколько его реализаций. Каждый пример кода написан так, словно это маленький модулёчек, например разместим его в файле common/tags.htm
нашего шаблона, и который останется вызвать в нужном месте страницы, скажем во время вывода мини карточек товаров:
...
{foreach $products as $item}
...
{include 'common/tags.htm'}
{/foreach}
...
Примечательно Код сохраняет работоспособность в том числе для страниц категорий, брендов, новостей, статей и вообще любой записи, которая содержит поле тегов.
Здесь воспроизводится типичная теговая функциональность.
{$tags = explode(',', $item->tags|default:'')} {if !empty($tags)} <div class="tags"> {foreach $tags as $tag} {$tag = trim($tag|lower)} {$key = preg_replace('/\s+/u', '-', $tag)} <a href="tags/{$key|escape}" rel="nofollow"> {$tag} </a> {/foreach} </div> {/if}
Механизм работы кода Из входной переменной $item, содержащей запись текущего отрисовываемого товара, извлекаем список тегов, которые администратор должен был перечислить через запятую. Если список не пустой, пробегаем по его элементам и выводим каждый в виде теговой ссылки: название тега и ключевой url.
Обратите внимание Ссылки снабжены признаком nofollow, ведь нам как раз не интересно, чтобы поисковик ходил по таким ссылкам.
Тот же код с небольшим изменением, в результате чего теговые ссылки указывают на страницу товара, а ключевой url подставляется только в момент физического нажатия на ссылку.
{$tags = explode(',', $item->tags|default:'')} {if !empty($tags)} <div class="tags"> {foreach $tags as $tag} {$tag = trim($tag|lower)} {$key = preg_replace('/\s+/u', '-', $tag)} {$href = 'tags/'|cat:($key|escape)} <a href="{url}" onclick="this.href = '{$href}'"> {$tag} </a> {/foreach} </div> {/if}
Обратите внимание Ссылки сделаны без признака nofollow, поскольку мы хотим, чтобы поисковик прошёл и сопоставил с такими тегами именно реальную страницу товара.
Очевидно, найдутся сайты, каким плевать на теговый поиск, но привлекательна продвиженческая составляющая тегов. Тогда тот же код можно записать короче.
{$tags = explode(',', $item->tags|default:'')} {if !empty($tags)} <div class="tags"> {foreach $tags as $tag} <a href="{url}"> {trim($tag|lower)} </a> {/foreach} </div> {/if}
Важно В таком случае стремитесь перечислить в каждом товаре немного самых основных тегов, чтобы избежать ссылочного спама.
Отличается от кода выше тем, что вдобавок устраняет человеческий фактор, когда администратор копипастит теги и не следит за их повторяемостью или небрежен в перечислении. Например этот код правильно обработает, скажем такое перечисление тегов flat, adaptive, , ,, flat , , flat
, в то время как код выше 3 раза повторил бы ссылку flat и ещё 4 пустые ссылки.
{$tags = []} {$list = explode(',', $item->tags|default:'')} {if !empty($list)} {foreach $list as $tag} {$tag = trim($tag|lower)} {if $tag != ''} {$key = preg_replace('/\s+/u', '-', $tag)} {$href = 'tags/'|cat:($key|escape)} {$tags[$href] = $tag} {/if} {/foreach} {/if} {if !empty($tags)} <div class="tags"> {foreach $tags as $href => $tag} <a href="{url}" onclick="this.href = '{$href}'"> {$tag} </a> {/foreach} </div> {/if}
Механизм работы кода Похож на код выше, только перед выводом списка тегов, он сначала прогоняется на предмет повтора тегов и отбрасывания пустых.
Дело в том, что поле тегов в записи о товаре заполняется не всяким магазином, а поле Meta Keywords, хотя и служит другим целям, но по сути родственно теговому перечислению или прекрасно дополняет его. И вот неплохо было иметь такой код, чтобы учитывал данную особенность полей и объединял их списки в один теговый список. Пожалуйста:
{$tags = []} {$pack = [ explode(',', $item->tags|default:''), explode(',', $item->meta_keywords|default:'') ]} {foreach $pack as $list} {if !empty($list)} {foreach $list as $tag} {$tag = trim($tag|lower)} {if $tag != ''} {$key = preg_replace('/\s+/u', '-', $tag)} {$tags[$key] = $tag} {/if} {/foreach} {/if} {/foreach} {if !empty($tags)} <div class="tags"> {foreach $tags as $tag} <a href="{url}"> {$tag} </a> {/foreach} </div> {/if}
Пример простой раскраски блока тегов. Эти правила следует расположить в файле стилей вашего шаблона.
.tags { border-top: #ddd 1px solid; font-size: 10pt; margin: .5em 0 0; padding: 1em; overflow: hidden; } .tags a { background: #ddd; border-radius: 3px; display: inline-block; float: left; line-height: 1.4em; margin: .5em 1.5em; padding: 0 .5em; white-space: nowrap; }
Теги: сниппет, теги, tags, перекрёстные ссылки
Хотите чтобы мы рассказали ещё о чём-то - предлагайте тему.
Следите за нашими публикациями в социальных сетях и новостных каналах.
ВКонтактеGoogle+Facebook